From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/--_star_/index.html | 93 + files/fr/web/css/-moz-binding/index.html | 64 + .../web/css/-moz-border-bottom-colors/index.html | 96 + .../fr/web/css/-moz-border-left-colors/index.html | 95 + .../fr/web/css/-moz-border-right-colors/index.html | 96 + files/fr/web/css/-moz-border-top-colors/index.html | 96 + files/fr/web/css/-moz-box-ordinal-group/index.html | 73 + files/fr/web/css/-moz-cell/index.html | 15 + .../fr/web/css/-moz-context-properties/index.html | 83 + files/fr/web/css/-moz-float-edge/index.html | 82 + .../css/-moz-force-broken-image-icon/index.html | 67 + files/fr/web/css/-moz-image-rect/index.html | 126 + files/fr/web/css/-moz-image-region/index.html | 75 + files/fr/web/css/-moz-orient/index.html | 80 + .../css/-moz-outline-radius-bottomleft/index.html | 49 + .../css/-moz-outline-radius-bottomright/index.html | 49 + .../web/css/-moz-outline-radius-topleft/index.html | 49 + .../css/-moz-outline-radius-topright/index.html | 49 + files/fr/web/css/-moz-outline-radius/index.html | 117 + files/fr/web/css/-moz-stack-sizing/index.html | 62 + files/fr/web/css/-moz-text-blink/index.html | 51 + files/fr/web/css/-moz-user-focus/index.html | 75 + files/fr/web/css/-moz-user-input/index.html | 72 + files/fr/web/css/-moz-window-shadow/index.html | 70 + files/fr/web/css/-ms-accelerator/index.html | 75 + files/fr/web/css/-ms-block-progression/index.html | 48 + .../web/css/-ms-content-zoom-chaining/index.html | 44 + .../web/css/-ms-content-zoom-limit-max/index.html | 42 + .../web/css/-ms-content-zoom-limit-min/index.html | 42 + files/fr/web/css/-ms-content-zoom-limit/index.html | 44 + .../css/-ms-content-zoom-snap-points/index.html | 74 + .../web/css/-ms-content-zoom-snap-type/index.html | 54 + files/fr/web/css/-ms-content-zoom-snap/index.html | 44 + files/fr/web/css/-ms-content-zooming/index.html | 46 + files/fr/web/css/-ms-filter/index.html | 218 ++ files/fr/web/css/-ms-flow-from/index.html | 40 + files/fr/web/css/-ms-flow-into/index.html | 40 + .../fr/web/css/-ms-high-contrast-adjust/index.html | 44 + files/fr/web/css/-ms-high-contrast/index.html | 71 + .../web/css/-ms-hyphenate-limit-chars/index.html | 46 + .../web/css/-ms-hyphenate-limit-lines/index.html | 44 + .../fr/web/css/-ms-hyphenate-limit-zone/index.html | 46 + files/fr/web/css/-ms-ime-align/index.html | 48 + files/fr/web/css/-ms-overflow-style/index.html | 43 + files/fr/web/css/-ms-scroll-chaining/index.html | 68 + files/fr/web/css/-ms-scroll-limit-x-max/index.html | 50 + files/fr/web/css/-ms-scroll-limit-x-min/index.html | 44 + files/fr/web/css/-ms-scroll-limit-y-max/index.html | 48 + files/fr/web/css/-ms-scroll-limit-y-min/index.html | 44 + files/fr/web/css/-ms-scroll-limit/index.html | 56 + files/fr/web/css/-ms-scroll-rails/index.html | 50 + .../fr/web/css/-ms-scroll-snap-points-x/index.html | 88 + .../fr/web/css/-ms-scroll-snap-points-y/index.html | 94 + files/fr/web/css/-ms-scroll-snap-type/index.html | 50 + files/fr/web/css/-ms-scroll-snap-x/index.html | 61 + files/fr/web/css/-ms-scroll-snap-y/index.html | 61 + files/fr/web/css/-ms-scroll-translation/index.html | 54 + .../web/css/-ms-scrollbar-3dlight-color/index.html | 75 + .../web/css/-ms-scrollbar-arrow-color/index.html | 95 + .../fr/web/css/-ms-scrollbar-base-color/index.html | 95 + .../css/-ms-scrollbar-darkshadow-color/index.html | 71 + .../fr/web/css/-ms-scrollbar-face-color/index.html | 93 + .../css/-ms-scrollbar-highlight-color/index.html | 95 + .../web/css/-ms-scrollbar-shadow-color/index.html | 73 + .../web/css/-ms-scrollbar-track-color/index.html | 97 + files/fr/web/css/-ms-text-autospace/index.html | 59 + files/fr/web/css/-ms-touch-select/index.html | 49 + files/fr/web/css/-ms-user-select/index.html | 107 + files/fr/web/css/-ms-wrap-flow/index.html | 63 + files/fr/web/css/-ms-wrap-margin/index.html | 39 + files/fr/web/css/-ms-wrap-through/index.html | 45 + files/fr/web/css/-webkit-border-before/index.html | 108 + files/fr/web/css/-webkit-box-reflect/index.html | 70 + files/fr/web/css/-webkit-line-clamp/index.html | 101 + .../fr/web/css/-webkit-mask-attachment/index.html | 75 + files/fr/web/css/-webkit-mask-box-image/index.html | 94 + files/fr/web/css/-webkit-mask-composite/index.html | 95 + files/fr/web/css/-webkit-mask-image/index.html | 174 ++ .../fr/web/css/-webkit-mask-position-x/index.html | 90 + .../fr/web/css/-webkit-mask-position-y/index.html | 92 + files/fr/web/css/-webkit-mask-repeat-x/index.html | 88 + files/fr/web/css/-webkit-mask-repeat-y/index.html | 88 + .../web/css/-webkit-overflow-scrolling/index.html | 86 + .../web/css/-webkit-print-color-adjust/index.html | 63 + .../web/css/-webkit-tap-highlight-color/index.html | 40 + .../fr/web/css/-webkit-text-fill-color/index.html | 101 + files/fr/web/css/-webkit-text-security/index.html | 54 + .../web/css/-webkit-text-stroke-color/index.html | 112 + .../web/css/-webkit-text-stroke-width/index.html | 121 + files/fr/web/css/-webkit-text-stroke/index.html | 98 + files/fr/web/css/-webkit-touch-callout/index.html | 56 + files/fr/web/css/@charset/index.html | 82 + .../css/@counter-style/additive-symbols/index.html | 87 + .../fr/web/css/@counter-style/fallback/index.html | 90 + files/fr/web/css/@counter-style/index.html | 171 ++ .../fr/web/css/@counter-style/negative/index.html | 99 + files/fr/web/css/@counter-style/pad/index.html | 98 + files/fr/web/css/@counter-style/prefix/index.html | 95 + files/fr/web/css/@counter-style/range/index.html | 122 + .../fr/web/css/@counter-style/speak-as/index.html | 129 + files/fr/web/css/@counter-style/suffix/index.html | 93 + files/fr/web/css/@counter-style/symbols/index.html | 108 + files/fr/web/css/@counter-style/system/index.html | 340 ++ files/fr/web/css/@document/index.html | 86 + .../fr/web/css/@font-face/font-display/index.html | 92 + files/fr/web/css/@font-face/font-family/index.html | 69 + .../fr/web/css/@font-face/font-stretch/index.html | 183 ++ files/fr/web/css/@font-face/font-style/index.html | 101 + .../@font-face/font-variation-settings/index.html | 71 + files/fr/web/css/@font-face/font-weight/index.html | 173 ++ files/fr/web/css/@font-face/index.html | 190 ++ files/fr/web/css/@font-face/src/index.html | 85 + .../fr/web/css/@font-face/unicode-range/index.html | 109 + files/fr/web/css/@font-feature-values/index.html | 91 + files/fr/web/css/@import/index.html | 81 + files/fr/web/css/@keyframes/index.html | 171 ++ .../css/@media/-moz-device-pixel-ratio/index.html | 46 + .../css/@media/-moz-mac-graphite-theme/index.html | 34 + .../web/css/@media/-moz-maemo-classic/index.html | 30 + files/fr/web/css/@media/-moz-os-version/index.html | 34 + .../@media/-moz-scrollbar-end-backward/index.html | 32 + .../@media/-moz-scrollbar-end-forward/index.html | 32 + .../-moz-scrollbar-start-backward/index.html | 32 + .../@media/-moz-scrollbar-start-forward/index.html | 32 + .../-moz-scrollbar-thumb-proportional/index.html | 32 + .../web/css/@media/-moz-touch-enabled/index.html | 46 + .../index.html | 46 + .../web/css/@media/-moz-windows-classic/index.html | 34 + .../css/@media/-moz-windows-compositor/index.html | 32 + .../@media/-moz-windows-default-theme/index.html | 34 + .../web/css/@media/-moz-windows-glass/index.html | 25 + .../web/css/@media/-moz-windows-theme/index.html | 43 + .../fr/web/css/@media/-webkit-animation/index.html | 38 + .../@media/-webkit-device-pixel-ratio/index.html | 119 + .../web/css/@media/-webkit-transform-2d/index.html | 36 + .../web/css/@media/-webkit-transform-3d/index.html | 71 + .../web/css/@media/-webkit-transition/index.html | 51 + files/fr/web/css/@media/any-hover/index.html | 72 + files/fr/web/css/@media/any-pointer/index.html | 105 + files/fr/web/css/@media/aspect-ratio/index.html | 111 + files/fr/web/css/@media/aural/index.html | 42 + files/fr/web/css/@media/color-gamut/index.html | 68 + files/fr/web/css/@media/color-index/index.html | 84 + files/fr/web/css/@media/color/index.html | 94 + .../web/css/@media/device-aspect-ratio/index.html | 59 + files/fr/web/css/@media/device-height/index.html | 53 + files/fr/web/css/@media/device-width/index.html | 53 + files/fr/web/css/@media/display-mode/index.html | 84 + files/fr/web/css/@media/forced-colors/index.html | 86 + files/fr/web/css/@media/grid/index.html | 83 + files/fr/web/css/@media/height/index.html | 83 + files/fr/web/css/@media/hover/index.html | 72 + files/fr/web/css/@media/index.html | 155 + files/fr/web/css/@media/index/index.html | 12 + files/fr/web/css/@media/inverted-colors/index.html | 92 + files/fr/web/css/@media/monochrome/index.html | 85 + files/fr/web/css/@media/orientation/index.html | 88 + files/fr/web/css/@media/overflow-block/index.html | 71 + files/fr/web/css/@media/overflow-inline/index.html | 78 + files/fr/web/css/@media/pointer/index.html | 101 + .../web/css/@media/prefers-color-scheme/index.html | 103 + .../fr/web/css/@media/prefers-contrast/index.html | 86 + .../css/@media/prefers-reduced-motion/index.html | 135 + .../@media/prefers-reduced-transparency/index.html | 84 + files/fr/web/css/@media/resolution/index.html | 75 + files/fr/web/css/@media/scan/index.html | 85 + files/fr/web/css/@media/scripting/index.html | 87 + files/fr/web/css/@media/shape/index.html | 97 + .../fr/web/css/@media/update-frequency/index.html | 82 + files/fr/web/css/@media/width/index.html | 90 + files/fr/web/css/@namespace/index.html | 78 + files/fr/web/css/@page/bleed/index.html | 79 + files/fr/web/css/@page/index.html | 105 + files/fr/web/css/@page/marks/index.html | 82 + files/fr/web/css/@page/size/index.html | 127 + files/fr/web/css/@supports/index.html | 209 ++ files/fr/web/css/@viewport/height/index.html | 76 + files/fr/web/css/@viewport/index.html | 120 + files/fr/web/css/@viewport/max-height/index.html | 76 + files/fr/web/css/@viewport/max-width/index.html | 75 + files/fr/web/css/@viewport/max-zoom/index.html | 69 + files/fr/web/css/@viewport/min-height/index.html | 76 + files/fr/web/css/@viewport/min-width/index.html | 75 + files/fr/web/css/@viewport/min-zoom/index.html | 69 + files/fr/web/css/@viewport/orientation/index.html | 64 + files/fr/web/css/@viewport/user-zoom/index.html | 68 + files/fr/web/css/@viewport/viewport-fit/index.html | 74 + files/fr/web/css/@viewport/width/index.html | 75 + files/fr/web/css/@viewport/zoom/index.html | 71 + files/fr/web/css/_colon_-moz-broken/index.html | 43 + files/fr/web/css/_colon_-moz-drag-over/index.html | 44 + files/fr/web/css/_colon_-moz-first-node/index.html | 56 + files/fr/web/css/_colon_-moz-focusring/index.html | 61 + .../_colon_-moz-full-screen-ancestor/index.html | 41 + .../web/css/_colon_-moz-handler-blocked/index.html | 26 + .../web/css/_colon_-moz-handler-crashed/index.html | 26 + .../css/_colon_-moz-handler-disabled/index.html | 26 + files/fr/web/css/_colon_-moz-last-node/index.html | 56 + files/fr/web/css/_colon_-moz-loading/index.html | 36 + .../web/css/_colon_-moz-locale-dir(ltr)/index.html | 47 + .../web/css/_colon_-moz-locale-dir(rtl)/index.html | 47 + .../css/_colon_-moz-lwtheme-brighttext/index.html | 25 + .../css/_colon_-moz-lwtheme-darktext/index.html | 25 + files/fr/web/css/_colon_-moz-lwtheme/index.html | 25 + .../web/css/_colon_-moz-only-whitespace/index.html | 77 + .../web/css/_colon_-moz-submit-invalid/index.html | 39 + files/fr/web/css/_colon_-moz-suppressed/index.html | 38 + .../images-in-menus/index.html | 29 + .../web/css/_colon_-moz-system-metric/index.html | 39 + .../mac-graphite-theme/index.html | 35 + .../scrollbar-end-backward/index.html | 29 + .../scrollbar-end-forward/index.html | 27 + .../scrollbar-start-backward/index.html | 29 + .../scrollbar-start-forward/index.html | 29 + .../scrollbar-thumb-proportional/index.html | 29 + .../touch-enabled/index.html | 29 + .../windows-default-theme/index.html | 69 + files/fr/web/css/_colon_-moz-ui-invalid/index.html | 50 + files/fr/web/css/_colon_-moz-ui-valid/index.html | 44 + .../web/css/_colon_-moz-user-disabled/index.html | 38 + .../web/css/_colon_-moz-window-inactive/index.html | 53 + .../css/_colon_-ms-input-placeholder/index.html | 116 + .../fr/web/css/_colon_-webkit-autofill/index.html | 33 + files/fr/web/css/_colon_active/index.html | 129 + files/fr/web/css/_colon_any-link/index.html | 76 + files/fr/web/css/_colon_any/index.html | 174 ++ files/fr/web/css/_colon_blank/index.html | 53 + files/fr/web/css/_colon_checked/index.html | 141 + files/fr/web/css/_colon_default/index.html | 114 + files/fr/web/css/_colon_defined/index.html | 124 + files/fr/web/css/_colon_dir/index.html | 110 + files/fr/web/css/_colon_disabled/index.html | 117 + files/fr/web/css/_colon_empty/index.html | 108 + files/fr/web/css/_colon_enabled/index.html | 106 + files/fr/web/css/_colon_first-child/index.html | 129 + files/fr/web/css/_colon_first-of-type/index.html | 96 + files/fr/web/css/_colon_first/index.html | 100 + files/fr/web/css/_colon_focus-visible/index.html | 137 + files/fr/web/css/_colon_focus-within/index.html | 96 + files/fr/web/css/_colon_focus/index.html | 110 + files/fr/web/css/_colon_fullscreen/index.html | 93 + files/fr/web/css/_colon_has/index.html | 69 + files/fr/web/css/_colon_host()/index.html | 89 + files/fr/web/css/_colon_host-context()/index.html | 96 + files/fr/web/css/_colon_host/index.html | 86 + files/fr/web/css/_colon_hover/index.html | 97 + files/fr/web/css/_colon_in-range/index.html | 106 + files/fr/web/css/_colon_indeterminate/index.html | 127 + files/fr/web/css/_colon_invalid/index.html | 163 + files/fr/web/css/_colon_is/index.html | 283 ++ files/fr/web/css/_colon_lang/index.html | 133 + files/fr/web/css/_colon_last-child/index.html | 87 + files/fr/web/css/_colon_last-of-type/index.html | 102 + files/fr/web/css/_colon_left/index.html | 72 + files/fr/web/css/_colon_link/index.html | 112 + files/fr/web/css/_colon_not/index.html | 112 + files/fr/web/css/_colon_nth-child/index.html | 210 ++ files/fr/web/css/_colon_nth-last-child/index.html | 197 ++ .../fr/web/css/_colon_nth-last-of-type/index.html | 93 + files/fr/web/css/_colon_nth-of-type/index.html | 108 + files/fr/web/css/_colon_only-child/index.html | 143 + files/fr/web/css/_colon_only-of-type/index.html | 115 + files/fr/web/css/_colon_optional/index.html | 116 + files/fr/web/css/_colon_out-of-range/index.html | 107 + .../fr/web/css/_colon_placeholder-shown/index.html | 199 ++ files/fr/web/css/_colon_read-only/index.html | 102 + files/fr/web/css/_colon_read-write/index.html | 96 + files/fr/web/css/_colon_required/index.html | 120 + files/fr/web/css/_colon_right/index.html | 71 + files/fr/web/css/_colon_root/index.html | 62 + files/fr/web/css/_colon_scope/index.html | 84 + files/fr/web/css/_colon_target/index.html | 240 ++ files/fr/web/css/_colon_valid/index.html | 120 + files/fr/web/css/_colon_visited/index.html | 113 + .../index.html" | 73 + files/fr/web/css/_colon_where/index.html | 52 + .../css/_doublecolon_-moz-color-swatch/index.html | 60 + .../css/_doublecolon_-moz-list-bullet/index.html | 55 + .../css/_doublecolon_-moz-list-number/index.html | 52 + .../css/_doublecolon_-moz-page-sequence/index.html | 34 + files/fr/web/css/_doublecolon_-moz-page/index.html | 34 + .../css/_doublecolon_-moz-progress-bar/index.html | 51 + .../_doublecolon_-moz-range-progress/index.html | 69 + .../css/_doublecolon_-moz-range-thumb/index.html | 73 + .../css/_doublecolon_-moz-range-track/index.html | 72 + .../index.html | 34 + .../fr/web/css/_doublecolon_-ms-browse/index.html | 108 + files/fr/web/css/_doublecolon_-ms-check/index.html | 125 + files/fr/web/css/_doublecolon_-ms-clear/index.html | 137 + .../fr/web/css/_doublecolon_-ms-expand/index.html | 88 + .../web/css/_doublecolon_-ms-fill-lower/index.html | 96 + .../web/css/_doublecolon_-ms-fill-upper/index.html | 101 + files/fr/web/css/_doublecolon_-ms-fill/index.html | 117 + .../fr/web/css/_doublecolon_-ms-reveal/index.html | 91 + files/fr/web/css/_doublecolon_-ms-thumb/index.html | 100 + .../css/_doublecolon_-ms-ticks-after/index.html | 91 + .../css/_doublecolon_-ms-ticks-before/index.html | 89 + .../fr/web/css/_doublecolon_-ms-tooltip/index.html | 30 + files/fr/web/css/_doublecolon_-ms-track/index.html | 104 + files/fr/web/css/_doublecolon_-ms-value/index.html | 92 + .../index.html | 54 + .../index.html | 48 + .../index.html | 96 + .../css/_doublecolon_-webkit-meter-bar/index.html | 68 + .../index.html | 56 + .../index.html | 63 + .../index.html | 56 + .../index.html | 56 + .../index.html | 48 + .../_doublecolon_-webkit-progress-bar/index.html | 66 + .../index.html | 66 + .../_doublecolon_-webkit-progress-value/index.html | 65 + .../css/_doublecolon_-webkit-scrollbar/index.html | 123 + .../index.html | 34 + .../index.html | 33 + .../index.html | 35 + .../_doublecolon_-webkit-slider-thumb/index.html | 36 + files/fr/web/css/_doublecolon_after/index.html | 181 ++ files/fr/web/css/_doublecolon_backdrop/index.html | 78 + files/fr/web/css/_doublecolon_before/index.html | 190 ++ .../fr/web/css/_doublecolon_cue-region/index.html | 84 + files/fr/web/css/_doublecolon_cue/index.html | 81 + .../web/css/_doublecolon_first-letter/index.html | 143 + .../fr/web/css/_doublecolon_first-line/index.html | 161 + .../web/css/_doublecolon_grammar-error/index.html | 84 + files/fr/web/css/_doublecolon_marker/index.html | 100 + files/fr/web/css/_doublecolon_part/index.html | 113 + .../fr/web/css/_doublecolon_placeholder/index.html | 156 + files/fr/web/css/_doublecolon_selection/index.html | 134 + files/fr/web/css/_doublecolon_slotted/index.html | 111 + .../web/css/_doublecolon_spelling-error/index.html | 84 + .../web/css/a_propos_du_bloc_conteneur/index.html | 263 ++ files/fr/web/css/align-content/index.html | 293 ++ files/fr/web/css/align-items/index.html | 290 ++ files/fr/web/css/align-self/index.html | 187 ++ files/fr/web/css/all/index.html | 174 ++ files/fr/web/css/alpha-value/index.html | 58 + files/fr/web/css/angle-percentage/index.html | 50 + files/fr/web/css/angle/index.html | 98 + files/fr/web/css/animation-delay/index.html | 112 + files/fr/web/css/animation-direction/index.html | 137 + files/fr/web/css/animation-duration/index.html | 110 + files/fr/web/css/animation-fill-mode/index.html | 190 ++ .../web/css/animation-iteration-count/index.html | 135 + files/fr/web/css/animation-name/index.html | 119 + files/fr/web/css/animation-play-state/index.html | 133 + .../web/css/animation-timing-function/index.html | 272 ++ files/fr/web/css/animation/index.html | 367 +++ .../fr/web/css/animations_css/conseils/index.html | 165 + .../index.html" | 99 + files/fr/web/css/animations_css/index.html | 81 + .../utiliser_les_animations_css/index.html | 363 +++ files/fr/web/css/appearance/index.html | 2677 ++++++++++++++++ .../index.html" | 2626 ++++++++++++++++ .../index.html" | 1600 ++++++++++ .../index.html" | 161 + files/fr/web/css/attr()/index.html | 254 ++ files/fr/web/css/auto/index.html | 28 + files/fr/web/css/azimuth/index.html | 104 + files/fr/web/css/backdrop-filter/index.html | 138 + files/fr/web/css/backface-visibility/index.html | 217 ++ files/fr/web/css/background-attachment/index.html | 151 + files/fr/web/css/background-blend-mode/index.html | 120 + files/fr/web/css/background-clip/index.html | 151 + files/fr/web/css/background-color/index.html | 161 + files/fr/web/css/background-image/index.html | 173 ++ files/fr/web/css/background-origin/index.html | 109 + files/fr/web/css/background-position-x/index.html | 108 + files/fr/web/css/background-position-y/index.html | 107 + files/fr/web/css/background-position/index.html | 197 ++ files/fr/web/css/background-repeat/index.html | 234 ++ files/fr/web/css/background-size/index.html | 267 ++ files/fr/web/css/background/index.html | 160 + files/fr/web/css/basic-shape/index.html | 189 ++ files/fr/web/css/blend-mode/index.html | 353 +++ files/fr/web/css/block-size/index.html | 109 + .../fr/web/css/block_formatting_context/index.html | 44 + files/fr/web/css/border-block-color/index.html | 102 + files/fr/web/css/border-block-end-color/index.html | 117 + files/fr/web/css/border-block-end-style/index.html | 110 + files/fr/web/css/border-block-end-width/index.html | 106 + files/fr/web/css/border-block-end/index.html | 118 + .../fr/web/css/border-block-start-color/index.html | 116 + .../fr/web/css/border-block-start-style/index.html | 111 + .../fr/web/css/border-block-start-width/index.html | 107 + files/fr/web/css/border-block-start/index.html | 118 + files/fr/web/css/border-block-style/index.html | 103 + files/fr/web/css/border-block-width/index.html | 96 + files/fr/web/css/border-block/index.html | 111 + files/fr/web/css/border-bottom-color/index.html | 128 + .../web/css/border-bottom-left-radius/index.html | 143 + .../web/css/border-bottom-right-radius/index.html | 143 + files/fr/web/css/border-bottom-style/index.html | 228 ++ files/fr/web/css/border-bottom-width/index.html | 163 + files/fr/web/css/border-bottom/index.html | 126 + files/fr/web/css/border-collapse/index.html | 152 + files/fr/web/css/border-color/index.html | 198 ++ files/fr/web/css/border-end-end-radius/index.html | 107 + .../fr/web/css/border-end-start-radius/index.html | 107 + files/fr/web/css/border-image-outset/index.html | 114 + files/fr/web/css/border-image-repeat/index.html | 108 + files/fr/web/css/border-image-slice/index.html | 132 + files/fr/web/css/border-image-source/index.html | 89 + files/fr/web/css/border-image-width/index.html | 127 + files/fr/web/css/border-image/index.html | 166 + files/fr/web/css/border-inline-color/index.html | 102 + .../fr/web/css/border-inline-end-color/index.html | 115 + .../fr/web/css/border-inline-end-style/index.html | 110 + .../fr/web/css/border-inline-end-width/index.html | 106 + files/fr/web/css/border-inline-end/index.html | 118 + .../web/css/border-inline-start-color/index.html | 112 + .../web/css/border-inline-start-style/index.html | 112 + .../web/css/border-inline-start-width/index.html | 107 + files/fr/web/css/border-inline-start/index.html | 119 + files/fr/web/css/border-inline-style/index.html | 103 + files/fr/web/css/border-inline-width/index.html | 96 + files/fr/web/css/border-inline/index.html | 113 + files/fr/web/css/border-left-color/index.html | 128 + files/fr/web/css/border-left-style/index.html | 228 ++ files/fr/web/css/border-left-width/index.html | 169 + files/fr/web/css/border-left/index.html | 126 + files/fr/web/css/border-radius/index.html | 256 ++ files/fr/web/css/border-right-color/index.html | 126 + files/fr/web/css/border-right-style/index.html | 230 ++ files/fr/web/css/border-right-width/index.html | 162 + files/fr/web/css/border-right/index.html | 126 + files/fr/web/css/border-spacing/index.html | 137 + .../fr/web/css/border-start-end-radius/index.html | 107 + .../web/css/border-start-start-radius/index.html | 107 + files/fr/web/css/border-style/index.html | 247 ++ files/fr/web/css/border-top-color/index.html | 128 + files/fr/web/css/border-top-left-radius/index.html | 138 + .../fr/web/css/border-top-right-radius/index.html | 140 + files/fr/web/css/border-top-style/index.html | 230 ++ files/fr/web/css/border-top-width/index.html | 158 + files/fr/web/css/border-top/index.html | 126 + files/fr/web/css/border-width/index.html | 216 ++ files/fr/web/css/border/index.html | 148 + files/fr/web/css/bottom/index.html | 166 + files/fr/web/css/box-align/index.html | 134 + files/fr/web/css/box-decoration-break/index.html | 163 + files/fr/web/css/box-direction/index.html | 81 + files/fr/web/css/box-flex-group/index.html | 65 + files/fr/web/css/box-flex/index.html | 110 + files/fr/web/css/box-lines/index.html | 79 + files/fr/web/css/box-ordinal-group/index.html | 63 + files/fr/web/css/box-orient/index.html | 111 + files/fr/web/css/box-pack/index.html | 149 + files/fr/web/css/box-shadow/index.html | 156 + files/fr/web/css/box-sizing/index.html | 142 + files/fr/web/css/break-after/index.html | 211 ++ files/fr/web/css/break-before/index.html | 229 ++ files/fr/web/css/break-inside/index.html | 163 + files/fr/web/css/calc()/index.html | 163 + files/fr/web/css/caption-side/index.html | 116 + files/fr/web/css/caret-color/index.html | 104 + files/fr/web/css/clamp()/index.html | 120 + files/fr/web/css/clear/index.html | 236 ++ files/fr/web/css/clip-path/index.html | 614 ++++ files/fr/web/css/clip/index.html | 145 + files/fr/web/css/color-adjust/index.html | 118 + files/fr/web/css/color/index.html | 179 ++ files/fr/web/css/column-count/index.html | 106 + files/fr/web/css/column-fill/index.html | 102 + files/fr/web/css/column-gap/index.html | 206 ++ files/fr/web/css/column-rule-color/index.html | 110 + files/fr/web/css/column-rule-style/index.html | 109 + files/fr/web/css/column-rule-width/index.html | 106 + files/fr/web/css/column-rule/index.html | 109 + files/fr/web/css/column-span/index.html | 101 + files/fr/web/css/column-width/index.html | 113 + files/fr/web/css/columns/index.html | 112 + files/fr/web/css/combinateur_colonne/index.html | 97 + .../css/combinateur_de_voisin_direct/index.html | 86 + files/fr/web/css/comments/index.html | 54 + files/fr/web/css/compartimentation_css/index.html | 123 + .../fr/web/css/compositing_and_blending/index.html | 74 + .../comprendre_z-index/ajout_de_z-index/index.html | 149 + .../empilement_de_couches/index.html | 213 ++ .../empilement_et_float/index.html | 135 + .../empilement_sans_z-index/index.html | 122 + .../css/comprendre_z-index/exemple_1/index.html | 117 + .../css/comprendre_z-index/exemple_2/index.html | 128 + .../css/comprendre_z-index/exemple_3/index.html | 160 + files/fr/web/css/comprendre_z-index/index.html | 36 + files/fr/web/css/concepts_viewport/index.html | 156 + files/fr/web/css/conic-gradient()/index.html | 264 ++ files/fr/web/css/contain/index.html | 98 + files/fr/web/css/content/index.html | 268 ++ .../css/contexte_de_formatage_en_ligne/index.html | 63 + files/fr/web/css/couleurs_css/index.html | 132 + .../s\303\251lecteur_de_couleurs/index.html" | 3235 ++++++++++++++++++++ files/fr/web/css/counter()/index.html | 142 + files/fr/web/css/counter-increment/index.html | 133 + files/fr/web/css/counter-reset/index.html | 142 + files/fr/web/css/counter-set/index.html | 108 + files/fr/web/css/counters()/index.html | 189 ++ files/fr/web/css/cross-fade()/index.html | 166 + .../web/css/css_backgrounds_and_borders/index.html | 117 + .../scaling_background_images/index.html | 117 + .../index.html" | 55 + .../fr/web/css/css_basic_user_interface/index.html | 75 + .../index.html" | 104 + .../index.html" | 77 + .../index.html" | 51 + .../index.html" | 119 + .../index.html" | 119 + files/fr/web/css/css_box_alignment/index.html | 249 ++ files/fr/web/css/css_color/index.html | 121 + .../concepts_base_multi-colonnes/index.html | 92 + .../index.html" | 49 + .../index.html" | 72 + files/fr/web/css/css_columns/index.html | 97 + .../mettre_en_forme_les_colonnes/index.html | 48 + .../r\303\251partir_entre_les_colonnes/index.html" | 63 + .../index.html | 201 ++ files/fr/web/css/css_conditional_rules/index.html | 71 + .../index.html" | 112 + files/fr/web/css/css_counter_styles/index.html | 91 + files/fr/web/css/css_device_adaptation/index.html | 48 + files/fr/web/css/css_display/index.html | 115 + .../index.html" | 218 ++ .../index.html" | 187 ++ .../cas_utilisation_flexbox/index.html | 140 + .../concepts_de_base_flexbox/index.html | 235 ++ .../index.html" | 200 ++ .../fr/web/css/css_flexible_box_layout/index.html | 114 + .../index.html | 125 + .../index.html" | 101 + .../css/css_flexible_box_layout/mixins/index.html | 369 +++ .../index.html" | 139 + .../index.html" | 121 + .../dans_le_flux_ou_en_dehors/index.html | 68 + .../index.html | 128 + .../index.html" | 70 + .../index.html" | 90 + .../explications_contextes_formatage/index.html | 89 + files/fr/web/css/css_flow_layout/index.html | 42 + .../index.html" | 229 ++ .../css_fonts/guide_polices_variables/index.html | 265 ++ files/fr/web/css/css_fonts/index.html | 142 + files/fr/web/css/css_fragmentation/index.html | 48 + files/fr/web/css/css_generated_content/index.html | 48 + .../index.html" | 661 ++++ .../index.html | 560 ++++ .../index.html" | 482 +++ files/fr/web/css/css_grid_layout/index.html | 193 ++ .../les_concepts_de_base/index.html | 625 ++++ .../index.html" | 124 + .../index.html" | 420 +++ .../index.html" | 452 +++ .../index.html" | 588 ++++ .../index.html | 569 ++++ .../index.html" | 605 ++++ .../fr/web/css/css_grid_layout/subgrid/index.html | 118 + .../index.html" | 431 +++ files/fr/web/css/css_images/index.html | 106 + files/fr/web/css/css_images/sprites_css/index.html | 51 + .../fr/web/css/css_lists/compteurs_css/index.html | 148 + .../index.html" | 105 + files/fr/web/css/css_lists/index.html | 57 + .../concepts_de_base/index.html | 75 + .../dimensionnement/index.html | 89 + files/fr/web/css/css_logical_properties/index.html | 174 ++ .../index.html" | 143 + .../index.html" | 297 ++ files/fr/web/css/css_masks/index.html | 66 + files/fr/web/css/css_miscellaneous/index.html | 31 + files/fr/web/css/css_namespaces/index.html | 50 + files/fr/web/css/css_overflow/index.html | 82 + files/fr/web/css/css_pages/index.html | 73 + files/fr/web/css/css_positioning/index.html | 61 + .../fr/web/css/css_properties_reference/index.html | 315 ++ .../fr/web/css/css_questions_frequentes/index.html | 246 ++ files/fr/web/css/css_ruby/index.html | 44 + .../compatibilit\303\251_navigateurs/index.html" | 46 + .../css_scroll_snap/concepts_de_base/index.html | 70 + files/fr/web/css/css_scroll_snap/index.html | 84 + files/fr/web/css/css_scroll_snap_points/index.html | 51 + files/fr/web/css/css_scrollbars/index.html | 93 + .../aper\303\247u_formes_css/index.html" | 125 + .../cr\303\251er_formes_bo\303\256tes/index.html" | 75 + .../web/css/css_shapes/formes_simples/index.html | 149 + .../index.html" | 64 + files/fr/web/css/css_shapes/index.html | 80 + files/fr/web/css/css_table/index.html | 46 + files/fr/web/css/css_text/index.html | 71 + files/fr/web/css/css_text_decoration/index.html | 66 + files/fr/web/css/css_transforms/index.html | 62 + .../utilisation_des_transformations_css/index.html | 83 + files/fr/web/css/css_transitions/index.html | 59 + .../utiliser_transitions_css/index.html | 1094 +++++++ files/fr/web/css/css_variables/index.html | 42 + files/fr/web/css/css_writing_modes/index.html | 57 + files/fr/web/css/cssom_view/index.html | 56 + .../index.html" | 183 ++ files/fr/web/css/cursor/index.html | 334 ++ files/fr/web/css/custom-ident/index.html | 128 + files/fr/web/css/dimension/index.html | 76 + files/fr/web/css/direction/index.html | 108 + files/fr/web/css/display-box/index.html | 108 + files/fr/web/css/display-inside/index.html | 120 + files/fr/web/css/display-internal/index.html | 73 + files/fr/web/css/display-legacy/index.html | 104 + files/fr/web/css/display-listitem/index.html | 64 + files/fr/web/css/display-outside/index.html | 88 + files/fr/web/css/display/index.html | 237 ++ files/fr/web/css/element()/index.html | 149 + files/fr/web/css/empty-cells/index.html | 118 + files/fr/web/css/env()/index.html | 150 + .../fr/web/css/extensions_css_microsoft/index.html | 118 + files/fr/web/css/extensions_mozilla/index.html | 678 ++++ .../css/feuilles_de_style_alternatives/index.html | 77 + files/fr/web/css/filter-function/blur()/index.html | 40 + .../css/filter-function/brightness()/index.html | 41 + .../web/css/filter-function/contrast()/index.html | 41 + .../css/filter-function/drop-shadow()/index.html | 62 + .../web/css/filter-function/grayscale()/index.html | 40 + .../css/filter-function/hue-rotate()/index.html | 43 + files/fr/web/css/filter-function/index.html | 69 + .../fr/web/css/filter-function/invert()/index.html | 40 + .../web/css/filter-function/opacity()/index.html | 45 + .../web/css/filter-function/saturate()/index.html | 41 + .../fr/web/css/filter-function/sepia()/index.html | 40 + files/fr/web/css/filter-function/url/index.html | 33 + files/fr/web/css/filter/index.html | 1165 +++++++ files/fr/web/css/filter_effects/index.html | 65 + files/fr/web/css/filters_effects/index.html | 114 + files/fr/web/css/fit-content/index.html | 110 + files/fr/web/css/flex-basis/index.html | 209 ++ files/fr/web/css/flex-direction/index.html | 150 + files/fr/web/css/flex-flow/index.html | 98 + files/fr/web/css/flex-grow/index.html | 125 + files/fr/web/css/flex-shrink/index.html | 121 + files/fr/web/css/flex-wrap/index.html | 158 + files/fr/web/css/flex/index.html | 299 ++ files/fr/web/css/flex_value/index.html | 55 + files/fr/web/css/float/index.html | 225 ++ files/fr/web/css/font-family/index.html | 232 ++ files/fr/web/css/font-feature-settings/index.html | 120 + files/fr/web/css/font-kerning/index.html | 116 + files/fr/web/css/font-language-override/index.html | 111 + files/fr/web/css/font-optical-sizing/index.html | 102 + files/fr/web/css/font-size-adjust/index.html | 140 + files/fr/web/css/font-size/index.html | 242 ++ files/fr/web/css/font-smooth/index.html | 73 + files/fr/web/css/font-stretch/index.html | 286 ++ files/fr/web/css/font-style/index.html | 235 ++ files/fr/web/css/font-synthesis/index.html | 95 + .../fr/web/css/font-variant-alternates/index.html | 125 + files/fr/web/css/font-variant-caps/index.html | 132 + .../fr/web/css/font-variant-east-asian/index.html | 139 + files/fr/web/css/font-variant-ligatures/index.html | 212 ++ files/fr/web/css/font-variant-numeric/index.html | 136 + files/fr/web/css/font-variant-position/index.html | 95 + files/fr/web/css/font-variant/index.html | 117 + .../fr/web/css/font-variation-settings/index.html | 166 + files/fr/web/css/font-weight/index.html | 394 +++ files/fr/web/css/font/index.html | 236 ++ files/fr/web/css/frequency-percentage/index.html | 50 + files/fr/web/css/frequency/index.html | 70 + files/fr/web/css/gap/index.html | 228 ++ files/fr/web/css/gradient/index.html | 134 + files/fr/web/css/grid-area/index.html | 156 + files/fr/web/css/grid-auto-columns/index.html | 160 + files/fr/web/css/grid-auto-flow/index.html | 163 + files/fr/web/css/grid-auto-rows/index.html | 153 + files/fr/web/css/grid-column-end/index.html | 166 + files/fr/web/css/grid-column-gap/index.html | 127 + files/fr/web/css/grid-column-start/index.html | 178 ++ files/fr/web/css/grid-column/index.html | 167 + files/fr/web/css/grid-row-end/index.html | 166 + files/fr/web/css/grid-row-start/index.html | 178 ++ files/fr/web/css/grid-row/index.html | 152 + files/fr/web/css/grid-template-areas/index.html | 134 + files/fr/web/css/grid-template-columns/index.html | 145 + files/fr/web/css/grid-template-rows/index.html | 149 + files/fr/web/css/grid-template/index.html | 148 + files/fr/web/css/grid/index.html | 140 + files/fr/web/css/hanging-punctuation/index.html | 129 + files/fr/web/css/height/index.html | 179 ++ files/fr/web/css/hyphens/index.html | 141 + "files/fr/web/css/h\303\251ritage/index.html" | 76 + files/fr/web/css/image()/index.html | 176 ++ files/fr/web/css/image-orientation/index.html | 142 + files/fr/web/css/image-rendering/index.html | 127 + files/fr/web/css/image-set()/index.html | 84 + files/fr/web/css/image/index.html | 189 ++ files/fr/web/css/ime-mode/index.html | 100 + .../index.html" | 46 + files/fr/web/css/index.html | 104 + files/fr/web/css/index/index.html | 10 + files/fr/web/css/inherit/index.html | 89 + files/fr/web/css/initial-letter-align/index.html | 104 + files/fr/web/css/initial-letter/index.html | 97 + files/fr/web/css/initial/index.html | 90 + files/fr/web/css/inline-size/index.html | 112 + files/fr/web/css/inset-block/index.html | 108 + files/fr/web/css/inset-inline/index.html | 108 + files/fr/web/css/inset/index.html | 115 + files/fr/web/css/integer/index.html | 93 + files/fr/web/css/isolation/index.html | 122 + .../css/jeux_de_caract\303\250res_css/index.html" | 50 + files/fr/web/css/justify-content/index.html | 208 ++ files/fr/web/css/justify-items/index.html | 242 ++ files/fr/web/css/justify-self/index.html | 221 ++ .../bas_de_page_adh\303\251rant/index.html" | 73 + files/fr/web/css/layout_cookbook/carte/index.html | 81 + .../layout_cookbook/centrer_un_element/index.html | 59 + .../cookbook_template/index.html" | 62 + .../contribuer_\303\240_une_recette/index.html" | 104 + .../disposition_en_colonnes/index.html | 129 + .../css/layout_cookbook/grid_wrapper/index.html | 83 + files/fr/web/css/layout_cookbook/index.html | 84 + .../liste_groupes_avec_indicateurs/index.html | 53 + .../css/layout_cookbook/media_objects/index.html | 89 + .../navigation_breadcrumb/index.html | 49 + .../navigation_segment\303\251e/index.html" | 48 + .../web/css/layout_cookbook/pagination/index.html | 81 + files/fr/web/css/left/index.html | 218 ++ files/fr/web/css/length-percentage/index.html | 55 + files/fr/web/css/length/index.html | 182 ++ files/fr/web/css/letter-spacing/index.html | 131 + files/fr/web/css/line-break/index.html | 70 + files/fr/web/css/line-height-step/index.html | 85 + files/fr/web/css/line-height/index.html | 187 ++ files/fr/web/css/linear-gradient()/index.html | 296 ++ files/fr/web/css/list-style-image/index.html | 108 + files/fr/web/css/list-style-position/index.html | 138 + files/fr/web/css/list-style-type/index.html | 614 ++++ files/fr/web/css/list-style/index.html | 155 + .../index.html" | 173 ++ .../index.html" | 17 + files/fr/web/css/margin-block-end/index.html | 113 + files/fr/web/css/margin-block-start/index.html | 113 + files/fr/web/css/margin-block/index.html | 103 + files/fr/web/css/margin-bottom/index.html | 141 + files/fr/web/css/margin-inline-end/index.html | 114 + files/fr/web/css/margin-inline-start/index.html | 114 + files/fr/web/css/margin-inline/index.html | 103 + files/fr/web/css/margin-left/index.html | 188 ++ files/fr/web/css/margin-right/index.html | 186 ++ files/fr/web/css/margin-top/index.html | 125 + files/fr/web/css/margin-trim/index.html | 66 + files/fr/web/css/margin/index.html | 187 ++ files/fr/web/css/mask-border-mode/index.html | 63 + files/fr/web/css/mask-border-outset/index.html | 85 + files/fr/web/css/mask-border-repeat/index.html | 79 + files/fr/web/css/mask-border-slice/index.html | 107 + files/fr/web/css/mask-border-source/index.html | 72 + files/fr/web/css/mask-border-width/index.html | 94 + files/fr/web/css/mask-border/index.html | 114 + files/fr/web/css/mask-clip/index.html | 130 + files/fr/web/css/mask-composite/index.html | 117 + files/fr/web/css/mask-image/index.html | 96 + files/fr/web/css/mask-mode/index.html | 131 + files/fr/web/css/mask-origin/index.html | 144 + files/fr/web/css/mask-position/index.html | 132 + files/fr/web/css/mask-repeat/index.html | 165 + files/fr/web/css/mask-size/index.html | 153 + files/fr/web/css/mask-type/index.html | 182 ++ files/fr/web/css/mask/index.html | 128 + files/fr/web/css/max()/index.html | 120 + files/fr/web/css/max-block-size/index.html | 140 + files/fr/web/css/max-height/index.html | 146 + files/fr/web/css/max-inline-size/index.html | 103 + files/fr/web/css/max-width/index.html | 150 + files/fr/web/css/min()/index.html | 140 + files/fr/web/css/min-block-size/index.html | 110 + files/fr/web/css/min-height/index.html | 142 + files/fr/web/css/min-inline-size/index.html | 111 + files/fr/web/css/min-width/index.html | 142 + files/fr/web/css/minmax()/index.html | 151 + files/fr/web/css/mix-blend-mode/index.html | 661 ++++ files/fr/web/css/mode_de_mise_en_page/index.html | 25 + .../fusion_des_marges/index.html" | 92 + .../index.html" | 2887 +++++++++++++++++ .../mod\303\250le_de_bo\303\256te_css/index.html" | 115 + .../index.html" | 179 ++ files/fr/web/css/motion_path/index.html | 54 + .../css/m\303\251dia_pagin\303\251s/index.html" | 20 + files/fr/web/css/none/index.html | 42 + files/fr/web/css/normal/index.html | 35 + files/fr/web/css/number/index.html | 88 + files/fr/web/css/object-fit/index.html | 189 ++ files/fr/web/css/object-position/index.html | 116 + files/fr/web/css/offset-anchor/index.html | 152 + files/fr/web/css/offset-distance/index.html | 100 + files/fr/web/css/offset-path/index.html | 178 ++ files/fr/web/css/offset-position/index.html | 105 + files/fr/web/css/offset-rotate/index.html | 123 + files/fr/web/css/offset/index.html | 104 + files/fr/web/css/opacity/index.html | 184 ++ files/fr/web/css/order/index.html | 130 + files/fr/web/css/orphans/index.html | 114 + .../index.html" | 13 + .../index.html" | 13 + files/fr/web/css/outils/index.html | 20 + files/fr/web/css/outline-color/index.html | 133 + files/fr/web/css/outline-offset/index.html | 94 + files/fr/web/css/outline-style/index.html | 150 + files/fr/web/css/outline-width/index.html | 135 + files/fr/web/css/outline/index.html | 159 + .../guide_ancrage_d\303\251filement/index.html" | 79 + files/fr/web/css/overflow-anchor/index.html | 80 + files/fr/web/css/overflow-block/index.html | 140 + .../fr/web/css/overflow-clip-box-block/index.html | 157 + .../fr/web/css/overflow-clip-box-inline/index.html | 157 + files/fr/web/css/overflow-clip-box/index.html | 175 ++ files/fr/web/css/overflow-inline/index.html | 140 + files/fr/web/css/overflow-wrap/index.html | 153 + files/fr/web/css/overflow-x/index.html | 153 + files/fr/web/css/overflow-y/index.html | 158 + files/fr/web/css/overflow/index.html | 175 ++ files/fr/web/css/overscroll-behavior-x/index.html | 98 + files/fr/web/css/overscroll-behavior-y/index.html | 92 + files/fr/web/css/overscroll-behavior/index.html | 109 + files/fr/web/css/padding-block-end/index.html | 114 + files/fr/web/css/padding-block-start/index.html | 114 + files/fr/web/css/padding-block/index.html | 116 + files/fr/web/css/padding-bottom/index.html | 120 + files/fr/web/css/padding-inline-end/index.html | 114 + files/fr/web/css/padding-inline-start/index.html | 114 + files/fr/web/css/padding-inline/index.html | 116 + files/fr/web/css/padding-left/index.html | 120 + files/fr/web/css/padding-right/index.html | 122 + files/fr/web/css/padding-top/index.html | 122 + files/fr/web/css/padding/index.html | 148 + files/fr/web/css/page-break-after/index.html | 153 + files/fr/web/css/page-break-before/index.html | 151 + files/fr/web/css/page-break-inside/index.html | 164 + files/fr/web/css/paint()/index.html | 111 + files/fr/web/css/paint-order/index.html | 116 + files/fr/web/css/percentage/index.html | 97 + files/fr/web/css/perspective-origin/index.html | 389 +++ files/fr/web/css/perspective/index.html | 249 ++ files/fr/web/css/place-content/index.html | 247 ++ files/fr/web/css/place-items/index.html | 281 ++ files/fr/web/css/place-self/index.html | 132 + files/fr/web/css/pointer-events/index.html | 146 + files/fr/web/css/position/index.html | 344 +++ .../index.html" | 155 + files/fr/web/css/pseudo-classes/index.html | 205 ++ .../css/pseudo-\303\251l\303\251ments/index.html" | 132 + files/fr/web/css/quotes/index.html | 109 + files/fr/web/css/radial-gradient()/index.html | 225 ++ files/fr/web/css/ratio/index.html | 110 + .../index.html" | 331 ++ files/fr/web/css/reference/index.html | 193 ++ files/fr/web/css/repeat()/index.html | 149 + .../web/css/repeating-conic-gradient()/index.html | 207 ++ .../web/css/repeating-linear-gradient()/index.html | 174 ++ .../web/css/repeating-radial-gradient()/index.html | 165 + .../css/requ\303\252tes_m\303\251dia/index.html" | 86 + .../tester_les_media_queries/index.html" | 79 + .../index.html" | 96 + .../utiliser_les_media_queries/index.html" | 384 +++ files/fr/web/css/resize/index.html | 153 + files/fr/web/css/resolution/index.html | 127 + files/fr/web/css/revert/index.html | 200 ++ files/fr/web/css/right/index.html | 152 + files/fr/web/css/rotate/index.html | 126 + files/fr/web/css/row-gap/index.html | 169 + files/fr/web/css/ruby-align/index.html | 146 + files/fr/web/css/ruby-position/index.html | 117 + "files/fr/web/css/r\303\250gles_@/index.html" | 82 + files/fr/web/css/scale/index.html | 126 + files/fr/web/css/scroll-behavior/index.html | 143 + .../fr/web/css/scroll-margin-block-end/index.html | 68 + .../web/css/scroll-margin-block-start/index.html | 69 + files/fr/web/css/scroll-margin-block/index.html | 71 + files/fr/web/css/scroll-margin-bottom/index.html | 69 + .../fr/web/css/scroll-margin-inline-end/index.html | 69 + .../web/css/scroll-margin-inline-start/index.html | 69 + files/fr/web/css/scroll-margin-inline/index.html | 67 + files/fr/web/css/scroll-margin-left/index.html | 68 + files/fr/web/css/scroll-margin-right/index.html | 68 + files/fr/web/css/scroll-margin-top/index.html | 67 + files/fr/web/css/scroll-margin/index.html | 70 + .../fr/web/css/scroll-padding-block-end/index.html | 78 + .../web/css/scroll-padding-block-start/index.html | 78 + files/fr/web/css/scroll-padding-block/index.html | 77 + files/fr/web/css/scroll-padding-bottom/index.html | 77 + .../web/css/scroll-padding-inline-end/index.html | 78 + .../web/css/scroll-padding-inline-start/index.html | 78 + files/fr/web/css/scroll-padding-inline/index.html | 78 + files/fr/web/css/scroll-padding-left/index.html | 77 + files/fr/web/css/scroll-padding-right/index.html | 75 + files/fr/web/css/scroll-padding-top/index.html | 76 + files/fr/web/css/scroll-padding/index.html | 76 + files/fr/web/css/scroll-snap-align/index.html | 73 + files/fr/web/css/scroll-snap-coordinate/index.html | 157 + .../fr/web/css/scroll-snap-destination/index.html | 149 + files/fr/web/css/scroll-snap-points-x/index.html | 94 + files/fr/web/css/scroll-snap-points-y/index.html | 96 + files/fr/web/css/scroll-snap-stop/index.html | 224 ++ files/fr/web/css/scroll-snap-type-x/index.html | 55 + files/fr/web/css/scroll-snap-type-y/index.html | 55 + files/fr/web/css/scroll-snap-type/index.html | 252 ++ files/fr/web/css/scrollbar-color/index.html | 126 + files/fr/web/css/scrollbar-width/index.html | 119 + files/fr/web/css/selector_list/index.html | 99 + files/fr/web/css/shape-box/index.html | 168 + files/fr/web/css/shape-image-threshold/index.html | 117 + files/fr/web/css/shape-margin/index.html | 118 + files/fr/web/css/shape-outside/index.html | 167 + files/fr/web/css/shape/index.html | 106 + files/fr/web/css/string/index.html | 85 + files/fr/web/css/symbols()/index.html | 74 + .../index.html" | 421 +++ .../comparison_with_xpath/index.html" | 49 + .../fr/web/css/s\303\251lecteurs_css/index.html" | 114 + .../index.html" | 63 + .../css/s\303\251lecteurs_d_attribut/index.html" | 243 ++ .../fr/web/css/s\303\251lecteurs_d_id/index.html" | 87 + .../css/s\303\251lecteurs_de_classe/index.html" | 101 + .../web/css/s\303\251lecteurs_de_type/index.html" | 82 + .../index.html" | 81 + .../css/s\303\251lecteurs_descendant/index.html" | 109 + .../web/css/s\303\251lecteurs_enfant/index.html" | 94 + .../css/s\303\251lecteurs_universels/index.html" | 103 + files/fr/web/css/tab-size/index.html | 98 + files/fr/web/css/table-layout/index.html | 111 + files/fr/web/css/text-align-last/index.html | 114 + files/fr/web/css/text-align/index.html | 227 ++ files/fr/web/css/text-combine-upright/index.html | 122 + files/fr/web/css/text-decoration-color/index.html | 115 + files/fr/web/css/text-decoration-line/index.html | 108 + .../fr/web/css/text-decoration-skip-ink/index.html | 86 + files/fr/web/css/text-decoration-skip/index.html | 107 + files/fr/web/css/text-decoration-style/index.html | 117 + .../web/css/text-decoration-thickness/index.html | 111 + files/fr/web/css/text-decoration/index.html | 148 + files/fr/web/css/text-emphasis-color/index.html | 97 + files/fr/web/css/text-emphasis-position/index.html | 167 + files/fr/web/css/text-emphasis-style/index.html | 115 + files/fr/web/css/text-emphasis/index.html | 135 + files/fr/web/css/text-indent/index.html | 144 + files/fr/web/css/text-justify/index.html | 116 + files/fr/web/css/text-orientation/index.html | 107 + files/fr/web/css/text-overflow/index.html | 343 +++ files/fr/web/css/text-rendering/index.html | 132 + files/fr/web/css/text-shadow/index.html | 142 + files/fr/web/css/text-size-adjust/index.html | 88 + files/fr/web/css/text-transform/index.html | 191 ++ files/fr/web/css/text-underline-offset/index.html | 112 + .../fr/web/css/text-underline-position/index.html | 128 + files/fr/web/css/time-percentage/index.html | 50 + files/fr/web/css/time/index.html | 83 + files/fr/web/css/timing-function/index.html | 274 ++ files/fr/web/css/top/index.html | 178 ++ files/fr/web/css/touch-action/index.html | 160 + files/fr/web/css/transform-box/index.html | 108 + files/fr/web/css/transform-function/index.html | 162 + .../web/css/transform-function/matrix()/index.html | 112 + .../css/transform-function/matrix3d()/index.html | 182 ++ .../transform-function/perspective()/index.html | 159 + .../web/css/transform-function/rotate()/index.html | 153 + .../css/transform-function/rotate3d()/index.html | 144 + .../css/transform-function/rotatex()/index.html | 108 + .../css/transform-function/rotatey()/index.html | 108 + .../css/transform-function/rotatez()/index.html | 108 + .../web/css/transform-function/scale()/index.html | 157 + .../css/transform-function/scale3d()/index.html | 141 + .../web/css/transform-function/scalex()/index.html | 139 + .../web/css/transform-function/scaley()/index.html | 111 + .../web/css/transform-function/scalez()/index.html | 117 + .../web/css/transform-function/skew()/index.html | 139 + .../web/css/transform-function/skewx()/index.html | 110 + .../web/css/transform-function/skewy()/index.html | 108 + .../css/transform-function/translate()/index.html | 141 + .../transform-function/translate3d()/index.html | 140 + .../css/transform-function/translatex/index.html | 109 + .../css/transform-function/translatey()/index.html | 109 + .../css/transform-function/translatez()/index.html | 113 + files/fr/web/css/transform-origin/index.html | 462 +++ files/fr/web/css/transform-style/index.html | 80 + files/fr/web/css/transform/index.html | 160 + files/fr/web/css/transition-delay/index.html | 357 +++ files/fr/web/css/transition-duration/index.html | 343 +++ files/fr/web/css/transition-property/index.html | 97 + .../web/css/transition-timing-function/index.html | 286 ++ files/fr/web/css/transition/index.html | 106 + files/fr/web/css/translate/index.html | 127 + files/fr/web/css/translation-value/index.html | 41 + files/fr/web/css/tutorials/index.html | 62 + files/fr/web/css/type_color/index.html | 1379 +++++++++ files/fr/web/css/type_position/index.html | 129 + files/fr/web/css/types_css/index.html | 102 + files/fr/web/css/unicode-bidi/index.html | 100 + files/fr/web/css/unset/index.html | 115 + files/fr/web/css/url()/index.html | 184 ++ files/fr/web/css/url/index.html | 108 + files/fr/web/css/user-modify/index.html | 90 + files/fr/web/css/user-select/index.html | 137 + .../web/css/using_css_custom_properties/index.html | 298 ++ .../index.html" | 747 +++++ .../fr/web/css/valeur_calcul\303\251e/index.html" | 67 + files/fr/web/css/valeur_initiale/index.html | 53 + files/fr/web/css/valeur_reelle/index.html | 52 + .../fr/web/css/valeur_r\303\251solue/index.html" | 40 + .../css/valeur_sp\303\251cifi\303\251e/index.html" | 85 + .../fr/web/css/valeur_utilis\303\251e/index.html" | 144 + .../css/valeurs_et_unit\303\251s_css/index.html" | 494 +++ files/fr/web/css/var()/index.html | 94 + files/fr/web/css/vertical-align/index.html | 191 ++ files/fr/web/css/visibility/index.html | 190 ++ files/fr/web/css/webkit_extensions/index.html | 522 ++++ files/fr/web/css/white-space/index.html | 208 ++ files/fr/web/css/widows/index.html | 118 + files/fr/web/css/width/index.html | 215 ++ files/fr/web/css/will-change/index.html | 133 + files/fr/web/css/word-break/index.html | 130 + files/fr/web/css/word-spacing/index.html | 128 + files/fr/web/css/writing-mode/index.html | 210 ++ files/fr/web/css/z-index/index.html | 144 + files/fr/web/css/zoom/index.html | 102 + .../index.html" | 62 + 1018 files changed, 139620 insertions(+) create mode 100644 files/fr/web/css/--_star_/index.html create mode 100644 files/fr/web/css/-moz-binding/index.html create mode 100644 files/fr/web/css/-moz-border-bottom-colors/index.html create mode 100644 files/fr/web/css/-moz-border-left-colors/index.html create mode 100644 files/fr/web/css/-moz-border-right-colors/index.html create mode 100644 files/fr/web/css/-moz-border-top-colors/index.html create mode 100644 files/fr/web/css/-moz-box-ordinal-group/index.html create mode 100644 files/fr/web/css/-moz-cell/index.html create mode 100644 files/fr/web/css/-moz-context-properties/index.html create mode 100644 files/fr/web/css/-moz-float-edge/index.html create mode 100644 files/fr/web/css/-moz-force-broken-image-icon/index.html create mode 100644 files/fr/web/css/-moz-image-rect/index.html create mode 100644 files/fr/web/css/-moz-image-region/index.html create mode 100644 files/fr/web/css/-moz-orient/index.html create mode 100644 files/fr/web/css/-moz-outline-radius-bottomleft/index.html create mode 100644 files/fr/web/css/-moz-outline-radius-bottomright/index.html create mode 100644 files/fr/web/css/-moz-outline-radius-topleft/index.html create mode 100644 files/fr/web/css/-moz-outline-radius-topright/index.html create mode 100644 files/fr/web/css/-moz-outline-radius/index.html create mode 100644 files/fr/web/css/-moz-stack-sizing/index.html create mode 100644 files/fr/web/css/-moz-text-blink/index.html create mode 100644 files/fr/web/css/-moz-user-focus/index.html create mode 100644 files/fr/web/css/-moz-user-input/index.html create mode 100644 files/fr/web/css/-moz-window-shadow/index.html create mode 100644 files/fr/web/css/-ms-accelerator/index.html create mode 100644 files/fr/web/css/-ms-block-progression/index.html create mode 100644 files/fr/web/css/-ms-content-zoom-chaining/index.html create mode 100644 files/fr/web/css/-ms-content-zoom-limit-max/index.html create mode 100644 files/fr/web/css/-ms-content-zoom-limit-min/index.html create mode 100644 files/fr/web/css/-ms-content-zoom-limit/index.html create mode 100644 files/fr/web/css/-ms-content-zoom-snap-points/index.html create mode 100644 files/fr/web/css/-ms-content-zoom-snap-type/index.html create mode 100644 files/fr/web/css/-ms-content-zoom-snap/index.html create mode 100644 files/fr/web/css/-ms-content-zooming/index.html create mode 100644 files/fr/web/css/-ms-filter/index.html create mode 100644 files/fr/web/css/-ms-flow-from/index.html create mode 100644 files/fr/web/css/-ms-flow-into/index.html create mode 100644 files/fr/web/css/-ms-high-contrast-adjust/index.html create mode 100644 files/fr/web/css/-ms-high-contrast/index.html create mode 100644 files/fr/web/css/-ms-hyphenate-limit-chars/index.html create mode 100644 files/fr/web/css/-ms-hyphenate-limit-lines/index.html create mode 100644 files/fr/web/css/-ms-hyphenate-limit-zone/index.html create mode 100644 files/fr/web/css/-ms-ime-align/index.html create mode 100644 files/fr/web/css/-ms-overflow-style/index.html create mode 100644 files/fr/web/css/-ms-scroll-chaining/index.html create mode 100644 files/fr/web/css/-ms-scroll-limit-x-max/index.html create mode 100644 files/fr/web/css/-ms-scroll-limit-x-min/index.html create mode 100644 files/fr/web/css/-ms-scroll-limit-y-max/index.html create mode 100644 files/fr/web/css/-ms-scroll-limit-y-min/index.html create mode 100644 files/fr/web/css/-ms-scroll-limit/index.html create mode 100644 files/fr/web/css/-ms-scroll-rails/index.html create mode 100644 files/fr/web/css/-ms-scroll-snap-points-x/index.html create mode 100644 files/fr/web/css/-ms-scroll-snap-points-y/index.html create mode 100644 files/fr/web/css/-ms-scroll-snap-type/index.html create mode 100644 files/fr/web/css/-ms-scroll-snap-x/index.html create mode 100644 files/fr/web/css/-ms-scroll-snap-y/index.html create mode 100644 files/fr/web/css/-ms-scroll-translation/index.html create mode 100644 files/fr/web/css/-ms-scrollbar-3dlight-color/index.html create mode 100644 files/fr/web/css/-ms-scrollbar-arrow-color/index.html create mode 100644 files/fr/web/css/-ms-scrollbar-base-color/index.html create mode 100644 files/fr/web/css/-ms-scrollbar-darkshadow-color/index.html create mode 100644 files/fr/web/css/-ms-scrollbar-face-color/index.html create mode 100644 files/fr/web/css/-ms-scrollbar-highlight-color/index.html create mode 100644 files/fr/web/css/-ms-scrollbar-shadow-color/index.html create mode 100644 files/fr/web/css/-ms-scrollbar-track-color/index.html create mode 100644 files/fr/web/css/-ms-text-autospace/index.html create mode 100644 files/fr/web/css/-ms-touch-select/index.html create mode 100644 files/fr/web/css/-ms-user-select/index.html create mode 100644 files/fr/web/css/-ms-wrap-flow/index.html create mode 100644 files/fr/web/css/-ms-wrap-margin/index.html create mode 100644 files/fr/web/css/-ms-wrap-through/index.html create mode 100644 files/fr/web/css/-webkit-border-before/index.html create mode 100644 files/fr/web/css/-webkit-box-reflect/index.html create mode 100644 files/fr/web/css/-webkit-line-clamp/index.html create mode 100644 files/fr/web/css/-webkit-mask-attachment/index.html create mode 100644 files/fr/web/css/-webkit-mask-box-image/index.html create mode 100644 files/fr/web/css/-webkit-mask-composite/index.html create mode 100644 files/fr/web/css/-webkit-mask-image/index.html create mode 100644 files/fr/web/css/-webkit-mask-position-x/index.html create mode 100644 files/fr/web/css/-webkit-mask-position-y/index.html create mode 100644 files/fr/web/css/-webkit-mask-repeat-x/index.html create mode 100644 files/fr/web/css/-webkit-mask-repeat-y/index.html create mode 100644 files/fr/web/css/-webkit-overflow-scrolling/index.html create mode 100644 files/fr/web/css/-webkit-print-color-adjust/index.html create mode 100644 files/fr/web/css/-webkit-tap-highlight-color/index.html create mode 100644 files/fr/web/css/-webkit-text-fill-color/index.html create mode 100644 files/fr/web/css/-webkit-text-security/index.html create mode 100644 files/fr/web/css/-webkit-text-stroke-color/index.html create mode 100644 files/fr/web/css/-webkit-text-stroke-width/index.html create mode 100644 files/fr/web/css/-webkit-text-stroke/index.html create mode 100644 files/fr/web/css/-webkit-touch-callout/index.html create mode 100644 files/fr/web/css/@charset/index.html create mode 100644 files/fr/web/css/@counter-style/additive-symbols/index.html create mode 100644 files/fr/web/css/@counter-style/fallback/index.html create mode 100644 files/fr/web/css/@counter-style/index.html create mode 100644 files/fr/web/css/@counter-style/negative/index.html create mode 100644 files/fr/web/css/@counter-style/pad/index.html create mode 100644 files/fr/web/css/@counter-style/prefix/index.html create mode 100644 files/fr/web/css/@counter-style/range/index.html create mode 100644 files/fr/web/css/@counter-style/speak-as/index.html create mode 100644 files/fr/web/css/@counter-style/suffix/index.html create mode 100644 files/fr/web/css/@counter-style/symbols/index.html create mode 100644 files/fr/web/css/@counter-style/system/index.html create mode 100644 files/fr/web/css/@document/index.html create mode 100644 files/fr/web/css/@font-face/font-display/index.html create mode 100644 files/fr/web/css/@font-face/font-family/index.html create mode 100644 files/fr/web/css/@font-face/font-stretch/index.html create mode 100644 files/fr/web/css/@font-face/font-style/index.html create mode 100644 files/fr/web/css/@font-face/font-variation-settings/index.html create mode 100644 files/fr/web/css/@font-face/font-weight/index.html create mode 100644 files/fr/web/css/@font-face/index.html create mode 100644 files/fr/web/css/@font-face/src/index.html create mode 100644 files/fr/web/css/@font-face/unicode-range/index.html create mode 100644 files/fr/web/css/@font-feature-values/index.html create mode 100644 files/fr/web/css/@import/index.html create mode 100644 files/fr/web/css/@keyframes/index.html create mode 100644 files/fr/web/css/@media/-moz-device-pixel-ratio/index.html create mode 100644 files/fr/web/css/@media/-moz-mac-graphite-theme/index.html create mode 100644 files/fr/web/css/@media/-moz-maemo-classic/index.html create mode 100644 files/fr/web/css/@media/-moz-os-version/index.html create mode 100644 files/fr/web/css/@media/-moz-scrollbar-end-backward/index.html create mode 100644 files/fr/web/css/@media/-moz-scrollbar-end-forward/index.html create mode 100644 files/fr/web/css/@media/-moz-scrollbar-start-backward/index.html create mode 100644 files/fr/web/css/@media/-moz-scrollbar-start-forward/index.html create mode 100644 files/fr/web/css/@media/-moz-scrollbar-thumb-proportional/index.html create mode 100644 files/fr/web/css/@media/-moz-touch-enabled/index.html create mode 100644 files/fr/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html create mode 100644 files/fr/web/css/@media/-moz-windows-classic/index.html create mode 100644 files/fr/web/css/@media/-moz-windows-compositor/index.html create mode 100644 files/fr/web/css/@media/-moz-windows-default-theme/index.html create mode 100644 files/fr/web/css/@media/-moz-windows-glass/index.html create mode 100644 files/fr/web/css/@media/-moz-windows-theme/index.html create mode 100644 files/fr/web/css/@media/-webkit-animation/index.html create mode 100644 files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html create mode 100644 files/fr/web/css/@media/-webkit-transform-2d/index.html create mode 100644 files/fr/web/css/@media/-webkit-transform-3d/index.html create mode 100644 files/fr/web/css/@media/-webkit-transition/index.html create mode 100644 files/fr/web/css/@media/any-hover/index.html create mode 100644 files/fr/web/css/@media/any-pointer/index.html create mode 100644 files/fr/web/css/@media/aspect-ratio/index.html create mode 100644 files/fr/web/css/@media/aural/index.html create mode 100644 files/fr/web/css/@media/color-gamut/index.html create mode 100644 files/fr/web/css/@media/color-index/index.html create mode 100644 files/fr/web/css/@media/color/index.html create mode 100644 files/fr/web/css/@media/device-aspect-ratio/index.html create mode 100644 files/fr/web/css/@media/device-height/index.html create mode 100644 files/fr/web/css/@media/device-width/index.html create mode 100644 files/fr/web/css/@media/display-mode/index.html create mode 100644 files/fr/web/css/@media/forced-colors/index.html create mode 100644 files/fr/web/css/@media/grid/index.html create mode 100644 files/fr/web/css/@media/height/index.html create mode 100644 files/fr/web/css/@media/hover/index.html create mode 100644 files/fr/web/css/@media/index.html create mode 100644 files/fr/web/css/@media/index/index.html create mode 100644 files/fr/web/css/@media/inverted-colors/index.html create mode 100644 files/fr/web/css/@media/monochrome/index.html create mode 100644 files/fr/web/css/@media/orientation/index.html create mode 100644 files/fr/web/css/@media/overflow-block/index.html create mode 100644 files/fr/web/css/@media/overflow-inline/index.html create mode 100644 files/fr/web/css/@media/pointer/index.html create mode 100644 files/fr/web/css/@media/prefers-color-scheme/index.html create mode 100644 files/fr/web/css/@media/prefers-contrast/index.html create mode 100644 files/fr/web/css/@media/prefers-reduced-motion/index.html create mode 100644 files/fr/web/css/@media/prefers-reduced-transparency/index.html create mode 100644 files/fr/web/css/@media/resolution/index.html create mode 100644 files/fr/web/css/@media/scan/index.html create mode 100644 files/fr/web/css/@media/scripting/index.html create mode 100644 files/fr/web/css/@media/shape/index.html create mode 100644 files/fr/web/css/@media/update-frequency/index.html create mode 100644 files/fr/web/css/@media/width/index.html create mode 100644 files/fr/web/css/@namespace/index.html create mode 100644 files/fr/web/css/@page/bleed/index.html create mode 100644 files/fr/web/css/@page/index.html create mode 100644 files/fr/web/css/@page/marks/index.html create mode 100644 files/fr/web/css/@page/size/index.html create mode 100644 files/fr/web/css/@supports/index.html create mode 100644 files/fr/web/css/@viewport/height/index.html create mode 100644 files/fr/web/css/@viewport/index.html create mode 100644 files/fr/web/css/@viewport/max-height/index.html create mode 100644 files/fr/web/css/@viewport/max-width/index.html create mode 100644 files/fr/web/css/@viewport/max-zoom/index.html create mode 100644 files/fr/web/css/@viewport/min-height/index.html create mode 100644 files/fr/web/css/@viewport/min-width/index.html create mode 100644 files/fr/web/css/@viewport/min-zoom/index.html create mode 100644 files/fr/web/css/@viewport/orientation/index.html create mode 100644 files/fr/web/css/@viewport/user-zoom/index.html create mode 100644 files/fr/web/css/@viewport/viewport-fit/index.html create mode 100644 files/fr/web/css/@viewport/width/index.html create mode 100644 files/fr/web/css/@viewport/zoom/index.html create mode 100644 files/fr/web/css/_colon_-moz-broken/index.html create mode 100644 files/fr/web/css/_colon_-moz-drag-over/index.html create mode 100644 files/fr/web/css/_colon_-moz-first-node/index.html create mode 100644 files/fr/web/css/_colon_-moz-focusring/index.html create mode 100644 files/fr/web/css/_colon_-moz-full-screen-ancestor/index.html create mode 100644 files/fr/web/css/_colon_-moz-handler-blocked/index.html create mode 100644 files/fr/web/css/_colon_-moz-handler-crashed/index.html create mode 100644 files/fr/web/css/_colon_-moz-handler-disabled/index.html create mode 100644 files/fr/web/css/_colon_-moz-last-node/index.html create mode 100644 files/fr/web/css/_colon_-moz-loading/index.html create mode 100644 files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.html create mode 100644 files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.html create mode 100644 files/fr/web/css/_colon_-moz-lwtheme-brighttext/index.html create mode 100644 files/fr/web/css/_colon_-moz-lwtheme-darktext/index.html create mode 100644 files/fr/web/css/_colon_-moz-lwtheme/index.html create mode 100644 files/fr/web/css/_colon_-moz-only-whitespace/index.html create mode 100644 files/fr/web/css/_colon_-moz-submit-invalid/index.html create mode 100644 files/fr/web/css/_colon_-moz-suppressed/index.html create mode 100644 files/fr/web/css/_colon_-moz-system-metric/images-in-menus/index.html create mode 100644 files/fr/web/css/_colon_-moz-system-metric/index.html create mode 100644 files/fr/web/css/_colon_-moz-system-metric/mac-graphite-theme/index.html create mode 100644 files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-backward/index.html create mode 100644 files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-forward/index.html create mode 100644 files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-backward/index.html create mode 100644 files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-forward/index.html create mode 100644 files/fr/web/css/_colon_-moz-system-metric/scrollbar-thumb-proportional/index.html create mode 100644 files/fr/web/css/_colon_-moz-system-metric/touch-enabled/index.html create mode 100644 files/fr/web/css/_colon_-moz-system-metric/windows-default-theme/index.html create mode 100644 files/fr/web/css/_colon_-moz-ui-invalid/index.html create mode 100644 files/fr/web/css/_colon_-moz-ui-valid/index.html create mode 100644 files/fr/web/css/_colon_-moz-user-disabled/index.html create mode 100644 files/fr/web/css/_colon_-moz-window-inactive/index.html create mode 100644 files/fr/web/css/_colon_-ms-input-placeholder/index.html create mode 100644 files/fr/web/css/_colon_-webkit-autofill/index.html create mode 100644 files/fr/web/css/_colon_active/index.html create mode 100644 files/fr/web/css/_colon_any-link/index.html create mode 100644 files/fr/web/css/_colon_any/index.html create mode 100644 files/fr/web/css/_colon_blank/index.html create mode 100644 files/fr/web/css/_colon_checked/index.html create mode 100644 files/fr/web/css/_colon_default/index.html create mode 100644 files/fr/web/css/_colon_defined/index.html create mode 100644 files/fr/web/css/_colon_dir/index.html create mode 100644 files/fr/web/css/_colon_disabled/index.html create mode 100644 files/fr/web/css/_colon_empty/index.html create mode 100644 files/fr/web/css/_colon_enabled/index.html create mode 100644 files/fr/web/css/_colon_first-child/index.html create mode 100644 files/fr/web/css/_colon_first-of-type/index.html create mode 100644 files/fr/web/css/_colon_first/index.html create mode 100644 files/fr/web/css/_colon_focus-visible/index.html create mode 100644 files/fr/web/css/_colon_focus-within/index.html create mode 100644 files/fr/web/css/_colon_focus/index.html create mode 100644 files/fr/web/css/_colon_fullscreen/index.html create mode 100644 files/fr/web/css/_colon_has/index.html create mode 100644 files/fr/web/css/_colon_host()/index.html create mode 100644 files/fr/web/css/_colon_host-context()/index.html create mode 100644 files/fr/web/css/_colon_host/index.html create mode 100644 files/fr/web/css/_colon_hover/index.html create mode 100644 files/fr/web/css/_colon_in-range/index.html create mode 100644 files/fr/web/css/_colon_indeterminate/index.html create mode 100644 files/fr/web/css/_colon_invalid/index.html create mode 100644 files/fr/web/css/_colon_is/index.html create mode 100644 files/fr/web/css/_colon_lang/index.html create mode 100644 files/fr/web/css/_colon_last-child/index.html create mode 100644 files/fr/web/css/_colon_last-of-type/index.html create mode 100644 files/fr/web/css/_colon_left/index.html create mode 100644 files/fr/web/css/_colon_link/index.html create mode 100644 files/fr/web/css/_colon_not/index.html create mode 100644 files/fr/web/css/_colon_nth-child/index.html create mode 100644 files/fr/web/css/_colon_nth-last-child/index.html create mode 100644 files/fr/web/css/_colon_nth-last-of-type/index.html create mode 100644 files/fr/web/css/_colon_nth-of-type/index.html create mode 100644 files/fr/web/css/_colon_only-child/index.html create mode 100644 files/fr/web/css/_colon_only-of-type/index.html create mode 100644 files/fr/web/css/_colon_optional/index.html create mode 100644 files/fr/web/css/_colon_out-of-range/index.html create mode 100644 files/fr/web/css/_colon_placeholder-shown/index.html create mode 100644 files/fr/web/css/_colon_read-only/index.html create mode 100644 files/fr/web/css/_colon_read-write/index.html create mode 100644 files/fr/web/css/_colon_required/index.html create mode 100644 files/fr/web/css/_colon_right/index.html create mode 100644 files/fr/web/css/_colon_root/index.html create mode 100644 files/fr/web/css/_colon_scope/index.html create mode 100644 files/fr/web/css/_colon_target/index.html create mode 100644 files/fr/web/css/_colon_valid/index.html create mode 100644 files/fr/web/css/_colon_visited/index.html create mode 100644 "files/fr/web/css/_colon_visited_et_la_vie_priv\303\251e/index.html" create mode 100644 files/fr/web/css/_colon_where/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-color-swatch/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-list-bullet/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-list-number/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-page-sequence/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-page/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-progress-bar/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-range-progress/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-range-thumb/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-range-track/index.html create mode 100644 files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html create mode 100644 files/fr/web/css/_doublecolon_-ms-browse/index.html create mode 100644 files/fr/web/css/_doublecolon_-ms-check/index.html create mode 100644 files/fr/web/css/_doublecolon_-ms-clear/index.html create mode 100644 files/fr/web/css/_doublecolon_-ms-expand/index.html create mode 100644 files/fr/web/css/_doublecolon_-ms-fill-lower/index.html create mode 100644 files/fr/web/css/_doublecolon_-ms-fill-upper/index.html create mode 100644 files/fr/web/css/_doublecolon_-ms-fill/index.html create mode 100644 files/fr/web/css/_doublecolon_-ms-reveal/index.html create mode 100644 files/fr/web/css/_doublecolon_-ms-thumb/index.html create mode 100644 files/fr/web/css/_doublecolon_-ms-ticks-after/index.html create mode 100644 files/fr/web/css/_doublecolon_-ms-ticks-before/index.html create mode 100644 files/fr/web/css/_doublecolon_-ms-tooltip/index.html create mode 100644 files/fr/web/css/_doublecolon_-ms-track/index.html create mode 100644 files/fr/web/css/_doublecolon_-ms-value/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-meter-bar/index.html create 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-inner-element/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-progress-value/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-search-results-button/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.html create mode 100644 files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.html create mode 100644 files/fr/web/css/_doublecolon_after/index.html create mode 100644 files/fr/web/css/_doublecolon_backdrop/index.html create mode 100644 files/fr/web/css/_doublecolon_before/index.html create mode 100644 files/fr/web/css/_doublecolon_cue-region/index.html create mode 100644 files/fr/web/css/_doublecolon_cue/index.html create mode 100644 files/fr/web/css/_doublecolon_first-letter/index.html create mode 100644 files/fr/web/css/_doublecolon_first-line/index.html create mode 100644 files/fr/web/css/_doublecolon_grammar-error/index.html create mode 100644 files/fr/web/css/_doublecolon_marker/index.html create mode 100644 files/fr/web/css/_doublecolon_part/index.html create mode 100644 files/fr/web/css/_doublecolon_placeholder/index.html create mode 100644 files/fr/web/css/_doublecolon_selection/index.html create mode 100644 files/fr/web/css/_doublecolon_slotted/index.html create mode 100644 files/fr/web/css/_doublecolon_spelling-error/index.html create mode 100644 files/fr/web/css/a_propos_du_bloc_conteneur/index.html create mode 100644 files/fr/web/css/align-content/index.html create mode 100644 files/fr/web/css/align-items/index.html create mode 100644 files/fr/web/css/align-self/index.html create mode 100644 files/fr/web/css/all/index.html create mode 100644 files/fr/web/css/alpha-value/index.html create mode 100644 files/fr/web/css/angle-percentage/index.html create mode 100644 files/fr/web/css/angle/index.html create mode 100644 files/fr/web/css/animation-delay/index.html create mode 100644 files/fr/web/css/animation-direction/index.html create mode 100644 files/fr/web/css/animation-duration/index.html create mode 100644 files/fr/web/css/animation-fill-mode/index.html create mode 100644 files/fr/web/css/animation-iteration-count/index.html create mode 100644 files/fr/web/css/animation-name/index.html create mode 100644 files/fr/web/css/animation-play-state/index.html create mode 100644 files/fr/web/css/animation-timing-function/index.html create mode 100644 files/fr/web/css/animation/index.html create mode 100644 files/fr/web/css/animations_css/conseils/index.html create mode 100644 "files/fr/web/css/animations_css/d\303\251tecter_la_prise_en_charge_des_animations_css/index.html" create mode 100644 files/fr/web/css/animations_css/index.html create mode 100644 files/fr/web/css/animations_css/utiliser_les_animations_css/index.html create mode 100644 files/fr/web/css/appearance/index.html create mode 100644 "files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-image/index.html" create mode 100644 "files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-radius/index.html" create mode 100644 "files/fr/web/css/arri\303\250re-plans_et_bordures_css/index.html" create mode 100644 files/fr/web/css/attr()/index.html create mode 100644 files/fr/web/css/auto/index.html create mode 100644 files/fr/web/css/azimuth/index.html create mode 100644 files/fr/web/css/backdrop-filter/index.html create mode 100644 files/fr/web/css/backface-visibility/index.html create mode 100644 files/fr/web/css/background-attachment/index.html create mode 100644 files/fr/web/css/background-blend-mode/index.html create mode 100644 files/fr/web/css/background-clip/index.html create mode 100644 files/fr/web/css/background-color/index.html create mode 100644 files/fr/web/css/background-image/index.html create mode 100644 files/fr/web/css/background-origin/index.html create mode 100644 files/fr/web/css/background-position-x/index.html create mode 100644 files/fr/web/css/background-position-y/index.html create mode 100644 files/fr/web/css/background-position/index.html create mode 100644 files/fr/web/css/background-repeat/index.html create mode 100644 files/fr/web/css/background-size/index.html create mode 100644 files/fr/web/css/background/index.html create mode 100644 files/fr/web/css/basic-shape/index.html create mode 100644 files/fr/web/css/blend-mode/index.html create mode 100644 files/fr/web/css/block-size/index.html create mode 100644 files/fr/web/css/block_formatting_context/index.html create mode 100644 files/fr/web/css/border-block-color/index.html create mode 100644 files/fr/web/css/border-block-end-color/index.html create mode 100644 files/fr/web/css/border-block-end-style/index.html create mode 100644 files/fr/web/css/border-block-end-width/index.html create mode 100644 files/fr/web/css/border-block-end/index.html create mode 100644 files/fr/web/css/border-block-start-color/index.html create mode 100644 files/fr/web/css/border-block-start-style/index.html create mode 100644 files/fr/web/css/border-block-start-width/index.html create mode 100644 files/fr/web/css/border-block-start/index.html create mode 100644 files/fr/web/css/border-block-style/index.html create mode 100644 files/fr/web/css/border-block-width/index.html create mode 100644 files/fr/web/css/border-block/index.html create mode 100644 files/fr/web/css/border-bottom-color/index.html create mode 100644 files/fr/web/css/border-bottom-left-radius/index.html create mode 100644 files/fr/web/css/border-bottom-right-radius/index.html create mode 100644 files/fr/web/css/border-bottom-style/index.html create mode 100644 files/fr/web/css/border-bottom-width/index.html create mode 100644 files/fr/web/css/border-bottom/index.html create mode 100644 files/fr/web/css/border-collapse/index.html create mode 100644 files/fr/web/css/border-color/index.html create mode 100644 files/fr/web/css/border-end-end-radius/index.html create mode 100644 files/fr/web/css/border-end-start-radius/index.html create mode 100644 files/fr/web/css/border-image-outset/index.html create mode 100644 files/fr/web/css/border-image-repeat/index.html create mode 100644 files/fr/web/css/border-image-slice/index.html create mode 100644 files/fr/web/css/border-image-source/index.html create mode 100644 files/fr/web/css/border-image-width/index.html create mode 100644 files/fr/web/css/border-image/index.html create mode 100644 files/fr/web/css/border-inline-color/index.html create mode 100644 files/fr/web/css/border-inline-end-color/index.html create mode 100644 files/fr/web/css/border-inline-end-style/index.html create mode 100644 files/fr/web/css/border-inline-end-width/index.html create mode 100644 files/fr/web/css/border-inline-end/index.html create mode 100644 files/fr/web/css/border-inline-start-color/index.html create mode 100644 files/fr/web/css/border-inline-start-style/index.html create mode 100644 files/fr/web/css/border-inline-start-width/index.html create mode 100644 files/fr/web/css/border-inline-start/index.html create mode 100644 files/fr/web/css/border-inline-style/index.html create mode 100644 files/fr/web/css/border-inline-width/index.html create mode 100644 files/fr/web/css/border-inline/index.html create mode 100644 files/fr/web/css/border-left-color/index.html create mode 100644 files/fr/web/css/border-left-style/index.html create mode 100644 files/fr/web/css/border-left-width/index.html create mode 100644 files/fr/web/css/border-left/index.html create mode 100644 files/fr/web/css/border-radius/index.html create mode 100644 files/fr/web/css/border-right-color/index.html create mode 100644 files/fr/web/css/border-right-style/index.html create mode 100644 files/fr/web/css/border-right-width/index.html create mode 100644 files/fr/web/css/border-right/index.html create mode 100644 files/fr/web/css/border-spacing/index.html create mode 100644 files/fr/web/css/border-start-end-radius/index.html create mode 100644 files/fr/web/css/border-start-start-radius/index.html create mode 100644 files/fr/web/css/border-style/index.html create mode 100644 files/fr/web/css/border-top-color/index.html create mode 100644 files/fr/web/css/border-top-left-radius/index.html create mode 100644 files/fr/web/css/border-top-right-radius/index.html create mode 100644 files/fr/web/css/border-top-style/index.html create mode 100644 files/fr/web/css/border-top-width/index.html create mode 100644 files/fr/web/css/border-top/index.html create mode 100644 files/fr/web/css/border-width/index.html create mode 100644 files/fr/web/css/border/index.html create mode 100644 files/fr/web/css/bottom/index.html create mode 100644 files/fr/web/css/box-align/index.html create mode 100644 files/fr/web/css/box-decoration-break/index.html create mode 100644 files/fr/web/css/box-direction/index.html create mode 100644 files/fr/web/css/box-flex-group/index.html create mode 100644 files/fr/web/css/box-flex/index.html create mode 100644 files/fr/web/css/box-lines/index.html create mode 100644 files/fr/web/css/box-ordinal-group/index.html create mode 100644 files/fr/web/css/box-orient/index.html create mode 100644 files/fr/web/css/box-pack/index.html create mode 100644 files/fr/web/css/box-shadow/index.html create mode 100644 files/fr/web/css/box-sizing/index.html create mode 100644 files/fr/web/css/break-after/index.html create mode 100644 files/fr/web/css/break-before/index.html create mode 100644 files/fr/web/css/break-inside/index.html create mode 100644 files/fr/web/css/calc()/index.html create mode 100644 files/fr/web/css/caption-side/index.html create mode 100644 files/fr/web/css/caret-color/index.html create mode 100644 files/fr/web/css/clamp()/index.html create mode 100644 files/fr/web/css/clear/index.html create mode 100644 files/fr/web/css/clip-path/index.html create mode 100644 files/fr/web/css/clip/index.html create mode 100644 files/fr/web/css/color-adjust/index.html create mode 100644 files/fr/web/css/color/index.html create mode 100644 files/fr/web/css/column-count/index.html create mode 100644 files/fr/web/css/column-fill/index.html create mode 100644 files/fr/web/css/column-gap/index.html create mode 100644 files/fr/web/css/column-rule-color/index.html create mode 100644 files/fr/web/css/column-rule-style/index.html create mode 100644 files/fr/web/css/column-rule-width/index.html create mode 100644 files/fr/web/css/column-rule/index.html create mode 100644 files/fr/web/css/column-span/index.html create mode 100644 files/fr/web/css/column-width/index.html create mode 100644 files/fr/web/css/columns/index.html create mode 100644 files/fr/web/css/combinateur_colonne/index.html create mode 100644 files/fr/web/css/combinateur_de_voisin_direct/index.html create mode 100644 files/fr/web/css/comments/index.html create mode 100644 files/fr/web/css/compartimentation_css/index.html create mode 100644 files/fr/web/css/compositing_and_blending/index.html create mode 100644 files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html create mode 100644 files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html create mode 100644 files/fr/web/css/comprendre_z-index/empilement_et_float/index.html create mode 100644 files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html create mode 100644 files/fr/web/css/comprendre_z-index/exemple_1/index.html create mode 100644 files/fr/web/css/comprendre_z-index/exemple_2/index.html create mode 100644 files/fr/web/css/comprendre_z-index/exemple_3/index.html create mode 100644 files/fr/web/css/comprendre_z-index/index.html create mode 100644 files/fr/web/css/concepts_viewport/index.html create mode 100644 files/fr/web/css/conic-gradient()/index.html create mode 100644 files/fr/web/css/contain/index.html create mode 100644 files/fr/web/css/content/index.html create mode 100644 files/fr/web/css/contexte_de_formatage_en_ligne/index.html create mode 100644 files/fr/web/css/couleurs_css/index.html create mode 100644 "files/fr/web/css/couleurs_css/s\303\251lecteur_de_couleurs/index.html" create mode 100644 files/fr/web/css/counter()/index.html create mode 100644 files/fr/web/css/counter-increment/index.html create mode 100644 files/fr/web/css/counter-reset/index.html create mode 100644 files/fr/web/css/counter-set/index.html create mode 100644 files/fr/web/css/counters()/index.html create mode 100644 files/fr/web/css/cross-fade()/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html create mode 100644 "files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arri\303\250re-plans/index.html" create mode 100644 files/fr/web/css/css_basic_user_interface/index.html create mode 100644 "files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propri\303\251t\303\251_cursor/index.html" create mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" create mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" create mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" create mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" create mode 100644 files/fr/web/css/css_box_alignment/index.html create mode 100644 files/fr/web/css/css_color/index.html create mode 100644 files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html create mode 100644 "files/fr/web/css/css_columns/gestion_d\303\251passement_multi-colonnes/index.html" create mode 100644 "files/fr/web/css/css_columns/g\303\251rer_rupture_contenu_entre_colonnes/index.html" create mode 100644 files/fr/web/css/css_columns/index.html create mode 100644 files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html create mode 100644 "files/fr/web/css/css_columns/r\303\251partir_entre_les_colonnes/index.html" create mode 100644 files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html create mode 100644 files/fr/web/css/css_conditional_rules/index.html create mode 100644 "files/fr/web/css/css_conditional_rules/utiliser_requ\303\252tes_fonctionnalit\303\251_(feature_queries)/index.html" create mode 100644 files/fr/web/css/css_counter_styles/index.html create mode 100644 files/fr/web/css/css_device_adaptation/index.html create mode 100644 files/fr/web/css/css_display/index.html create mode 100644 "files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" create mode 100644 "files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" create mode 100644 files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html create mode 100644 "files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" create mode 100644 files/fr/web/css/css_flexible_box_layout/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html create mode 100644 "files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" create mode 100644 files/fr/web/css/css_flexible_box_layout/mixins/index.html create mode 100644 "files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" create mode 100644 "files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" create mode 100644 files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html create mode 100644 files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html create mode 100644 "files/fr/web/css/css_flow_layout/disposition_flux_et_d\303\251passement/index.html" create mode 100644 "files/fr/web/css/css_flow_layout/disposition_flux_et_modes_\303\251criture/index.html" create mode 100644 files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html create mode 100644 files/fr/web/css/css_flow_layout/index.html create mode 100644 "files/fr/web/css/css_fonts/guide_caract\303\251ristiques_police_opentype/index.html" create mode 100644 files/fr/web/css/css_fonts/guide_polices_variables/index.html create mode 100644 files/fr/web/css/css_fonts/index.html create mode 100644 files/fr/web/css/css_fragmentation/index.html create mode 100644 files/fr/web/css/css_generated_content/index.html create mode 100644 "files/fr/web/css/css_grid_layout/alignement_des_bo\303\256tes_avec_les_grilles_css/index.html" create mode 100644 files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html create mode 100644 "files/fr/web/css/css_grid_layout/d\303\251finir_des_zones_sur_une_grille/index.html" create mode 100644 files/fr/web/css/css_grid_layout/index.html create mode 100644 files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html create mode 100644 "files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilit\303\251/index.html" create mode 100644 "files/fr/web/css/css_grid_layout/les_grilles_css_et_l_am\303\251lioration_progressive/index.html" create mode 100644 "files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_\303\251criture/index.html" create mode 100644 "files/fr/web/css/css_grid_layout/mod\303\250le_de_grille_et_autres_mod\303\250les_de_disposition/index.html" create mode 100644 files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html create mode 100644 "files/fr/web/css/css_grid_layout/placer_les_\303\251l\303\251ments_sur_les_lignes_d_une_grille_css/index.html" create mode 100644 files/fr/web/css/css_grid_layout/subgrid/index.html create mode 100644 "files/fr/web/css/css_grid_layout/utiliser_des_lignes_nomm\303\251es_sur_une_grille/index.html" create mode 100644 files/fr/web/css/css_images/index.html create mode 100644 files/fr/web/css/css_images/sprites_css/index.html create mode 100644 files/fr/web/css/css_lists/compteurs_css/index.html create mode 100644 "files/fr/web/css/css_lists/indentation_homog\303\250ne_des_listes/index.html" create mode 100644 files/fr/web/css/css_lists/index.html create mode 100644 files/fr/web/css/css_logical_properties/concepts_de_base/index.html create mode 100644 files/fr/web/css/css_logical_properties/dimensionnement/index.html create mode 100644 files/fr/web/css/css_logical_properties/index.html create mode 100644 "files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_flottements_positionnement/index.html" create mode 100644 "files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_marges_bordures_remplissages/index.html" create mode 100644 files/fr/web/css/css_masks/index.html create mode 100644 files/fr/web/css/css_miscellaneous/index.html create mode 100644 files/fr/web/css/css_namespaces/index.html create mode 100644 files/fr/web/css/css_overflow/index.html create mode 100644 files/fr/web/css/css_pages/index.html create mode 100644 files/fr/web/css/css_positioning/index.html create mode 100644 files/fr/web/css/css_properties_reference/index.html create mode 100644 files/fr/web/css/css_questions_frequentes/index.html create mode 100644 files/fr/web/css/css_ruby/index.html create mode 100644 "files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" create mode 100644 files/fr/web/css/css_scroll_snap/concepts_de_base/index.html create mode 100644 files/fr/web/css/css_scroll_snap/index.html create mode 100644 files/fr/web/css/css_scroll_snap_points/index.html create mode 100644 files/fr/web/css/css_scrollbars/index.html create mode 100644 "files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" create mode 100644 "files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" create mode 100644 files/fr/web/css/css_shapes/formes_simples/index.html create mode 100644 "files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" create mode 100644 files/fr/web/css/css_shapes/index.html create mode 100644 files/fr/web/css/css_table/index.html create mode 100644 files/fr/web/css/css_text/index.html create mode 100644 files/fr/web/css/css_text_decoration/index.html create mode 100644 files/fr/web/css/css_transforms/index.html create mode 100644 files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html create mode 100644 files/fr/web/css/css_transitions/index.html create mode 100644 files/fr/web/css/css_transitions/utiliser_transitions_css/index.html create mode 100644 files/fr/web/css/css_variables/index.html create mode 100644 files/fr/web/css/css_writing_modes/index.html create mode 100644 files/fr/web/css/cssom_view/index.html create mode 100644 "files/fr/web/css/cssom_view/syst\303\250mes_de_coordonn\303\251es/index.html" create mode 100644 files/fr/web/css/cursor/index.html create mode 100644 files/fr/web/css/custom-ident/index.html create mode 100644 files/fr/web/css/dimension/index.html create mode 100644 files/fr/web/css/direction/index.html create mode 100644 files/fr/web/css/display-box/index.html create mode 100644 files/fr/web/css/display-inside/index.html create mode 100644 files/fr/web/css/display-internal/index.html create mode 100644 files/fr/web/css/display-legacy/index.html create mode 100644 files/fr/web/css/display-listitem/index.html create mode 100644 files/fr/web/css/display-outside/index.html create mode 100644 files/fr/web/css/display/index.html create mode 100644 files/fr/web/css/element()/index.html create mode 100644 files/fr/web/css/empty-cells/index.html create mode 100644 files/fr/web/css/env()/index.html create mode 100644 files/fr/web/css/extensions_css_microsoft/index.html create mode 100644 files/fr/web/css/extensions_mozilla/index.html create mode 100644 files/fr/web/css/feuilles_de_style_alternatives/index.html create mode 100644 files/fr/web/css/filter-function/blur()/index.html create mode 100644 files/fr/web/css/filter-function/brightness()/index.html create mode 100644 files/fr/web/css/filter-function/contrast()/index.html create mode 100644 files/fr/web/css/filter-function/drop-shadow()/index.html create mode 100644 files/fr/web/css/filter-function/grayscale()/index.html create mode 100644 files/fr/web/css/filter-function/hue-rotate()/index.html create mode 100644 files/fr/web/css/filter-function/index.html create mode 100644 files/fr/web/css/filter-function/invert()/index.html create mode 100644 files/fr/web/css/filter-function/opacity()/index.html create mode 100644 files/fr/web/css/filter-function/saturate()/index.html create mode 100644 files/fr/web/css/filter-function/sepia()/index.html create mode 100644 files/fr/web/css/filter-function/url/index.html create mode 100644 files/fr/web/css/filter/index.html create mode 100644 files/fr/web/css/filter_effects/index.html create mode 100644 files/fr/web/css/filters_effects/index.html create mode 100644 files/fr/web/css/fit-content/index.html create mode 100644 files/fr/web/css/flex-basis/index.html create mode 100644 files/fr/web/css/flex-direction/index.html create mode 100644 files/fr/web/css/flex-flow/index.html create mode 100644 files/fr/web/css/flex-grow/index.html create mode 100644 files/fr/web/css/flex-shrink/index.html create mode 100644 files/fr/web/css/flex-wrap/index.html create mode 100644 files/fr/web/css/flex/index.html create mode 100644 files/fr/web/css/flex_value/index.html create mode 100644 files/fr/web/css/float/index.html create mode 100644 files/fr/web/css/font-family/index.html create mode 100644 files/fr/web/css/font-feature-settings/index.html create mode 100644 files/fr/web/css/font-kerning/index.html create mode 100644 files/fr/web/css/font-language-override/index.html create mode 100644 files/fr/web/css/font-optical-sizing/index.html create mode 100644 files/fr/web/css/font-size-adjust/index.html create mode 100644 files/fr/web/css/font-size/index.html create mode 100644 files/fr/web/css/font-smooth/index.html create mode 100644 files/fr/web/css/font-stretch/index.html create mode 100644 files/fr/web/css/font-style/index.html create mode 100644 files/fr/web/css/font-synthesis/index.html create mode 100644 files/fr/web/css/font-variant-alternates/index.html create mode 100644 files/fr/web/css/font-variant-caps/index.html create mode 100644 files/fr/web/css/font-variant-east-asian/index.html create mode 100644 files/fr/web/css/font-variant-ligatures/index.html create mode 100644 files/fr/web/css/font-variant-numeric/index.html create mode 100644 files/fr/web/css/font-variant-position/index.html create mode 100644 files/fr/web/css/font-variant/index.html create mode 100644 files/fr/web/css/font-variation-settings/index.html create mode 100644 files/fr/web/css/font-weight/index.html create mode 100644 files/fr/web/css/font/index.html create mode 100644 files/fr/web/css/frequency-percentage/index.html create mode 100644 files/fr/web/css/frequency/index.html create mode 100644 files/fr/web/css/gap/index.html create mode 100644 files/fr/web/css/gradient/index.html create mode 100644 files/fr/web/css/grid-area/index.html create mode 100644 files/fr/web/css/grid-auto-columns/index.html create mode 100644 files/fr/web/css/grid-auto-flow/index.html create mode 100644 files/fr/web/css/grid-auto-rows/index.html create mode 100644 files/fr/web/css/grid-column-end/index.html create mode 100644 files/fr/web/css/grid-column-gap/index.html create mode 100644 files/fr/web/css/grid-column-start/index.html create mode 100644 files/fr/web/css/grid-column/index.html create mode 100644 files/fr/web/css/grid-row-end/index.html create mode 100644 files/fr/web/css/grid-row-start/index.html create mode 100644 files/fr/web/css/grid-row/index.html create mode 100644 files/fr/web/css/grid-template-areas/index.html create mode 100644 files/fr/web/css/grid-template-columns/index.html create mode 100644 files/fr/web/css/grid-template-rows/index.html create mode 100644 files/fr/web/css/grid-template/index.html create mode 100644 files/fr/web/css/grid/index.html create mode 100644 files/fr/web/css/hanging-punctuation/index.html create mode 100644 files/fr/web/css/height/index.html create mode 100644 files/fr/web/css/hyphens/index.html create mode 100644 "files/fr/web/css/h\303\251ritage/index.html" create mode 100644 files/fr/web/css/image()/index.html create mode 100644 files/fr/web/css/image-orientation/index.html create mode 100644 files/fr/web/css/image-rendering/index.html create mode 100644 files/fr/web/css/image-set()/index.html create mode 100644 files/fr/web/css/image/index.html create mode 100644 files/fr/web/css/ime-mode/index.html create mode 100644 "files/fr/web/css/impl\303\251mentation_des_brouillons_css/index.html" create mode 100644 files/fr/web/css/index.html create mode 100644 files/fr/web/css/index/index.html create mode 100644 files/fr/web/css/inherit/index.html create mode 100644 files/fr/web/css/initial-letter-align/index.html create mode 100644 files/fr/web/css/initial-letter/index.html create mode 100644 files/fr/web/css/initial/index.html create mode 100644 files/fr/web/css/inline-size/index.html create mode 100644 files/fr/web/css/inset-block/index.html create mode 100644 files/fr/web/css/inset-inline/index.html create mode 100644 files/fr/web/css/inset/index.html create mode 100644 files/fr/web/css/integer/index.html create mode 100644 files/fr/web/css/isolation/index.html create mode 100644 "files/fr/web/css/jeux_de_caract\303\250res_css/index.html" create mode 100644 files/fr/web/css/justify-content/index.html create mode 100644 files/fr/web/css/justify-items/index.html create mode 100644 files/fr/web/css/justify-self/index.html create mode 100644 "files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" create mode 100644 files/fr/web/css/layout_cookbook/carte/index.html create mode 100644 files/fr/web/css/layout_cookbook/centrer_un_element/index.html create mode 100644 "files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" create mode 100644 "files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" create mode 100644 files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html create mode 100644 files/fr/web/css/layout_cookbook/grid_wrapper/index.html create mode 100644 files/fr/web/css/layout_cookbook/index.html create mode 100644 files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html create mode 100644 files/fr/web/css/layout_cookbook/media_objects/index.html create mode 100644 files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html create mode 100644 "files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" create mode 100644 files/fr/web/css/layout_cookbook/pagination/index.html create mode 100644 files/fr/web/css/left/index.html create mode 100644 files/fr/web/css/length-percentage/index.html create mode 100644 files/fr/web/css/length/index.html create mode 100644 files/fr/web/css/letter-spacing/index.html create mode 100644 files/fr/web/css/line-break/index.html create mode 100644 files/fr/web/css/line-height-step/index.html create mode 100644 files/fr/web/css/line-height/index.html create mode 100644 files/fr/web/css/linear-gradient()/index.html create mode 100644 files/fr/web/css/list-style-image/index.html create mode 100644 files/fr/web/css/list-style-position/index.html create mode 100644 files/fr/web/css/list-style-type/index.html create mode 100644 files/fr/web/css/list-style/index.html create mode 100644 "files/fr/web/css/liste_de_fonctionnalit\303\251s_css_propri\303\251taires/index.html" create mode 100644 "files/fr/web/css/liste_propri\303\251t\303\251s_css_anim\303\251es/index.html" create mode 100644 files/fr/web/css/margin-block-end/index.html create mode 100644 files/fr/web/css/margin-block-start/index.html create mode 100644 files/fr/web/css/margin-block/index.html create mode 100644 files/fr/web/css/margin-bottom/index.html create mode 100644 files/fr/web/css/margin-inline-end/index.html create mode 100644 files/fr/web/css/margin-inline-start/index.html create mode 100644 files/fr/web/css/margin-inline/index.html create mode 100644 files/fr/web/css/margin-left/index.html create mode 100644 files/fr/web/css/margin-right/index.html create mode 100644 files/fr/web/css/margin-top/index.html create mode 100644 files/fr/web/css/margin-trim/index.html create mode 100644 files/fr/web/css/margin/index.html create mode 100644 files/fr/web/css/mask-border-mode/index.html create mode 100644 files/fr/web/css/mask-border-outset/index.html create mode 100644 files/fr/web/css/mask-border-repeat/index.html create mode 100644 files/fr/web/css/mask-border-slice/index.html create mode 100644 files/fr/web/css/mask-border-source/index.html create mode 100644 files/fr/web/css/mask-border-width/index.html create mode 100644 files/fr/web/css/mask-border/index.html create mode 100644 files/fr/web/css/mask-clip/index.html create mode 100644 files/fr/web/css/mask-composite/index.html create mode 100644 files/fr/web/css/mask-image/index.html create mode 100644 files/fr/web/css/mask-mode/index.html create mode 100644 files/fr/web/css/mask-origin/index.html create mode 100644 files/fr/web/css/mask-position/index.html create mode 100644 files/fr/web/css/mask-repeat/index.html create mode 100644 files/fr/web/css/mask-size/index.html create mode 100644 files/fr/web/css/mask-type/index.html create mode 100644 files/fr/web/css/mask/index.html create mode 100644 files/fr/web/css/max()/index.html create mode 100644 files/fr/web/css/max-block-size/index.html create mode 100644 files/fr/web/css/max-height/index.html create mode 100644 files/fr/web/css/max-inline-size/index.html create mode 100644 files/fr/web/css/max-width/index.html create mode 100644 files/fr/web/css/min()/index.html create mode 100644 files/fr/web/css/min-block-size/index.html create mode 100644 files/fr/web/css/min-height/index.html create mode 100644 files/fr/web/css/min-inline-size/index.html create mode 100644 files/fr/web/css/min-width/index.html create mode 100644 files/fr/web/css/minmax()/index.html create mode 100644 files/fr/web/css/mix-blend-mode/index.html create mode 100644 files/fr/web/css/mode_de_mise_en_page/index.html create mode 100644 "files/fr/web/css/mod\303\250le_de_bo\303\256te_css/fusion_des_marges/index.html" create mode 100644 "files/fr/web/css/mod\303\250le_de_bo\303\256te_css/g\303\251n\303\251rateur_box-shadow/index.html" create mode 100644 "files/fr/web/css/mod\303\250le_de_bo\303\256te_css/index.html" create mode 100644 "files/fr/web/css/mod\303\250le_de_mise_en_forme_visuelle/index.html" create mode 100644 files/fr/web/css/motion_path/index.html create mode 100644 "files/fr/web/css/m\303\251dia_pagin\303\251s/index.html" create mode 100644 files/fr/web/css/none/index.html create mode 100644 files/fr/web/css/normal/index.html create mode 100644 files/fr/web/css/number/index.html create mode 100644 files/fr/web/css/object-fit/index.html create mode 100644 files/fr/web/css/object-position/index.html create mode 100644 files/fr/web/css/offset-anchor/index.html create mode 100644 files/fr/web/css/offset-distance/index.html create mode 100644 files/fr/web/css/offset-path/index.html create mode 100644 files/fr/web/css/offset-position/index.html create mode 100644 files/fr/web/css/offset-rotate/index.html create mode 100644 files/fr/web/css/offset/index.html create mode 100644 files/fr/web/css/opacity/index.html create mode 100644 files/fr/web/css/order/index.html create mode 100644 files/fr/web/css/orphans/index.html create mode 100644 "files/fr/web/css/outils/g\303\251n\303\251rateur_de_courbe_de_b\303\251zier/index.html" create mode 100644 "files/fr/web/css/outils/g\303\251n\303\251rateur_de_d\303\251grad\303\251s_lin\303\251aires/index.html" create mode 100644 files/fr/web/css/outils/index.html create mode 100644 files/fr/web/css/outline-color/index.html create mode 100644 files/fr/web/css/outline-offset/index.html create mode 100644 files/fr/web/css/outline-style/index.html create mode 100644 files/fr/web/css/outline-width/index.html create mode 100644 files/fr/web/css/outline/index.html create mode 100644 "files/fr/web/css/overflow-anchor/guide_ancrage_d\303\251filement/index.html" create mode 100644 files/fr/web/css/overflow-anchor/index.html create mode 100644 files/fr/web/css/overflow-block/index.html create mode 100644 files/fr/web/css/overflow-clip-box-block/index.html create mode 100644 files/fr/web/css/overflow-clip-box-inline/index.html create mode 100644 files/fr/web/css/overflow-clip-box/index.html create mode 100644 files/fr/web/css/overflow-inline/index.html create mode 100644 files/fr/web/css/overflow-wrap/index.html create mode 100644 files/fr/web/css/overflow-x/index.html create mode 100644 files/fr/web/css/overflow-y/index.html create mode 100644 files/fr/web/css/overflow/index.html create mode 100644 files/fr/web/css/overscroll-behavior-x/index.html create mode 100644 files/fr/web/css/overscroll-behavior-y/index.html create mode 100644 files/fr/web/css/overscroll-behavior/index.html create mode 100644 files/fr/web/css/padding-block-end/index.html create mode 100644 files/fr/web/css/padding-block-start/index.html create mode 100644 files/fr/web/css/padding-block/index.html create mode 100644 files/fr/web/css/padding-bottom/index.html create mode 100644 files/fr/web/css/padding-inline-end/index.html create mode 100644 files/fr/web/css/padding-inline-start/index.html create mode 100644 files/fr/web/css/padding-inline/index.html create mode 100644 files/fr/web/css/padding-left/index.html create mode 100644 files/fr/web/css/padding-right/index.html create mode 100644 files/fr/web/css/padding-top/index.html create mode 100644 files/fr/web/css/padding/index.html create mode 100644 files/fr/web/css/page-break-after/index.html create mode 100644 files/fr/web/css/page-break-before/index.html create mode 100644 files/fr/web/css/page-break-inside/index.html create mode 100644 files/fr/web/css/paint()/index.html create mode 100644 files/fr/web/css/paint-order/index.html create mode 100644 files/fr/web/css/percentage/index.html create mode 100644 files/fr/web/css/perspective-origin/index.html create mode 100644 files/fr/web/css/perspective/index.html create mode 100644 files/fr/web/css/place-content/index.html create mode 100644 files/fr/web/css/place-items/index.html create mode 100644 files/fr/web/css/place-self/index.html create mode 100644 files/fr/web/css/pointer-events/index.html create mode 100644 files/fr/web/css/position/index.html create mode 100644 "files/fr/web/css/propri\303\251t\303\251s_raccourcies/index.html" create mode 100644 files/fr/web/css/pseudo-classes/index.html create mode 100644 "files/fr/web/css/pseudo-\303\251l\303\251ments/index.html" create mode 100644 files/fr/web/css/quotes/index.html create mode 100644 files/fr/web/css/radial-gradient()/index.html create mode 100644 files/fr/web/css/ratio/index.html create mode 100644 "files/fr/web/css/redimensionnement_arri\303\250re-plans_svg/index.html" create mode 100644 files/fr/web/css/reference/index.html create mode 100644 files/fr/web/css/repeat()/index.html create mode 100644 files/fr/web/css/repeating-conic-gradient()/index.html create mode 100644 files/fr/web/css/repeating-linear-gradient()/index.html create mode 100644 files/fr/web/css/repeating-radial-gradient()/index.html create mode 100644 "files/fr/web/css/requ\303\252tes_m\303\251dia/index.html" create mode 100644 "files/fr/web/css/requ\303\252tes_m\303\251dia/tester_les_media_queries/index.html" create mode 100644 "files/fr/web/css/requ\303\252tes_m\303\251dia/utilisation_requ\303\252tes_media_accessibilit\303\251/index.html" create mode 100644 "files/fr/web/css/requ\303\252tes_m\303\251dia/utiliser_les_media_queries/index.html" create mode 100644 files/fr/web/css/resize/index.html create mode 100644 files/fr/web/css/resolution/index.html create mode 100644 files/fr/web/css/revert/index.html create mode 100644 files/fr/web/css/right/index.html create mode 100644 files/fr/web/css/rotate/index.html create mode 100644 files/fr/web/css/row-gap/index.html create mode 100644 files/fr/web/css/ruby-align/index.html create mode 100644 files/fr/web/css/ruby-position/index.html create mode 100644 "files/fr/web/css/r\303\250gles_@/index.html" create mode 100644 files/fr/web/css/scale/index.html create mode 100644 files/fr/web/css/scroll-behavior/index.html create mode 100644 files/fr/web/css/scroll-margin-block-end/index.html create mode 100644 files/fr/web/css/scroll-margin-block-start/index.html create mode 100644 files/fr/web/css/scroll-margin-block/index.html create mode 100644 files/fr/web/css/scroll-margin-bottom/index.html create mode 100644 files/fr/web/css/scroll-margin-inline-end/index.html create mode 100644 files/fr/web/css/scroll-margin-inline-start/index.html create mode 100644 files/fr/web/css/scroll-margin-inline/index.html create mode 100644 files/fr/web/css/scroll-margin-left/index.html create mode 100644 files/fr/web/css/scroll-margin-right/index.html create mode 100644 files/fr/web/css/scroll-margin-top/index.html create mode 100644 files/fr/web/css/scroll-margin/index.html create mode 100644 files/fr/web/css/scroll-padding-block-end/index.html create mode 100644 files/fr/web/css/scroll-padding-block-start/index.html create mode 100644 files/fr/web/css/scroll-padding-block/index.html create mode 100644 files/fr/web/css/scroll-padding-bottom/index.html create mode 100644 files/fr/web/css/scroll-padding-inline-end/index.html create mode 100644 files/fr/web/css/scroll-padding-inline-start/index.html create mode 100644 files/fr/web/css/scroll-padding-inline/index.html create mode 100644 files/fr/web/css/scroll-padding-left/index.html create mode 100644 files/fr/web/css/scroll-padding-right/index.html create mode 100644 files/fr/web/css/scroll-padding-top/index.html create mode 100644 files/fr/web/css/scroll-padding/index.html create mode 100644 files/fr/web/css/scroll-snap-align/index.html create mode 100644 files/fr/web/css/scroll-snap-coordinate/index.html create mode 100644 files/fr/web/css/scroll-snap-destination/index.html create mode 100644 files/fr/web/css/scroll-snap-points-x/index.html create mode 100644 files/fr/web/css/scroll-snap-points-y/index.html create mode 100644 files/fr/web/css/scroll-snap-stop/index.html create mode 100644 files/fr/web/css/scroll-snap-type-x/index.html create mode 100644 files/fr/web/css/scroll-snap-type-y/index.html create mode 100644 files/fr/web/css/scroll-snap-type/index.html create mode 100644 files/fr/web/css/scrollbar-color/index.html create mode 100644 files/fr/web/css/scrollbar-width/index.html create mode 100644 files/fr/web/css/selector_list/index.html create mode 100644 files/fr/web/css/shape-box/index.html create mode 100644 files/fr/web/css/shape-image-threshold/index.html create mode 100644 files/fr/web/css/shape-margin/index.html create mode 100644 files/fr/web/css/shape-outside/index.html create mode 100644 files/fr/web/css/shape/index.html create mode 100644 files/fr/web/css/string/index.html create mode 100644 files/fr/web/css/symbols()/index.html create mode 100644 "files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" create mode 100644 "files/fr/web/css/s\303\251lecteurs_css/comparison_with_xpath/index.html" create mode 100644 "files/fr/web/css/s\303\251lecteurs_css/index.html" create mode 100644 "files/fr/web/css/s\303\251lecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html" create mode 100644 "files/fr/web/css/s\303\251lecteurs_d_attribut/index.html" create mode 100644 "files/fr/web/css/s\303\251lecteurs_d_id/index.html" create mode 100644 "files/fr/web/css/s\303\251lecteurs_de_classe/index.html" create mode 100644 "files/fr/web/css/s\303\251lecteurs_de_type/index.html" create mode 100644 "files/fr/web/css/s\303\251lecteurs_de_voisins_g\303\251n\303\251raux/index.html" create mode 100644 "files/fr/web/css/s\303\251lecteurs_descendant/index.html" create mode 100644 "files/fr/web/css/s\303\251lecteurs_enfant/index.html" create mode 100644 "files/fr/web/css/s\303\251lecteurs_universels/index.html" create mode 100644 files/fr/web/css/tab-size/index.html create mode 100644 files/fr/web/css/table-layout/index.html create mode 100644 files/fr/web/css/text-align-last/index.html create mode 100644 files/fr/web/css/text-align/index.html create mode 100644 files/fr/web/css/text-combine-upright/index.html create mode 100644 files/fr/web/css/text-decoration-color/index.html create mode 100644 files/fr/web/css/text-decoration-line/index.html create mode 100644 files/fr/web/css/text-decoration-skip-ink/index.html create mode 100644 files/fr/web/css/text-decoration-skip/index.html create mode 100644 files/fr/web/css/text-decoration-style/index.html create mode 100644 files/fr/web/css/text-decoration-thickness/index.html create mode 100644 files/fr/web/css/text-decoration/index.html create mode 100644 files/fr/web/css/text-emphasis-color/index.html create mode 100644 files/fr/web/css/text-emphasis-position/index.html create mode 100644 files/fr/web/css/text-emphasis-style/index.html create mode 100644 files/fr/web/css/text-emphasis/index.html create mode 100644 files/fr/web/css/text-indent/index.html create mode 100644 files/fr/web/css/text-justify/index.html create mode 100644 files/fr/web/css/text-orientation/index.html create mode 100644 files/fr/web/css/text-overflow/index.html create mode 100644 files/fr/web/css/text-rendering/index.html create mode 100644 files/fr/web/css/text-shadow/index.html create mode 100644 files/fr/web/css/text-size-adjust/index.html create mode 100644 files/fr/web/css/text-transform/index.html create mode 100644 files/fr/web/css/text-underline-offset/index.html create mode 100644 files/fr/web/css/text-underline-position/index.html create mode 100644 files/fr/web/css/time-percentage/index.html create mode 100644 files/fr/web/css/time/index.html create mode 100644 files/fr/web/css/timing-function/index.html create mode 100644 files/fr/web/css/top/index.html create mode 100644 files/fr/web/css/touch-action/index.html create mode 100644 files/fr/web/css/transform-box/index.html create mode 100644 files/fr/web/css/transform-function/index.html create mode 100644 files/fr/web/css/transform-function/matrix()/index.html create mode 100644 files/fr/web/css/transform-function/matrix3d()/index.html create mode 100644 files/fr/web/css/transform-function/perspective()/index.html create mode 100644 files/fr/web/css/transform-function/rotate()/index.html create mode 100644 files/fr/web/css/transform-function/rotate3d()/index.html create mode 100644 files/fr/web/css/transform-function/rotatex()/index.html create mode 100644 files/fr/web/css/transform-function/rotatey()/index.html create mode 100644 files/fr/web/css/transform-function/rotatez()/index.html create mode 100644 files/fr/web/css/transform-function/scale()/index.html create mode 100644 files/fr/web/css/transform-function/scale3d()/index.html create mode 100644 files/fr/web/css/transform-function/scalex()/index.html create mode 100644 files/fr/web/css/transform-function/scaley()/index.html create mode 100644 files/fr/web/css/transform-function/scalez()/index.html create mode 100644 files/fr/web/css/transform-function/skew()/index.html create mode 100644 files/fr/web/css/transform-function/skewx()/index.html create mode 100644 files/fr/web/css/transform-function/skewy()/index.html create mode 100644 files/fr/web/css/transform-function/translate()/index.html create mode 100644 files/fr/web/css/transform-function/translate3d()/index.html create mode 100644 files/fr/web/css/transform-function/translatex/index.html create mode 100644 files/fr/web/css/transform-function/translatey()/index.html create mode 100644 files/fr/web/css/transform-function/translatez()/index.html create mode 100644 files/fr/web/css/transform-origin/index.html create mode 100644 files/fr/web/css/transform-style/index.html create mode 100644 files/fr/web/css/transform/index.html create mode 100644 files/fr/web/css/transition-delay/index.html create mode 100644 files/fr/web/css/transition-duration/index.html create mode 100644 files/fr/web/css/transition-property/index.html create mode 100644 files/fr/web/css/transition-timing-function/index.html create mode 100644 files/fr/web/css/transition/index.html create mode 100644 files/fr/web/css/translate/index.html create mode 100644 files/fr/web/css/translation-value/index.html create mode 100644 files/fr/web/css/tutorials/index.html create mode 100644 files/fr/web/css/type_color/index.html create mode 100644 files/fr/web/css/type_position/index.html create mode 100644 files/fr/web/css/types_css/index.html create mode 100644 files/fr/web/css/unicode-bidi/index.html create mode 100644 files/fr/web/css/unset/index.html create mode 100644 files/fr/web/css/url()/index.html create mode 100644 files/fr/web/css/url/index.html create mode 100644 files/fr/web/css/user-modify/index.html create mode 100644 files/fr/web/css/user-select/index.html create mode 100644 files/fr/web/css/using_css_custom_properties/index.html create mode 100644 "files/fr/web/css/utilisation_de_d\303\251grad\303\251s_css/index.html" create mode 100644 "files/fr/web/css/valeur_calcul\303\251e/index.html" create mode 100644 files/fr/web/css/valeur_initiale/index.html create mode 100644 files/fr/web/css/valeur_reelle/index.html create mode 100644 "files/fr/web/css/valeur_r\303\251solue/index.html" create mode 100644 "files/fr/web/css/valeur_sp\303\251cifi\303\251e/index.html" create mode 100644 "files/fr/web/css/valeur_utilis\303\251e/index.html" create mode 100644 "files/fr/web/css/valeurs_et_unit\303\251s_css/index.html" create mode 100644 files/fr/web/css/var()/index.html create mode 100644 files/fr/web/css/vertical-align/index.html create mode 100644 files/fr/web/css/visibility/index.html create mode 100644 files/fr/web/css/webkit_extensions/index.html create mode 100644 files/fr/web/css/white-space/index.html create mode 100644 files/fr/web/css/widows/index.html create mode 100644 files/fr/web/css/width/index.html create mode 100644 files/fr/web/css/will-change/index.html create mode 100644 files/fr/web/css/word-break/index.html create mode 100644 files/fr/web/css/word-spacing/index.html create mode 100644 files/fr/web/css/writing-mode/index.html create mode 100644 files/fr/web/css/z-index/index.html create mode 100644 files/fr/web/css/zoom/index.html create mode 100644 "files/fr/web/css/\303\251l\303\251ment_remplac\303\251/index.html" (limited to 'files/fr/web/css') diff --git a/files/fr/web/css/--_star_/index.html b/files/fr/web/css/--_star_/index.html new file mode 100644 index 0000000000..9f1c30cbba --- /dev/null +++ b/files/fr/web/css/--_star_/index.html @@ -0,0 +1,93 @@ +--- +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-binding/index.html b/files/fr/web/css/-moz-binding/index.html new file mode 100644 index 0000000000..509abfe15a --- /dev/null +++ b/files/fr/web/css/-moz-binding/index.html @@ -0,0 +1,64 @@ +--- +title: '-moz-binding' +slug: Web/CSS/-moz-binding +tags: + - CSS + - Déprécié + - Non-standard + - Propriété + - Reference + - XBL +translation_of: Archive/Web/CSS/-moz-binding +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -moz-binding, utilisée par les applications Mozilla, permet d'attacher une liaison (binding) XBL à un élément DOM.

+ +

{{cssinfo}}

+ +

Syntaxe

+ +
/* Valeur de type <url> */
+-moz-binding: url(http://www.exemple.org/xbl/htmlBindings.xml#checkbox);
+
+/* Valeurs globales */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+
+ +

Valeurs

+ +
+
<url>
+
L'URL (typ {{cssxref("<url>")}} depuis laquelle effectuer la liaison XBL (l'URL inclue le fragment d'identification)
+
none
+
Aucune liaison XBL n'est appliquée à l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
.exemple {
+  -moz-binding: url(http://www.exemple.org/xbl/htmlBindings.xml#radiobutton);
+}
+ +

Spécifications

+ +

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

+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-moz-border-bottom-colors/index.html b/files/fr/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..7f13373584 --- /dev/null +++ b/files/fr/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,96 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Pour les applications Mozilla, la propriété -moz-border-bottom-colors définit une liste de couleurs à utiliser pour mettre en forme la bordure du côté bas.

+ +
/* Une couleur  */
+/* Type <color> */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* Plusieurs valeurs <color> */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valeurs globales */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+
+ +

Lorsque la bordure d'un élément est plus épaisse qu'un pixel CSS, chaque ligne de pixels utilisera une des couleurs indiquées (en allant de l'extérieur vers l'intérieur). Cela permet d'éviter l'utilisation de boîtes imbriquées. Si la bordure est plus large que le nombre de couleurs indiquées, la partie restante de la bordure sera peinte avec la couleur utilisée le plus à intérieur.

+ +

{{cssinfo}}

+ +

Cette propriété n'est pas appliquée :

+ +
    +
  1. Si {{cssxref("border-style")}} vaut dashed ou dotted.
    2. +
  2. Aux tableaux pour lesquels border-collapse: collapse.
    3. +
+ +

Syntaxe

+ +

Valeurs

+ +

Cette propriété permet d'utiliser une liste de couleurs séparées par des blancs.

+ +
+
<color>
+
Définit la couleur à utiliser pour une ligne de pixels de la bordure basse. La valeur transparent est valide. Voir {{cssxref("<color>")}} pour les valeurs et unités possibles.
+
none
+
La valeur initiale de la propriété, aucune couleur n'est utilisée ou {{cssxref("border-color")}} est utilisée si elle est définie.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#exemple {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+ +

HTML

+ +
<div id="exemple">Exemple</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 120, 90)}}

+ +

Spécifications

+ +

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

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-moz-border-bottom-colors")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-moz-border-left-colors/index.html b/files/fr/web/css/-moz-border-left-colors/index.html new file mode 100644 index 0000000000..417c62f00a --- /dev/null +++ b/files/fr/web/css/-moz-border-left-colors/index.html @@ -0,0 +1,95 @@ +--- +title: '-moz-border-left-colors' +slug: Web/CSS/-moz-border-left-colors +tags: + - CSS + - Non-standard + - Reference +translation_of: Archive/Web/CSS/-moz-border-left-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Pour les applications Mozilla, la propriété -moz-border-left-colors définit une liste de couleurs à utiliser pour mettre en forme la bordure du côté gauche.

+ +
/* Une couleur  */
+/* Type <color> */
+-moz-border-left-colors: #f0f0f0;
+
+/* Plusieurs valeurs <color> */
+-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valeurs globales */
+-moz-border-left-colors: inherit;
+-moz-border-left-colors: initial;
+-moz-border-left-colors: unset;
+
+ +

Lorsque la bordure d'un élément est plus épaisse qu'un pixel CSS, chaque ligne de pixels utilisera une des couleurs indiquées (en allant de l'extérieur vers l'intérieur). Cela permet d'éviter l'utilisation de boîtes imbriquées. Si la bordure est plus large que le nombre de couleurs indiquées, la partie restante de la bordure sera peinte avec la couleur utilisée le plus à intérieur.

+ +

{{cssinfo}}

+ +

Cette propriété n'est pas appliquée :

+ +
    +
  1. Si {{cssxref("border-style")}} vaut dashed ou dotted.
    2. +
  2. Aux tableaux pour lesquels border-collapse: collapse.
    3. +
+ +

Syntaxe

+ +

Valeurs

+ +

Cette propriété permet d'utiliser une liste de couleurs séparées par des blancs.

+ +
+
<color>
+
Définit la couleur à utiliser pour une ligne de pixels de la bordure gauche. La valeur transparent est valide. Voir {{cssxref("<color>")}} pour les valeurs et unités possibles.
+
none
+
La valeur initiale de la propriété, aucune couleur n'est utilisée ou {{cssxref("border-color")}} est utilisée si elle est définie.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#exemple {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+ +

HTML

+ +
<div id="exemple">Exemple</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 120, 90)}}

+ +

Spécifications

+ +

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

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-moz-border-left-colors")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-moz-border-right-colors/index.html b/files/fr/web/css/-moz-border-right-colors/index.html new file mode 100644 index 0000000000..ee49e0effe --- /dev/null +++ b/files/fr/web/css/-moz-border-right-colors/index.html @@ -0,0 +1,96 @@ +--- +title: '-moz-border-right-colors' +slug: Web/CSS/-moz-border-right-colors +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-moz-border-right-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Pour les applications Mozilla, la propriété -moz-border-right-colors définit une liste de couleurs à utiliser pour mettre en forme la bordure du côté droit.

+ +
/* Une couleur  */
+/* Type <color> */
+-moz-border-right-colors: #f0f0f0;
+
+/* Plusieurs valeurs <color> */
+-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valeurs globales */
+-moz-border-right-colors: inherit;
+-moz-border-right-colors: initial;
+-moz-border-right-colors: unset;
+
+ +

Lorsque la bordure d'un élément est plus épaisse qu'un pixel CSS, chaque ligne de pixels utilisera une des couleurs indiquées (en allant de l'extérieur vers l'intérieur). Cela permet d'éviter l'utilisation de boîtes imbriquées. Si la bordure est plus large que le nombre de couleurs indiquées, la partie restante de la bordure sera peinte avec la couleur utilisée le plus à intérieur.

+ +

{{cssinfo}}

+ +

Cette propriété n'est pas appliquée :

+ +
    +
  1. Si {{cssxref("border-style")}} vaut dashed ou dotted.
    2. +
  2. Aux tableaux pour lesquels border-collapse: collapse.
    3. +
+ +

Syntaxe

+ +

Valeurs

+ +

Cette propriété permet d'utiliser une liste de couleurs séparées par des blancs.

+ +
+
<color>
+
Définit la couleur à utiliser pour une ligne de pixels de la bordure droite. La valeur transparent est valide. Voir {{cssxref("<color>")}} pour les valeurs et unités possibles.
+
none
+
La valeur initiale de la propriété, aucune couleur n'est utilisée ou {{cssxref("border-color")}} est utilisée si elle est définie.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#exemple {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+ +

HTML

+ +
<div id="exemple">Exemple</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 120, 90)}}

+ +

Spécifications

+ +

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

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-moz-border-right-colors")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-moz-border-top-colors/index.html b/files/fr/web/css/-moz-border-top-colors/index.html new file mode 100644 index 0000000000..cbb381bab6 --- /dev/null +++ b/files/fr/web/css/-moz-border-top-colors/index.html @@ -0,0 +1,96 @@ +--- +title: '-moz-border-top-colors' +slug: Web/CSS/-moz-border-top-colors +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-moz-border-top-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Pour les applications Mozilla, la propriété {{cssxref("-moz-border-top-colors")}} définit une liste de couleurs à utiliser pour mettre en forme la bordure du côté haut.

+ +
/* Une couleur  */
+/* Type <color> */
+-moz-border-top-colors: #f0f0f0;
+
+/* Plusieurs valeurs <color> */
+-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valeurs globales */
+-moz-border-top-colors: inherit;
+-moz-border-top-colors: initial;
+-moz-border-top-colors: unset;
+
+ +

Lorsque la bordure d'un élément est plus épaisse qu'un pixel CSS, chaque ligne de pixels utilisera une des couleurs indiquées (en allant de l'extérieur vers l'intérieur). Cela permet d'éviter l'utilisation de boîtes imbriquées. Si la bordure est plus large que le nombre de couleurs indiquées, la partie restante de la bordure sera peinte avec la couleur utilisée le plus à intérieur.

+ +

{{cssinfo}}

+ +

Cette propriété n'est pas appliquée :

+ +
    +
  1. Si {{cssxref("border-style")}} vaut dashed ou dotted.
    2. +
  2. Aux tableaux pour lesquels border-collapse: collapse.
    3. +
+ +

Syntaxe

+ +

Valeurs

+ +

Cette propriété permet d'utiliser une liste de couleurs séparées par des blancs.

+ +
+
<color>
+
Définit la couleur à utiliser pour une ligne de pixels de la bordure haute. La valeur transparent est valide. Voir {{cssxref("<color>")}} pour les valeurs et unités possibles.
+
none
+
La valeur initiale de la propriété, aucune couleur n'est utilisée ou {{cssxref("border-color")}} est utilisée si elle est définie.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#exemple {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+ +

HTML

+ +
<div id="exemple">Exemple</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 120, 90)}}

+ +

Spécifications

+ +

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

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-moz-border-top-colors")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-moz-box-ordinal-group/index.html b/files/fr/web/css/-moz-box-ordinal-group/index.html new file mode 100644 index 0000000000..583d8e5bf2 --- /dev/null +++ b/files/fr/web/css/-moz-box-ordinal-group/index.html @@ -0,0 +1,73 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/box-ordinal-group +--- +
{{CSSRef}}
+ +
+

Attention ! Cette propriété a été implémentée pour les premiers brouillons de la spécification pour le module de boîtes flexibles. Elle a été remplacée par des propriétés standards depuis, pour plus d'informations sur ce qui doit être utilisé à la place, consultez l'article sur les boîtes flexibles.

+
+ +

La propriété -moz-box-ordinal-group indique le groupe ordinal auquel appartient l'élément. Les éléments dont le groupe ordinal est inférieur seront affichés avant ceux dont le groupe ordinal est plus élevé.

+ +

Valeurs

+ +

Cette propriété accepte des valeurs entières strictement positives. La valeur initiale de cette propriété est 1.

+ +

Exemples

+ +

CSS

+ +
#Flexbox {
+  display: -ms-box;
+  display: -moz-box;
+  display: -webkit-box;
+}
+
+#text1 {
+  background: red;
+  -ms-box-ordinal-group: 4;
+  -moz-box-ordinal-group: 4;
+  -webkit-box-ordinal-group: 4;
+}
+
+#text2 {
+  background: green;
+  -ms-box-ordinal-group: 3;
+  -moz-box-ordinal-group: 3;
+  -webkit-box-ordinal-group: 3;
+}
+
+#text3 {
+  background: blue;
+  -ms-box-ordinal-group: 2;
+  -moz-box-ordinal-group: 2;
+  -webkit-box-ordinal-group: 2;
+}
+
+#text4 {
+  background: orange;
+}
+ +

HTML

+ +
<div id="Flexbox">
+  <div id="text1">text 1</div>
+  <div id="text2">text 2</div>
+  <div id="text3">text 3</div>
+  <div id="text4">text 4</div>
+</div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ +

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

diff --git a/files/fr/web/css/-moz-cell/index.html b/files/fr/web/css/-moz-cell/index.html new file mode 100644 index 0000000000..4c1b204759 --- /dev/null +++ b/files/fr/web/css/-moz-cell/index.html @@ -0,0 +1,15 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +tags: + - CSS + - Obsolete + - Propriété + - Reference +translation_of: Web/CSS/cursor +--- +
+
{{CSSRef}}{{deprecated_header}}
+ +

Ne pas utiliser cette valeur ! C'est la valeur cursor {{cssxref("cursor#cell","cell")}} qui doit être utilisée à la place.

+
diff --git a/files/fr/web/css/-moz-context-properties/index.html b/files/fr/web/css/-moz-context-properties/index.html new file mode 100644 index 0000000000..fbb2c9094c --- /dev/null +++ b/files/fr/web/css/-moz-context-properties/index.html @@ -0,0 +1,83 @@ +--- +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 new file mode 100644 index 0000000000..2f6810edae --- /dev/null +++ b/files/fr/web/css/-moz-float-edge/index.html @@ -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 new file mode 100644 index 0000000000..9eebe7361c --- /dev/null +++ b/files/fr/web/css/-moz-force-broken-image-icon/index.html @@ -0,0 +1,67 @@ +--- +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 new file mode 100644 index 0000000000..e876a8875b --- /dev/null +++ b/files/fr/web/css/-moz-image-rect/index.html @@ -0,0 +1,126 @@ +--- +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 new file mode 100644 index 0000000000..603c48f008 --- /dev/null +++ b/files/fr/web/css/-moz-image-region/index.html @@ -0,0 +1,75 @@ +--- +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 new file mode 100644 index 0000000000..80a0b98cbc --- /dev/null +++ b/files/fr/web/css/-moz-orient/index.html @@ -0,0 +1,80 @@ +--- +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 new file mode 100644 index 0000000000..13259534a0 --- /dev/null +++ b/files/fr/web/css/-moz-outline-radius-bottomleft/index.html @@ -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 new file mode 100644 index 0000000000..831cb29e39 --- /dev/null +++ b/files/fr/web/css/-moz-outline-radius-bottomright/index.html @@ -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 new file mode 100644 index 0000000000..28fef48dc0 --- /dev/null +++ b/files/fr/web/css/-moz-outline-radius-topleft/index.html @@ -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 new file mode 100644 index 0000000000..962f74ece2 --- /dev/null +++ b/files/fr/web/css/-moz-outline-radius-topright/index.html @@ -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 new file mode 100644 index 0000000000..60e5e36069 --- /dev/null +++ b/files/fr/web/css/-moz-outline-radius/index.html @@ -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-stack-sizing/index.html b/files/fr/web/css/-moz-stack-sizing/index.html new file mode 100644 index 0000000000..dab5eb2287 --- /dev/null +++ b/files/fr/web/css/-moz-stack-sizing/index.html @@ -0,0 +1,62 @@ +--- +title: '-moz-stack-sizing' +slug: Web/CSS/-moz-stack-sizing +tags: + - CSS + - Non-standard + - Propriété + - Reference + - XUL +translation_of: Archive/Web/CSS/-moz-stack-sizing +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
+ +

La propriété -moz-stack-sizing est une propriété propriétaire. Normalement, un élément {{XULElem("stack")}} changera sa taille pour que tous ses éléments fils soient complètement visibles. Ainsi, si on déplace un élément fils de cette pile vers la droite, la pile s'élargira pour que l'élément reste visible.

+ +
/* Valeurs avec un mot-clé */
+-moz-stack-sizing: stretch-to-fit;
+-moz-stack-sizing: ignore;
+
+/* Valeurs globales */
+-moz-stack-sizing: inherit;
+-moz-stack-sizing: initial;
+-moz-stack-sizing: unset;
+
+ +

Si on veut empêcher le redimensionnement automatique, on pourra définir -moz-stack-sizing avec la valeur ignore sur l'élément fils. La propriété n'est pas définie sur la pile elle-même mais sur les éléments fils de la pile. Cela permet d'ignorer certains éléments fils mais pas d'autres.

+ +

Note : Dans les versions antérieures de Gecko, on pouvait contourner ce problème en définissant des marges basse et droite négatives sur la pile et des marges basse et droite positives sur les éléments fils qu'on ne souhaitait pas ignorer.

+ +

Syntaxe

+ +

Valeurs

+ +
+
stretch-to-fit
+
L'élément enfant influencera la taille de la pile.
+
ignore
+
La pile ne prendra pas en compte cet élément enfant lors du calcul de la taille.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
.mainsheet {
+  -moz-stack-sizing: ignore;
+}
+
+ +

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-text-blink/index.html b/files/fr/web/css/-moz-text-blink/index.html new file mode 100644 index 0000000000..dd11eb1154 --- /dev/null +++ b/files/fr/web/css/-moz-text-blink/index.html @@ -0,0 +1,51 @@ +--- +title: '-moz-text-blink' +slug: Web/CSS/-moz-text-blink +tags: + - CSS + - Non-standard + - Obsolete + - Propriété + - Reference +translation_of: Archive/Web/CSS/-moz-text-blink +--- +
{{CSSRef}}{{non-standard_header}}{{Obsolete_Header(26)}}
+ +

La propriété CSS non-standard -moz-text-blink détermine le mode de clignotement.

+ +
+

Note : Firefox, qui était le seul des principaux navigateurs à la prendre en charge, a abandonné son support dans Firefox 26. Désormais, plus aucun navigateur ne la prend en charge.

+
+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
Il n'y a pas de clignotement.
+
blink
+
Le texte clignote. Ne pas faire clignoter le texte est l'une des techniques pour respecter le point de contrôle 3.3 des WAI-UAAG.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
.exemple {
+  -moz-text-blink: blink;
+}
+ +

Spécifications

+ +

Cette propriété était définie dans un ancien brouillon de la spécification CSS 3 Text. Sa définition a été supprimée des nouvelles versions.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-moz-text-blink")}}

diff --git a/files/fr/web/css/-moz-user-focus/index.html b/files/fr/web/css/-moz-user-focus/index.html new file mode 100644 index 0000000000..3de08502f7 --- /dev/null +++ b/files/fr/web/css/-moz-user-focus/index.html @@ -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 new file mode 100644 index 0000000000..e935062db2 --- /dev/null +++ b/files/fr/web/css/-moz-user-input/index.html @@ -0,0 +1,72 @@ +--- +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-window-shadow/index.html b/files/fr/web/css/-moz-window-shadow/index.html new file mode 100644 index 0000000000..4312b16d54 --- /dev/null +++ b/files/fr/web/css/-moz-window-shadow/index.html @@ -0,0 +1,70 @@ +--- +title: '-moz-window-shadow' +slug: Web/CSS/-moz-window-shadow +tags: + - CSS + - Non-standard + - Obsolete + - Propriété + - Reference + - XUL +translation_of: Archive/Web/CSS/-moz-window-shadow +--- +

{{CSSRef}}{{Non-standard_Header}}{{deprecated_Header("Gecko44")}}

+ +

La propriété -moz-window-shadow définit si une fenêtre doit avoir une ombre. Cette propriété ne fonctionne que pour Mac OS X.

+ +
+

Note : Cette propriété n'est pas standard et ne peut plus être utilisée depuis Firefox 44.

+
+ +

Firefox 3 a ajouté la prise en charge des fenêtres transparentes sur Mac OS X. Cependant, les ombres pour ces fenêtres étaient désactivées et il n'y avait aucun moyen de les activer.Avec Firefox 3.5, le comportement par défaut a été modifié. Toutes les fenêtres ont une ombre et la propriété -moz-window-shadow a été introduite afin de désactiver les ombres indésirables.

+ +

Syntaxe

+ +

La propriété -moz-window-shadow est définie avec l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
default
+
La fenêtre aura une ombre avec le style par défaut.
+
menu
+
La fenêtre aura une ombre dont le style est approprié pour les menus.
+
tooltip
+
La fenêtre aura une ombre dont le style est approprié pour les bulles d'information.
+
sheet
+
La fenêtre aura une ombre dont le style est approprié pour les fenêtres qui sont des feuilles.
+
none
+
La fenêtre n'aura pas d'ombre.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
.KUI-panel {
+  -moz-window-shadow: none;
+}
+
+ +

Spécifications

+ +

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

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-moz-window-shadow")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-ms-accelerator/index.html b/files/fr/web/css/-ms-accelerator/index.html new file mode 100644 index 0000000000..048b5b6f09 --- /dev/null +++ b/files/fr/web/css/-ms-accelerator/index.html @@ -0,0 +1,75 @@ +--- +title: '-ms-accelerator' +slug: Web/CSS/-ms-accelerator +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-accelerator +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-accelerator est une extension Microsoft qui définit ou récupère une chaîne qui indique si l'objet représente un raccourci clavier.

+ +

Syntaxe

+ +
/* L'objet n'est pas un raccourci clavier (par défaut) */
+-ms-accelerator: false
+/* L'objet est un raccourci clavier */
+-ms-accelerator: true
+
+ +

 

+ +

Valeurs

+ +
+
false
+
+

L'objet n'est pas un raccourci clavier.

+
+
true
+
+

L'objet est un raccourci clavier.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Cet exemple utilise l'attribut -ms-accelerator dans un élément {{HTMLElement("u")}} pour spécifier que 'N' est la touche d'accès qui permettra d'accéder à l'élément {{HTMLElement("label")}}. Si l'option "souligner les raccourcis clavier" n'est pas activée dans les propriétés d'affichage Windows de l'utilisateur,  'N' ne sera pas souligné tant que la touche Alt ne sera pas enfoncée. Lorsque l'utilisateur appuie sur Alt+N, l'élément {{HTMLElement("input")}} qui possède l'attribut {{htmlattrxref("accessKey","input")}} avec pour valeur 'N' reçoit le focus.

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Accelerator</title>
+  </head>
+  <body>
+    <label for="oNom"><u style="-ms-accelerator: true; accelerator: true">N</u>om: </label>
+    <input type="text"
+      id="oNom"
+      size="25"
+      accesskey="N"
+      value="Votre nom ici" />
+  </body>
+</html>
+
+ +

Spécifications

+ +

Ce pseudo-élément ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété est prise en charge par Windows 2000 et les versions ultérieures. Elle permet aux utilisateurs de masquer les indicateurs de navigation pour les éléments de menu et les contrôles tant que la touche Alt n'est pas enfoncée.

+ +

Une touche d'accès (access key) est un caractère utilisé comme raccourci clavier pour sélectionner un objet. L'utilisateur effectue la combinaison de touches Alt + touche d'accès pour déplacer le focus sur l'objet demandé et déclencher l'évènement associé à cet objet.

+ +

Dans Internet Explorer 8 (IE8) l'attribut -ms-accelerator est une extension CSS, et peut être utilisé comme synonyme de accelerator dans le mode standard d'IE 8.

diff --git a/files/fr/web/css/-ms-block-progression/index.html b/files/fr/web/css/-ms-block-progression/index.html new file mode 100644 index 0000000000..502f1fb6b7 --- /dev/null +++ b/files/fr/web/css/-ms-block-progression/index.html @@ -0,0 +1,48 @@ +--- +title: '-ms-block-progression' +slug: Web/CSS/-ms-block-progression +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-block-progression +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-block-progression est une propriété spécifique à Microsoft qui indique la progression du bloc et l'orientation de la disposition.

+ +

Syntaxe

+ +

La propriété -ms-block-progression est définie grâce à l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
tb
+
La valeur par défaut. Les blocs s'écoulent de haut en bas et la disposition est horizontale.
+
rl
+
Les blocs s'écoulent de droite à gauche et la disposition est verticale.
+
bt
+
Les blocs s'écoulent de bas en haut et la disposition est horizontale.
+
lr
+
Les blocs s'écoulent de gauche à droite et la disposition est verticale
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Avec une disposition verticale, les lignes de textes sont tournées de 90° dans le sens des aiguilles d'une montre. Les images ne sont pas tournées mais les tableaux sont tournés. La disposition des boîtes avec un orientatiofrn verticale est strictement analogue à la disposition avec une orientation horizontale : la largeur, la hauteur, top, bottom, right et left ne tournent pas avec le texte.

+ +

Seul un seul mode de progression peut être actif à un moment donné. Ces valeurs ne peuvent pas êtres combinées.

+ +

Cette propriété est basée sur la propriété block-progression décrite dans le module de spécification CSS3 Text Layout.

diff --git a/files/fr/web/css/-ms-content-zoom-chaining/index.html b/files/fr/web/css/-ms-content-zoom-chaining/index.html new file mode 100644 index 0000000000..5a016f2178 --- /dev/null +++ b/files/fr/web/css/-ms-content-zoom-chaining/index.html @@ -0,0 +1,44 @@ +--- +title: '-ms-content-zoom-chaining' +slug: Web/CSS/-ms-content-zoom-chaining +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-content-zoom-chaining +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-content-zoom-chaining est une propriété spécifique à Microsoft qui indique le comportement du zoom lorsque l'utilisateur atteint la limite du zoom lors de son utilisation.

+ +

Syntaxe

+ +

La propriété -ms-content-zoom-chaining est définie grâce à l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
none
+
La valeur par défaut. Un effet de rebondissement est déclenché lorsque l'utilisateur atteint la limite.
+
chained
+
Le zoom est fait sur le plus proche parent qui peut être zoomé lorsque l'utilisateur atteint la limite. Aucun effet de rebondissement n'est affiché.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété n'a pas d'impact sur les éléments qui ne peuvent pas être zoomés. Pour plus d'informations sur les éléments pouvant être zoomés, voir -ms-content-zooming.

+ +

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.

+ +

Il est nécessaire d'avoir Windows 8 ou une version ultérieure afin d'utiliser cette propriété.

diff --git a/files/fr/web/css/-ms-content-zoom-limit-max/index.html b/files/fr/web/css/-ms-content-zoom-limit-max/index.html new file mode 100644 index 0000000000..b683e617b5 --- /dev/null +++ b/files/fr/web/css/-ms-content-zoom-limit-max/index.html @@ -0,0 +1,42 @@ +--- +title: '-ms-content-zoom-limit-max' +slug: Web/CSS/-ms-content-zoom-limit-max +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-content-zoom-limit-max +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-content-zoom-limit-max est une propriété spécifique à Microsoft qui détermine le facteur de zoom maximal.

+ +

Syntaxe

+ +

La propriété -ms-content-zoom-limit-max est définie avec une valeur en pourcentage de la taillle sans zoom.

+ +

Valeurs

+ +
+
<percentage>
+
Le facteur de zoom maximal proportionnellement à la taille originale (pour ce type de valeur cf. {{cssxref("<percentage>")}}).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cet élément ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété contraint la limite pour le zoom tactile et les valeurs de la propriété msContentZoomFactor. Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {{CSSXref("-ms-content-zooming")}} pour plus de détails sur les éléments pouvant être zoomés.

+ +

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.

+ +

Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.

diff --git a/files/fr/web/css/-ms-content-zoom-limit-min/index.html b/files/fr/web/css/-ms-content-zoom-limit-min/index.html new file mode 100644 index 0000000000..e4303cb9f1 --- /dev/null +++ b/files/fr/web/css/-ms-content-zoom-limit-min/index.html @@ -0,0 +1,42 @@ +--- +title: '-ms-content-zoom-limit-min' +slug: Web/CSS/-ms-content-zoom-limit-min +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-content-zoom-limit-min +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-content-zoom-limit-min est une propriété spécifique à Microsoft qui détermine le facteur de zoom minimal.

+ +

Syntaxe

+ +

La propriété -ms-content-zoom-limit-min est définie avec une valeur en pourcentage de la taillle sans zoom.

+ +

Valeurs

+ +
+
<percentage>
+
Le facteur de zoom minimal proportionnellement à la taille originale (pour ce type de valeur cf. {{cssxref("<percentage>")}}).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cet élément ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété contraint la limite pour le zoom tactile et les valeurs de la propriété msContentZoomFactor. Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {{CSSXRef("-ms-content-zooming")}} pour plus de détails sur les éléments pouvant être zoomés.

+ +

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.

+ +

Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.

diff --git a/files/fr/web/css/-ms-content-zoom-limit/index.html b/files/fr/web/css/-ms-content-zoom-limit/index.html new file mode 100644 index 0000000000..420ad5c2ea --- /dev/null +++ b/files/fr/web/css/-ms-content-zoom-limit/index.html @@ -0,0 +1,44 @@ +--- +title: '-ms-content-zoom-limit' +slug: Web/CSS/-ms-content-zoom-limit +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-content-zoom-limit +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-content-zoom-limit est une propriété raccourcie spécifique à Microsoft qui indique les valeurs à utiliser pour les propriétés  {{CSSXref("-ms-content-zoom-limit-min")}} et  {{CSSXref("-ms-content-zoom-limit-max")}}.

+ +

Syntaxe

+ +

La propriété -ms-content-zoom-limit est définie avec une ou deux valeurs de limites de zoom, dans l'ordre qui suit et séparées par un espace.

+ +

Valeur

+ +
+
-ms-content-zoom-limit-min
+
La valeur à utiliser pour la propriété -ms-content-zoom-limit-min.
+
-ms-content-zoom-limit-max
+
La valeur à utiliser pour la propriété -ms-content-zoom-limit-max.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Pour plus d'informations sur les éléments pouvant être zoomés, voir -ms-content-zooming.

+ +

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.

+ +

Il est nécessaire d'avoir Windows 8 ou une version ultérieure afin d'utiliser cette propriété.

diff --git a/files/fr/web/css/-ms-content-zoom-snap-points/index.html b/files/fr/web/css/-ms-content-zoom-snap-points/index.html new file mode 100644 index 0000000000..e600c0a099 --- /dev/null +++ b/files/fr/web/css/-ms-content-zoom-snap-points/index.html @@ -0,0 +1,74 @@ +--- +title: '-ms-content-zoom-snap-points' +slug: Web/CSS/-ms-content-zoom-snap-points +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-content-zoom-snap-points +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-content-zoom-snap-points est une propriété spécifique à Microsoft qui indique l'emplacement des points d'accroches pour les niveaux de zoom.

+ +

Syntaxe

+ +

La propriété -ms-content-zoom-snap-points est définie avec l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
snapInterval(<start zoomfactors>, <step zoomfactors>)
+
+

Cette forme indique l'emplacement des points d'accroche pour le zoom :

+ +
    +
  • <start zoomfactor> indique l'emplacement du premier point d'accroche. Cette valeur est exprimée comme un nombre suivi d'un signe pourcent (%).
    • +
  • <step zoomfactor> indique la distance entre les différents points d'accroche (en zoom et en dézoom) à partir du point d'accroche initial. Cette valeur est exprimée comme un nombre suivi d'un signe pourcent (%).
    • +
+
+
snapList(<list zoomfactors>)
+
+

Cette forme indique la position des points d'accroche sous la forme d'une liste de points d'accroche indidivuels, séparés par des virgules. Chaque point d'accroche est exprimé comme un nombre suivi d'un caractère pourcent (%).

+ +
    +
  • Si l'une des valeurs de <list zoomfactors> est inférieure à la valeur indiquée par la propriété {{CSSXref("-ms-content-zoom-limit-min")}}, ce sera la valeur de cette dernière qui sera utilisée.
    • +
  • Si l'une des valeurs de <list zoomfactors> est supérieure à la valeur définie par la propriété {{CSSXref("-ms-content-zoom-limit-max")}}, ce sera la valeur de cette dernière qui sera utilisée.
    • +
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Cet exemple illustre les deux formes possibles pour une règle utilisant la propriété -ms-content-zoom-snap-points. Dans le premier sélecteur, le premier point d'accorche est situé à 0% puis l'intervalle à 100%. Dans le second sélecteur, chaque point d'accroche est explicitement listé : le premier à 100%, le deuxième à 200%, le troisième à 300%, etc.

+ +
.snappy1 {
+  -ms-content-zoom-snap-points: snapInterval(0%, 100%);
+  ...
+}
+
+.snappy2 {
+  -ms-content-zoom-snap-points: snapList(100%, 200%, 300%, 400%, 500%);
+  ...
+ }
+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {CSSXref("-ms-content-zooming")} pour plus de détails sur les éléments pouvant être zoomés.

+ +

Lorsqu'un utilisateur fait défiler du contenu ou le déplace puis retire le pointeur (doigt ou stylet), le contenu peut continuer à bouger avec une certaine inertie. Les points d'accroche permettent de modifier ce comportement en arrêtant cette inertie à certains niveaux. Utiliser des points d'accroches permet ainsi d'éviter que le contenu se déplace ou se zoome/dézoome à des niveaux qui ne seraient pas pertinents.

+ +

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.

+ +

Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.

diff --git a/files/fr/web/css/-ms-content-zoom-snap-type/index.html b/files/fr/web/css/-ms-content-zoom-snap-type/index.html new file mode 100644 index 0000000000..d2e52fc009 --- /dev/null +++ b/files/fr/web/css/-ms-content-zoom-snap-type/index.html @@ -0,0 +1,54 @@ +--- +title: '-ms-content-zoom-snap-type' +slug: Web/CSS/-ms-content-zoom-snap-type +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-content-zoom-snap-type +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-content-zoom-snap-type est une propriété spécifique à Microsoft qui définit la façon dont le zoom se comporte aux points d'accroche pour les niveaux de zoom.

+ +

Syntaxe

+ +

La propriété -ms-content-zoom-snap-type est définie avec l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
none
+
+

La valeur par défaut. Les points d'accroche n'ont pas d'impact sur le zoom. Le contenu continuera à être zoomé / dézoomé après que l'action utilisateur se soit arrêtée.

+
+
proximity
+
+

Cette valeur indique que le processus de zoom/dézoom s'arrête à peu près au niveau du point d'accroche après que l'interaction utilisateur ait cessé. Avec cette valeur, il est donc possible que le facteur de zoom du contenu soit arrêté entre deux points d'accroche.

+
+
mandatory
+
+

Cette valeur indique que le processus de zoom/dézoom s'arrête obligatoirement sur un des points d'accroche après que l'interaction utilisateur ait cessé. Le point d'accroche sélectionné est le point d'accroche le plus proche du facteur de zoom du contenu sur lequel le mouvement se serait arrêté.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {{CSSXRef("-ms-content-zooming")}} pour plus de détails sur les éléments pouvant être zoomés.

+ +

Lorsqu'un utilisateur fait défiler du contenu ou le déplace puis retire le pointeur (doigt ou stylet), le contenu peut continuer à bouger avec une certaine inertie. Les points d'accroche permettent de modifier ce comportement en arrêtant cette inertie à certains niveaux. Utiliser des points d'accroches permet ainsi d'éviter que le contenu se déplace ou se zoome/dézoome à des niveaux qui ne seraient pas pertinents.

+ +

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.

+ +

Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.

diff --git a/files/fr/web/css/-ms-content-zoom-snap/index.html b/files/fr/web/css/-ms-content-zoom-snap/index.html new file mode 100644 index 0000000000..2e3b584d59 --- /dev/null +++ b/files/fr/web/css/-ms-content-zoom-snap/index.html @@ -0,0 +1,44 @@ +--- +title: '-ms-content-zoom-snap' +slug: Web/CSS/-ms-content-zoom-snap +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-content-zoom-snap +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-content-zoom-snap est une propriété raccourcie spécifique à Microsoft qui définit les valeurs des proriétés {{CSSXref("-ms-content-zoom-snap-type")}} et {{CSSXref("-ms-content-zoom-snap-points")}}.

+ +

Syntaxe

+ +

La propriété -ms-content-zoom-snap est définie avec une ou deux des valeurs suivantes, dans cet ordre et séparées par un espace.

+ +

Valeurs

+ +
+
-ms-content-zoom-snap-type
+
La valeur à utiliser pour la propriété {{CSSXref("-ms-content-zoom-snap-type")}}.
+
-ms-content-zoom-snap-points
+
La valeur à utiliser pour la propriété {{CSSXref("-ms-content-zoom-snap-points")}}.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cet élément ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {{CSSXref("-ms-content-zooming")}} pour plus de détails sur les éléments pouvant être zoomés.

+ +

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.

+ +

Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.

diff --git a/files/fr/web/css/-ms-content-zooming/index.html b/files/fr/web/css/-ms-content-zooming/index.html new file mode 100644 index 0000000000..216a176781 --- /dev/null +++ b/files/fr/web/css/-ms-content-zooming/index.html @@ -0,0 +1,46 @@ +--- +title: '-ms-content-zooming' +slug: Web/CSS/-ms-content-zooming +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-content-zooming +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-content-zooming est une propriété spécifique à Microsoft qui indique si le zoom est autorisé.

+ +

Syntaxe

+ +

La propriété -ms-content-zooming est définie avec l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
none
+
La valeur initiale pour tous les éléments sauf ceux de plus haut niveau. L'élément ne peut pas être zoomé.
+
zoom
+
La valeur initiale pour l'élément de plus haut niveau. L'élément peut être zoomé.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété n'a pas d'impact sauf si le dépassement est permis sur l'axe horizontal et sur l'axe vertical.

+ +

Par défaut, les éléments pouvant être zoomés peuvent être zoomés au doigt avec un geste de "pincement". L'élément de plus haut niveau peut également être zoomés avec une double touche lorsque le zoom est autorisé.

+ +

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.

+ +

Il est nécessaire d'avoir Windows 8 ou une version ultérieure afin d'utiliser cette propriété.

diff --git a/files/fr/web/css/-ms-filter/index.html b/files/fr/web/css/-ms-filter/index.html new file mode 100644 index 0000000000..5b0f0a3042 --- /dev/null +++ b/files/fr/web/css/-ms-filter/index.html @@ -0,0 +1,218 @@ +--- +title: '-ms-filter' +slug: Web/CSS/-ms-filter +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-filter +--- +
{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header}}
+ +

La propriété -ms-filter est une propriété spécifique à Microsoft qui permet de définir des filtres à appliquer à un objet.

+ +
+

Attention ! Ne pas confondre cette propriété et la propriété standard {{CSSxRef("filter")}}  car les deux sont pleinement incompatibles.

+
+ +
+

Attention ! Cette fonctionnalité a été dépréciée avec Internet Explorer 9. Dans Internet Explorer 10, cette fonctionnalité a été supprimée et ne devrait plus être utilisée.

+
+ +

Syntaxe

+ +

La propriété -ms-filter est définie avec une chaîne de caractères contenant une liste d'un ou plusieurs éléments, séparés par des espaces. Chacun de ces éléments peut avoir l'un des types suivants :

+ + + +

Syntaxe formelle

+ +
filter: <-ms-filter-function>+ {{Deprecated_Inline}}
+-ms-filter: [ "'" <-ms-filter-function># "'" ] | [ '"' <-ms-filter-function># '"' ]
+
+où
+<-ms-filter-function> = <-ms-filter-function-progid> | <-ms-filter-function-legacy>
+
+où
+<-ms-filter-function-progid> = 'progid:' [ <ident-token> '.' ]* [ <ident-token> | <function-token> <any-value> ')' ]
+<-ms-filter-function-legacy> = <ident-token> | <function-token> <any-value> ')'
+ +

La chaîne de caractères ({{CSSxRef("string")}}) contient la liste des filtres, transitions et surfaces procédurales. Voir la référence relative aux filtres et transitions pour plus de détails.

+ +

Exemples

+ +

L'exemple suivant illustre comment utiliser la propriété -ms-filter dans Internet Explorer 8.

+ +
-ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';
+
+ +

L'exemple suivant illustre comment utiliser un style en incise pour appliquer un filtre sur une image.

+ +
<img style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
+    progid:DXImageTransform.Microsoft.BasicImage(mirror=1)"
+    src="/workshop/samples/author/dhtml/graphics/cone.jpg"
+    height="80px" width="80px" alt="cone">
+
+ +

Dans l'exemple suivant, on voit comment utiliser les API scriptées pour définir un filtre sur une image.

+ +
<body>
+  <p>Click the image to start the filter.</p>
+  // Call the function.
+  <div id="filterFrom"
+      style="position: absolute;
+            width: 200px;
+            height: 250px;
+            background-color: white;
+            filter: revealTrans()">
+    <img id="imageFrom"
+         style="position: absolute;
+                top: 20px;
+                left: 20px;"
+                src="sphere.jpg"
+                alt="sphere">
+    <div id="filterTo"
+         style="position: absolute;
+                width: 200px;
+                height: 250px;
+                top: 20px;
+                left: 20px;
+                background: white;
+                visibility: hidden;">
+    </div>
+  </div>
+  <script type="text/javascript">
+  let filterImg = document.querySelector('#filterFrom');
+  filterImg.addEventListener('click', doFilter);
+
+  function doFilter () {
+    filterFrom.filters.item(0).Apply(); // 12 is the dissolve filter.
+    filterFrom.filters.item(0).Transition=12;
+    imageFrom.style.visibility = "hidden";
+    filterTo.style.visibility = "";
+    filterFrom.filters.item(0).play(14);
+  }
+  </script>
+</body>
+
+ +

Dégradé

+ +
progid:DXImageTransform.Microsoft.Gradient( <properties> )
+
+où
+<properties> = [ <Enabled> | <EndColor> | <EndColorStr> | <GradientType> | <StartColor> | <StartColorStr> ]#
+
+où
+<Enabled> = 'Enabled=' [ true | false ]
+<EndColor> = 'StartColor=' {{CSSxRef("<color>")}}
+<EndColorStr> = 'StartColorStr=' {{CSSxRef("<color>")}}
+<GradientType> = 'GradientType=' {{CSSxRef("<integer>")}}
+<StartColor> = 'StartColor=' {{CSSxRef("<color>")}}
+<StartColorStr> = 'StartColorStr=' {{CSSxRef("<color>")}}
+
+ +
+
Enabled
+
Valeur par défaut : true
+ Utiliser false pour désactiver le dégradé.
+
EndColor
+
La couleur pour la fin du dégradé, seules les couleurs opaques (utilisant la notation #RRGGBB) sont prises en charge.
+
EndColorStr
+
La couleur pour la fin du dégradé avec une prise en charge des couleurs opaques avec la notation #RRGGBB et une prise en charge des couleurs avec la notation #AARRGGBB.
+
GradientType
+
Valeur par défaut : 0 (ce qui est équivalent à {{CSSxRef("linear-gradient",'linear-gradient(to bottom, …)')}})
+ Toute valeur non nulle rendra le dégradé horizontal (équivalent à {{CSSxRef("linear-gradient",'linear-gradient(to right, …)')}})
+
StartColor
+
La couleur pour le début du dégradé, seules les couleurs opaques (utilisant la notation #RRGGBB) sont prises en charge.
+
StartColorStr
+
La couleur pour le début du dégradé avec une prise en charge des couleurs opaques avec la notation #RRGGBB et une prise en charge des couleurs avec la notation #AARRGGBB.
+
+ +

HTML

+ +
<div class="gradient horizontal"></div>
+<div class="gradient vertical"></div>
+
+ +

CSS

+ + + +
.gradient.horizontal {
+  -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff", endColorStr="#000000", GradientType=1)';
+  background-image: linear-gradient(to right, #ffffff 0%, #000000 100%);
+}
+
+.gradient.vertical {
+  -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff", endColorStr="#000000", GradientType=0)';
+  background-image: linear-gradient(to bottom, #ffffff 0%, #000000 100%);
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Dégradé","100%","120")}}

+ +

Spécifications

+ +

Cette propriété est une propriété spécifique à Microsoft, ne doit pas être utilisée sur le Web et ne fait partie d'aucune spécification.

+ +

{{CSSInfo("-ms-filter")}}

+ +

Notes

+ +

Le tableau suivant énumère les différents filtres DX spécifiques qui étaient fréquemment utilisés, avec leur équivalent en CSS standard :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom du filtre DXAlternative standard
Alpha{{CSSxRef("opacity")}}
AlphaImageLoader{{HTMLElement("img")}} ou {{CSSxRef("background-image")}} et les propriétés associées
Gradient{{CSSxRef("background-image")}}: {{CSSxRef("linear-gradient")}}
DropShadow{{CSSxRef("text-shadow")}} ou {{CSSxRef("box-shadow")}}
Matrix{{CSSxRef("transform")}}, {{CSSxRef("transform-origin")}}
+ +

Pour Windows Internet Explorer 8, la propriété -ms-filter est une extension à CSS et peut être utilisée comme synonyme de {{CSSxRef("filter")}} en mode standard IE8.

+ +

Un objet doit avoir une disposition où afficher le filtre. Pour cela, on pourra fournir une hauteur et une largeur à l'élément grâce aux propriétés {{CSSxRef("height")}} et {{CSSxRef("width")}}.

+ +

Le filtre d'ombre peut être appliqué à un objet {{HTMLElement("img")}} en paramétrant le filtre sur le conteneur de l'image.

diff --git a/files/fr/web/css/-ms-flow-from/index.html b/files/fr/web/css/-ms-flow-from/index.html new file mode 100644 index 0000000000..30218bc85d --- /dev/null +++ b/files/fr/web/css/-ms-flow-from/index.html @@ -0,0 +1,40 @@ +--- +title: '-ms-flow-from' +slug: Web/CSS/-ms-flow-from +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-flow-from +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-flow-from est une propriété spécifique de Microsoft qui permet d'obtenir ou de définir une valeur identifiant un conteneur {{HTMLElement("iframe")}} du document et qui reçoit du contenu d'une  source de données.

+ +

Syntaxe

+ +

La propriété -ms-flow-from est définie grâce à l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
none
+
+

La valeur par défaut. Aucun conteneur n'est indiqué.

+
+
{{cssxref("<custom-ident>")}}
+
+

Le nom du conteneur de région.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

diff --git a/files/fr/web/css/-ms-flow-into/index.html b/files/fr/web/css/-ms-flow-into/index.html new file mode 100644 index 0000000000..fc3e6d0e43 --- /dev/null +++ b/files/fr/web/css/-ms-flow-into/index.html @@ -0,0 +1,40 @@ +--- +title: '-ms-flow-into' +slug: Web/CSS/-ms-flow-into +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-flow-into +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-flow-into est une propriété spécifique de Microsoft extension qui permet d'obtenir ou de définir une valeur identifiant un conteneur {{HTMLElement("iframe")}} du document et qui sert de source de données à la région.

+ +

Syntaxe

+ +

La propriété -ms-flow-into est définie grâce à l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
none
+
+

La valeur par défaut. Aucun conteneur n'est indiqué.

+
+
{{cssxref("<custom-ident>")}}
+
+

Le nom du conteneur de région.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

diff --git a/files/fr/web/css/-ms-high-contrast-adjust/index.html b/files/fr/web/css/-ms-high-contrast-adjust/index.html new file mode 100644 index 0000000000..255065c35e --- /dev/null +++ b/files/fr/web/css/-ms-high-contrast-adjust/index.html @@ -0,0 +1,44 @@ +--- +title: '-ms-high-contrast-adjust' +slug: Web/CSS/-ms-high-contrast-adjust +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-high-contrast-adjust +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-high-contrast-adjust est une propriété spécifique à Microsoft qui permet de récupérer ou de définir une valeur qui indique s'il faut surcharger des propriétés CSS qui auraient été définies pour un mode de contraste élevé.

+ +

Syntaxe

+ +

La propriété -ms-high-contrast-adjust est définie avec l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
auto
+
+

Cet mot-clé indique que les propriétés CSS applicables seront ajustées comme souhaité lorsque le système utilisera un mode de contraste élevé.

+
+
none
+
+

Cet mot-clé indique que les propriétés CSS applicables ne seront pas ajustées lorsque le système utilisera un mode de contraste élevé.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et n'est décrite dans aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

La propriété -ms-high-contrast-adjust fonctionne avec la caractéristique média {{cssxref("-ms-high-contrast")}}.

diff --git a/files/fr/web/css/-ms-high-contrast/index.html b/files/fr/web/css/-ms-high-contrast/index.html new file mode 100644 index 0000000000..e9aef6fa8e --- /dev/null +++ b/files/fr/web/css/-ms-high-contrast/index.html @@ -0,0 +1,71 @@ +--- +title: '-ms-high-contrast' +slug: Web/CSS/-ms-high-contrast +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard + - Reference +translation_of: Web/CSS/@media/-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/-ms-hyphenate-limit-chars/index.html b/files/fr/web/css/-ms-hyphenate-limit-chars/index.html new file mode 100644 index 0000000000..b95cc7f355 --- /dev/null +++ b/files/fr/web/css/-ms-hyphenate-limit-chars/index.html @@ -0,0 +1,46 @@ +--- +title: '-ms-hyphenate-limit-chars' +slug: Web/CSS/-ms-hyphenate-limit-chars +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-hyphenate-limit-chars +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-hyphenate-limit-chars est une propriété spécifique à Microsoft qui définit une à trois valeurs indiquant le nombre minimal de caractères utilisés pour un mot tronqué pour passer à la ligne. Si le mot n'a pas suffisamment de caractères avant ou après le passage à la ligne, aucune césure n'est appliquée sur le mot.

+ +

Syntaxe

+ +

La propriété -ms-hyphenate-limit-chars est définie de la façon suivante.

+ +

Valeurs

+ +
+
auto
+
+

Cette valeur correspond à la valeur composite 5 2 2 qui signifie que le mot doit mesurer au moins 5 caractères pour être sujet à une césure, qu'il faut au moins 2 caractères avant la césure et 2 caractères après la césure.

+
+
<integer> {1,3}
+
+

Une à trois valeurs entières (cf. {{cssxref("<integer>")}}) qui décrivent respectivement la taille minimale du mot, le nombre de caractères minimal avant la césure et le nombre de caractères minimal après la césure.

+ +

Lorsque la troisième valeur n'est pas indiquée, la valeur utilisée est égale à la seconde valeur.

+ +

Si la deuxième et troisième valeurs sont absentes, elles utilisent la même valeur que auto.

+ +

Note : il n'est pas possible d'utiliser des valeurs négatives.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété est une propriété non-standard et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

diff --git a/files/fr/web/css/-ms-hyphenate-limit-lines/index.html b/files/fr/web/css/-ms-hyphenate-limit-lines/index.html new file mode 100644 index 0000000000..cc6d74f543 --- /dev/null +++ b/files/fr/web/css/-ms-hyphenate-limit-lines/index.html @@ -0,0 +1,44 @@ +--- +title: '-ms-hyphenate-limit-lines' +slug: Web/CSS/-ms-hyphenate-limit-lines +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-hyphenate-limit-lines +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -ms-hyphenate-limit-lines est une propriété spécifique à Microsoft qui indique le nombre maximum de lignes consécutives pouvant se terminer avec un mot sur deux lignes (au sein d'un même élément).

+ +

Syntaxe

+ +

La propriété -ms-hyphenate-limit-lines est définie avec l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
no-limit
+
+

Cette valeur indique que les césures ne sont pas limitées en fonction des lignes coupées auparavant. On peut donc avoir toutes les lignes de texte de l'élément qui se terminent par une césure.

+
+
<integer>
+
+

Un entier (type {{cssxref("<integer>")}} qui indique le nombre maximal de lignes successives pouvant se terminer par une césure.

+ +

Si on utilise la valeur 2 (par exemple), on ne pourra pas avoir plus de deux lignes qui se suivent et pour lesquelles la fin est un mot coupé. Lorsqu'on utilise la valeur 0, cela signifie qu'aucune ligne ne peut entraîner la césure d'un de ses mots et il n'y a donc aucune césure.

+ +

Les valeurs négatives ne sont pas autorisées pour cette propriété.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique à Microsoft et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

diff --git a/files/fr/web/css/-ms-hyphenate-limit-zone/index.html b/files/fr/web/css/-ms-hyphenate-limit-zone/index.html new file mode 100644 index 0000000000..f1cd54609e --- /dev/null +++ b/files/fr/web/css/-ms-hyphenate-limit-zone/index.html @@ -0,0 +1,46 @@ +--- +title: '-ms-hyphenate-limit-zone' +slug: Web/CSS/-ms-hyphenate-limit-zone +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-hyphenate-limit-zone +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-hyphenate-limit-zone est une propriété spécifique à Microsoft qui indique la largeur de la zone dans laquelle on peut appliquer une césure et un trait d'union sur les mots pour passer à la ligne.

+ +

Syntaxe

+ +

La propriété -ms-hyphenate-limit-zone est définie avec l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
{{cssxref("percentage")}}
+
+

Un entier suivi du caractère % qui indique la taille de la zone proportionnellement à la taille de la boîte de la ligne. Les valeurs négatives ne sont pas autorisées.

+
+
{{cssxref("length")}}
+
+

Une valeur décimale suivie par une unité qui indique la largeur de la zone. Pour plus d'informations sur les valeurs possibles, voir les types de donnée en CSS. Les valeurs négatives ne sont pas autorisées.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et n'est décrite dans aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

La propriété -ms-hyphenate-limit-zone permet de contrôler le nombre de blancs autorisés pour le passage à la ligne. La zone concernée se situe toujours sur le côté logique droit de la boîte de padding..

+ +

Un mot sera uniquement sujet à une césure s'il commence à l'extérieur ou à la limite gauche de la zone.

diff --git a/files/fr/web/css/-ms-ime-align/index.html b/files/fr/web/css/-ms-ime-align/index.html new file mode 100644 index 0000000000..9193fc87d2 --- /dev/null +++ b/files/fr/web/css/-ms-ime-align/index.html @@ -0,0 +1,48 @@ +--- +title: '-ms-ime-align' +slug: Web/CSS/-ms-ime-align +tags: + - CSS + - NeedsBrowserCompatibility + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-ime-align +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La propriété CSS -ms-ime-align est une propriété spécifique à Microsoft qui permet d'aligner la boîte de la fenêtre pour l'Input Method Editor (IME) par rapport à l'élément sur lequel la composition IME est active.

+ +

Cette extension est implémentée par Microsoft Edge et Internet Explorer 11.

+ +

Les listes IME potentielles sont positionnées sur l'écran avec suffisamment d'espace pour permettre une saisie de texte. Dans certains cas, l'IME peut imposer une taille minimale.

+ +

Lorsqu'on utilise -ms-ime-align: after, un IME pourra ajuster la fenêtre candidate et le comportement de la saisie clavier afin de permettre une meilleure ergonomie (en utilisant par exemple une liste candidate horizontale et en autorisant l'envoi de certaines touches à l'application pour les suggestions).

+ +

Syntaxe

+ +
/* Keyword values */
+-ms-ime-align: auto;
+-ms-ime-align: after;
+
+ +

La propriété -ms-ime-align est définie avec l'un des mot-clés suivants.

+ +

Valeurs

+ +
+
auto
+
La valeur initiale. L'IME peut aligner la fenêtre candidate de n'importe quelle manière.
+
after
+
L'IME devrait essayer d'aligner la fenêtre candidate sous l'élément (pour les dispositions organisées avec un mode gauche à droite ou avec un mode droite à gauche).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

diff --git a/files/fr/web/css/-ms-overflow-style/index.html b/files/fr/web/css/-ms-overflow-style/index.html new file mode 100644 index 0000000000..b118010d4e --- /dev/null +++ b/files/fr/web/css/-ms-overflow-style/index.html @@ -0,0 +1,43 @@ +--- +title: '-ms-overflow-style' +slug: Web/CSS/-ms-overflow-style +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-overflow-style +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -ms-overflow-style est une propriété propriétaire, spécifique à Internet Explorer et Microsoft Edge qui permet de contrôler le comportement des barres de défilement lorsque le contenu d'un élément déborde.

+ +

Valeurs

+ +
+
auto
+
La valeur initiale. Synonyme de inherit.
+
none
+
Les barres de défilement ne sont jamais affichées. Si l'élément dépasse, on peut toujours le faire défiler.
+
scrollbar
+
Les barres de défilement « classiques » sont affichées si le contenu de l'élément dépasse. Les barres ne se masquent pas automatiquement et ne chevauchent jamais le contenu de l'élément. Les dimensions de la zone accordée au contenu sont réduites d'autant que nécessaire pour afficher les barres de défilement.
+
-ms-autohiding-scrollbar
+
Des barres de défilement sont utilisées si le contenu dépasse et ces barres sont automatiquement masquées. C'est-à-dire qu'elles apparaissent pendant le défilement ou peu après que le pointeur ait interagit avec l'élément. Elles se « cachent » après l'arrêt de l'interaction et/ou du défilement. Lorsqu'elles sont visbles, les barres de défilement empiètent sur le contenu de l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

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

+ +

{{cssinfo}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-ms-scroll-chaining/index.html b/files/fr/web/css/-ms-scroll-chaining/index.html new file mode 100644 index 0000000000..f5ade6d887 --- /dev/null +++ b/files/fr/web/css/-ms-scroll-chaining/index.html @@ -0,0 +1,68 @@ +--- +title: '-ms-scroll-chaining' +slug: Web/CSS/-ms-scroll-chaining +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scroll-chaining +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -ms-scroll-chaining est une propriété spécifique à Microsoft qui définit la façon dont le défilement se comporte lorsque l'utilisateur atteint la limite du défilement suite à une manipulation.

+ +

Syntaxe

+ +

La propriété -ms-scroll-chaining est définie avec l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
chained
+
+

La valeur initiale. L'élément parent le plus proche commence à défiler lorsque l'utilisateur atteint la limite. Il n'y a pas d'effet de rebond.

+
+
none
+
+

Un effet de rebond est utilisé lorsque l'utilisateur atteint la limite de défilement.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Dans l'exemple qui suit, le conteneur de l'image a -ms-scroll-chaining property qui vaut chained et c'est donc l'élément parent qui poursuivra le défilement. Si on avait utilisé none, un effet de blocage avec rebondissement aurait été utilisé. Pour plus d'informations, voir un exemple de défilement, déplacement, zoom en HTML.

+ +
.imageContainer {
+  -ms-scroll-chaining: chained;
+  -ms-overflow-style: none;
+  -ms-content-zooming: zoom;
+  -ms-scroll-rails: none;
+  -ms-content-zoom-limit-min: 100%;
+  -ms-content-zoom-limit-max: 500%;
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+  -ms-overflow-style: none;
+  width: 480px;
+  height: 270px;
+  overflow: auto;
+}
+
+ +

Spécifications

+ +

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

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété ne s'applique qu'aux contrôles tactiles. Quelle que soit la valeur de –ms-scroll-chaining, les contrôles clavier ne permettront pas l'enchaînement du défilement et la navigation à la souris entraînera toujours le défilement sur l'élément ancêtre le plus proche.

+ +

Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.

+ +

Cette propriété est uniquement disponible pour Windows 8 ou les versions ultérieures.

diff --git a/files/fr/web/css/-ms-scroll-limit-x-max/index.html b/files/fr/web/css/-ms-scroll-limit-x-max/index.html new file mode 100644 index 0000000000..88f3276fda --- /dev/null +++ b/files/fr/web/css/-ms-scroll-limit-x-max/index.html @@ -0,0 +1,50 @@ +--- +title: '-ms-scroll-limit-x-max' +slug: Web/CSS/-ms-scroll-limit-x-max +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scroll-limit-x-max +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-scroll-limit-x-max est une propriété spécifique à Microsoft qui indique la valeur maximum pour la propriété {{domxref("Element.scrollLeft")}}.

+ +

Cette propriété est accessible en lecture et en écriture.

+ +

Syntaxe

+ +

La propriété -ms-scroll-limit-x-max est définie avec l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
auto
+
+

La valeur maximale pour scrollLeft est égale à scrollWidth.

+
+
{{cssxref("length")}}
+
+

La longueur maximale choisie pour scrollLeft.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.

+ +

Le comportement choisi avec -ms-scroll-limit-x-max s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.

+ +

Cette propriété est uniquement disponible à partir de Windows 8.

diff --git a/files/fr/web/css/-ms-scroll-limit-x-min/index.html b/files/fr/web/css/-ms-scroll-limit-x-min/index.html new file mode 100644 index 0000000000..b9f22df94e --- /dev/null +++ b/files/fr/web/css/-ms-scroll-limit-x-min/index.html @@ -0,0 +1,44 @@ +--- +title: '-ms-scroll-limit-x-min' +slug: Web/CSS/-ms-scroll-limit-x-min +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scroll-limit-x-min +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -ms-scroll-limit-x-min est une propriété spécifique à Microsoft qui indique la valeur minimale pour la propriété {{domxref("Element.scrollLeft")}}.

+ +

Syntaxe

+ +

La propriété -ms-scroll-limit-x-min est définie avec une longueur.

+ +

Valeurs

+ +
+
{{cssxref("length")}}
+
+

La valeur minimale pour la propriété scrollLeft. Si la valeur fournie est négative, c'est 0 qui sera utilisé.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.

+ +

Le comportement choisi avec -ms-scroll-limit-x-min s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.

+ +

Cette propriété est uniquement disponible à partir de Windows 8.

diff --git a/files/fr/web/css/-ms-scroll-limit-y-max/index.html b/files/fr/web/css/-ms-scroll-limit-y-max/index.html new file mode 100644 index 0000000000..c677901f71 --- /dev/null +++ b/files/fr/web/css/-ms-scroll-limit-y-max/index.html @@ -0,0 +1,48 @@ +--- +title: '-ms-scroll-limit-y-max' +slug: Web/CSS/-ms-scroll-limit-y-max +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scroll-limit-y-max +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-scroll-limit-y-max est une propriété spécifique à Microsoft qui indique la valeur maximum pour la propriété {{domxref("Element.scrollTop")}}.

+ +

Syntaxe

+ +

La propriété -ms-scroll-limit-y-max est définie avec l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
auto
+
+

La valeur maximale pour scrollTop est égale à {{domxref("Element.scrollHeight")}}.

+
+
{{cssxref("length")}}
+
+

La longueur maximale choisie pour scrollTop.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.

+ +

Le comportement choisi avec -ms-scroll-limit-y-max s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.

+ +

Cette propriété est uniquement disponible à partir de Windows 8.

diff --git a/files/fr/web/css/-ms-scroll-limit-y-min/index.html b/files/fr/web/css/-ms-scroll-limit-y-min/index.html new file mode 100644 index 0000000000..85150a1660 --- /dev/null +++ b/files/fr/web/css/-ms-scroll-limit-y-min/index.html @@ -0,0 +1,44 @@ +--- +title: '-ms-scroll-limit-y-min' +slug: Web/CSS/-ms-scroll-limit-y-min +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scroll-limit-y-min +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -ms-scroll-limit-y-min est une propriété spécifique à Microsoft qui indique la valeur minimale pour la propriété {{domxref("Element.scrollTop")}}.

+ +

Syntaxe

+ +

La propriété -ms-scroll-limit-y-min est définie avec une longueur.

+ +

Valeurs

+ +
+
{{cssxref("length")}}
+
+

La valeur minimale pour la propriété scrollTop. Si la valeur fournie est négative, c'est 0 qui sera utilisé.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.

+ +

Le comportement choisi avec -ms-scroll-limit-y-min s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.

+ +

Cette propriété est uniquement disponible à partir de Windows 8.

diff --git a/files/fr/web/css/-ms-scroll-limit/index.html b/files/fr/web/css/-ms-scroll-limit/index.html new file mode 100644 index 0000000000..b541233201 --- /dev/null +++ b/files/fr/web/css/-ms-scroll-limit/index.html @@ -0,0 +1,56 @@ +--- +title: '-ms-scroll-limit' +slug: Web/CSS/-ms-scroll-limit +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scroll-limit +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS -ms-scroll-limit est une propriété raccourcie spécifique à Microsoft qui définit les valeurs de {{cssxref("-ms-scroll-limit-x-min")}}, {{cssxref("-ms-scroll-limit-y-min")}}, {{cssxref("-ms-scroll-limit-x-max")}} et {{cssxref("-ms-scroll-limit-y-max")}}.

+ +

Syntaxe

+ +

La propriété -ms-scroll-limit est définie avec une ou plusieurs valeurs de limite de défilmeent dans l'ordre et séparées par des espaces.

+ +

Valeurs

+ +
+
-ms-scroll-limit-x-min
+
+

La valeur utilisée pour la propriété {{cssxref("-ms-scroll-limit-x-min")}}.

+
+
-ms-scroll-limit-y-min
+
+

La valeur utilisée pour la propriété {{cssxref("-ms-scroll-limit-y-min")}}.

+
+
-ms-scroll-limit-x-max
+
+

La valeur utilisée pour la propriété {{cssxref("-ms-scroll-limit-x-max")}}.

+
+
-ms-scroll-limit-y-max
+
+

La valeur utilisée pour la propriété {{cssxref("-ms-scroll-limit-y-max")}}.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique à Microsoft et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.

+ +

Le comportement choisi avec -ms-scroll-limit s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.

+ +

Cette propriété est uniquement disponible à partir de Windows 8.

diff --git a/files/fr/web/css/-ms-scroll-rails/index.html b/files/fr/web/css/-ms-scroll-rails/index.html new file mode 100644 index 0000000000..c5441922c5 --- /dev/null +++ b/files/fr/web/css/-ms-scroll-rails/index.html @@ -0,0 +1,50 @@ +--- +title: '-ms-scroll-rails' +slug: Web/CSS/-ms-scroll-rails +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scroll-rails +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété -ms-scroll-rails est une propriété spécifique à Microsoft qui indique si le défilement est contraint sur l'axe principal du déplacement.

+ +

Cette propriété est accessible en lecture et en écriture.

+ +

Syntaxe

+ +

La propriété -ms-scroll-rails est définie avec l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
none
+
+

Le contenu défile en suivant exactement le doigt de l'utilisateur. Cette valeur permet un déplacement libre.

+
+
railed
+
+

Le défilement est contraint sur l'axe principal. C'est la valeur par défaut.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété n'a adeucun effet sur les éléments qu'on ne peut pas faire défiler.

+ +

À partir de Windows 8.1, cette propriété est prise en charge pour les interactions au pavé tactile.

+ +

Cette propriété est uniquement disponible à partir de Windows 8.

diff --git a/files/fr/web/css/-ms-scroll-snap-points-x/index.html b/files/fr/web/css/-ms-scroll-snap-points-x/index.html new file mode 100644 index 0000000000..85d49351c5 --- /dev/null +++ b/files/fr/web/css/-ms-scroll-snap-points-x/index.html @@ -0,0 +1,88 @@ +--- +title: '-ms-scroll-snap-points-x' +slug: Web/CSS/-ms-scroll-snap-points-x +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scroll-snap-points-x +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La propriété CSS -ms-scroll-snap-points-x est une propriété spécifique à Microsoft qui définit l'emplacement des points d'accroche le long de l'axe horizontal.

+ +

Syntaxe

+ +

Valeurs

+ +
+

Note : Une valeur de type <length-percentage> est une valeur de type {{cssxref("<length>")}} ou une valeur de type {{cssxref("<percentaqe>")}}.

+
+ +
+
snapInterval( <length-percentage>, <length-percentage> )
+
+

Cette forme permet d'indiquer la position d'un point d'accroche puis l'intervalle entre les points d'accroche.

+ +
    +
  • La première valeur indique l'emplacement du premier point d'accroche.
    • +
  • La seconde valeur indique la distance entre chaque point d'accroche qui suit ou précède (c'est-à-dire à gauche et à droite du point d'accroche initial).
    • +
+
+
snapList( <length-percentage># )
+
+

Cette forme permet d'indiquer l'ensemble des points d'accroche comme une liste de valeurs séparées par des virgules. Chaque valeur représente un facteur de zoom.

+ +
    +
  • Si la valeur est inférieure à {{CSSXref("-ms-scroll-limit-x-min")}}, {{CSSXref("-ms-scroll-limit-x-min")}} sera utilisée.
    • +
  • Si la valeur est supérieure à {{CSSXref("-ms-scroll-limit-x-max")}}, {{CSSXref("-ms-scroll-limit-x-max")}} sera utilisée.
    • +
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Dans cet exemple, on illustre les deux types de valeurs possibles pour -ms-scroll-snap-points-x. Dans le premier sélecteur, le premier point d'accroche se situe à 0% et l'intervalle est défini à 100%. Dans le second sélecteur, chaque point d'accroche est défini séparément (à 100%, 200%, 300%, et ainsi de suite).

+ +
.container {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -ms-scroll-snap-type: mandatory;
+  -ms-scroll-snap-points-x: snapInterval(0%, 100%);
+  width: 480px;
+  height: 270px;
+}
+
+.imageContainer {
+  -ms-scroll-chaining: chained;
+  -ms-overflow-style: none;
+  -ms-content-zooming: zoom;
+  -ms-scroll-rails: none;
+  -ms-scroll-limit-x-min: 100%;
+  -ms-scroll-limit-x-max: 500%;
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+  -ms-overflow-style: none;
+  width: 480px;
+  height: 270px;
+  overflow: auto;
+}
+
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.

+ +

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.

diff --git a/files/fr/web/css/-ms-scroll-snap-points-y/index.html b/files/fr/web/css/-ms-scroll-snap-points-y/index.html new file mode 100644 index 0000000000..6568891ed1 --- /dev/null +++ b/files/fr/web/css/-ms-scroll-snap-points-y/index.html @@ -0,0 +1,94 @@ +--- +title: '-ms-scroll-snap-points-y' +slug: Web/CSS/-ms-scroll-snap-points-y +tags: + - CSS + - Non-standard + - Reference +translation_of: Archive/Web/CSS/-ms-scroll-snap-points-y +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La propriété CSS -ms-scroll-snap-points-y est une propriété spécifique à Microsoft qui définit l'emplacement des points d'accroche le long de l'axe vertical.

+ +

Syntaxe

+ +

Valeurs

+ +
+

Note : Une valeur de type <length-percentage> est une valeur de type {{cssxref("<length>")}} ou une valeur de type {{cssxref("<percentaqe>")}}.

+
+ +
+
snapInterval( <length-percentage>, <length-percentage> )
+
+

Cette forme permet d'indiquer la position d'un point d'accroche puis l'intervalle entre les points d'accroche.

+ +
    +
  • La première valeur indique l'emplacement du premier point d'accroche.
    • +
  • La seconde valeur indique la distance entre chaque point d'accroche qui suit ou précède (c'est-à-dire au dessus et en dessous du point d'accroche initial).
    • +
+
+
snapList( <length-percentage># )
+
+

Cette forme permet d'indiquer l'ensemble des points d'accroche comme une liste de valeurs séparées par des virgules. Chaque valeur représente un facteur de zoom.

+ +
    +
  • Si la valeur est inférieure à {{CSSXref("-ms-scroll-limit-y-min")}}, {{CSSXref("-ms-scroll-limit-y-min")}} sera utilisée.
    • +
  • Si la valeur est supérieure à {{CSSXref("-ms-scroll-limit-y-max")}}, {{CSSXref("-ms-scroll-limit-y-max")}} sera utilisée.
    • +
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Dans cet exemple, on illustre les deux types de valeurs possibles pour -ms-scroll-snap-points-y. Dans le premier sélecteur, le premier point d'accroche se situe à 0% et l'intervalle est défini à 100%. Dans le second sélecteur, chaque point d'accroche est défini séparément (à 100%, 200%, 300%, et ainsi de suite).

+ +
.container {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -ms-scroll-snap-type: mandatory;
+  -ms-scroll-snap-points-y: snapInterval(0%, 100%);
+  width: 480px;
+  height: 270px;
+}
+
+.imageContainer {
+  -ms-scroll-chaining: chained;
+  -ms-overflow-style: none;
+  -ms-content-zooming: zoom;
+  -ms-scroll-rails: none;
+  -ms-scroll-limit-x-min: 100%;
+  -ms-scroll-limit-x-max: 500%;
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-y: snapList(100%, 200%, 300%, 400%, 500%);
+  -ms-overflow-style: none;
+  width: 480px;
+  height: 270px;
+  overflow: auto;
+}
+
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.

+ +

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/-ms-scroll-snap-type/index.html b/files/fr/web/css/-ms-scroll-snap-type/index.html new file mode 100644 index 0000000000..0007789495 --- /dev/null +++ b/files/fr/web/css/-ms-scroll-snap-type/index.html @@ -0,0 +1,50 @@ +--- +title: '-ms-scroll-snap-type' +slug: Web/CSS/-ms-scroll-snap-type +tags: + - CSS + - Non-standard + - Reference +translation_of: Web/CSS/scroll-snap-type +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La propriété -ms-scroll-snap-type est une propriété spécifique à Microsoft qui indique le type de point d'accroche à utiliser pour l'élément courant.

+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
+

Valeur initiale. Le déplacement et le défilement ne sont pas modifiés par les points d'accroche.

+
+
proximity
+
+

Lorsque l'inertie normale fait arriver à proximité d'un point d'accroche, la vitesse est ajustée afin que le mouvement se termine sur un point d'accroche. Il est toutefois possible que le mouvement se termine entre deux points d'accroche.

+
+
mandatory
+
+

L'inertie est ajustée afin que le mouvement se termine toujours sur un point d'accroche.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

 

+ +

Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.

+ +

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.

diff --git a/files/fr/web/css/-ms-scroll-snap-x/index.html b/files/fr/web/css/-ms-scroll-snap-x/index.html new file mode 100644 index 0000000000..6b889bb584 --- /dev/null +++ b/files/fr/web/css/-ms-scroll-snap-x/index.html @@ -0,0 +1,61 @@ +--- +title: '-ms-scroll-snap-x' +slug: Web/CSS/-ms-scroll-snap-x +tags: + - CSS + - Non-standard + - Propriété raccourcie + - Reference +translation_of: Archive/Web/CSS/-ms-scroll-snap-x +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La propriété raccourcie -ms-scroll-snap-x est une propriété spécifique à Microsoft qui définit les valeurs des propriétés {{cssxref("-ms-scroll-snap-type")}} and {{cssxref("-ms-scroll-snap-points-x")}}.

+ +

Syntaxe

+ +

Valeurs

+ +

La propriété raccourcie -ms-scroll-snap-x est définie avec une ou deux des valeurs suivantes, dans cet ordre et séparées par des espaces.

+ +
+
-ms-scroll-snap-type
+
+

La valeur de la propriété {{cssxref("-ms-scroll-snap-type")}}.

+
+
-ms-scroll-snap-points-x
+
+

La valeur de la propriété {{cssxref("-ms-scroll-snap-points-x")}}.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

La proprirété -ms-scroll-snap-x est une propriété raccourcie. Les deux sélecteurs du fragment de code suivant auront le même effet.

+ +
.scroll1 {
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+}
+
+.scroll2 {
+  -ms-scroll-snap-x: proximity snapList(100%, 200%, 300%, 400%, 500%);
+}
+
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.

+ +

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.

diff --git a/files/fr/web/css/-ms-scroll-snap-y/index.html b/files/fr/web/css/-ms-scroll-snap-y/index.html new file mode 100644 index 0000000000..de5c0836cb --- /dev/null +++ b/files/fr/web/css/-ms-scroll-snap-y/index.html @@ -0,0 +1,61 @@ +--- +title: '-ms-scroll-snap-y' +slug: Web/CSS/-ms-scroll-snap-y +tags: + - CSS + - Non-standard + - Propriété raccourcie + - Reference +translation_of: Archive/Web/CSS/-ms-scroll-snap-y +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La propriété raccourcie -ms-scroll-snap-y est une propriété spécifique à Microsoft qui définit les valeurs des propriétés {{cssxref("-ms-scroll-snap-type")}} and {{cssxref("-ms-scroll-snap-points-y")}}.

+ +

Syntaxe

+ +

Valeurs

+ +

La propriété raccourcie -ms-scroll-snap-y est définie avec une ou deux des valeurs suivantes, dans cet ordre et séparées par des espaces.

+ +
+
-ms-scroll-snap-type
+
+

La valeur de la propriété {{cssxref("-ms-scroll-snap-type")}}.

+
+
-ms-scroll-snap-points-y
+
+

La valeur de la propriété {{cssxref("-ms-scroll-snap-points-y")}}.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

La proprirété -ms-scroll-snap-y est une propriété raccourcie. Les deux sélecteurs du fragment de code suivant auront le même effet.

+ +
.scroll1 {
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-y: snapList(100%, 200%, 300%, 400%, 500%);
+}
+
+.scroll2 {
+  -ms-scroll-snap-y: proximity snapList(100%, 200%, 300%, 400%, 500%);
+}
+
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.

+ +

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.

diff --git a/files/fr/web/css/-ms-scroll-translation/index.html b/files/fr/web/css/-ms-scroll-translation/index.html new file mode 100644 index 0000000000..0246236b59 --- /dev/null +++ b/files/fr/web/css/-ms-scroll-translation/index.html @@ -0,0 +1,54 @@ +--- +title: '-ms-scroll-translation' +slug: Web/CSS/-ms-scroll-translation +tags: + - CSS + - Non-standard + - Reference +translation_of: Archive/Web/CSS/-ms-scroll-translation +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La propriété CSS -ms-scroll-translation est une propriété spécifique à Microsoft qui indique si une translation verticale / horizontale est appliquée lors du défilement sur l'élément ciblé.

+ +

{{cssinfo}}

+ +

Syntaxe

+ +

Valeurs

+ +
+
vertical-to-horizontal
+
+

Une translation verticale/horizontale est appliquée lorsque c'est pertinent.

+
+
none
+
+

Aucune translation n'est appliquée. C'est la valeur initiale pour l'élément {{HTMLElement("html")}}.

+
+
inherit
+
+

La valeur initiale : la valeur de la propriété est héritée via la valeur de l'élément parent.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur

+ +

Si le code JavaScript de la page écoute les évènements DOM liés au défilement, les évènements relatifs au défilement vertical et au défilement horizontal sont distincts et correspondent à l'axe selon lequel l'utilisateur a défilé. La propriété -ms-scroll-translation, avec la valeur vertical-to-horizontal, permet de transformer les évènements de défilement vertical en évènements de défilement horizontal.

+ +

Cette propriété n'a pas d'impact lorsqu'on navigue avec le clavier.

+ +

Les modèles CSS par défaut pour les applications Windows qui utilisent JavaScript, "ui-light.css" et "ui-dark.css" utilisent la valeur vertical-to-horizontal sur l'élément {{HTMLElement("html")}}.

diff --git a/files/fr/web/css/-ms-scrollbar-3dlight-color/index.html b/files/fr/web/css/-ms-scrollbar-3dlight-color/index.html new file mode 100644 index 0000000000..5caa81ebc2 --- /dev/null +++ b/files/fr/web/css/-ms-scrollbar-3dlight-color/index.html @@ -0,0 +1,75 @@ +--- +title: '-ms-scrollbar-3dlight-color' +slug: Web/CSS/-ms-scrollbar-3dlight-color +tags: + - CSS + - Déprécié + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scrollbar-3dlight-color +--- +
{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}
+ +

La propriété -ms-scrollbar-3dlight-color est une propriété spécifique à Microsoft qui définit la couleur pour les bords haut et gauche de la boîte de défilement et pour les flèches de la barre de défilement.

+ +

Syntaxe

+ +

La valeur de -ms-scrollbar-3dlight-color est définie avec une couleur.

+ +

Valeurs

+ +
+
<color>
+
+

Une couleur (cf. type {{cssxref("<color>")}}) qui sera utilisée pour les bords gauche et haut de la boîte de défilement et pour les flèches de l'ascenseur.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

L'exemple qui suit illustre comment appliquer la propriété -ms-scrollbar-3dlight-color à un élément {{HTMLElement("textarea")}}.

+ +

HTML

+ +
<textarea class="Blue3dLight">
+  The top and left edges of the thumb and
+  button-face elements in the scroll bar for
+  this element will be blue.
+</textarea>
+ +

CSS

+ +
.Blue3dLight {
+  -ms-scrollbar-3dlight-color: blue;
+  scrollbar-3dlight-color: blue; /* Use the standard when available. */
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-ms-scrollbar-3dlight-color")}}

+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété est disponible à partir de Internet Explorer 8.

+ +

La boîte de défilement est la boîte carrée dans laquelle une barre de défilement peut être déplacée de haut en bas ou de gauche à droite afin de modifier la position du contenu sur l'écran. Les flèches de défilement sont situées aux extrémités de l'ascenseur et permettent de faire défiler le contenu.

+ +

Cette propriété s'applique aux éléments qui affichent un ascenseur (notamment via la propriété {{cssxref("overflow")}}).

diff --git a/files/fr/web/css/-ms-scrollbar-arrow-color/index.html b/files/fr/web/css/-ms-scrollbar-arrow-color/index.html new file mode 100644 index 0000000000..cc67bd8bde --- /dev/null +++ b/files/fr/web/css/-ms-scrollbar-arrow-color/index.html @@ -0,0 +1,95 @@ +--- +title: '-ms-scrollbar-arrow-color' +slug: Web/CSS/-ms-scrollbar-arrow-color +tags: + - CSS + - Déprécié + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scrollbar-arrow-color +--- +
{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}
+ +

La propriété CSS -ms-scrollbar-arrow-color est une propriété spécifique à Microsoft qui définit la couleur des flèches pour les extrêmités des barres de défilement.

+ +

Syntaxe

+ +

Valeurs

+ +
+
<color>
+
+

La couleur à utiliser pour les flèches des barres de défilement, voir {{cssxref("<color>")}}.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

L'exemple qui suit illustre comment utiliser -ms-scrollbar-arrow-color et {{cssxref("-ms-scrollbar-face-color")}} afin d'afficher une boîte avec une barre de défilement avec un curseur et des flèches bleues d'une part et une boîte avec une barre de défilement avec un curseur et des flèches vertes d'autre part.

+ +

CSS

+ +
div {
+  width: 150px;
+  height: 150px;
+  overflow-y: scroll;
+  border-style: solid;
+  border-width: thin;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.blueScrollBox {
+  scrollbar-face-color: blue;
+  scrollbar-arrow-color: blue;
+}
+.greenScrollBox {
+  scrollbar-face-color: green;
+  scrollbar-arrow-color: green;
+}
+
+ +

HTML

+ +
<body>
+  <div class="blueScrollBox">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  </div>
+  <div class="greenScrollBox">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  </div>
+</body>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Si votre navigateur ne permet de visualiser le résultat, voici une image statique :

+ +

Image for -ms-scrollbar-arrow-color usage example

+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-ms-scrollbar-arrow-color")}}

+ +

Notes

+ +

Pour IE 8, la propriété -ms-scrollbar-arrow-color est une extension et peut être utilisée comme synonyme de scrollbar-arrow-color en mode standard.

+ +

Les flèches de défilement sont présentes sur les boutons situés à chaque extrêmité de la barre de défilement.

+ +

Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{cssxref("overflow")}}.

diff --git a/files/fr/web/css/-ms-scrollbar-base-color/index.html b/files/fr/web/css/-ms-scrollbar-base-color/index.html new file mode 100644 index 0000000000..df5cb77dc5 --- /dev/null +++ b/files/fr/web/css/-ms-scrollbar-base-color/index.html @@ -0,0 +1,95 @@ +--- +title: '-ms-scrollbar-base-color' +slug: Web/CSS/-ms-scrollbar-base-color +tags: + - CSS + - Déprécié + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scrollbar-base-color +--- +
{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}
+ +

La propriété CSS -ms-scrollbar-base-color est une propriété spécifique à Microsoft qui indique la couleur de base à utiliser pour les principaux composants d'une barre de défilement.

+ +

Syntaxe

+ +

Valeurs

+ +
+
<color>
+
+

La couleur de base à utiliser pour les principaux composants de la barre de défilement, voir {{cssxref("<color>")}}.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Dans cet exemple, on utilise les propriétés -ms-scrollbar-base-color et {{cssxref("-ms-scrollbar-arrow-color")}} afin de créer deux objets {{HTMLElement("div")}} ayant chacun un thème différent pour les barres de défilement.

+ +

CSS

+ +
div {
+  width: 150px;
+  height: 150px;
+  border-style: solid;
+  border-width: thin;
+  overflow-y: scroll;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.aquaScroll {
+  scrollbar-base-color: aqua;
+  scrollbar-arrow-color: blue;
+  border-color: blue;
+}
+.bisqueScroll {
+  scrollbar-base-color: bisque;
+  scrollbar-arrow-color: red;
+  border-color: red;
+}
+
+ +

CSS

+ +
<body>
+  <div class="aquaScroll">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  </div>
+  <div class="bisqueScroll">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  </div>
+</body>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

L'image suivante illustre le résultat obtenu. On voit que scrollbar-base-color fournit une couleur de base et que le navigateur décline cette couleur sur différents tons pour les différents composants.

+ +

Image for -ms-scrollbar-base-color example

+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-ms-scrollbar-base-color")}}

+ +

Notes

+ +

Pour IE 8 et les versions ultérieures, la propriété -ms-scrollbar-base-color est une extension et peut être utilisée comme synonyme de scrollbar-base-color en mode standard.

+ +

Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{cssxref("overflow")}}.

diff --git a/files/fr/web/css/-ms-scrollbar-darkshadow-color/index.html b/files/fr/web/css/-ms-scrollbar-darkshadow-color/index.html new file mode 100644 index 0000000000..a2346346f6 --- /dev/null +++ b/files/fr/web/css/-ms-scrollbar-darkshadow-color/index.html @@ -0,0 +1,71 @@ +--- +title: '-ms-scrollbar-darkshadow-color' +slug: Web/CSS/-ms-scrollbar-darkshadow-color +tags: + - CSS + - Déprécié + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scrollbar-darkshadow-color +--- +
{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}
+ +

La propriété -ms-scrollbar-darkshadow-color est une propriété spécifique à Microsoft qui définit la couleur de la gouttière pour l'ascenseur.

+ +

Syntaxe

+ +

La propriété -ms-scrollbar-darkshadow-color est définie avec une couleur.

+ +

Valeurs

+ +
+
<color>
+
+

La couleur de la gouttière (cf. le type {{cssxref("<color>")}} pour les valeurs possibles).

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<textarea class="BlueShadow">
+  The gutter elements in the scroll bar for this
+  element will be blue.
+</textarea>
+ +

CSS

+ +
.BlueShadow {
+  scrollbar-darkshadow-color: blue;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-ms-scrollbar-darkshadow-color")}}

+ +

Notes

+ +

Cette propriété est disponible à partir de Internet Explorer 8.

+ +

La gouttière est l'espace entre la piste et les bords bas et droit de la boîte de défilement et des flèches de l'ascenseur. La couleur -ms-scrollbar-darkshadow-color apparaît en dehors de {{cssxref("-ms-scrollbar-shadow-color")}}.

+ +

Cette propriété s'applique aux éléments qui affichent un ascenseur (notamment via la propriété {{cssxref("overflow")}}).

diff --git a/files/fr/web/css/-ms-scrollbar-face-color/index.html b/files/fr/web/css/-ms-scrollbar-face-color/index.html new file mode 100644 index 0000000000..6a2929243f --- /dev/null +++ b/files/fr/web/css/-ms-scrollbar-face-color/index.html @@ -0,0 +1,93 @@ +--- +title: '-ms-scrollbar-face-color' +slug: Web/CSS/-ms-scrollbar-face-color +tags: + - CSS + - Non-standard + - Obsolete + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scrollbar-face-color +--- +
{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}
+ +

La propriété CSS -ms-scrollbar-face-color est une propriété spécifique à Microsoft qui indique la couleur du curseur de défilement et des flèches de la barre de défilement.

+ +

Syntaxe

+ +

Valeurs

+ +
+
<color>
+
+

La couleur à utiliser pour le curseur et les flèches, cf. {{cssxref("<color>")}}.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Dans cet exemple, on utilise -ms-scrollbar-face-color et {{cssxref("-ms-scrollbar-arrow-color")}} afin de créer deux styles de barre de défilement pour deux boîtes : l'une verte et l'autre bleue.

+ +

CSS

+ +
div {
+  width: 150px;
+  height: 150px;
+  overflow-y: scroll;
+  border-style: solid;
+  border-width: thin;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.blueScrollBox {
+  scrollbar-face-color: blue;
+  scrollbar-arrow-color: blue;
+}
+.greenScrollBox {
+  scrollbar-face-color: green;
+  scrollbar-arrow-color: green;
+}
+
+ +

HTML

+ +
<body>
+  <div class="blueScrollBox">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  </div>
+  <div class="greenScrollBox">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  </div>
+</body>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

L'image qui suit permet d'avoir un aperçu du résultat si votre navigateur n'est pas compatible avec ces fonctionnalités.

+ +

Image for -ms-scrollbar-face-color example

+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-ms-scrollbar-face-color")}}

+ +

Notes

+ +

Cette fonctionnalité est prise en charge à partir de IE 8. Pour IE 8, la propriété -ms-scrollbar-face-color est une extension et peut être utilisée comme synonyme de scrollbar-face-color en mode standard.

+ +

Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{cssxref("overflow")}}.

diff --git a/files/fr/web/css/-ms-scrollbar-highlight-color/index.html b/files/fr/web/css/-ms-scrollbar-highlight-color/index.html new file mode 100644 index 0000000000..43a0ea824b --- /dev/null +++ b/files/fr/web/css/-ms-scrollbar-highlight-color/index.html @@ -0,0 +1,95 @@ +--- +title: '-ms-scrollbar-highlight-color' +slug: Web/CSS/-ms-scrollbar-highlight-color +tags: + - CSS + - Déprécié + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scrollbar-highlight-color +--- +
{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}
+ +

La propriété CSS -ms-scrollbar-highlight-color est une propriété spécifique à Microsoft qui définit la couleur pour la piste et le contour d'une barre de défilement.

+ +

Syntaxe

+ +

Valeurs

+ +
+
<color>
+
+

La couleur à utiliser pour le contour et la piste de la barre de défilement, cf. {{cssxref("<color>")}}.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Dans l'exemple qui suit, on utilise -ms-scrollbar-highlight-color, {{CSSXref("-ms-scrollbar-face-color")}} ainsi que {{CSSXref("-ms-scrollbar-arrow-color")}} afin de créer deux {{HTMLElement("div")}} ayant chacun un thème différent pour les barres de défilement.

+ +

CSS

+ +
div {
+  width: 150px;
+  height: 150px;
+  border-style: solid;
+  border-width: thin;
+  overflow-y: scroll;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.blueScroll {
+  -ms-scrollbar-highlight-color: aqua;
+  -ms-scrollbar-face-color: blue;
+  -ms-scrollbar-arrow-color: blue;
+  border-color: blue;
+}
+.redScroll {
+  -ms-scrollbar-highlight-color: bisque;
+  -ms-scrollbar-face-color: red;
+  -ms-scrollbar-arrow-color: red;
+  border-color: red;
+}
+ +

HTML

+ +
<body>
+  <div class="blueScroll">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  </div>
+  <div class="redScroll">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  </div>
+</body>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

L'image qui suit permet d'avoir un aperçu du résultat si votre navigateur n'est pas compatible avec ces fonctionnalités.

+ +

Image for -ms-scrollbar-highlight-color example

+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-ms-scrollbar-highlight-color")}}

+ +

Notes

+ +

Pour IE 8, la propriété -ms-scrollbar-highlight-color est une extension et peut être utilisée comme synonyme de scrollbar-highlight-color en mode standard.

+ +

Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{cssxref("overflow")}}.

diff --git a/files/fr/web/css/-ms-scrollbar-shadow-color/index.html b/files/fr/web/css/-ms-scrollbar-shadow-color/index.html new file mode 100644 index 0000000000..126fe6fb7f --- /dev/null +++ b/files/fr/web/css/-ms-scrollbar-shadow-color/index.html @@ -0,0 +1,73 @@ +--- +title: '-ms-scrollbar-shadow-color' +slug: Web/CSS/-ms-scrollbar-shadow-color +tags: + - CSS + - Déprécié + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scrollbar-shadow-color +--- +
{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}
+ +

La propriété -ms-scrollbar-shadow-color est une propriété spécifique à Microsoft qui définit la couleur pour les bords bas et droit de la boîte de défilement et pour les flèches de la barre de défilement.

+ +

Syntaxe

+ +

La valeur de -ms-scrollbar-shadow-color est définie avec une couleur.

+ +

Valeurs

+ +
+
<color>
+
+

Une couleur (cf. type {{cssxref("<color>")}}) qui sera utilisée pour les bords droit et bas de la boîte de défilement et pour les flèches de l'ascenseur.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

L'exemple qui suit illustre comment appliquer la propriété -ms-scrollbar-shadow-color à un élément {{HTMLElement("textarea")}}.

+ +

HTML

+ +
<textarea class="BlueShadow">
+ Placeat reiciendis impedit quo qui ea et. Cum quia aut
+ non ut est ducimus necessitatibus
+</textarea>
+ +

CSS

+ +
.BlueShadow {
+  -ms-scrollbar-shadow-color: blue;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-ms-scrollbar-shadow-color")}}

+ +

Notes

+ +

Cette propriété est disponible à partir de Internet Explorer 8. La propriété -ms-scrollbar-shadow-color est une extension spécifique à CSS et, sous le mode Standard d'IE8, peut être utilisée comme synonyme de scrollbar-shadow-color.

+ +

La boîte de défilement est la boîte carrée dans laquelle une barre de défilement peut être déplacée de haut en bas ou de gauche à droite afin de modifier la position du contenu sur l'écran. Les flèches de défilement sont situées aux extrémités de l'ascenseur et permettent de faire défiler le contenu.

+ +

Cette propriété s'applique aux éléments qui affichent un ascenseur (notamment via la propriété {{cssxref("overflow")}}).

diff --git a/files/fr/web/css/-ms-scrollbar-track-color/index.html b/files/fr/web/css/-ms-scrollbar-track-color/index.html new file mode 100644 index 0000000000..557cf14a6b --- /dev/null +++ b/files/fr/web/css/-ms-scrollbar-track-color/index.html @@ -0,0 +1,97 @@ +--- +title: '-ms-scrollbar-track-color' +slug: Web/CSS/-ms-scrollbar-track-color +tags: + - CSS + - Déprécié + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-scrollbar-track-color +--- +
{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}
+ +

La propriété CSS -ms-scrollbar-track-color est une propriété spécifique à Microsoft qui permet de définir la couleur de la piste utilisée pour les barres de défilement.

+ +

Syntaxe

+ +

Valeurs

+ +
+
<color>
+
+

La couleur à utiliser pour la piste (cf. {{cssxref("<color>")}}).

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

L'exemple qui suit utilise -ms-scrollbar-track-color, {{cssxref("-ms-scrollbar-face-color")}} ainsi que {{cssxref("-ms-scrollbar-arrow-color")}} afin de créer deux éléments {{HTMLElement("div")}} disposants d'un thème chacun pour les barres de défilement.

+ +

CSS

+ +
div {
+  width: 150px;
+  height: 150px;
+  border-style: solid;
+  border-width: thin;
+  overflow-y: scroll;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.blueScroll {
+  -ms-scrollbar-highlight-color: aqua;
+  -ms-scrollbar-face-color: blue;
+  -ms-scrollbar-arrow-color: blue;
+  border-color: blue;
+}
+.redScroll {
+  -ms-scrollbar-highlight-color: bisque;
+  -ms-scrollbar-face-color: red;
+  -ms-scrollbar-arrow-color: red;
+  border-color: red;
+}
+
+ +

HTML

+ +
<div class="blueScroll">
+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+</div>
+<div class="redScroll">
+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

L'image suivante illustre le résultat obtenu :

+ +

Image for -scrollbar-track-color example

+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.-ms-scrollbar-track-color")}}

+ +

Notes

+ +

Pour IE 8, la propriété -ms-scrollbar-track-color est une extension et peut être utilisée comme synonyme de scrollbar-track-color en mode standard.

+ +

La piste est l'élément de la barre sur laquelle on déplace le curseur verticalement ou horizontalement

+ +

Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{CSSXref("overflow")}}.

diff --git a/files/fr/web/css/-ms-text-autospace/index.html b/files/fr/web/css/-ms-text-autospace/index.html new file mode 100644 index 0000000000..972ef3bc1d --- /dev/null +++ b/files/fr/web/css/-ms-text-autospace/index.html @@ -0,0 +1,59 @@ +--- +title: '-ms-text-autospace' +slug: Web/CSS/-ms-text-autospace +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-text-autospace +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La propriété -ms-text-autospace est une propriété spécifique à Microsoft qui définit l'espacement automatique et la réduction d'espace lorsque le texte doit être ajusté.

+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
+

La valeur initiale de cette propriété. Aucun effet n'est appliqué, aucun espace supplémentaire n'est ajouté.

+
+
ideograph-alpha
+
+

Un espace supplémentaire est inséré entre le texte idéographique et le texte non-idéographique (alphabet latin, cyrillique, grec, arabe ou hébreu).

+
+
ideograph-numeric
+
+

Un espace supplémentaire est inséré entre le texte idéographique et les caractères numériques.

+
+
ideograph-parenthesis
+
+

Un espace supplémentaire est inséré entre les parenthèses (normales) et un idéographe.

+
+
ideograph-space
+
+

La largeur de l'espace est agrandie lorsque celui-ci est accolé à des idéogrammes.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété est disponible à partir de Windows 8.

+ +

Cette propriété est une extension spécifique à CSS et peut être utilisée comme synonyme de text-autospace lorsqu'IE8 est en mode standard.

+ +

Un idéogramme est un caractère provenant d'un système d'écriture asiatique qui représente un concept ou une idée mais qui ne correspond pas à un mot ou à une prononciation particulière.

diff --git a/files/fr/web/css/-ms-touch-select/index.html b/files/fr/web/css/-ms-touch-select/index.html new file mode 100644 index 0000000000..f59ffad593 --- /dev/null +++ b/files/fr/web/css/-ms-touch-select/index.html @@ -0,0 +1,49 @@ +--- +title: '-ms-touch-select' +slug: Web/CSS/-ms-touch-select +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-touch-select +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La propriété -ms-touch-select est une propriété spécifique à Microsoft qui active la barre d'accroche (gripper) pour les éléments qui permettent de sélectionner du texte au toucher.

+ +

Syntaxe

+ +

Valeurs

+ +
+
grippers
+
+

La valeur initiale pour la propriété. Les points qui forment la barre d'accroche sont toujours activé. De plus, la sélection commencera même si un gestionnaire onclick, onmsgesturetap ou onmouseup est activé.

+
+
none
+
+

La barre d'accroche n'est jamais affichée et les fonctionnalités de sélection tactile par défaut ne sont pas fournies.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Cette propriété est disponible à partir de Windows 8.

+ +

La propriété -ms-touch-select doit uniquement être utilisée par les applications qui fournissent leur propre mécanisme de sélection. La plupart des applications devraient plutôt utiliser la propriété {{cssxref("-ms-user-select")}}.

+ +

Si vous choisissez de masquer la barre d'accroche, vous devrez vous assurer de fournir un mécanisme de sélection tactile. Pour réaliser cela avec JavaScript, vous pouvez voir les différentes API disponibles.

+ +

Cette propriété n'a aucun effet pour les interactions à la souris, au clavier ou au pavé tactile.

diff --git a/files/fr/web/css/-ms-user-select/index.html b/files/fr/web/css/-ms-user-select/index.html new file mode 100644 index 0000000000..a0483f4ac0 --- /dev/null +++ b/files/fr/web/css/-ms-user-select/index.html @@ -0,0 +1,107 @@ +--- +title: '-ms-user-select' +slug: Web/CSS/-ms-user-select +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/user-select +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La propriété CSS -ms-user-select est une propriété spécifique à Microsoft qui indique sur quelle zone d'un élément l'utilisateur peut sélectionner le texte de l'élément.

+ +

Syntax

+ +

Valeurs

+ +
+
none
+
+

Empêche la sélection de commencer sur l'élément. Cette valeur n'empêche pas une sélection déjà initiée de continuer sur l'élément.

+
+
element
+
+

Active la sélection au sein de l'élément. Toutefois, la sélection est limitée aux bords de l'élément.

+
+
text
+
+

Active la sélection au sein de l'élément et permet de poursuivre la sélection à l'extérieur de l'élément.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Dans l'exemple suivant, on utilise le scénario d'un blog avec un conteneur qui est un élément {{HTMLElement("div")}} avec un identifiant blog. Ce conteneur contient un autre élément <div> avec l'identifiant blogPost pour le billet de la page. La classe comment est appliquée aux éléments <div> qui sont des commentaires. Le billet de blog contient un élément {{HTMLElement("input")}} et un élément {{HTMLElement("textarea")}} pour ajouter un commentaire.

+ +

La déclaration suivante désactive la sélection à l'exception du contenu éditable.

+ +
#blog {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+}
+
+ +

La déclaration suivante désactive la sélection pour le reste :

+ +
#blog, #blog input, #blog textarea,
+#blog *[contenteditable=true] {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+}
+
+ +

La déclaration suivante permet aux utilisateurs de ne sélectionner que le contenu du billet.

+ +
#blogPost {
+  -ms-user-select: element;
+  -webkit-user-select:  text;
+  -moz-user-select: text;
+}
+
+#blog {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+}
+
+ +

La déclaration suivante permet aux utilisateurs de ne sélectionner que les commentaires.

+ +
.comment {
+  -ms-user-select: element;
+  -moz-user-select: text;
+  -webkit-user-select: text;
+}
+
+#blog{
+  -ms-user-select: none;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+}
+
+ +

Le code suivan permet de commencer la sélection sur le billet ou sur l'un des commentaires et de poursuivre sur la suite.

+ +
#blogPost, .comment {
+  -ms-user-select: text;
+}
+
+#blog {
+  -ms-user-select: none;
+}
+
+ +

Spécifications

+ +

Cette propriété est une propriété non-standard qui ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

diff --git a/files/fr/web/css/-ms-wrap-flow/index.html b/files/fr/web/css/-ms-wrap-flow/index.html new file mode 100644 index 0000000000..54c93a3ae6 --- /dev/null +++ b/files/fr/web/css/-ms-wrap-flow/index.html @@ -0,0 +1,63 @@ +--- +title: '-ms-wrap-flow' +slug: Web/CSS/-ms-wrap-flow +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-wrap-flow +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La propriété CSS -ms-wrap-flow est une propriété spécifique à Microsoft qui indique comment les exclusions jouent sur le contenu en ligne (inline) au sein des éléments de bloc.

+ +

Syntaxe

+ +

Valeurs

+ +
+
auto
+
+

Une exclusion est créée pour les éléments flottants. Pour les éléments non-flottants, aucune exclusion n'est créée.

+
+
both
+
+

Le contenu en ligne peut s'écouler sur chaque côté de l'exclusion.

+
+
start
+
+

Le contenu en ligne peut passer à la ligne au début de la zone d'exclusion mais ne peut occuper la partie située après la zone d'exclusion.

+
+
end
+
+

Le contenu en ligne peut passer à la ligne après la zone d'exclusion mais ne peut occuper la partie située avant la zone d'exclusion.

+
+
maximum
+
+

Le contenu en ligne peut passer à ligne sur le côté de l'exclusion qui dispose de l'espace le plus grand pour cette ligne (l'autre côté est alors laissé vide).

+
+
clear
+
+

Le contenu en ligne peut uniquement passer à la ligne au dessus et en dessous de l'exclusion, les zones avant le début et après la fin de l'exclusion sont laissées vide.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Spécifications

+ +

Cette propriété n'est pas une propriété standard et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

La propriété -ms-wrap-flow transforme un élément en exclusion lorsque sa valeur calculée est différente de auto. Cette propriété définit le comportement du contenu en ligne autour de cet élément d'exclusion (de façon similaire aux éléments flottants).

+ +

Lorsque -ms-wrap-flow a une valeur calculée différente de auto, l'élément ne devient pas un élément d'exclusion, sauf si la valeur calculée de la propriété float n'est pas none. Dans ce cas, l'élément fournit sa bordure au contexte du bloc englobant et le flux du contenu s'adapte selon la propriété {{cssxref("clear")}}.

+ +

Pour plus d'informations sur l'impact d'un élément d'exclusion quant au flux du contenu, voir la section Terminologie de la spécification de niveau 1 pour les exclusions CSS.

diff --git a/files/fr/web/css/-ms-wrap-margin/index.html b/files/fr/web/css/-ms-wrap-margin/index.html new file mode 100644 index 0000000000..164c64b9f2 --- /dev/null +++ b/files/fr/web/css/-ms-wrap-margin/index.html @@ -0,0 +1,39 @@ +--- +title: '-ms-wrap-margin' +slug: Web/CSS/-ms-wrap-margin +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-wrap-margin +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La propriété -ms-wrap-margin est une propriété spécifique à Microsoft qui définit une marge qui décale le retour à la ligne par rapport aux autres formes.

+ +

Syntaxe

+ +

Valeurs

+ +
+
{{cssxref("<length>")}}
+
+

La taille de la marge avec une valeur non-négative.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

Les décalages créés par la propriété -ms-wrap-margin sont décalés en en dehors de l'exclusion. Cette propriété peut être utilisée avec n'importe quelle valeur de longueur.

diff --git a/files/fr/web/css/-ms-wrap-through/index.html b/files/fr/web/css/-ms-wrap-through/index.html new file mode 100644 index 0000000000..d817d34bbb --- /dev/null +++ b/files/fr/web/css/-ms-wrap-through/index.html @@ -0,0 +1,45 @@ +--- +title: '-ms-wrap-through' +slug: Web/CSS/-ms-wrap-through +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Archive/Web/CSS/-ms-wrap-through +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La propriété CSS -ms-wrap-through est une propriété spécifique à Microsoft qui indique comment le contenu devrait s'écouler autour d'un élément d'exclusion.

+ +

Syntaxe

+ +

Valeurs

+ +
+
wrap
+
+

L'élément d'exclusion hérite de la configuration de l'élément parent. Les éléments en ligne descendants s'écoulent autour des éléments d'exclusion définis en dehors de l'élément.

+
+
none
+
+

L'élément d'exclusion n'hérite pas de la configuration de l'élément parent. Les éléments descendants s'écoulent uniquement autour des éléments d'exclusion définis à l'intérieur de l'élément.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

La propriété -ms-wrap-through peut être utilisée afin de contrôler l'effet des exclusions. On peut notamment avoir un contenu de bloc qui s'écoule autour d'un élément d'exclusion et un autre contenu de bloc de créer une intersection avec ce même élément d'exclusion.

+ +

Le contour d'exclusion d'une boîte est formé par l'ensemble des zones d'exclusion associées à l'élément. Pour plus d'informations, voir la section Terminologie de la spécification de niveau 1 pour le module CSS Exclusions.

diff --git a/files/fr/web/css/-webkit-border-before/index.html b/files/fr/web/css/-webkit-border-before/index.html new file mode 100644 index 0000000000..9c99fe83cd --- /dev/null +++ b/files/fr/web/css/-webkit-border-before/index.html @@ -0,0 +1,108 @@ +--- +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 new file mode 100644 index 0000000000..63a8855074 --- /dev/null +++ b/files/fr/web/css/-webkit-box-reflect/index.html @@ -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 new file mode 100644 index 0000000000..bf848f41a5 --- /dev/null +++ b/files/fr/web/css/-webkit-line-clamp/index.html @@ -0,0 +1,101 @@ +--- +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 new file mode 100644 index 0000000000..30f5caeb13 --- /dev/null +++ b/files/fr/web/css/-webkit-mask-attachment/index.html @@ -0,0 +1,75 @@ +--- +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 new file mode 100644 index 0000000000..eccee98f66 --- /dev/null +++ b/files/fr/web/css/-webkit-mask-box-image/index.html @@ -0,0 +1,94 @@ +--- +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 new file mode 100644 index 0000000000..1acfc7d25d --- /dev/null +++ b/files/fr/web/css/-webkit-mask-composite/index.html @@ -0,0 +1,95 @@ +--- +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-image/index.html b/files/fr/web/css/-webkit-mask-image/index.html new file mode 100644 index 0000000000..c68e391c6b --- /dev/null +++ b/files/fr/web/css/-webkit-mask-image/index.html @@ -0,0 +1,174 @@ +--- +title: '-webkit-mask-image' +slug: Web/CSS/-webkit-mask-image +tags: + - CSS +translation_of: Web/CSS/mask-image +--- +

{{ CSSRef() }}

+ +

{{ Non-standard_header() }}

+ +

Résumé

+ +

La propriété CSS -webkit-mask-image définit l'image de masque pour un élément. L'image de masque découpe la portion visible d'un élément conformément aux valeurs de transparence de cette image.

+ + + +

Syntaxe

+ +
-webkit-mask-image:  <mask-image>[, <mask-image>]*
+
+ +

Valeurs :

+ +
+
<mask-image>
+
{{cssxref("<uri>")}} | <gradient> | none
+
+ +

Values

+ +
+
<uri>
+
Chemin de la ressource image utilisée comme masque.
+
 
+
<gradient>
+
Fonction-webkit-gradient utilisée comme masque.
+
none
+
Signifie que l'élément n'a pas de masque image.
+
+ +

Exemples

+ +
body {
+    -webkit-mask-image: url('images/mymask.png');
+}
+
+div {
+    -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
+}
+
+p {
+    -webkit-mask-image: none;
+}
+
+ +

Notes

+ +

Si plusieurs images de masque sont spécifiées, la région visible résultat sera la combinaison des régions visibles de chaque image.

+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Support basique{{ CompatNo() }}1.0{{ CompatNo() }}{{ CompatNo() }}4.0
Images de masque multiples{{ CompatNo() }}1.0{{ CompatNo() }}{{ CompatNo() }}4.0
Dégradés{{ CompatNo() }}1.0{{ property_prefix("-webkit") }}{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}
Masques SVG{{ CompatNo() }}8.0{{ CompatNo() }}{{ CompatNo() }}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéiOS SafariOpera MiniOpera MobileAndroid Browser
Support basique3.2{{ CompatNo() }}{{ CompatNo() }}2.1
Images de masque multiplesyes{{ CompatNo() }}{{ CompatNo() }}yes
Dégradésyes {{ property_prefix("-webkit") }}{{ CompatNo() }}{{ CompatNo() }}yes{{ property_prefix("-webkit") }}
+

Masques SVG

+ 		+

yes

+ 		+

{{ CompatNo() }}

+ 		+

{{ CompatNo() }}

+ 		+

yes

+
+
+ +
Note : Gecko supporte les effets de filtre SVG depuis sa version 1.9.1. Ils peuvent être utilisés pour masquer du contenu HTML.
+ +

Voir également

+ +

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

diff --git a/files/fr/web/css/-webkit-mask-position-x/index.html b/files/fr/web/css/-webkit-mask-position-x/index.html new file mode 100644 index 0000000000..af1b699b8b --- /dev/null +++ b/files/fr/web/css/-webkit-mask-position-x/index.html @@ -0,0 +1,90 @@ +--- +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 new file mode 100644 index 0000000000..d620e75b1d --- /dev/null +++ b/files/fr/web/css/-webkit-mask-position-y/index.html @@ -0,0 +1,92 @@ +--- +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 new file mode 100644 index 0000000000..513d898b57 --- /dev/null +++ b/files/fr/web/css/-webkit-mask-repeat-x/index.html @@ -0,0 +1,88 @@ +--- +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 new file mode 100644 index 0000000000..3c59b32302 --- /dev/null +++ b/files/fr/web/css/-webkit-mask-repeat-y/index.html @@ -0,0 +1,88 @@ +--- +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 new file mode 100644 index 0000000000..8a9c9ee4d3 --- /dev/null +++ b/files/fr/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,86 @@ +--- +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 new file mode 100644 index 0000000000..b7f3904833 --- /dev/null +++ b/files/fr/web/css/-webkit-print-color-adjust/index.html @@ -0,0 +1,63 @@ +--- +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 new file mode 100644 index 0000000000..e2abe32c3c --- /dev/null +++ b/files/fr/web/css/-webkit-tap-highlight-color/index.html @@ -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 new file mode 100644 index 0000000000..886519717f --- /dev/null +++ b/files/fr/web/css/-webkit-text-fill-color/index.html @@ -0,0 +1,101 @@ +--- +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 new file mode 100644 index 0000000000..290fc9d2b7 --- /dev/null +++ b/files/fr/web/css/-webkit-text-security/index.html @@ -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 new file mode 100644 index 0000000000..fe756244da --- /dev/null +++ b/files/fr/web/css/-webkit-text-stroke-color/index.html @@ -0,0 +1,112 @@ +--- +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 new file mode 100644 index 0000000000..15aa0db12c --- /dev/null +++ b/files/fr/web/css/-webkit-text-stroke-width/index.html @@ -0,0 +1,121 @@ +--- +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 new file mode 100644 index 0000000000..5ad00e1c52 --- /dev/null +++ b/files/fr/web/css/-webkit-text-stroke/index.html @@ -0,0 +1,98 @@ +--- +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 new file mode 100644 index 0000000000..3e6acd191c --- /dev/null +++ b/files/fr/web/css/-webkit-touch-callout/index.html @@ -0,0 +1,56 @@ +--- +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 new file mode 100644 index 0000000000..9de828ed03 --- /dev/null +++ b/files/fr/web/css/@charset/index.html @@ -0,0 +1,82 @@ +--- +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 new file mode 100644 index 0000000000..51c9cb0094 --- /dev/null +++ b/files/fr/web/css/@counter-style/additive-symbols/index.html @@ -0,0 +1,87 @@ +--- +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 new file mode 100644 index 0000000000..cf00348402 --- /dev/null +++ b/files/fr/web/css/@counter-style/fallback/index.html @@ -0,0 +1,90 @@ +--- +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 new file mode 100644 index 0000000000..12dd1653c3 --- /dev/null +++ b/files/fr/web/css/@counter-style/index.html @@ -0,0 +1,171 @@ +--- +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 new file mode 100644 index 0000000000..375fafa8fb --- /dev/null +++ b/files/fr/web/css/@counter-style/negative/index.html @@ -0,0 +1,99 @@ +--- +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

+ +

{{CompatibilityTable}}

+ + + +

{{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 new file mode 100644 index 0000000000..ce73abaeca --- /dev/null +++ b/files/fr/web/css/@counter-style/pad/index.html @@ -0,0 +1,98 @@ +--- +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 new file mode 100644 index 0000000000..25de1edd1c --- /dev/null +++ b/files/fr/web/css/@counter-style/prefix/index.html @@ -0,0 +1,95 @@ +--- +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 new file mode 100644 index 0000000000..92043910dc --- /dev/null +++ b/files/fr/web/css/@counter-style/range/index.html @@ -0,0 +1,122 @@ +--- +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 new file mode 100644 index 0000000000..d3a7631b4e --- /dev/null +++ b/files/fr/web/css/@counter-style/speak-as/index.html @@ -0,0 +1,129 @@ +--- +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 new file mode 100644 index 0000000000..a39b699c0d --- /dev/null +++ b/files/fr/web/css/@counter-style/suffix/index.html @@ -0,0 +1,93 @@ +--- +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 new file mode 100644 index 0000000000..2440d1a430 --- /dev/null +++ b/files/fr/web/css/@counter-style/symbols/index.html @@ -0,0 +1,108 @@ +--- +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 new file mode 100644 index 0000000000..378154364d --- /dev/null +++ b/files/fr/web/css/@counter-style/system/index.html @@ -0,0 +1,340 @@ +--- +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 new file mode 100644 index 0000000000..27549052b9 --- /dev/null +++ b/files/fr/web/css/@document/index.html @@ -0,0 +1,86 @@ +--- +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/font-display/index.html b/files/fr/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..f044ddbc3e --- /dev/null +++ b/files/fr/web/css/@font-face/font-display/index.html @@ -0,0 +1,92 @@ +--- +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 new file mode 100644 index 0000000000..3d9e1c6717 --- /dev/null +++ b/files/fr/web/css/@font-face/font-family/index.html @@ -0,0 +1,69 @@ +--- +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 new file mode 100644 index 0000000000..e7ab910e64 --- /dev/null +++ b/files/fr/web/css/@font-face/font-stretch/index.html @@ -0,0 +1,183 @@ +--- +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 new file mode 100644 index 0000000000..b3265e2d68 --- /dev/null +++ b/files/fr/web/css/@font-face/font-style/index.html @@ -0,0 +1,101 @@ +--- +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 new file mode 100644 index 0000000000..d9dd7e0789 --- /dev/null +++ b/files/fr/web/css/@font-face/font-variation-settings/index.html @@ -0,0 +1,71 @@ +--- +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 new file mode 100644 index 0000000000..21fcbc251f --- /dev/null +++ b/files/fr/web/css/@font-face/font-weight/index.html @@ -0,0 +1,173 @@ +--- +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 new file mode 100644 index 0000000000..9e55c634fb --- /dev/null +++ b/files/fr/web/css/@font-face/index.html @@ -0,0 +1,190 @@ +--- +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/src/index.html b/files/fr/web/css/@font-face/src/index.html new file mode 100644 index 0000000000..ff77ace03b --- /dev/null +++ b/files/fr/web/css/@font-face/src/index.html @@ -0,0 +1,85 @@ +--- +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 new file mode 100644 index 0000000000..e8eec9242d --- /dev/null +++ b/files/fr/web/css/@font-face/unicode-range/index.html @@ -0,0 +1,109 @@ +--- +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 new file mode 100644 index 0000000000..4353939675 --- /dev/null +++ b/files/fr/web/css/@font-feature-values/index.html @@ -0,0 +1,91 @@ +--- +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 new file mode 100644 index 0000000000..176945cf96 --- /dev/null +++ b/files/fr/web/css/@import/index.html @@ -0,0 +1,81 @@ +--- +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 new file mode 100644 index 0000000000..70f1d251c6 --- /dev/null +++ b/files/fr/web/css/@keyframes/index.html @@ -0,0 +1,171 @@ +--- +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 new file mode 100644 index 0000000000..2aa1ca70a4 --- /dev/null +++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html @@ -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.

+ +
+

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-mac-graphite-theme/index.html b/files/fr/web/css/@media/-moz-mac-graphite-theme/index.html new file mode 100644 index 0000000000..0e40cdfb52 --- /dev/null +++ b/files/fr/web/css/@media/-moz-mac-graphite-theme/index.html @@ -0,0 +1,34 @@ +--- +title: '-moz-mac-graphite-theme' +slug: Web/CSS/@media/-moz-mac-graphite-theme +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-mac-graphite-theme +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

La caractéristique média -moz-mac-graphite-theme, rattachée à la règle @  @media, est spécifique à Gecko et peut être utilisée afin d'appliquer des styles si, sur macOS, l'utilisateur utilise le thème "Graphite".

+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'utilisateur a configuré son appareil afin d'utiliser le thème "Graphite" de macOS X, cette caractéristique vaut 1. Sinon, elle vaut 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-maemo-classic/index.html b/files/fr/web/css/@media/-moz-maemo-classic/index.html new file mode 100644 index 0000000000..1711266448 --- /dev/null +++ b/files/fr/web/css/@media/-moz-maemo-classic/index.html @@ -0,0 +1,30 @@ +--- +title: '-moz-maemo-classic' +slug: Web/CSS/@media/-moz-maemo-classic +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-maemo-classic +--- +
{{CSSRef}}{{Non-standard_Header}}{{Gecko_MinVersion_Header("1.9.2")}}
+ +

La caractérique média -moz-maemo-classic, rattachée à la règle @ @media, est spécifique à Gecko et permet d'appliquer des styles si l'agent utilisateur utilise le thème Maemo original.

+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'agent utilisateur utilise Maemo avec le thème original, cette caractéristique vaut 1. Sinon, elle vaut 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-os-version/index.html b/files/fr/web/css/@media/-moz-os-version/index.html new file mode 100644 index 0000000000..5fafbdb5c5 --- /dev/null +++ b/files/fr/web/css/@media/-moz-os-version/index.html @@ -0,0 +1,34 @@ +--- +title: '-moz-os-version' +slug: Web/CSS/@media/-moz-os-version +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-os-version +--- +
{{cssref}}{{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

La caractéristique média -moz-os-version, rattachée à la règle @ @media, est spécifique à Gecko et permet d'appliquer des styles en fonction de la version de Windows de l'utilisateur. Cela peut être utile afin d'adapter l'apparence d'une interface utilisateur en fonction de la version du système d'exploitation.

+ +

Syntaxe

+ +

Valeurs

+ +
+
windows-win7
+
Le système d'exploitation est Windows 7.
+
windows-win8
+
Le système d'exploitation est Windows 8.
+
windows-win10
+
Le système d'exploitation est Windows 10.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non

diff --git a/files/fr/web/css/@media/-moz-scrollbar-end-backward/index.html b/files/fr/web/css/@media/-moz-scrollbar-end-backward/index.html new file mode 100644 index 0000000000..823591be7f --- /dev/null +++ b/files/fr/web/css/@media/-moz-scrollbar-end-backward/index.html @@ -0,0 +1,32 @@ +--- +title: '-moz-scrollbar-end-backward' +slug: Web/CSS/@media/-moz-scrollbar-end-backward +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-scrollbar-end-backward +--- +
{{cssref}}{{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'interface de l'appareil affiche une flèche à la fin des ascensceurs (scrollbars), cette caractéristique vaut 1 et sinon 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-scrollbar-end-forward/index.html b/files/fr/web/css/@media/-moz-scrollbar-end-forward/index.html new file mode 100644 index 0000000000..2d7bb0dd8a --- /dev/null +++ b/files/fr/web/css/@media/-moz-scrollbar-end-forward/index.html @@ -0,0 +1,32 @@ +--- +title: '-moz-scrollbar-end-forward' +slug: Web/CSS/@media/-moz-scrollbar-end-forward +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-scrollbar-end-forward +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'interface de l'appareil affiche un bouton avec une flèche à la fin des ascenseurs (scrollbars), cette caractéristique vaut 1, sinon elle vaut 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-scrollbar-start-backward/index.html b/files/fr/web/css/@media/-moz-scrollbar-start-backward/index.html new file mode 100644 index 0000000000..1424cda885 --- /dev/null +++ b/files/fr/web/css/@media/-moz-scrollbar-start-backward/index.html @@ -0,0 +1,32 @@ +--- +title: '-moz-scrollbar-start-backward' +slug: Web/CSS/@media/-moz-scrollbar-start-backward +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-scrollbar-start-backward +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'interface de l'appareil affiche un bouton avec une flèche vers l'arrière à la fin des ascenseurs (scrollbars), cette caractéristique vaut 1 et sinon 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-scrollbar-start-forward/index.html b/files/fr/web/css/@media/-moz-scrollbar-start-forward/index.html new file mode 100644 index 0000000000..851323ed06 --- /dev/null +++ b/files/fr/web/css/@media/-moz-scrollbar-start-forward/index.html @@ -0,0 +1,32 @@ +--- +title: '-moz-scrollbar-start-forward' +slug: Web/CSS/@media/-moz-scrollbar-start-forward +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-scrollbar-start-forward +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'interface de l'appareil affiche une flèche vers l'avant au début des ascenseurs (scrollbars), cette caractéristique vaut 1 et sinon 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-scrollbar-thumb-proportional/index.html b/files/fr/web/css/@media/-moz-scrollbar-thumb-proportional/index.html new file mode 100644 index 0000000000..575085f65a --- /dev/null +++ b/files/fr/web/css/@media/-moz-scrollbar-thumb-proportional/index.html @@ -0,0 +1,32 @@ +--- +title: '-moz-scrollbar-thumb-proportional' +slug: Web/CSS/@media/-moz-scrollbar-thumb-proportional +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-scrollbar-thumb-proportional +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'interface de l'appareil affiche une barre de défilement dont la taille est proportionnelle au pourcentage du document visible, cette caractéristique vaut 1 et sinon 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-touch-enabled/index.html b/files/fr/web/css/@media/-moz-touch-enabled/index.html new file mode 100644 index 0000000000..76b8621ab3 --- /dev/null +++ b/files/fr/web/css/@media/-moz-touch-enabled/index.html @@ -0,0 +1,46 @@ +--- +title: '-moz-touch-enabled' +slug: Web/CSS/@media/-moz-touch-enabled +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-touch-enabled +--- +

{{CSSRef}}{{Non-standard_Header}}{{Gecko_MinVersion_Header("1.9.2")}}

+ +
+

Note : Depuis Firefox 58, cette caractéristique média ne peut plus être utilisée pour du contenu web, elle est uniquement accessible pour du code pour le chrome/XUL. Voir {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Cette caractéristique vaut 1 si l'appareil prend en charge les évènements tactiles et 0 sinon.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non

+ +

Exemples

+ +

Cette caractéristique peut être utilisée pour afficher des boutons plus gros si l'utilisateur emploie un appareil tactile.

+ +
button {
+  padding: .5em;
+}
+
+@media (-moz-touch-enabled) {
+  button {
+    padding: 1em;
+  }
+}
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html b/files/fr/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html new file mode 100644 index 0000000000..3b2937525c --- /dev/null +++ b/files/fr/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html @@ -0,0 +1,46 @@ +--- +title: '-moz-windows-accent-color-in-titlebar' +slug: Web/CSS/@media/-moz-windows-accent-color-in-titlebar +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-windows-accent-color-in-titlebar +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

La caractéristique média -moz-windows-accent-color-in-titlebar, spécifique à Gecko et rattachée à la règle @ @media, peut-être utilisée afin d'appliquer des styles selon que les couleurs d'accentuation de Microsoft Windows pour les barres de titres sont activées ou non.

+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Cette caractéristique vaut 1 si les couleurs d'accentuation sont activées pour les barres de titre des fenêtres (pour les versions récentes de Windows, par exemple Windows 10). Sinon, elle vaut 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : non

+ +

Exemples

+ +
@media (-moz-windows-accent-color-in-titlebar: 1) {
+  h1 {
+    color: -moz-win-accentcolortext;
+  }
+
+  body {
+    background-color: -moz-win-accentcolor;
+  }
+}
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-windows-classic/index.html b/files/fr/web/css/@media/-moz-windows-classic/index.html new file mode 100644 index 0000000000..eed112dbf8 --- /dev/null +++ b/files/fr/web/css/@media/-moz-windows-classic/index.html @@ -0,0 +1,34 @@ +--- +title: '-moz-windows-classic' +slug: Web/CSS/@media/-moz-windows-classic +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-windows-classic +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Cette caractéristique vaut 1 si l'utilisateur utilise Windows sans aucun thème (c'est-à-dire en mode classique plutôt qu'en mode uxtheme). Sinon, elle vaut 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des prefixes min/max : non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-windows-compositor/index.html b/files/fr/web/css/@media/-moz-windows-compositor/index.html new file mode 100644 index 0000000000..c590e35390 --- /dev/null +++ b/files/fr/web/css/@media/-moz-windows-compositor/index.html @@ -0,0 +1,32 @@ +--- +title: '-moz-windows-compositor' +slug: Web/CSS/@media/-moz-windows-compositor +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/-moz-windows-compositor' +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Cette caractéristique vaut 1 si l'utilisateur utilise Windows avec le compositeur DWM. Sinon, elle vaut 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-windows-default-theme/index.html b/files/fr/web/css/@media/-moz-windows-default-theme/index.html new file mode 100644 index 0000000000..8a84ca3119 --- /dev/null +++ b/files/fr/web/css/@media/-moz-windows-default-theme/index.html @@ -0,0 +1,34 @@ +--- +title: '-moz-windows-default-theme' +slug: Web/CSS/@media/-moz-windows-default-theme +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-windows-default-theme +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'utilisateur utilise un thème Windows par défaut (Luna, Royale, Zune ou Aero (incluant Vista Basic, Vista Advanced et Aero Glass)), cette caractéristique vaut 1 et sinon elle vaut 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-windows-glass/index.html b/files/fr/web/css/@media/-moz-windows-glass/index.html new file mode 100644 index 0000000000..9fdccd49a6 --- /dev/null +++ b/files/fr/web/css/@media/-moz-windows-glass/index.html @@ -0,0 +1,25 @@ +--- +title: '-moz-windows-glass' +slug: Web/CSS/@media/-moz-windows-glass +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-windows-glass +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Cette caractéristique vaut 1 si l'utilisateur utilise l thème Windows Glass et 0 sinon. Note : ce thème n'existe que pour Windows 7 et les versions antérieures.
+
+ +

Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : non

diff --git a/files/fr/web/css/@media/-moz-windows-theme/index.html b/files/fr/web/css/@media/-moz-windows-theme/index.html new file mode 100644 index 0000000000..c0bebdf7f1 --- /dev/null +++ b/files/fr/web/css/@media/-moz-windows-theme/index.html @@ -0,0 +1,43 @@ +--- +title: '-moz-windows-theme' +slug: Web/CSS/@media/-moz-windows-theme +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-windows-theme +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

La caractéristique média -moz-windows-theme, spécifique à Gecko et rattachée à la règle @ @media, permet de personnaliser les éléments d'interfaces afin que ceux-ci soient bien intégrés par rapport au thème Windows utilisé par l'utilisateur.

+ +

Syntaxe

+ +

La caractéristique -moz-windows-theme est un mot-clé indiquant le thème Windows actuellement utilisé.

+ +

Valeurs

+ + + +

Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-webkit-animation/index.html b/files/fr/web/css/@media/-webkit-animation/index.html new file mode 100644 index 0000000000..bdb863a659 --- /dev/null +++ b/files/fr/web/css/@media/-webkit-animation/index.html @@ -0,0 +1,38 @@ +--- +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 new file mode 100644 index 0000000000..189f3d58b7 --- /dev/null +++ b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html @@ -0,0 +1,119 @@ +--- +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' in that document.		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 new file mode 100644 index 0000000000..70111c8f46 --- /dev/null +++ b/files/fr/web/css/@media/-webkit-transform-2d/index.html @@ -0,0 +1,36 @@ +--- +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 new file mode 100644 index 0000000000..90db3f262d --- /dev/null +++ b/files/fr/web/css/@media/-webkit-transform-3d/index.html @@ -0,0 +1,71 @@ +--- +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 new file mode 100644 index 0000000000..a2fe3ef854 --- /dev/null +++ b/files/fr/web/css/@media/-webkit-transition/index.html @@ -0,0 +1,51 @@ +--- +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 new file mode 100644 index 0000000000..c4c315b0e9 --- /dev/null +++ b/files/fr/web/css/@media/any-hover/index.html @@ -0,0 +1,72 @@ +--- +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 new file mode 100644 index 0000000000..abec9dcecb --- /dev/null +++ b/files/fr/web/css/@media/any-pointer/index.html @@ -0,0 +1,105 @@ +--- +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 new file mode 100644 index 0000000000..085c611aa0 --- /dev/null +++ b/files/fr/web/css/@media/aspect-ratio/index.html @@ -0,0 +1,111 @@ +--- +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

+ +
+

Note : L'exemple suivant est contenu dans un élément {{HTMLElement("iframe")}} et crée donc sa propre zone d'affichage (viewport), vous pouvez redimensionner l'iframe afin d'observer l'effet d'aspect-ratio.

+
+ +

HTML

+ +
<label id="wf" for="w">width:165</label>
+<input id="w" name="w" type="range" min="100" max="250" step="5" value="165">
+<label id="hf" for="w">height:165</label>
+<input id="h" name="h" type="range" min="100" max="250" step="5" value="165">
+
+<iframe id="outer" src="data:text/html,
+  <style>
+    @media (min-aspect-ratio: 8/5) {
+      div {
+        background: %239af;
+      }
+    }
+    @media (max-aspect-ratio: 3/2) {
+      div {
+        background: %239ff;
+      }
+    }
+    @media (aspect-ratio: 1/1) {
+      div {
+        background: %23f9a;
+      }
+    }
+  </style>
+  <div id='inner'>
+    Vous pouvez redimensionner le viewport en largeur
+    et en hauteur pour voir l'effet.
+  </div>
+">
+
+</iframe>
+
+ +

CSS

+ +
iframe{
+  display:block;
+}
+ +

JavaScript

+ +
outer.style.width=outer.style.height="165px"
+
+w.onchange=w.oninput=function(){
+  outer.style.width=w.value+"px"
+  wf.textContent="width:"+w.value
+}
+h.onchange=h.oninput=function(){
+  outer.style.height=h.value+"px"
+  hf.textContent="height:"+h.value
+}
+ +

Résultat

+ +
+

{{EmbedLiveSample('Exemples')}}

+
+ +

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 new file mode 100644 index 0000000000..3de1642213 --- /dev/null +++ b/files/fr/web/css/@media/aural/index.html @@ -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 new file mode 100644 index 0000000000..1762310821 --- /dev/null +++ b/files/fr/web/css/@media/color-gamut/index.html @@ -0,0 +1,68 @@ +--- +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 new file mode 100644 index 0000000000..66d460206d --- /dev/null +++ b/files/fr/web/css/@media/color-index/index.html @@ -0,0 +1,84 @@ +--- +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 new file mode 100644 index 0000000000..76d79bf25c --- /dev/null +++ b/files/fr/web/css/@media/color/index.html @@ -0,0 +1,94 @@ +--- +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 new file mode 100644 index 0000000000..a0356e163d --- /dev/null +++ b/files/fr/web/css/@media/device-aspect-ratio/index.html @@ -0,0 +1,59 @@ +--- +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 new file mode 100644 index 0000000000..92272515aa --- /dev/null +++ b/files/fr/web/css/@media/device-height/index.html @@ -0,0 +1,53 @@ +--- +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 new file mode 100644 index 0000000000..16f87bc1d8 --- /dev/null +++ b/files/fr/web/css/@media/device-width/index.html @@ -0,0 +1,53 @@ +--- +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 new file mode 100644 index 0000000000..0b64eafe8b --- /dev/null +++ b/files/fr/web/css/@media/display-mode/index.html @@ -0,0 +1,84 @@ +--- +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 new file mode 100644 index 0000000000..d0cb254e89 --- /dev/null +++ b/files/fr/web/css/@media/forced-colors/index.html @@ -0,0 +1,86 @@ +--- +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 new file mode 100644 index 0000000000..331ef98683 --- /dev/null +++ b/files/fr/web/css/@media/grid/index.html @@ -0,0 +1,83 @@ +--- +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 new file mode 100644 index 0000000000..4e4ac12d6f --- /dev/null +++ b/files/fr/web/css/@media/height/index.html @@ -0,0 +1,83 @@ +--- +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 new file mode 100644 index 0000000000..d0b19376b2 --- /dev/null +++ b/files/fr/web/css/@media/hover/index.html @@ -0,0 +1,72 @@ +--- +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 new file mode 100644 index 0000000000..aced40e2b4 --- /dev/null +++ b/files/fr/web/css/@media/index.html @@ -0,0 +1,155 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/@media +--- +
{{CSSRef}}
+ +

La règle @ @media permet d'associer un ensemble d'instructions imbriquées (délimité par des accolades) avec une condition définie par une requête média. La règle @media peut être utilisé au niveau le plus haut de la feuille de style et également à l'intérieur d'un groupe de règles conditionnel.

+ +
@media (max-width: 600px) {
+  .sidebar {
+    display: none;
+  }
+}
+ +

Il est possible de manipuler la règle @ @media via le CSSOM (et JavaScript) notamment grâce à l'interface {{domxref("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.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Les caractéristiques média

+ +

{{page("/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries","Caractéristiques_média_(media_features)")}}

+ +

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.

+ +

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 ({{cssxref("<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 indé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.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationCommentairesRetours
{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}Réintègre light-level, inverted-colors et les requêtes média personnalisées qui avaient été retirées la spécification de niveau 4.
+ Ajout des caractéristiques média prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast et prefers-color-scheme.		Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}Définition de la syntaxe de base pour la règle @media.Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
{{SpecName('CSS4 Media Queries', '#media', '@media')}} +

Ajout des caractéristiques média scripting, pointer, hover, update, overflow-block et overflow-inline.
+ Dépréciation de l'ensemble des types de média à l'exception de screen, print, speech et all.
+ La syntaxe est rendue plus flexible avec l'ajout (entre autres) du mot-clé or.

+ 		Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/index/index.html b/files/fr/web/css/@media/index/index.html new file mode 100644 index 0000000000..e227a1aecb --- /dev/null +++ b/files/fr/web/css/@media/index/index.html @@ -0,0 +1,12 @@ +--- +title: Index +slug: Web/CSS/@media/Index +tags: + - '@media' + - CSS + - Index +translation_of: Web/CSS/@media/Index +--- +

{{CSSRef}}

+ +

{{Index("/fr/docs/Web/CSS/@media")}}

diff --git a/files/fr/web/css/@media/inverted-colors/index.html b/files/fr/web/css/@media/inverted-colors/index.html new file mode 100644 index 0000000000..6129831784 --- /dev/null +++ b/files/fr/web/css/@media/inverted-colors/index.html @@ -0,0 +1,92 @@ +--- +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 new file mode 100644 index 0000000000..0bb4799080 --- /dev/null +++ b/files/fr/web/css/@media/monochrome/index.html @@ -0,0 +1,85 @@ +--- +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 new file mode 100644 index 0000000000..2eab162ff7 --- /dev/null +++ b/files/fr/web/css/@media/orientation/index.html @@ -0,0 +1,88 @@ +--- +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 new file mode 100644 index 0000000000..45a478c6d7 --- /dev/null +++ b/files/fr/web/css/@media/overflow-block/index.html @@ -0,0 +1,71 @@ +--- +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 new file mode 100644 index 0000000000..681cc3e8d0 --- /dev/null +++ b/files/fr/web/css/@media/overflow-inline/index.html @@ -0,0 +1,78 @@ +--- +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 new file mode 100644 index 0000000000..4ea6c2dbf1 --- /dev/null +++ b/files/fr/web/css/@media/pointer/index.html @@ -0,0 +1,101 @@ +--- +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 new file mode 100644 index 0000000000..89d78710c6 --- /dev/null +++ b/files/fr/web/css/@media/prefers-color-scheme/index.html @@ -0,0 +1,103 @@ +--- +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}}
+ +
+

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 new file mode 100644 index 0000000000..70120f5b2e --- /dev/null +++ b/files/fr/web/css/@media/prefers-contrast/index.html @@ -0,0 +1,86 @@ +--- +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 new file mode 100644 index 0000000000..32e0c2bcd8 --- /dev/null +++ b/files/fr/web/css/@media/prefers-reduced-motion/index.html @@ -0,0 +1,135 @@ +--- +title: prefers-reduced-motion +slug: Web/CSS/@media/prefers-reduced-motion +tags: + - '@media' + - Accessibilité + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/prefers-reduced-motion +--- +
{{CSSRef}}
+ +

La caractéristique média prefers-reduced-motion détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.

+ +

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 :

+ + + +

Exemples

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{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-transparency/index.html b/files/fr/web/css/@media/prefers-reduced-transparency/index.html new file mode 100644 index 0000000000..a2eddd14bd --- /dev/null +++ b/files/fr/web/css/@media/prefers-reduced-transparency/index.html @@ -0,0 +1,84 @@ +--- +title: prefers-reduced-transparency +slug: Web/CSS/@media/prefers-reduced-transparency +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/prefers-reduced-transparency +--- +

{{CSSRef}}{{SeeCompatTable}}{{draft}}

+ +

La caractéristique média prefers-reduced-transparency permet de détecter si un utilisateur préfère (via un paramètre du système d'exploitation ou du navigateur) minimiser l'utilisation des effets de transparence.

+ +

Syntaxe

+ +
+
no-preference
+
Cette valeur indique que l'utilisateur n'a exprimé aucune préférence quant à l'utilisation des effets de transparence. Ce mot-clé correspond à false lorsqu'il est utilisé dans un contexte booléen.
+
reduce
+
Cette valeur indique que l'utilisateur a configuré le système afin de minimiser la quantité d'effets de transparence.
+
+ +

Préférences utilisateur

+ +

À l'heure actuelle, aucun navigateur ou agent utilisateur n'implémente cette préférence malgré la présence de réglages correspondants dans les systèmes d'exploitation.

+ +

Exemples

+ +

Par défaut, cet exemple utilise un effet de transparence qui diminue la lisibilité du contenu.

+ +

HTML

+ +
<div class="transparency">Boîte transparente</div>
+
+ +

CSS

+ +
.transparency {
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .transparency {
+    opacity: 1;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-transparency', 'prefers-reduced-transparency')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.prefers-reduced-transparency")}}

+ +

Voir aussi

+ + + +

{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}

diff --git a/files/fr/web/css/@media/resolution/index.html b/files/fr/web/css/@media/resolution/index.html new file mode 100644 index 0000000000..32f97ce982 --- /dev/null +++ b/files/fr/web/css/@media/resolution/index.html @@ -0,0 +1,75 @@ +--- +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/scan/index.html b/files/fr/web/css/@media/scan/index.html new file mode 100644 index 0000000000..be71b32a45 --- /dev/null +++ b/files/fr/web/css/@media/scan/index.html @@ -0,0 +1,85 @@ +--- +title: scan +slug: Web/CSS/@media/scan +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/scan +--- +
{{CSSRef}}
+ +

scan est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer le processus utilisé pour composer l'image sur l'appareil d'affichage.

+ +

Syntaxe

+ +

La caractéristique scan est définie avec un mot-clé parmi ceux qui suivent :

+ +
+
interlace
+
L'image est composée avec un entrelacement grâce à des lignes intercalées (en deux passes).
+
progressive
+
L'image est composée ligne par ligne avec un balayage progressif.
+
+ +

Exemples

+ +

HTML

+ +
<p>Si votre écran utilise une composition avec entrelacement, ce texte devrait
+   être écrit avec une police sans serif/empattement. S'il utilise une composition
+   avec un balayage progressif, vous devriez voir une police avec serif/empattement.
+</p>
+
+ +

CSS

+ +
p {
+  font-family: cursive;
+}
+
+@media (scan: interlace) {
+  p {
+    font-family: sans-serif;
+  }
+}
+
+@media (scan: progressive) {
+  p {
+    font-family: serif;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#scan', 'scan')}}{{Spec2('CSS4 Media Queries')}}Aucune modification.
{{SpecName('CSS3 Media Queries', '#scan', 'scan')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.scan")}}

diff --git a/files/fr/web/css/@media/scripting/index.html b/files/fr/web/css/@media/scripting/index.html new file mode 100644 index 0000000000..85af2d8c69 --- /dev/null +++ b/files/fr/web/css/@media/scripting/index.html @@ -0,0 +1,87 @@ +--- +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 new file mode 100644 index 0000000000..ffbbd65e74 --- /dev/null +++ b/files/fr/web/css/@media/shape/index.html @@ -0,0 +1,97 @@ +--- +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 new file mode 100644 index 0000000000..1bdabdfd63 --- /dev/null +++ b/files/fr/web/css/@media/update-frequency/index.html @@ -0,0 +1,82 @@ +--- +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 new file mode 100644 index 0000000000..bc1f77eb35 --- /dev/null +++ b/files/fr/web/css/@media/width/index.html @@ -0,0 +1,90 @@ +--- +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 new file mode 100644 index 0000000000..60693a85ab --- /dev/null +++ b/files/fr/web/css/@namespace/index.html @@ -0,0 +1,78 @@ +--- +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/bleed/index.html b/files/fr/web/css/@page/bleed/index.html new file mode 100644 index 0000000000..3ff61db95c --- /dev/null +++ b/files/fr/web/css/@page/bleed/index.html @@ -0,0 +1,79 @@ +--- +title: bleed +slug: Web/CSS/@page/bleed +tags: + - CSS + - Descripteur + - Experimental + - Reference +translation_of: Web/CSS/@page/bleed +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Le descripteur bleed, associé à la règle @ {{cssxref("@page")}}, définit l'espace duquel le contenu peut dépasser de la boîte de la page. Ce descripteur aura un effet uniquement si le descripteur {{cssxref("@page/marks","marks")}} est utilisé pour afficher les marques de coupure.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+bleed: auto;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+bleed: 8pt;
+bleed: 1cm;
+
+ +

Valeurs

+ +
+
auto
+
Cette valeur correspond à 6pt si {{cssxref("marks")}} vaut crop. Dans les autres cas, cette valeur vaut zéro.
+
{{cssxref("<length>")}}
+
Cette valeur indique la distance, dans chaque direction, de laquelle le contenu peut dépasser de la boîte de la page. Les valeurs négatives sont autorisées mais les différentes implémentations fixent différentes limites.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
@page {
+  bleed: 1cm;
+  marks: crop;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}{{Spec2("CSS3 Paged Media")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.page.bleed")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@page/index.html b/files/fr/web/css/@page/index.html new file mode 100644 index 0000000000..c056ac3ae2 --- /dev/null +++ b/files/fr/web/css/@page/index.html @@ -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/marks/index.html b/files/fr/web/css/@page/marks/index.html new file mode 100644 index 0000000000..8ac0d906f5 --- /dev/null +++ b/files/fr/web/css/@page/marks/index.html @@ -0,0 +1,82 @@ +--- +title: marks +slug: Web/CSS/@page/marks +tags: + - CSS + - Descripteur + - Experimental + - Reference +translation_of: Web/CSS/@page/marks +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Le descripteur marks, associé à la règle @ {{cssxref("@page")}}, est utilisé pour afficher des marques de coupure (crop marks) ou des croix d'alignement (cross marks). Les marques de coupure sont utilisées pour massicoter les pages et les croix d'alignement sont utilisées afin d'aligner plusieurs feuilles entre elles.

+ +

Les marques de coupure et d'alignement sont imprimées en dehors de la boîte de la page. Pour qu'il y ait l'espace nécessaire au dessin de ces symboles, les pages finales doivent être légèrement plus grandes que la boîtes de la page.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+marks: none;
+marks: crop;
+marks: cross;
+marks: crop cross;
+
+ +

Valeurs

+ +
+
crop
+
Les marques de découpe seront affichées sur la page finale.
+
cross
+
Les marques d'alignement seront affichées sur la page finale.
+
none
+
Aucune marque ne sera affichée.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
@page {
+  marks: crop cross;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media', '#marks', 'marks')}}{{Spec2('CSS3 Paged Media')}}Définition initiale.
+ +

Cette propriété CSS avait initialement été proposée pour la spécification CSS de niveau 2 mais a été abandonnée lors de la première révision.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.page.marks")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@page/size/index.html b/files/fr/web/css/@page/size/index.html new file mode 100644 index 0000000000..5d21dafcd1 --- /dev/null +++ b/files/fr/web/css/@page/size/index.html @@ -0,0 +1,127 @@ +--- +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>
+
+
+
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/@supports/index.html b/files/fr/web/css/@supports/index.html new file mode 100644 index 0000000000..6baf61e27c --- /dev/null +++ b/files/fr/web/css/@supports/index.html @@ -0,0 +1,209 @@ +--- +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/height/index.html b/files/fr/web/css/@viewport/height/index.html new file mode 100644 index 0000000000..f836041357 --- /dev/null +++ b/files/fr/web/css/@viewport/height/index.html @@ -0,0 +1,76 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - '@viewport' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Le descripteur height, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-height", "min-height")}} et {{cssxref("@viewport/max-height", "max-height")}}.

+ +

Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la hauteur minimale et maximale de la zone d'affichage (viewport). Si on fournit deux valeurs, la première correspondra à la hauteur minimale de la zone d'affichage et la deuxième à la hauteur maximale.

+ +

Syntaxe

+ +
/* Une valeur de longueur        */
+/* Type <length> ou <percentage> */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Deux valeurs de longueur */
+height: 320px 200px;
+
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée sera calculée à partir des valeurs des autres descripteurs.
+
<length>
+
Une longueur relative ou absolue qui doit être positive.
+
<percentage>
+
Une valeur exprimée en pourcentages qui est relative à la hauteur de la zone d'affichage (viewport) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +
@viewport {
+  height: 500px;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.height")}}

diff --git a/files/fr/web/css/@viewport/index.html b/files/fr/web/css/@viewport/index.html new file mode 100644 index 0000000000..0269b84e53 --- /dev/null +++ b/files/fr/web/css/@viewport/index.html @@ -0,0 +1,120 @@ +--- +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/max-height/index.html b/files/fr/web/css/@viewport/max-height/index.html new file mode 100644 index 0000000000..646a3e2e8d --- /dev/null +++ b/files/fr/web/css/@viewport/max-height/index.html @@ -0,0 +1,76 @@ +--- +title: max-height +slug: Web/CSS/@viewport/max-height +tags: + - '@viewport' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Le descripteur max-height, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur maximale de la zone d'affichage (viewport) d'un document.

+ +

Syntaxe

+ +
/* Avec un mot-clé */
+max-height: auto;
+
+/* Valeur de longueur */
+/* Type <length>      */
+max-height: 400px;
+max-height: 50em;
+max-height: 20cm;
+
+/* Valeur proportionnelle */
+/* Type <percentage>      */
+max-height: 75%;
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
+
<length>
+
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
+
<percentage>
+
Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
@viewport {
+  max-height: 600px;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.max-height")}}

diff --git a/files/fr/web/css/@viewport/max-width/index.html b/files/fr/web/css/@viewport/max-width/index.html new file mode 100644 index 0000000000..30e0ee9e78 --- /dev/null +++ b/files/fr/web/css/@viewport/max-width/index.html @@ -0,0 +1,75 @@ +--- +title: max-width +slug: Web/CSS/@viewport/max-width +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Le descripteur max-width, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur maximale de la zone d'affichage (viewport) d'un document. Par défaut, la largeur maximale de la zone d'affichage correspond à celle du viewport initial.

+ +

Syntaxe

+ +
/* Avec un mot-clé */
+max-width: auto;
+
+/* Valeur de longueur */
+/* Type <length>      */
+max-width: 400px;
+max-width: 50em;
+max-width: 20cm;
+
+/* Valeur proportionnelle */
+/* Type <percentage>      */
+max-width: 75%;
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
+
<length>
+
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
+
<percentage>
+
Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
@viewport {
+  max-width: 600px;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-max-width', '"max-width" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.max-width")}}

diff --git a/files/fr/web/css/@viewport/max-zoom/index.html b/files/fr/web/css/@viewport/max-zoom/index.html new file mode 100644 index 0000000000..605f8a25fb --- /dev/null +++ b/files/fr/web/css/@viewport/max-zoom/index.html @@ -0,0 +1,69 @@ +--- +title: max-zoom +slug: Web/CSS/@viewport/max-zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Le descripteur max-zoom, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom maximal au-delà duquel le navigateur n'augmentera pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).

+ +

Un facteur de zoom égal à 1.0 ou à 100% correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+max-zoom: auto;
+
+/* Nombres : type <number> */
+max-zoom: 0.8;
+max-zoom: 2.0;
+
+/* Valeurs proportionnelles : type <percentage> */
+max-zoom: 150%;
+
+ +

Valeurs

+ +
+
auto
+
L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.
+
<number>
+
Un nombre positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<number>")}}).
+
<percentage>
+
Un pourcentage positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<percentage>")}}).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.max-zoom")}}

diff --git a/files/fr/web/css/@viewport/min-height/index.html b/files/fr/web/css/@viewport/min-height/index.html new file mode 100644 index 0000000000..016800c563 --- /dev/null +++ b/files/fr/web/css/@viewport/min-height/index.html @@ -0,0 +1,76 @@ +--- +title: min-height +slug: Web/CSS/@viewport/min-height +tags: + - '@viewport' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Le descripteur min-height, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur minimale de la zone d'affichage (viewport) d'un document.

+ +

Syntaxe

+ +
/* Avec un mot-clé */
+min-height: auto;
+
+/* Valeur de longueur */
+/* Type <length>      */
+min-height: 400px;
+min-height: 50em;
+min-height: 20cm;
+
+/* Valeur proportionnelle */
+/* Type <percentage>      */
+min-height: 75%;
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
+
<length>
+
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
+
<percentage>
+
Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
@viewport {
+  min-height: 600px;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-min-height', '"min-height" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.min-height")}}

diff --git a/files/fr/web/css/@viewport/min-width/index.html b/files/fr/web/css/@viewport/min-width/index.html new file mode 100644 index 0000000000..d4e7177979 --- /dev/null +++ b/files/fr/web/css/@viewport/min-width/index.html @@ -0,0 +1,75 @@ +--- +title: min-width +slug: Web/CSS/@viewport/min-width +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Le descripteur min-width, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur minimale de la zone d'affichage (viewport) d'un document.

+ +

Syntaxe

+ +
/* Avec un mot-clé */
+min-width: auto;
+
+/* Valeur de longueur */
+/* Type <length>      */
+min-width: 400px;
+min-width: 50em;
+min-width: 20cm;
+
+/* Valeur proportionnelle */
+/* Type <percentage>      */
+min-width: 75%;
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
+
<length>
+
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
+
<percentage>
+
Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
@viewport {
+  min-width: 600px;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.min-width")}}

diff --git a/files/fr/web/css/@viewport/min-zoom/index.html b/files/fr/web/css/@viewport/min-zoom/index.html new file mode 100644 index 0000000000..03c28cdb64 --- /dev/null +++ b/files/fr/web/css/@viewport/min-zoom/index.html @@ -0,0 +1,69 @@ +--- +title: min-zoom +slug: Web/CSS/@viewport/min-zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Le descripteur min-zoom, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom minimal en-dessous duquel le navigateur ne réduira pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).

+ +

Un facteur de zoom égal à 1.0 ou à 100% correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+min-zoom: auto;
+
+/* Nombres : type <number> */
+min-zoom: 0.8;
+min-zoom: 2.0;
+
+/* Valeurs proportionnelles : type <percentage> */
+min-zoom: 150%;
+
+ +

Valeurs

+ +
+
auto
+
L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.
+
<number>
+
Un nombre positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<number>")}}).
+
<percentage>
+
Un pourcentage positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<percentage>")}}).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.min-zoom")}}

diff --git a/files/fr/web/css/@viewport/orientation/index.html b/files/fr/web/css/@viewport/orientation/index.html new file mode 100644 index 0000000000..24db5063c7 --- /dev/null +++ b/files/fr/web/css/@viewport/orientation/index.html @@ -0,0 +1,64 @@ +--- +title: orientation +slug: Web/CSS/@viewport/orientation +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Le descripteur orientation, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir l'orientation d'un document.

+ +
/* Valeurs avec un mot-clé */
+orientation: auto;
+orientation: portrait;
+orientation: landscape;
+
+ +

Pour les agents utilisateurs et/ou les appareils pour lesquels l'orientation est modifiée en orientant l'appareil, l'auteur pourra utiliser ce descripteur afin d'inhiber le changement d'orientation lié à la stimulation physique.

+ +

Syntaxe

+ +

Valeurs

+ +
+
auto
+
L'agent utilisateur déterminera l'orientation du document automatiquement. Généralement, il utilisera l'accéléromètre de l'appareil (si ce dernier en possède un) si le résultat de cette mesure n'est pas modifié par un réglage utilisateur (« bloquer la rotation de l'écran »).
+
portrait
+
Le document devrait être verrouillé en mode portrait.
+
landscape
+
Le document devrait être verrouillé en mode paysage.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.orientation")}}

diff --git a/files/fr/web/css/@viewport/user-zoom/index.html b/files/fr/web/css/@viewport/user-zoom/index.html new file mode 100644 index 0000000000..5a7d6eed73 --- /dev/null +++ b/files/fr/web/css/@viewport/user-zoom/index.html @@ -0,0 +1,68 @@ +--- +title: user-zoom +slug: Web/CSS/@viewport/user-zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Le descripteur user-zoom, utilisé dans la règle @ {{cssxref("@viewport")}}, définit si l'utilisateur doit pouvoir modifier le niveau de zoom d'un document dans la zone d'affichage (viewport).

+ +
/* Valeurs avec un mot-clé */
+user-zoom: zoom;
+user-zoom: fixed;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
zoom
+
L'utilisateur peut zoomer/dézoomer.
+
fixed
+
L'utilisateur ne peut ni zoomer ni dézoomer.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Accessibilité

+ +

Supprimer la possibilité de zoomer empêche les personnes ayant une vision faible de lire et de comprendre le contenu de la page.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.user-zoom")}}

diff --git a/files/fr/web/css/@viewport/viewport-fit/index.html b/files/fr/web/css/@viewport/viewport-fit/index.html new file mode 100644 index 0000000000..6c07bfb5cc --- /dev/null +++ b/files/fr/web/css/@viewport/viewport-fit/index.html @@ -0,0 +1,74 @@ +--- +title: viewport-fit +slug: Web/CSS/@viewport/viewport-fit +tags: + - '@viewport' + - CSS + - Descripteur + - Experimental + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
+ +

Le descripteur viewport-fit, associé à la règle @ {{CSSxRef("@viewport")}} contrôle la façon dont la zone d'affichage (viewport) d'un document recouvre l'écran.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+
+ +

Valeurs

+ +
+
auto
+
Cette valeur n'a aucun impact sur la disposition initiale de la zone d'affichage et l'ensemble de la page web est visible.
+
contain
+
La zone d'affichage est redimensionnée afin de s'inscrire dans le plus grand rectangle qu'il est possible de faire tenir sur l'écran.
+
cover
+
La zone d'affichage est redimensionnée afin de couvrir l'écran de l'appareil. Il est fortement recommandé d'utiliser des variables pour le placement en zone sûre afin de s'assurer qu'aucun contenu important ne se retrouve en dehors de l'écran.
+
+ +

Syntaxe formelle

+ +
auto | contain | cover
+ +

Accessibilité

+ +

When using the viewport-fit descriptor, one must keep in mind that not all device displays are rectangular, and should therefore make use of the safe area inset variables.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}{{Spec2("CSS Round Display")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.viewport-fit")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@viewport/width/index.html b/files/fr/web/css/@viewport/width/index.html new file mode 100644 index 0000000000..425c686ccc --- /dev/null +++ b/files/fr/web/css/@viewport/width/index.html @@ -0,0 +1,75 @@ +--- +title: width +slug: Web/CSS/@viewport/width +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Le descripteur width, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-width", "min-width")}} et {{cssxref("@viewport/max-width", "max-width")}}.

+ +

Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la largeur minimale et maximale de la zone d'affichage (viewport). Si on fournit deux valeurs, la première correspondra à la largeur minimale de la zone d'affichage et la deuxième à la largeur maximale.

+ +

Syntaxe

+ +
/* Une valeur de longueur        */
+/* Type <length> ou <percentage> */
+width: auto;
+width: 320px;
+width: 15em;
+
+/* Deux valeurs de longueur */
+width: 320px 200px;
+
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée sera calculée à partir des valeurs des autres descripteurs.
+
<length>
+
Une longueur relative ou absolue qui doit être positive.
+
<percentage>
+
Une valeur exprimée en pourcentages qui est relative à la largeur de la zone d'affichage (viewport) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +
@viewport {
+  width: 500px;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-width', '"width" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.width")}}

diff --git a/files/fr/web/css/@viewport/zoom/index.html b/files/fr/web/css/@viewport/zoom/index.html new file mode 100644 index 0000000000..c9b65e996e --- /dev/null +++ b/files/fr/web/css/@viewport/zoom/index.html @@ -0,0 +1,71 @@ +--- +title: zoom +slug: Web/CSS/@viewport/zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Le descripteur zoom, utilisé au sein de la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom initial d'un document.

+ +

Un niveau de zoom égal à 1.0 ou 100% n'appliquera aucun zoom. Les valeurs supérieures zoomeront plus et les valeurs inférieures dézoomeront.

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+zoom: auto;
+
+/* Valeurs numériques */
+/* Type <number>      */
+zoom: 0.8;
+zoom: 2.0;
+
+/* Valeurs proportionnelles */
+/* Type <percentage>        */
+zoom: 150%;
+
+ +

Valeurs

+ +
+
auto
+
C'est l'agent utilisateur qui déterminera le niveau de zoom initial. L'agent utilisateur pourra utiliser la taille de la grille de la zone d'affichage afin de déterminer ce niveau.
+
<number>
+
Un nombre positif qui correspond au niveau de zoom appliqué. Pour plus d'informations, voir le type de donnée {{cssxref("<number>")}}.
+
<percentage>
+
Un pourcentage positif qui correspond au niveau de zoom appliqué (100% : aucun zoom ; les valeurs supérieures traduiront un zoom plus importants ; les valeurs inférieures auront un effet de « dézoom »). Pour plus d'informations, voir le type de donnée {{cssxref("<percentage>")}}.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.zoom")}}

diff --git a/files/fr/web/css/_colon_-moz-broken/index.html b/files/fr/web/css/_colon_-moz-broken/index.html new file mode 100644 index 0000000000..cab1b281e3 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-broken/index.html @@ -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 new file mode 100644 index 0000000000..f8ef38f055 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-drag-over/index.html @@ -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 new file mode 100644 index 0000000000..fd7e45bb27 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-first-node/index.html @@ -0,0 +1,56 @@ +--- +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 new file mode 100644 index 0000000000..7b2f4befee --- /dev/null +++ b/files/fr/web/css/_colon_-moz-focusring/index.html @@ -0,0 +1,61 @@ +--- +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-full-screen-ancestor/index.html b/files/fr/web/css/_colon_-moz-full-screen-ancestor/index.html new file mode 100644 index 0000000000..4004032f1c --- /dev/null +++ b/files/fr/web/css/_colon_-moz-full-screen-ancestor/index.html @@ -0,0 +1,41 @@ +--- +title: ':-moz-full-screen-ancestor' +slug: 'Web/CSS/:-moz-full-screen-ancestor' +tags: + - CSS + - Non-standard + - Obsolete + - Pseudo-classe + - Reference +translation_of: 'Archive/Web/CSS/:-moz-full-screen-ancestor' +--- +
{{CSSRef}}{{non-standard_header}}{{deprecated_header}}
+ +

La pseudo-classe :-moz-full-screen-ancestor permettait de cibler tous les ancêtres d'un élément affiché en plein écran à l'exception des frames contenues dans les documents parents.

+ +
+

Cette pseudo-classe a été retirée de Firefox 50

+
+ +

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-full-screen-ancestor")}}

+ +

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 new file mode 100644 index 0000000000..0168f703f5 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-handler-blocked/index.html @@ -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 new file mode 100644 index 0000000000..72f1bdff9f --- /dev/null +++ b/files/fr/web/css/_colon_-moz-handler-crashed/index.html @@ -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 new file mode 100644 index 0000000000..12ade56fe0 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-handler-disabled/index.html @@ -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 new file mode 100644 index 0000000000..4133fb53a9 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,56 @@ +--- +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-loading/index.html b/files/fr/web/css/_colon_-moz-loading/index.html new file mode 100644 index 0000000000..4efb552f03 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-loading/index.html @@ -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 new file mode 100644 index 0000000000..13622d0dd1 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.html @@ -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 new file mode 100644 index 0000000000..8ab4f863d5 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.html @@ -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-lwtheme-brighttext/index.html b/files/fr/web/css/_colon_-moz-lwtheme-brighttext/index.html new file mode 100644 index 0000000000..68304a2c21 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-lwtheme-brighttext/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-lwtheme-brighttext' +slug: 'Web/CSS/:-moz-lwtheme-brighttext' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-brighttext' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La pseudo-classe :-moz-lwtheme-brighttext correspond à un élément de l'interface utilisateur du navigateur (le chrome) lorsque {{cssxref(":-moz-lwtheme")}} vaut true et qu'un thème léger avec une couleur de texte clair est sélectionné.

+ +

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-lwtheme-darktext/index.html b/files/fr/web/css/_colon_-moz-lwtheme-darktext/index.html new file mode 100644 index 0000000000..912ddbd7f6 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-lwtheme-darktext/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-lwtheme-darktext' +slug: 'Web/CSS/:-moz-lwtheme-darktext' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-darktext' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La pseudo-classe :-moz-lwtheme-darktext correspond à un élément de l'interface utilisateur du navigateur (le chrome) lorsque {{cssxref(":-moz-lwtheme")}} vaut true et qu'un thème léger avec une couleur de texte sombre est sélectionné.

+ +

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-lwtheme/index.html b/files/fr/web/css/_colon_-moz-lwtheme/index.html new file mode 100644 index 0000000000..31b249d0ca --- /dev/null +++ b/files/fr/web/css/_colon_-moz-lwtheme/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-lwtheme' +slug: 'Web/CSS/:-moz-lwtheme' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La pseudo-classe :-moz-lwtheme permet de cibler les documents liés à l'interface utilisateur du navigateur (le chrome) lorsque l'attribut {{xulattr("lightweightthemes")}} de l'élément racine vaut true et qu'un thème est sélectionné.

+ +

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 new file mode 100644 index 0000000000..c9f9b7c90a --- /dev/null +++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.html @@ -0,0 +1,77 @@ +--- +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 new file mode 100644 index 0000000000..69617de5ba --- /dev/null +++ b/files/fr/web/css/_colon_-moz-submit-invalid/index.html @@ -0,0 +1,39 @@ +--- +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 new file mode 100644 index 0000000000..d250f94a15 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-suppressed/index.html @@ -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-system-metric/images-in-menus/index.html b/files/fr/web/css/_colon_-moz-system-metric/images-in-menus/index.html new file mode 100644 index 0000000000..dba93df04b --- /dev/null +++ b/files/fr/web/css/_colon_-moz-system-metric/images-in-menus/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-system-metric(images-in-menus)' +slug: 'Web/CSS/:-moz-system-metric/images-in-menus' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Archive/Web/CSS/:-moz-system-metric/images-in-menus' +--- +
{{CSSRef}}{{Non-standard_header}}{{Fx_minversion_header(3)}}
+ +

La pseudo-classe :-moz-system-metric(images-in-menus) correspond à un élément si l'interface utilisateur de l'ordinateur utilisée permet d'utiliser des images dans les menus.

+ +

Ce sélecteur est principalement destiné aux développeurs de thèmes.

+ +
+

Note : Depuis Firefox 58, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

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-system-metric.images-in-menus")}}

diff --git a/files/fr/web/css/_colon_-moz-system-metric/index.html b/files/fr/web/css/_colon_-moz-system-metric/index.html new file mode 100644 index 0000000000..75e34f4f90 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-system-metric/index.html @@ -0,0 +1,39 @@ +--- +title: ':-moz-system-metric()' +slug: 'Web/CSS/:-moz-system-metric' +tags: + - CSS + - Non-standard + - Obsolete + - Pseudo-classe +translation_of: 'Archive/Web/CSS/:-moz-system-metric' +--- +

{{CSSRef}}{{Draft}}{{Non-standard_Header}}{{Obsolete_Header("gecko58")}}

+ +

{{wiki.localize("System.API.page-generated-for-subpage")}}

+ +
+

Note : Depuis Firefox 58, cette pseudo-classe n'est plus disponible pour être utilisée sur le Web. Elle ne peut être utilisée que de façon interne (pour du chrome ou du code XUL). Voir {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +

Valeurs

+ +

{{SubpagesWithSummaries}}

+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-moz-system-metric")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-system-metric/mac-graphite-theme/index.html b/files/fr/web/css/_colon_-moz-system-metric/mac-graphite-theme/index.html new file mode 100644 index 0000000000..fb3013b14f --- /dev/null +++ b/files/fr/web/css/_colon_-moz-system-metric/mac-graphite-theme/index.html @@ -0,0 +1,35 @@ +--- +title: ':-moz-system-metric(mac-graphite-theme)' +slug: 'Web/CSS/:-moz-system-metric/mac-graphite-theme' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Archive/Web/CSS/:-moz-system-metric/mac-graphite-theme' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La pseudo-classe :-moz-system-metric(mac-graphite-theme) correspond à un élément si l'utilisateur a sélectionné l'apparence Graphite dans l'écran des préférences système de Mac OS X.

+ +

Ce sélecteur est principalement destiné aux développeurs de thèmes.

+ +
+

Note : Depuis Firefox 58, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

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-system-metric.mac-graphite-theme")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-backward/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-backward/index.html new file mode 100644 index 0000000000..d5ff5941e3 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-backward/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-system-metric(scrollbar-end-backward)' +slug: 'Web/CSS/:-moz-system-metric/scrollbar-end-backward' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-backward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La pseudo-classe :-moz-system-metric(scrollbar-end-backward) correspond à un élément si l'interface utilisateur de l'ordinateur inclut un bouton de recul à la fin des barres de défilement.

+ +

Ce sélecteur est principalement destiné aux développeurs de thèmes.

+ +
+

Note : Depuis Firefox 58, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

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-system-metric.scrollbar-end-backward")}}

diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-forward/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-forward/index.html new file mode 100644 index 0000000000..abc2ef8c2e --- /dev/null +++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-forward/index.html @@ -0,0 +1,27 @@ +--- +title: ':-moz-system-metric(scrollbar-end-forward)' +slug: 'Web/CSS/:-moz-system-metric/scrollbar-end-forward' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-forward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La pseudo-classe :-moz-system-metric(scrollbar-end-forward) correspond à un élément si l'interface utilisateur de l'ordinateur inclut un bouton d'avancement à la fin des barres de défilement.

+ +
+

Note : Depuis Firefox 58, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

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-system-metric.scrollbar-end-forward")}}

diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-backward/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-backward/index.html new file mode 100644 index 0000000000..19c645904f --- /dev/null +++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-backward/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-system-metric(scrollbar-start-backward)' +slug: 'Web/CSS/:-moz-system-metric/scrollbar-start-backward' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-backward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La pseudo-classe :-moz-system-metric(scrollbar-start-backward) correspond à un élément si l'interface utilisateur de l'ordinateur utilisé inclut un bouton avec une flèche vers le bas à la fin des barres de défilement.

+ +

Ce sélecteur est principalement destiné aux développeurs de thèmes.

+ +
+

Note : Depuis Firefox 58, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

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-system-metric.scrollbar-start-backward")}}

diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-forward/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-forward/index.html new file mode 100644 index 0000000000..a6cc78db85 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-forward/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-system-metric(scrollbar-start-forward)' +slug: 'Web/CSS/:-moz-system-metric/scrollbar-start-forward' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-forward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La pseudo-classe :-moz-system-metric(scrollbar-start-forward) correspond à un élément si l'interface utilisateur de l'ordinateur inclue une flèche pour remonter au début des barres de défilement.

+ +

Ce sélecteur est principalement destiné aux développeurs de thèmes.

+ +
+

Note : Depuis Firefox 58, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

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-system-metric.scrollbar-start-forward")}}

diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-thumb-proportional/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-thumb-proportional/index.html new file mode 100644 index 0000000000..14c1511f98 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-thumb-proportional/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-system-metric(scrollbar-thumb-proportional)' +slug: 'Web/CSS/:-moz-system-metric/scrollbar-thumb-proportional' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-thumb-proportional' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La pseudo-classe :-moz-system-metric(scrollbar-thumb-proportional) correspondra à un élément si l'interface utilisateur de l'ordinateur utilise des curseurs de barre de défilement proportionnels à la taille de la zone visible du document à l'écran.

+ +

Ce sélecteur est principalement destiné aux développeurs de thèmes.

+ +
+

Note : Depuis Firefox 58, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

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-system-metric.scrollbar-thumb-proportional")}}

diff --git a/files/fr/web/css/_colon_-moz-system-metric/touch-enabled/index.html b/files/fr/web/css/_colon_-moz-system-metric/touch-enabled/index.html new file mode 100644 index 0000000000..4b48986029 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-system-metric/touch-enabled/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-system-metric(touch-enabled)' +slug: 'Web/CSS/:-moz-system-metric/touch-enabled' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Archive/Web/CSS/:-moz-system-metric/touch-enabled' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La pseudo-classe :-moz-system-metric(touch-enabled) correspondra à un élément si l'appareil sur lequel il est affiché est une interface tactile.

+ +
Note : Cette pseudo-classe n'est pas destinée à être utilisée sur le Web. Pour cela, on privilégiera la requête média {{cssxref("-moz-touch-enabled")}}.
+ +
+

Note : Depuis Firefox 58, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

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-system-metric.touch-enabled")}}

diff --git a/files/fr/web/css/_colon_-moz-system-metric/windows-default-theme/index.html b/files/fr/web/css/_colon_-moz-system-metric/windows-default-theme/index.html new file mode 100644 index 0000000000..ae0eaf8806 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-system-metric/windows-default-theme/index.html @@ -0,0 +1,69 @@ +--- +title: ':-moz-system-metric(windows-default-theme)' +slug: 'Web/CSS/:-moz-system-metric/windows-default-theme' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Archive/Web/CSS/:-moz-system-metric/windows-default-theme' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La pseudo-classe :-moz-system-metric(windows-default-theme) correspond à un élément si l'utilisateur utilise l'un des thèmes Windows suivant : Luna, Royale, Zune ou Aero (c'est-à-dire Vista Basic, Vista Standard ou Aero Glass). Les thèmes Windows classiques et les thèmes tiers sont exclus.

+ +

Ce sélecteur est principalement destiné aux développeurs de thèmes.

+ +
+

Note : Depuis Firefox 58, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Exemples

+ +

CSS

+ +
#defaultThemes,
+#nonDefaultThemes {
+  background-color: #FFA0A0;
+}
+
+#defaultThemes:-moz-system-metric(windows-default-theme) {
+  background-color: #A0FFA0;
+}
+
+#nonDefaultThemes:not(-moz-system-metric(windows-default-theme)) {
+  background-color: #A0FFA0;
+}
+
+#notSupported:-moz-system-metric(windows-default-theme),
+#notSupported:not(:-moz-system-metric(windows-default-theme)) {
+  display: none;
+}
+ +

HTML

+ +
<p id="defaultThemes">
+  Ce paragraphe devrait avoir un fond vert avec les thèmes Windows
+  Luna/Royale/Zune/Aero et un fond rouge avec les autres.
+</p>
+
+<p id="nonDefaultThemes">
+  Ce paragraphe devrait avoir un fond vert avec with Windows Classic
+  ou avec un thème tiers ou un fond rouge pour les autres.
+</p>
+
+<p id="notSupported">La détection des thèmes n'est pas prise en charge.</p>
+ +

Résultat

+ +

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

+ +

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-system-metric.windows-default-theme")}}

diff --git a/files/fr/web/css/_colon_-moz-ui-invalid/index.html b/files/fr/web/css/_colon_-moz-ui-invalid/index.html new file mode 100644 index 0000000000..5f29e0f90f --- /dev/null +++ b/files/fr/web/css/_colon_-moz-ui-invalid/index.html @@ -0,0 +1,50 @@ +--- +title: ':-moz-ui-invalid' +slug: 'Web/CSS/:-moz-ui-invalid' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:user-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_-moz-ui-valid/index.html b/files/fr/web/css/_colon_-moz-ui-valid/index.html new file mode 100644 index 0000000000..264a7f1a3a --- /dev/null +++ b/files/fr/web/css/_colon_-moz-ui-valid/index.html @@ -0,0 +1,44 @@ +--- +title: ':-moz-ui-valid' +slug: 'Web/CSS/:-moz-ui-valid' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-moz-ui-valid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La pseudo-classe :-moz-ui-valid représente n'importe quel élément de formulaire dont la valeur est valide 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.

+ +

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-valid")}}

+ +

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 new file mode 100644 index 0000000000..7890fbdca6 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-user-disabled/index.html @@ -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 new file mode 100644 index 0000000000..dc20549d2b --- /dev/null +++ b/files/fr/web/css/_colon_-moz-window-inactive/index.html @@ -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_-ms-input-placeholder/index.html b/files/fr/web/css/_colon_-ms-input-placeholder/index.html new file mode 100644 index 0000000000..1baa216663 --- /dev/null +++ b/files/fr/web/css/_colon_-ms-input-placeholder/index.html @@ -0,0 +1,116 @@ +--- +title: ':-ms-input-placeholder' +slug: 'Web/CSS/:-ms-input-placeholder' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Référence(2) +translation_of: 'Web/CSS/:placeholder-shown' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La pseudo-classe :-ms-input-placeholder représente le texte de substitution d'un élément de formulaire. Elle permet aux auteurs et aux développeurs web d'adapter l'apparence des textes de substitution. Cette pseudo-classe est propriétaire et est uniquement prise en charge par Internet Explorer et Edge.

+ +

Exemples

+ +

Dans l'exemple suivant, le champ « Identifiant » a un style particulier. Le texte de substitution est affiché de cette façon jusqu'à ce que le focus passe sur le champ (ce qui correspond à une saisie).

+ +

CSS

+ +
input {
+  background-color:#E8E8E8;
+  color:black;
+}
+/* Style pour le texte de substitution */
+input.studentid:-ms-input-placeholder {
+  font-style:italic;
+  color: red;
+  background-color: yellow;
+}
+ +

HTML

+ +
<form id="test">
+  <p><label>Saisir le nom : <input id="nom" placeholder="Nom de l'étudiant"/></label></p>
+  <p><label>Saisir le domaine : <input id="domaine" placeholder="Domaine d'étude" /></label></p>
+  <p><label>Saisir l'identifiant : <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="Identifiant à 8 chiffres" /></label></p>
+  <input type="submit" />
+</form>
+ +

Résultat

+ +

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

+ +

Capture d'écran

+ +

+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Trident/Microsoft et ne fait partie d'aucune spécification. MSDN documente cette pseudo-classe.

+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
Support simple{{CompatNo}}{{CompatNo}}{{CompatNo}}10{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Support simple{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_-webkit-autofill/index.html b/files/fr/web/css/_colon_-webkit-autofill/index.html new file mode 100644 index 0000000000..4d7aadd16e --- /dev/null +++ b/files/fr/web/css/_colon_-webkit-autofill/index.html @@ -0,0 +1,33 @@ +--- +title: ':-webkit-autofill' +slug: 'Web/CSS/:-webkit-autofill' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: '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_active/index.html b/files/fr/web/css/_colon_active/index.html new file mode 100644 index 0000000000..bf8309e0a5 --- /dev/null +++ b/files/fr/web/css/_colon_active/index.html @@ -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 new file mode 100644 index 0000000000..3478e545af --- /dev/null +++ b/files/fr/web/css/_colon_any-link/index.html @@ -0,0 +1,76 @@ +--- +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/index.html b/files/fr/web/css/_colon_any/index.html new file mode 100644 index 0000000000..0178fd736d --- /dev/null +++ b/files/fr/web/css/_colon_any/index.html @@ -0,0 +1,174 @@ +--- +title: ':any()' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:is' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-classe :any() vous permet de construire des ensembles de sélecteurs similaires en créant des groupes à partir desquels l'un des éléments sera activé. C'est une méthode alternative qui permet d'éviter de réécrire un sélecteur entier alors que seule une petite partie varie.

+ +
/* sélectionne tous les h2 d'une section, d'un article */
+/* d'un aside ou d'un nav */
+/* actuellement pris en charge avec les préfixes */
+/* -moz- et -webkit- */
+:-moz-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+
+:-webkit-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+
+ +
Note : Cette pseudo-classe est en voie d'être standardisée dans la spécification CSS Selectors Level 4 sous le nom de :matches(). Il est probable que la syntaxe et le nom de :-préfixe-any() soit amené à changer pour l'adopter dans un avenir proche.
+ +

Syntaxe

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Valeurs

+ +
+
selector
+
Un sélecteur, simple ou multiple, composé d'un sélecteur CSS simple.
+
+ +
Note : Le sélecteur ne peut pas contenir de combinateur ou de pseudo-éléments.
+ +

Exemples

+ +

Simplifier la sélection de listes

+ +

Par exemple, le code CSS suivant :

+ +
/*  Les listes non-ordonnes utilisent un carré */
+    dans certains cas */
+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é par :

+ +
/* Les listes non-ordonnes utilisent un carré */
+   dans certains cas */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+ +

Cependant, on évitera d'utiliser le code suivant (cf. la section sur les performances plus bas) :

+ +
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}
+ +

Simplifier la sélection de section

+ +

Ceci est particulièrement utile lorsqu'on manipule des sections et des titres HTML. Les éléments {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} peuvent être imbriqués, sans :any(), leur appliquer un style peut être beaucoup plus complexe.

+ +

Par exemple, sans :any(), appliquer un style à tous les éléments {{HTMLElement("h1")}} situés à différents niveaux peut être vraiment compliqué :

+ +
/* 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 */
+/* ... même pas la peine d'y penser */
+
+ +

En utilisant : -any(), cela devient plus simple :

+ +
/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+
+/* Niveau 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+
+/* Niveau 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+ +

Notes

+ +

Problèmes avec les performances et la spécificité

+ +

Le bug {{bug("561154")}} illustre un problème où la spécificité de :-moz-any() est incorrecte. L'implémentation actuelle considère :-moz-any() comme une règle universelle. Ainsi, lorsqu'il est utilisé pour le sélecteur le plus à droite d'un expression ce sera plus lent que d'utiliser un identifiant, une classe ou une balise.

+ +

Par exemple :

+ +
.a > :-moz-any(.b, .c)
+
+ +

est moins rapide que :

+ +
.a > .b, .a > .c
+
+ +

et celui-ci est rapide :

+ +
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.any")}}

diff --git a/files/fr/web/css/_colon_blank/index.html b/files/fr/web/css/_colon_blank/index.html new file mode 100644 index 0000000000..78f5f10739 --- /dev/null +++ b/files/fr/web/css/_colon_blank/index.html @@ -0,0 +1,53 @@ +--- +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 new file mode 100644 index 0000000000..1c30f76b91 --- /dev/null +++ b/files/fr/web/css/_colon_checked/index.html @@ -0,0 +1,141 @@ +--- +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

+ +

Ici, on utilise la pseudo-classe :checked pseudo-class applied to hidden checkboxes appended at the beginning of your page could be employed in order to store some dynamic booleans to be used by a CSS rule. The following example shows how to hide/show some expandable elements by simply clicking on a button (download this demo).

+ +

CSS

+ +
#expand-btn {
+    margin: 0 3px;
+    display: inline-block;
+    font: 12px / 13px "Lucida Grande", sans-serif;
+    text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+    padding: 3px 6px;
+    border: 1px solid rgba(0, 0, 0, 0.6);
+    background-color: #969696;
+    cursor: default;
+    border-radius: 3px;
+    box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
+}
+
+#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
+    background: #B5B5B5;
+    box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
+}
+
+#isexpanded, .expandable {
+    display: none;
+}
+
+#isexpanded:checked ~ * tr.expandable {
+    display: table-row;
+    background: #cccccc;
+
+}
+
+#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
+    display: block;
+    background: #cccccc;
+}
+
+ +

HTML

+ +
<input type="checkbox" id="isexpanded" />
+
+<table>
+    <thead>
+        <tr><th>Colonne 1</th><th>Colonne 2</th><th>Colonne 3</th></tr>
+    </thead>
+    <tbody>
+        <tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
+        <tr><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
+        <tr><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
+        <tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
+        <tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
+    </tbody>
+</table>
+
+<p>[Un texte normal]</p>
+<p><label for="isexpanded" id="expand-btn">Afficher les éléments masqués</label></p>
+<p class="expandable">[Un texte caché]</p>
+<p>[Un texte normal]</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','300','450')}}

+ +

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_default/index.html b/files/fr/web/css/_colon_default/index.html new file mode 100644 index 0000000000..6dbe175935 --- /dev/null +++ b/files/fr/web/css/_colon_default/index.html @@ -0,0 +1,114 @@ +--- +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 new file mode 100644 index 0000000000..9bdc667302 --- /dev/null +++ b/files/fr/web/css/_colon_defined/index.html @@ -0,0 +1,124 @@ +--- +title: ':defined' +slug: 'Web/CSS/:defined' +tags: + - CSS + - Pseudo-classe + - Reference + - Web +translation_of: 'Web/CSS/: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 et également les éléments personnalisés (custom elements) ayant correctement été définis (c'est-à-dire grâce à la méthode {{domxref("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 une copie de cet élément dans le document, à côté d'un paragraphe classique {{HTMLElement("p")}}  :

+ +
<simple-custom text="Le texte de l'élément personnalisé"></simple-custom>
+
+<p>Un paragraphe normal.</p>
+ +

Dans la feuille CSS, on inclut les règles suivantes :

+ +
// On utilise deux arrières-plans distincts
+// pour ces deux éléments
+p {
+  background: yellow;
+}
+
+simple-custom {
+  display: block;
+  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) {
+  opacity: 0;
+}
+
+simple-custom:defined {
+  opacity: 0.75;
+  text-decoration: underline;
+}
+ +

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 formes sur la page.

+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.defined")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_dir/index.html b/files/fr/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..7d9197910e --- /dev/null +++ b/files/fr/web/css/_colon_dir/index.html @@ -0,0 +1,110 @@ +--- +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 new file mode 100644 index 0000000000..8c7e609d58 --- /dev/null +++ b/files/fr/web/css/_colon_disabled/index.html @@ -0,0 +1,117 @@ +--- +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 new file mode 100644 index 0000000000..ef31669639 --- /dev/null +++ b/files/fr/web/css/_colon_empty/index.html @@ -0,0 +1,108 @@ +--- +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 new file mode 100644 index 0000000000..7fdc81910f --- /dev/null +++ b/files/fr/web/css/_colon_enabled/index.html @@ -0,0 +1,106 @@ +--- +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 new file mode 100644 index 0000000000..508a65a4de --- /dev/null +++ b/files/fr/web/css/_colon_first-child/index.html @@ -0,0 +1,129 @@ +--- +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 new file mode 100644 index 0000000000..7739d63fd4 --- /dev/null +++ b/files/fr/web/css/_colon_first-of-type/index.html @@ -0,0 +1,96 @@ +--- +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 new file mode 100644 index 0000000000..336d6c6fad --- /dev/null +++ b/files/fr/web/css/_colon_first/index.html @@ -0,0 +1,100 @@ +--- +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 new file mode 100644 index 0000000000..7e3bde9044 --- /dev/null +++ b/files/fr/web/css/_colon_focus-visible/index.html @@ -0,0 +1,137 @@ +--- +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: none;
+  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 new file mode 100644 index 0000000000..bb01fcfbf5 --- /dev/null +++ b/files/fr/web/css/_colon_focus-within/index.html @@ -0,0 +1,96 @@ +--- +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 new file mode 100644 index 0000000000..894676ea2f --- /dev/null +++ b/files/fr/web/css/_colon_focus/index.html @@ -0,0 +1,110 @@ +--- +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 new file mode 100644 index 0000000000..48f221600c --- /dev/null +++ b/files/fr/web/css/_colon_fullscreen/index.html @@ -0,0 +1,93 @@ +--- +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_has/index.html b/files/fr/web/css/_colon_has/index.html new file mode 100644 index 0000000000..ae987efbd4 --- /dev/null +++ b/files/fr/web/css/_colon_has/index.html @@ -0,0 +1,69 @@ +--- +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 new file mode 100644 index 0000000000..0d8b083548 --- /dev/null +++ b/files/fr/web/css/_colon_host()/index.html @@ -0,0 +1,89 @@ +--- +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 new file mode 100644 index 0000000000..36bcacd731 --- /dev/null +++ b/files/fr/web/css/_colon_host-context()/index.html @@ -0,0 +1,96 @@ +--- +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 new file mode 100644 index 0000000000..c82bb211e4 --- /dev/null +++ b/files/fr/web/css/_colon_host/index.html @@ -0,0 +1,86 @@ +--- +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 new file mode 100644 index 0000000000..93419ae333 --- /dev/null +++ b/files/fr/web/css/_colon_hover/index.html @@ -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 d'utilisation : sur les écrans tactiles, :hover est problématique voire impossible. La pseudo-classe :hover n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.
+ +

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 new file mode 100644 index 0000000000..3e5e8ff1b4 --- /dev/null +++ b/files/fr/web/css/_colon_in-range/index.html @@ -0,0 +1,106 @@ +--- +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 new file mode 100644 index 0000000000..5ebd9cd85e --- /dev/null +++ b/files/fr/web/css/_colon_indeterminate/index.html @@ -0,0 +1,127 @@ +--- +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 new file mode 100644 index 0000000000..6b571b7d18 --- /dev/null +++ b/files/fr/web/css/_colon_invalid/index.html @@ -0,0 +1,163 @@ +--- +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 new file mode 100644 index 0000000000..0e30e8c34a --- /dev/null +++ b/files/fr/web/css/_colon_is/index.html @@ -0,0 +1,283 @@ +--- +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 new file mode 100644 index 0000000000..0d4b2d406a --- /dev/null +++ b/files/fr/web/css/_colon_lang/index.html @@ -0,0 +1,133 @@ +--- +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 new file mode 100644 index 0000000000..a8ef3b516b --- /dev/null +++ b/files/fr/web/css/_colon_last-child/index.html @@ -0,0 +1,87 @@ +--- +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 new file mode 100644 index 0000000000..618d0fa6a4 --- /dev/null +++ b/files/fr/web/css/_colon_last-of-type/index.html @@ -0,0 +1,102 @@ +--- +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 new file mode 100644 index 0000000000..9af8051ca3 --- /dev/null +++ b/files/fr/web/css/_colon_left/index.html @@ -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 new file mode 100644 index 0000000000..9d1f128702 --- /dev/null +++ b/files/fr/web/css/_colon_link/index.html @@ -0,0 +1,112 @@ +--- +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_not/index.html b/files/fr/web/css/_colon_not/index.html new file mode 100644 index 0000000000..7720f1c178 --- /dev/null +++ b/files/fr/web/css/_colon_not/index.html @@ -0,0 +1,112 @@ +--- +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.

+ +
+

Notes :

+ + +
+ +

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 new file mode 100644 index 0000000000..b9826680e8 --- /dev/null +++ b/files/fr/web/css/_colon_nth-child/index.html @@ -0,0 +1,210 @@ +--- +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-last-child/index.html b/files/fr/web/css/_colon_nth-last-child/index.html new file mode 100644 index 0000000000..16c0e524ef --- /dev/null +++ b/files/fr/web/css/_colon_nth-last-child/index.html @@ -0,0 +1,197 @@ +--- +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-of-type/index.html b/files/fr/web/css/_colon_nth-last-of-type/index.html new file mode 100644 index 0000000000..f8689c04d1 --- /dev/null +++ b/files/fr/web/css/_colon_nth-last-of-type/index.html @@ -0,0 +1,93 @@ +--- +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 new file mode 100644 index 0000000000..ab51994aec --- /dev/null +++ b/files/fr/web/css/_colon_nth-of-type/index.html @@ -0,0 +1,108 @@ +--- +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 new file mode 100644 index 0000000000..2ad2d86c12 --- /dev/null +++ b/files/fr/web/css/_colon_only-child/index.html @@ -0,0 +1,143 @@ +--- +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 new file mode 100644 index 0000000000..d60cf898db --- /dev/null +++ b/files/fr/web/css/_colon_only-of-type/index.html @@ -0,0 +1,115 @@ +--- +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 new file mode 100644 index 0000000000..26ec7e5506 --- /dev/null +++ b/files/fr/web/css/_colon_optional/index.html @@ -0,0 +1,116 @@ +--- +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 new file mode 100644 index 0000000000..ff99fb7c26 --- /dev/null +++ b/files/fr/web/css/_colon_out-of-range/index.html @@ -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_placeholder-shown/index.html b/files/fr/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..943598fde4 --- /dev/null +++ b/files/fr/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,199 @@ +--- +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 new file mode 100644 index 0000000000..d8d7183237 --- /dev/null +++ b/files/fr/web/css/_colon_read-only/index.html @@ -0,0 +1,102 @@ +--- +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 new file mode 100644 index 0000000000..d867eaee4e --- /dev/null +++ b/files/fr/web/css/_colon_read-write/index.html @@ -0,0 +1,96 @@ +--- +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 new file mode 100644 index 0000000000..f2fcdc5366 --- /dev/null +++ b/files/fr/web/css/_colon_required/index.html @@ -0,0 +1,120 @@ +--- +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 new file mode 100644 index 0000000000..239d2171f9 --- /dev/null +++ b/files/fr/web/css/_colon_right/index.html @@ -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 new file mode 100644 index 0000000000..cdfe0ca96f --- /dev/null +++ b/files/fr/web/css/_colon_root/index.html @@ -0,0 +1,62 @@ +--- +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 new file mode 100644 index 0000000000..eba58021b7 --- /dev/null +++ b/files/fr/web/css/_colon_scope/index.html @@ -0,0 +1,84 @@ +--- +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éifications

+ + + + + + + + + + + + + + + + +
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/index.html b/files/fr/web/css/_colon_target/index.html new file mode 100644 index 0000000000..bba7c3b8b3 --- /dev/null +++ b/files/fr/web/css/_colon_target/index.html @@ -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_valid/index.html b/files/fr/web/css/_colon_valid/index.html new file mode 100644 index 0000000000..5a37129d22 --- /dev/null +++ b/files/fr/web/css/_colon_valid/index.html @@ -0,0 +1,120 @@ +--- +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 new file mode 100644 index 0000000000..5d54e0de21 --- /dev/null +++ b/files/fr/web/css/_colon_visited/index.html @@ -0,0 +1,113 @@ +--- +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_et_la_vie_priv\303\251e/index.html" "b/files/fr/web/css/_colon_visited_et_la_vie_priv\303\251e/index.html" new file mode 100644 index 0000000000..5f5a3655e8 --- /dev/null +++ "b/files/fr/web/css/_colon_visited_et_la_vie_priv\303\251e/index.html" @@ -0,0 +1,73 @@ +--- +title: 'Le sélecteur :visited et la vie privée' +slug: 'Web/CSS/:visited_et_la_vie_privée' +tags: + - CSS + - Guide + - Sécurité +translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' +--- +
{{CSSRef}}
+ +

Par le passé (avant 2010), le sélecteur CSS {{cssxref(":visited")}} permettait aux sites d'effectuer des requêtes sur l'historique de l'utilisateur grâce à la méthode {{domxref("window.getComputedStyle")}} ou à d'autre techniques, parcourant l'historique de l'utilisateur afin de connaître les sites qu'il avait visité. Cela pouvait effectué rapidement et permettait d'obtenir beaucoup d'informations sur l'identité d'un utilisateur.

+ +

Afin de palier au problème, Gecko ({{Gecko("2")}}) a été modifié afin de limiter la quantité d'informations qui peut être obtenue au travers des liens visités. Les autres navigateurs ont également été modifiés de façon semblable.

+ +

Quelques petits mensonges pour se protéger

+ +

La première modification consiste à faire mentir Gecko envers les applications web sous certaines circonstances. 

+ + + +

Les limites de la mise en forme applicable aux liens visités

+ +

On peut toujours mettre en forme les liens visités mais quelques limites s'appliquent désormais. Seule les propriétés suivantes pourront être appliquées aux liens visités :

+ + + +

De plus, même pour ces propriétés, il n'est pas possible de modifier la transparence entre les liens qui ont été visités et les autres (comme on pourrait le faire par ailleurs avec rgba() ou hsla() ou avec le mot-clé transparent).

+ +

Voici un exemple de mise en forme prenant en compte ces restrictions :

+ +
:link {
+  outline: 1px dotted blue;
+  background-color: white;
+  /* La valeur par défaut de background-color est 'transparent'.
+     et il faut donc une valeur différente, sinon les modifications
+     pour :visited ne s'appliqueront pas. */
+}
+
+:visited {
+  outline-color: orange;     /* Les liens visités auront un contour orange */
+  color: yellow;             /* Le texte des liens visités sera en jaune   */
+  background-color: green;   /* L'arrière-plan des liens visités sera vert */
+}
+
+ +

Impact sur les développeurs web

+ +

De façon générale, cela ne devrait pas impacter les développeurs de façon significative. Il faudra toutefois appliquer les modifications suivantes aux sites :

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_where/index.html b/files/fr/web/css/_colon_where/index.html new file mode 100644 index 0000000000..7b1eac9461 --- /dev/null +++ b/files/fr/web/css/_colon_where/index.html @@ -0,0 +1,52 @@ +--- +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 new file mode 100644 index 0000000000..c2555bb941 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.html @@ -0,0 +1,60 @@ +--- +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-list-bullet/index.html b/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html new file mode 100644 index 0000000000..f394c8a1c1 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html @@ -0,0 +1,55 @@ +--- +title: '::-moz-list-bullet' +slug: 'Web/CSS/::-moz-list-bullet' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: '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/_doublecolon_-moz-list-number/index.html b/files/fr/web/css/_doublecolon_-moz-list-number/index.html new file mode 100644 index 0000000000..0f12741d94 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-list-number/index.html @@ -0,0 +1,52 @@ +--- +title: '::-moz-list-number' +slug: 'Web/CSS/::-moz-list-number' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: '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/_doublecolon_-moz-page-sequence/index.html b/files/fr/web/css/_doublecolon_-moz-page-sequence/index.html new file mode 100644 index 0000000000..1176bd6b65 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-page-sequence/index.html @@ -0,0 +1,34 @@ +--- +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 new file mode 100644 index 0000000000..b5a265403d --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-page/index.html @@ -0,0 +1,34 @@ +--- +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 new file mode 100644 index 0000000000..bd587d7c2e --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html @@ -0,0 +1,51 @@ +--- +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')}}

+ +

Une barre de progression mise en forme de cette façon devrait ressembler à :

+ +

Custom styled progress bar

+ +

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 new file mode 100644 index 0000000000..4d7787f37a --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-range-progress/index.html @@ -0,0 +1,69 @@ +--- +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 new file mode 100644 index 0000000000..a66f6a3d83 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.html @@ -0,0 +1,73 @@ +--- +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 new file mode 100644 index 0000000000..5021c16237 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-range-track/index.html @@ -0,0 +1,72 @@ +--- +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 new file mode 100644 index 0000000000..688f8a5a50 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html @@ -0,0 +1,34 @@ +--- +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_-ms-browse/index.html b/files/fr/web/css/_doublecolon_-ms-browse/index.html new file mode 100644 index 0000000000..a1c0fc0ad9 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-ms-browse/index.html @@ -0,0 +1,108 @@ +--- +title: '::-ms-browse' +slug: 'Web/CSS/::-ms-browse' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-browse' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-ms-browse représente le bouton qui permet d'ouvrir l'explorateur de fichier d'un élément {{HTMLElement("input")}} de type file.

+ +

Propriétés autorisées

+ +

Seules les propriétés CSS suivantes peuvent être utilisées avec une règle qui utilise un sélecteur avec ::-ms-browse. Les autres propriétés sont ignorées.

+ +
+ +
+

Syntaxe

+ +
  {{csssyntax}}
+
+ +

Exemples

+ +

HTML

+ +
<label>Choisir une image : <input type="file"></label>
+ +

CSS

+ +
input[type="file"]::-ms-browse {
+  color: red;
+  background-color: yellow;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Capture d'écran correspondante

+ +

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-ms-browse")}}

diff --git a/files/fr/web/css/_doublecolon_-ms-check/index.html b/files/fr/web/css/_doublecolon_-ms-check/index.html new file mode 100644 index 0000000000..7696ee6792 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-ms-check/index.html @@ -0,0 +1,125 @@ +--- +title: '::-ms-check' +slug: 'Web/CSS/::-ms-check' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-check' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-ms-check est une extension Microsoft qui représente la marque visuelle d'un élément {{HTMLElement("input")}} de type="checkbox" or type="radio". Ce pseudo-élément n'est pas standard et est uniquement pris en charge par Internet Explorer et Edge.

+ +

Propriétés autorisées

+ +

Seules certaines propriétés CSS peuvent être utilisées au sein d'une règle dont le sélecteur contient ::-ms-check. Les autres propriétés seront ignorées.

+ +
+ +
+ +

Syntaxe

+ +
selecteur::-ms-check
+
+ +

Exemples

+ +

CSS

+ +
input, label {
+  display: inline;
+}
+
+input[type=radio]::-ms-check {
+  /* Le cercle sera rouge comme l'option sera sélectionnée. */
+  color: red;
+  /* La bordure de l'élément sera rouge si l'option est sélectionnée */
+  border-color: red;
+}
+
+input[type=checkbox]::-ms-check {
+  /* La coche sera verte quand la case sera cochée. */
+  color: green;
+  /* La bordure de l'élément sera verte si la case est cochée */
+  border-color: red;
+}
+ +

HTML

+ +
<form>
+  <label for="redButton">Rouge</label>
+  <input type="radio" id="redButton"><br>
+  <label for="greenCheckbox">Verte</label>
+  <input type="checkbox" id="greenCheckbox">
+</form>
+ +

Résultat

+ +

La capture d'écran à gauche illustre le résultat obtenu avec Internet Explorer ou Edge.

+ +

{{EmbedLiveSample('Exemples', '', '', 'https://mdn.mozillademos.org/files/15814/ie11-example.PNG', 'Web/CSS/::-ms-check')}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-ms-check")}}

diff --git a/files/fr/web/css/_doublecolon_-ms-clear/index.html b/files/fr/web/css/_doublecolon_-ms-clear/index.html new file mode 100644 index 0000000000..fe06d95707 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-ms-clear/index.html @@ -0,0 +1,137 @@ +--- +title: '::-ms-clear' +slug: 'Web/CSS/::-ms-clear' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-clear' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-ms-clear représente le bouton qui permet d'effacer la valeur saisie dans un champ {{HTMLElement("input")}}. Ce bouton et ce pseudo-élément ne sont pas standards et sont uniquement pris en charge par Internet Explorer 10, 11 et Edge. Le bouton est uniquement affichés pour les champs textuels {{HTMLElement("input")}} non-vides et qui ont le focus.

+ +

Le bouton de remise à zéro est uniquement affiché pour les contrôles textuels qui ont le focus et qui ne sont pas vides. Les contrôles concernés sont :

+ + + +

Propriétés autorisées

+ +

Seules les propriétés CSS suivantes peuvent être utilisées dans une règle qui contient ::-ms-clear dans son sélecteur (les autres propriétés seront ignorées).

+ +
+ +
+ +

Syntaxe

+ +
 selecteur::-ms-clear
+ +

Exemples

+ +

CSS

+ +
input,
+label {
+  display: block;
+}
+
+input[type=text]::-ms-clear {
+  color: red; /* La croix du bouton sera rouge. */
+  /* On peut cacher la croix avec display qui vaut "none" */
+}
+ +

HTML

+ +
<form>
+  <label for="firstname">First name:</label>
+  <input type="text" id="firstname" name="firstname" placeholder="First name"><br>
+
+  <label for="lastname">Last name:</label>
+  <input type="text" id="lastname" name="lastname" placeholder="Second name">
+</form>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Voici une capture d'écran du résultat obtenu avec IE 10/11 :

+ +

 

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-ms-clear")}}

diff --git a/files/fr/web/css/_doublecolon_-ms-expand/index.html b/files/fr/web/css/_doublecolon_-ms-expand/index.html new file mode 100644 index 0000000000..f8f7b3ded3 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-ms-expand/index.html @@ -0,0 +1,88 @@ +--- +title: '::-ms-expand' +slug: 'Web/CSS/::-ms-expand' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-expand' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-ms-expand représente le bouton contenu dans un élément {{HTMLElement("select")}} et qui permet d'ouvrir ou de fermer le menu déroulant qui propose les options ({{HTMLElement("option")}}). Il est généralement représenté par un triangle orienté vers le bas.

+ +

Propriétés autorisées

+ +

Seules certaines propriétés CSS peuvent être utilisées dans une règle contenant ::-ms-expand dans son sélecteur (les autres propriétés seront ignorées).

+ + +
+ +
+

Syntaxe

+ +
::-ms-expand
+
+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.

+ + +

Compatibilité des navigateurs

+ + +

{{Compat("css.selectors.-ms-expand")}}

diff --git a/files/fr/web/css/_doublecolon_-ms-fill-lower/index.html b/files/fr/web/css/_doublecolon_-ms-fill-lower/index.html new file mode 100644 index 0000000000..de4df1e4af --- /dev/null +++ b/files/fr/web/css/_doublecolon_-ms-fill-lower/index.html @@ -0,0 +1,96 @@ +--- +title: '::-ms-fill-lower' +slug: 'Web/CSS/::-ms-fill-lower' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-fill-lower' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-ms-fill-lower représente la portion de la piste d'un élément {{HTMLElement("input")}} de type range qui contient les valeurs inférieures à la valeur du curseur.

+ +

Propriétés autorisées

+ +

Seules les propriétés CSS suivantes peuvent être utilisées dans une règle dont le sélecteur contient ::-ms-fill-lower (les autres propriétés sont ignorées).

+ + + +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-ms-fill-lower")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-ms-fill-upper/index.html b/files/fr/web/css/_doublecolon_-ms-fill-upper/index.html new file mode 100644 index 0000000000..3413848720 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-ms-fill-upper/index.html @@ -0,0 +1,101 @@ +--- +title: '::-ms-fill-upper' +slug: 'Web/CSS/::-ms-fill-upper' +tags: + - CSS + - Non-standard + - Pseudo-élément(2) + - Référence(2) +translation_of: 'Archive/Web/CSS/::-ms-fill-upper' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-ms-fill-upper représente la portion de la piste d'un élément {{HTMLElement("input")}} de type range qui contient les valeurs supérieures à la valeur du curseur.

+ +

Propriétés autorisées

+ +

Seules les propriétés CSS suivantes peuvent être utilisées dans une règle dont le sélecteur contient ::-ms-fill-upper. Les autres propriétés sont ignorées.

+ + + +

Syntax

+ +
{{csssyntax}}
+
+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-ms-fill-upper")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-ms-fill/index.html b/files/fr/web/css/_doublecolon_-ms-fill/index.html new file mode 100644 index 0000000000..e122d2104d --- /dev/null +++ b/files/fr/web/css/_doublecolon_-ms-fill/index.html @@ -0,0 +1,117 @@ +--- +title: '::-ms-fill' +slug: 'Web/CSS/::-ms-fill' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-fill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-ms-fill est un pseudo-élément spécifique à Microsoft qui représente la partie « remplie » d'un élément {{HTMLElement("progress")}}. Ce pseudo-élément n'est pas standard et est uniquement disponible avec Internet Explorer 10, Internet Explorer 11 et Microsoft Edge.

+ +

Toutes les propriétés autorisées (à l'exception de {{cssxref("animation-name")}}) s'appliquent sur une barre de progression dans un état déterminé. Seule animation-name s'applique sur une barre dans un état indéterminée. Les éléments <progress> dans un état indéterminés sont ceux qui n'ont pas d'attribut {{htmlattrxref("value")}}, ils peuvent être sélectionnés grâce à la pseudo-classe {{cssxref(":indeterminate")}}.

+ +

Par défaut, IE affiche un bordure avec des points qui se déplacent lorsque la barre est dans un état déterminée. En utilisant animation-name sur ::-ms-fill, on peut modifier l'animation :

+ + + + + + + + + + + + + + + + + + + + + + +
ValeurDescription
noneL'animation est désactivée, aucun point n'est affiché.
-ms-barLes points animés sont affichés sous la forme d'une barre.
-ms-ringLes points animés sont affichés sous la forme d'un anneau.
+ +

Propriétés autorisées

+ +

Seules les propriétés suivantes peuvent être utilisées avec ::-ms-fill (les autres propriétés seront ignorées) :

+ + + +

Syntaxe

+ +
{{csssyntax}}
+ + + +

Exemples

+ +

CSS

+ +
progress::-ms-fill {
+  background-color: orange;
+}
+ +

HTML

+ +
<progress value="10" max="50"></progress>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 300, 50)}}

+ +

Une barre de progression mise en forme avec cette feuille de style devrait ressembler à :

+ +

Progress Bar with Orange Fill

+ +

Spécifications

+ +

Ce pseudo-élément est spécifique à Microsoft et n'est décrit dans aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-ms-fill")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-ms-reveal/index.html b/files/fr/web/css/_doublecolon_-ms-reveal/index.html new file mode 100644 index 0000000000..e0e998ad5b --- /dev/null +++ b/files/fr/web/css/_doublecolon_-ms-reveal/index.html @@ -0,0 +1,91 @@ +--- +title: '::-ms-reveal' +slug: 'Web/CSS/::-ms-reveal' +tags: + - CSS + - Microsoft + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-reveal' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-ms-reveal est un pseudo-élément spécifique à Microsoft qui est utilisé pour la représentation du bouton qui permet de révéler le mot de passe qui est généralement affiché juste après un élément {{HTMLElement("input/password", '<input type="password">')}} dans Internet Explorer 10+.

+ +

Ce bouton permet d'afficher le contenu du mot de passe dans le champs (plutôt que les astérisques qui masquent les caractères).

+ +

Ce pseudo-élément n'est pas standard et est spécifique à Internet Explorer 10+.

+ +

Propriétés autorisées

+ +

Seules les propriétés suivantes peuvent être utilisées dans une règle dont le sélecteur contient ::-ms-reveal (les autres propriétés seront ignorées).

+ + + +

Syntaxe

+ +
{{csssyntax("::-ms-reveal")}}
+
+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-ms-reveal")}}

diff --git a/files/fr/web/css/_doublecolon_-ms-thumb/index.html b/files/fr/web/css/_doublecolon_-ms-thumb/index.html new file mode 100644 index 0000000000..895408d2b0 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-ms-thumb/index.html @@ -0,0 +1,100 @@ +--- +title: '::-ms-thumb' +slug: 'Web/CSS/::-ms-thumb' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-ms-thumb est un pseudo-élément spécifique à Microsoft qui représente le curseur qui peut être déplacer le long de la piste d'un élément {{HTMLElement("input")}} de type range afin de modifier la valeur numérique associée.

+ +

Propriétés autorisées

+ +

Seules les propriétés suivantes peuvent être utilisées dans une règle dont le sélecteur contient ::-ms-thumb (les autres propriétés sont ignorées).

+ + + +

Syntax

+ +
{{csssyntax}}
+
+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-ms-ticks-after/index.html b/files/fr/web/css/_doublecolon_-ms-ticks-after/index.html new file mode 100644 index 0000000000..02bf07507a --- /dev/null +++ b/files/fr/web/css/_doublecolon_-ms-ticks-after/index.html @@ -0,0 +1,91 @@ +--- +title: '::-ms-ticks-after' +slug: 'Web/CSS/::-ms-ticks-after' +tags: + - CSS + - Microsoft + - Non-standard + - Pseudo-element + - Reference + - Web +translation_of: 'Archive/Web/CSS/::-ms-ticks-after' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-ms-ticks-after est une extension Microsoft qui permet d'appliquer un ou plusieurs styles aux graduations d'une piste qui sont situées après le curseur (la piste est celle d'un contrôle <input type="range">). Pour une disposition avec une écriture de gauche à droite, les marques sont situées sous la piste. Pour une disposition avec une écriture de haut en bas, les marques sont situées à droite de la piste.

+ +

Par défaut, les marques ne sont pas affichées, il est nécessaire d'utiliser la valeur block pour la propriété {{cssxref("display")}}.

+ +

Il est possible d'utiliser simultanément les sélecteurs ::-ms-ticks-after, {{cssxref("::-ms-ticks-before")}}, et {{cssxref("::-ms-track")}} mais cela créera alors trois ensembles de marques, ce qui n'est pas recommandé. Pour une meilleure ergonomie, il est conseillé de n'utiliser qu'un seul ensemble de marque. Pour retirer les marques, on pourra utiliser la valeur transparent sur la propriété {{cssxref("color")}}.

+ +

Propriétés autorisées

+ +

Voici les propriétés qui peuvent être définies dans les styles associés à ce pseudo-élément (les autres propriétés seront ignorées) :

+ + + +

Syntaxe

+ +
{{csssyntax}}
+
+ + + +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-ms-ticks-before/index.html b/files/fr/web/css/_doublecolon_-ms-ticks-before/index.html new file mode 100644 index 0000000000..371ff710ec --- /dev/null +++ b/files/fr/web/css/_doublecolon_-ms-ticks-before/index.html @@ -0,0 +1,89 @@ +--- +title: '::-ms-ticks-before' +slug: 'Web/CSS/::-ms-ticks-before' +tags: + - CSS + - Microsoft + - Non-standard + - Pseudo-element + - Reference + - Web +translation_of: 'Archive/Web/CSS/::-ms-ticks-before' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-ms-ticks-before est une extension Microsoft qui permet d'appliquer un ou plusieurs styles aux graduations d'une piste qui sont situées avant le curseur (la piste est celle d'un contrôle <input type="range">). Pour une disposition avec une écriture de gauche à droite, les marques sont situées au-dessus de la piste. Pour une disposition avec une écriture de haut en bas, les marques sont situées à gauche de la piste.

+ +

Par défaut, les marques ne sont pas affichées, il est nécessaire d'utiliser la valeur block pour la propriété {{cssxref("display")}}.

+ +

Il est possible d'utiliser simultanément les sélecteurs {{cssxref("::-ms-ticks-after")}}, ::-ms-ticks-before et {{cssxref("::-ms-track")}} mais cela créera alors trois ensembles de marques, ce qui n'est pas recommandé. Pour une meilleure ergonomie, il est conseillé de n'utiliser qu'un seul ensemble de marque. Pour retirer les marques, on pourra utiliser la valeur transparent sur la propriété {{cssxref("color")}}.

+ +

Propriétés autorisées

+ +

 

+ +

Voici les propriétés qui peuvent être définies dans les styles associés à ce pseudo-élément (les autres propriétés seront ignorées) :

+ + + +

Syntaxe

+ +
{{csssyntax}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-ms-tooltip/index.html b/files/fr/web/css/_doublecolon_-ms-tooltip/index.html new file mode 100644 index 0000000000..e4d68b6bcc --- /dev/null +++ b/files/fr/web/css/_doublecolon_-ms-tooltip/index.html @@ -0,0 +1,30 @@ +--- +title: '::-ms-tooltip' +slug: 'Web/CSS/::-ms-tooltip' +tags: + - CSS + - Extension + - Microsoft + - Non-standard + - Pseudo-element + - Reference + - Web +translation_of: 'Archive/Web/CSS/::-ms-tooltip' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-ms-tooltip est une extension Microsoft qui permet d'appliquer un ou plusieurs styles à la bulle d'information du curseur d'un élément <input type="range">.

+ +

Propriétés autorisées

+ +

Seules les propriétés {{cssxref("display")}} et {{cssxref("visibility")}} peuvent être utilisées avec ::-ms-tooltip.

+ +

Syntaxe

+ +
{{csssyntax}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-ms-track/index.html b/files/fr/web/css/_doublecolon_-ms-track/index.html new file mode 100644 index 0000000000..5dda04462a --- /dev/null +++ b/files/fr/web/css/_doublecolon_-ms-track/index.html @@ -0,0 +1,104 @@ +--- +title: '::-ms-track' +slug: 'Web/CSS/::-ms-track' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-track' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-ms-track est un pseudo-élément spécifique à Microsoft qui permet de représenter la piste sur laquelle on peut déplacer le curseur d'un élément {{HTMLElement("input")}} de range.

+ +

La propriété {{cssxref("color")}}, appliquée au sein d'un sélecteur ::-ms-track modifiera la couleur des graduations le long de la piste. Si on souhaite les masquer, on pourra utiliser la valeur transparent.

+ +

On peut utiliser les pseudo-éléments {{cssxref("::-ms-ticks-after")}}, {{cssxref("::-ms-ticks-before")}} et ::-ms-track ensemble afin de créer trois ensembles graduations. Toutefois, pour des raisons d'ergonomie, il est conseillé de n'avoir qu'une seule mise en forme pour ces graudations.

+ +

Propriétés autorisées

+ +

Seules les propriétés CSS suivantes sont autorisées dans une règle dont le sélecteur contient ::-ms-track (les autres propriétés sont ignorées).

+ + + +

Syntaxe

+ +
  {{csssyntax}}
+
+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_doublecolon_-ms-value/index.html b/files/fr/web/css/_doublecolon_-ms-value/index.html new file mode 100644 index 0000000000..264ead8b53 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-ms-value/index.html @@ -0,0 +1,92 @@ +--- +title: '::-ms-value' +slug: 'Web/CSS/::-ms-value' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-value' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-ms-value est un pseudo-élément spécifique à Microsoft qui permet d'appliquer des règles sur les éléments {{HTMLElement("input")}} ou {{HTMLElement("select")}}. Seules certaines propriétés peuvent être paramétrées via ce pseudo-élément, les règles agissant sur d'autres propriétés n'auront donc aucun effet.

+ +

Propriétés autorisées

+ +

Seules les propriétés suivantes peuvent être utilisées dans une règle dont le sélecteur contient ::-ms-value (les autres propriétés sont ignorées).

+ + + +

Syntaxe

+ +
{{csssyntax}}
+ +

Exemples

+ +
input::-ms-value {
+  color: lime;
+  font-style: italic;
+}
+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-ms-value")}}

diff --git a/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html new file mode 100644 index 0000000000..2de12911cf --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html @@ -0,0 +1,54 @@ +--- +title: '::-webkit-file-upload-button' +slug: 'Web/CSS/::-webkit-file-upload-button' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::file-selector-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_-webkit-inner-spin-button/index.html b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.html new file mode 100644 index 0000000000..fc64500935 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.html @@ -0,0 +1,48 @@ +--- +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-input-placeholder/index.html b/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html new file mode 100644 index 0000000000..c93ace537c --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html @@ -0,0 +1,96 @@ +--- +title: '::-webkit-input-placeholder' +slug: 'Web/CSS/::-webkit-input-placeholder' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::placeholder' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Le pseudo-élément ::-webkit-input-placeholder représente le texte de substitution d'un formulaire. Il permet aux auteurs et aux développeurs d'adapter la mise en forme de ce texte de substitution. Ce pseudo-élément est uniquement pris en charge par WebKit et Blink.

+ +

Exemples

+ +

HTML

+ +
<input placeholder="Veuillez saisir ici...">
+ +

CSS

+ +
input::-webkit-input-placeholder {
+  color: green;
+}
+ +

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

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support simple{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Support simple{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

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 new file mode 100644 index 0000000000..1b388c8cdb --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.html @@ -0,0 +1,68 @@ +--- +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 new file mode 100644 index 0000000000..aad0332d89 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html @@ -0,0 +1,56 @@ +--- +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 new file mode 100644 index 0000000000..0bde368e10 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.html @@ -0,0 +1,63 @@ +--- +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 new file mode 100644 index 0000000000..a62a09bb8b --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.html @@ -0,0 +1,56 @@ +--- +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 new file mode 100644 index 0000000000..1774660de5 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html @@ -0,0 +1,56 @@ +--- +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 new file mode 100644 index 0000000000..f53ee0d5d9 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.html @@ -0,0 +1,48 @@ +--- +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 new file mode 100644 index 0000000000..dab0700960 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html @@ -0,0 +1,66 @@ +--- +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 new file mode 100644 index 0000000000..4a3f1b4af1 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.html @@ -0,0 +1,66 @@ +--- +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 new file mode 100644 index 0000000000..eefb15ceec --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html @@ -0,0 +1,65 @@ +--- +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 new file mode 100644 index 0000000000..45d4fff49e --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html @@ -0,0 +1,123 @@ +--- +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 new file mode 100644 index 0000000000..345ec5935b --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.html @@ -0,0 +1,34 @@ +--- +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 new file mode 100644 index 0000000000..00579110d6 --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.html @@ -0,0 +1,33 @@ +--- +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 new file mode 100644 index 0000000000..c54cd2724b --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.html @@ -0,0 +1,35 @@ +--- +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 new file mode 100644 index 0000000000..5dbe854f7c --- /dev/null +++ b/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.html @@ -0,0 +1,36 @@ +--- +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 new file mode 100644 index 0000000000..7aa9760fa6 --- /dev/null +++ b/files/fr/web/css/_doublecolon_after/index.html @@ -0,0 +1,181 @@ +--- +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 new file mode 100644 index 0000000000..feb1775822 --- /dev/null +++ b/files/fr/web/css/_doublecolon_backdrop/index.html @@ -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 new file mode 100644 index 0000000000..4e30107c80 --- /dev/null +++ b/files/fr/web/css/_doublecolon_before/index.html @@ -0,0 +1,190 @@ +--- +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 new file mode 100644 index 0000000000..185f78c396 --- /dev/null +++ b/files/fr/web/css/_doublecolon_cue-region/index.html @@ -0,0 +1,84 @@ +--- +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 new file mode 100644 index 0000000000..7afc17e42c --- /dev/null +++ b/files/fr/web/css/_doublecolon_cue/index.html @@ -0,0 +1,81 @@ +--- +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_first-letter/index.html b/files/fr/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..be24b0b651 --- /dev/null +++ b/files/fr/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,143 @@ +--- +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.

+ +
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 new file mode 100644 index 0000000000..55e30bf773 --- /dev/null +++ b/files/fr/web/css/_doublecolon_first-line/index.html @@ -0,0 +1,161 @@ +--- +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.

+ +
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 new file mode 100644 index 0000000000..666687330d --- /dev/null +++ b/files/fr/web/css/_doublecolon_grammar-error/index.html @@ -0,0 +1,84 @@ +--- +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 new file mode 100644 index 0000000000..53b3fc1fe5 --- /dev/null +++ b/files/fr/web/css/_doublecolon_marker/index.html @@ -0,0 +1,100 @@ +--- +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 new file mode 100644 index 0000000000..2d966e1fc8 --- /dev/null +++ b/files/fr/web/css/_doublecolon_part/index.html @@ -0,0 +1,113 @@ +--- +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 new file mode 100644 index 0000000000..70ba6c1830 --- /dev/null +++ b/files/fr/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,156 @@ +--- +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 new file mode 100644 index 0000000000..409520ae24 --- /dev/null +++ b/files/fr/web/css/_doublecolon_selection/index.html @@ -0,0 +1,134 @@ +--- +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 new file mode 100644 index 0000000000..503d42dbf9 --- /dev/null +++ b/files/fr/web/css/_doublecolon_slotted/index.html @@ -0,0 +1,111 @@ +--- +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 new file mode 100644 index 0000000000..03b39061f8 --- /dev/null +++ b/files/fr/web/css/_doublecolon_spelling-error/index.html @@ -0,0 +1,84 @@ +--- +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/a_propos_du_bloc_conteneur/index.html b/files/fr/web/css/a_propos_du_bloc_conteneur/index.html new file mode 100644 index 0000000000..6269f895b5 --- /dev/null +++ b/files/fr/web/css/a_propos_du_bloc_conteneur/index.html @@ -0,0 +1,263 @@ +--- +title: À propos du bloc conteneur +slug: Web/CSS/A_Propos_Du_Bloc_Conteneur +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/Containing_block +--- +
{{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 :

+ + + +
+

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

+ + diff --git a/files/fr/web/css/align-content/index.html b/files/fr/web/css/align-content/index.html new file mode 100644 index 0000000000..4bbae606f4 --- /dev/null +++ b/files/fr/web/css/align-content/index.html @@ -0,0 +1,293 @@ +--- +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 new file mode 100644 index 0000000000..39477147fe --- /dev/null +++ b/files/fr/web/css/align-items/index.html @@ -0,0 +1,290 @@ +--- +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 new file mode 100644 index 0000000000..51ac0143a4 --- /dev/null +++ b/files/fr/web/css/align-self/index.html @@ -0,0 +1,187 @@ +--- +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 new file mode 100644 index 0000000000..b9ed504c85 --- /dev/null +++ b/files/fr/web/css/all/index.html @@ -0,0 +1,174 @@ +--- +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 new file mode 100644 index 0000000000..2a260de8f1 --- /dev/null +++ b/files/fr/web/css/alpha-value/index.html @@ -0,0 +1,58 @@ +--- +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/angle-percentage/index.html b/files/fr/web/css/angle-percentage/index.html new file mode 100644 index 0000000000..7ec3da707a --- /dev/null +++ b/files/fr/web/css/angle-percentage/index.html @@ -0,0 +1,50 @@ +--- +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 new file mode 100644 index 0000000000..b829e4046c --- /dev/null +++ b/files/fr/web/css/angle/index.html @@ -0,0 +1,98 @@ +--- +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

+ + + + + + + + + + + + + + + + + + + + +
Angle90.png +

Un angle droit orienté dans le sens horaire : 90deg = 100grad = 0.25turn ≈ 1.5708rad

+
Angle180.pngUn angle plat orienté dans le sens horaire : 180deg = 200grad = 0.5turn ≈ 3.1416rad
AngleMinus90.pngUn angle droit orienté dans le sens anti-horaire : -90deg = -100grad = -0.25turn ≈ -1.5708rad
Angle0.png +

Un angle nul : 0 = 0deg = 0grad = 0turn = 0rad

+ +
Note :Si, dans l'absolu, on peut exprimer la valeur nulle sans unité, il est fortement recommandé d'indiquer l'unité afin de lever toute ambiguïté possible entre les angles et les longueurs.
+
+ +

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 new file mode 100644 index 0000000000..8518ef21ce --- /dev/null +++ b/files/fr/web/css/animation-delay/index.html @@ -0,0 +1,112 @@ +--- +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 new file mode 100644 index 0000000000..ff6036363e --- /dev/null +++ b/files/fr/web/css/animation-direction/index.html @@ -0,0 +1,137 @@ +--- +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 new file mode 100644 index 0000000000..92edb9d4b5 --- /dev/null +++ b/files/fr/web/css/animation-duration/index.html @@ -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 new file mode 100644 index 0000000000..415bb13bcd --- /dev/null +++ b/files/fr/web/css/animation-fill-mode/index.html @@ -0,0 +1,190 @@ +--- +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 new file mode 100644 index 0000000000..1a1cf04a69 --- /dev/null +++ b/files/fr/web/css/animation-iteration-count/index.html @@ -0,0 +1,135 @@ +--- +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 new file mode 100644 index 0000000000..69f6f7c251 --- /dev/null +++ b/files/fr/web/css/animation-name/index.html @@ -0,0 +1,119 @@ +--- +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 new file mode 100644 index 0000000000..0de85d6f86 --- /dev/null +++ b/files/fr/web/css/animation-play-state/index.html @@ -0,0 +1,133 @@ +--- +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 new file mode 100644 index 0000000000..28b84d89a9 --- /dev/null +++ b/files/fr/web/css/animation-timing-function/index.html @@ -0,0 +1,272 @@ +--- +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("<timing-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("<timing-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 new file mode 100644 index 0000000000..e92552e690 --- /dev/null +++ b/files/fr/web/css/animation/index.html @@ -0,0 +1,367 @@ +--- +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;
+
+ + + +

{{EmbedLiveSample("animation", "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/animations_css/conseils/index.html b/files/fr/web/css/animations_css/conseils/index.html new file mode 100644 index 0000000000..bb79f19722 --- /dev/null +++ b/files/fr/web/css/animations_css/conseils/index.html @@ -0,0 +1,165 @@ +--- +title: Trucs et astuces pour les animations CSS +slug: Web/CSS/Animations_CSS/Conseils +tags: + - Animations CSS + - CSS + - Exemple + - Guide + - Tutoriel +translation_of: Web/CSS/CSS_Animations/Tips +--- +
{{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/animations_css/d\303\251tecter_la_prise_en_charge_des_animations_css/index.html" "b/files/fr/web/css/animations_css/d\303\251tecter_la_prise_en_charge_des_animations_css/index.html" new file mode 100644 index 0000000000..a2cb1bd5a3 --- /dev/null +++ "b/files/fr/web/css/animations_css/d\303\251tecter_la_prise_en_charge_des_animations_css/index.html" @@ -0,0 +1,99 @@ +--- +title: Détecter la prise en charge des animations CSS +slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS +tags: + - Avancé + - CSS + - Obsolete +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +--- +
{{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/animations_css/index.html b/files/fr/web/css/animations_css/index.html new file mode 100644 index 0000000000..acc7ab6997 --- /dev/null +++ b/files/fr/web/css/animations_css/index.html @@ -0,0 +1,81 @@ +--- +title: Les animations CSS +slug: Web/CSS/Animations_CSS +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Animations +--- +
{{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/animations_css/utiliser_les_animations_css/index.html b/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html new file mode 100644 index 0000000000..4010492e3d --- /dev/null +++ b/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html @@ -0,0 +1,363 @@ +--- +title: Utiliser les animations CSS +slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS +tags: + - Avancé + - CSS + - Guide + - Reference +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +
{{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/appearance/index.html b/files/fr/web/css/appearance/index.html new file mode 100644 index 0000000000..a8bc485e09 --- /dev/null +++ b/files/fr/web/css/appearance/index.html @@ -0,0 +1,2677 @@ +--- +title: 'appearance (-moz-appearance, -webkit-appearance)' +slug: Web/CSS/appearance +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/appearance +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

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é est souvent 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 pour la spécification CSS Basic User Interface Module Level 4 */
+appearance: none;
+appearance: auto;
+appearance: button;
+appearance: textfield;
+appearance: searchfield;
+appearance: textarea;
+appearance: push-button;
+appearance: button-bevel;
+appearance: slider-horizontal;
+appearance: checkbox;
+appearance: radio;
+appearance: square-button;
+appearance: menulist;
+appearance: menulist-button;
+appearance: listbox;
+appearance: meter;
+appearance: progress-bar;
+
+/* Liste des valeurs disponibles pour Gecko */
+-moz-appearance: scrollbarbutton-up;
+-moz-appearance: button-bevel;
+
+/* Liste des valeurs disponibles pour WebKit/Blink (ainsi que pour Gecko et Edge) */
+-webkit-appearance: media-mute-button;
+-webkit-appearance: caret;
+
+ +

Valeurs

+ +

<appearance> est l’une des valeurs suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurDémonstrationNavigateurDescription
none + + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}Firefox Chrome Safari EdgeAucune mise en forme spécifique n'est appliquée. Le comportement obtenu est le comportement par défaut.
auto {{Experimental_Inline}} + + {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}}AucunL'agent utilisateur sélectionne la mise en forme spécifique selon l'élément utilisé. Cette valeur sera synonyme de none sur les éléments sans mise en forme particulière.
attachment {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}}Safari
borderless-attachment {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}Safari
button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}Firefox Chrome Safari EdgeL'élément est dessiné comme un bouton.
button-arrow-down {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}Firefox +

Retiré avec Fx 64

+
button-arrow-next {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
button-arrow-previous {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
button-arrow-up {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
button-bevel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
button-focus {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
caps-lock-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}Safari Edge
caret {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
checkbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}Firefox Chrome Safari EdgeL'élément est dessiné comme une case à cocher (seule la partie correspondant à la case est incluse).
checkbox-container {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}FirefoxL'élément est dessiné comme un conteneur de case à cocher. Celui-ci peut inclure un effet d'ombre portée pour certaines plateformes. L'élément contient normalement un libellé et une case à cocher.
checkbox-label {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}Firefox
checkmenuitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}Firefox
color-well {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}Safariinput type=color
continuous-capacity-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}Safari
default-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}Safari Edge
discrete-capacity-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}Safari
dualbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
groupbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
inner-spin-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}Firefox Chrome Safari
image-controls-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}Safari
list-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}SafariListe de données.
listbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
listitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
media-enter-fullscreen-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}Chrome Safari
media-exit-fullscreen-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}Chrome Safari
media-fullscreen-volume-slider {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}Safari
media-fullscreen-volume-slider-thumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}Safari
media-mute-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}Chrome Safari Edge
media-play-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}Chrome Safari Edge
media-overlay-play-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}Chrome Safari
media-return-to-realtime-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}Safari
media-rewind-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}Safari
media-seek-back-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}Safari Edge
media-seek-forward-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}Safari Edge
media-toggle-closed-captions-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}Chrome Safari
media-slider {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}Chrome Safari Edge
media-sliderthumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}Chrome Safari Edge
media-volume-slider-container {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}Chrome Safari
media-volume-slider-mute-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}Safari
media-volume-slider {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}Chrome Safari
media-volume-sliderthumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}Chrome Safari
media-controls-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}Chrome Safari
media-controls-dark-bar-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}Safari
media-controls-fullscreen-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}Chrome Safari
media-controls-light-bar-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}Safari
media-current-time-display {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}Chrome Safari
media-time-remaining-display {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}Chrome Safari
menuarrow {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
menubar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
menucheckbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
menuimage {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
menuitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64, l'élément était mis en forme à la façon d'un élément de menu et l'élément était surligné au survol.
menuitemtext {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
menulist {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
menulist-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}Firefox Chrome Safari EdgeL'élément est mis en forme comme un bouton indicant qu'un menu peut être ouvert.
menulist-text {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
menulist-textfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}Firefox Chrome Safari EdgeL'élément est mis en forme comme un champ texte d'une liste de menu (non implémenté pour Windows).
menupopup {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
menuradio {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
menuseparator {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
meter + + {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}} +

Chrome Safari Firefox

+ 		+

Apparu avec Fx 64

+
meterbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}FirefoxApparu avec Fx 16. Utiliser la valeur meter à la place.
meterchunk {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}FirefoxApparu avec Fx 16. Retiré avec Fx 64.
number-input {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}Firefox
progress-bar + + {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}Chrome Safari FIrefoxApparu avec Fx 64
progress-bar-value {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}Chrome Safari
progressbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}FirefoxL'élément est mis en forme comme une barre de progression. On utilisera progress-bar à la place.
progressbar-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}Firefox
progresschunk {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
progresschunk-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
push-button {{Non-standard_Inline}} + + {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}Chrome Safari Edge
radio {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}Firefox Chrome Safari EdgeL'élément est dessiné comme un bouton radio. Seule la partie correspondant au bouton est incluse.
radio-container {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64, l'élément est dessiné comme un conteneur de bouton radio. Cette mise en forme peut inclure une ombre portée sous le bouton pour certaines plateformes. L'élément contient normalement un libellé et un bouton radio.
radio-label {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
radiomenuitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
range {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}Firefox
range-thumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}Firefox
rating-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}Safari
resizer {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 63
resizerpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 63.
scale-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}Firefox
scalethumbend {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}Firefox
scalethumb-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}Firefox
scalethumbstart {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}Firefox
scalethumbtick {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}Firefox
scalethumb-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}Firefox
scale-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}Firefox
scrollbarbutton-down {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 63.
scrollbarbutton-left {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 63.
scrollbarbutton-right {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 63.
scrollbarbutton-up {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 63.
scrollbarthumb-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}Firefox
scrollbarthumb-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}Firefox
scrollbartrack-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}Firefox
scrollbartrack-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}Firefox
searchfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
searchfield-decoration {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}Safari Edge
searchfield-results-decoration {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}Safari Edge
searchfield-results-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}Safari Edge
searchfield-cancel-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}Chrome Safari Edge
snapshotted-plugin-overlay {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}Safari
separator {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}Firefox +

Retiré avec Fx 64.

+
sheet {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}None
slider-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}Chrome Safari Edge
slider-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}Chrome Safari Edge
sliderthumb-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}Chrome Safari Edge
sliderthumb-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}Chrome Safari Edge
spinner {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
spinner-downbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
spinner-textfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
spinner-upbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
splitter {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
square-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}Chrome Safari Edge
statusbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
statusbarpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
tab {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
tabpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
tabpanels {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64
tab-scroll-arrow-back {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
tab-scroll-arrow-forward {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
textarea + + {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
textfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
textfield-multiline {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}FirefoxUtiliser textarea à la place de cette valeur.
toolbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
toolbarbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
toolbarbutton-dropdown {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
toolbargripper {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
tooltip {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treeheader {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treeheadercell {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treeheadersortarrow {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treeitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treeline {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treetwisty {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treetwistyopen {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
treeview {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
relevancy-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}Safari
-moz-win-borderless-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}} + + {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64. Ce style applique l'effet Aero Glass sans bordure sur l'élément.
-moz-win-browsertabbar-toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64. Ce style de boîte à outils est censé être utilisé dans la barre d'onglet du navigateur.
-moz-win-communicationstext {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-win-communications-toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64. Ce style de boîte à outils devait être utilisé pour les applications relatives aux communications et à la productivit. La couleur de premier plan associée est -moz-win-communicationstext.
-moz-win-exclude-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}} + + {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64. Ce style permet d'exclure l'effet Aero Glass sur l'élément.
-moz-win-glass {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64. Ce style permet d'appliquer l'effet Aero Glass sur l'élément.
-moz-win-media-toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64. Ce style de boîte à outils est destiné aux applications qui gèrent des objets média. La couleur de premier plan correspondante est -moz-win-mediatext.
-moz-window-button-box {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-button-box-maximized {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-button-close {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-button-maximize {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-button-minimize {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-button-restore {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-frame-bottom {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-frame-left {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-frame-right {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-titlebar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-moz-window-titlebar-maximized {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}FirefoxRetiré avec Fx 64.
-apple-pay-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}SafariiOS et macOS uniquement. Disponible depuis 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;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Basic UI', "#appearance-switching", "appearance")}}{{Spec2('CSS3 Basic UI')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.appearance")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-image/index.html" "b/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-image/index.html" new file mode 100644 index 0000000000..592f9f64fd --- /dev/null +++ "b/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-image/index.html" @@ -0,0 +1,2626 @@ +--- +title: Générateur de border-image +slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image +tags: + - CSS + - Outil +translation_of: 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")}}.

+ +
+

Générateur border-image

+ +

Contenu HTML

+ +
    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
+            </div>
+        </div>
+
+        <div id="load-actions" class="group section">
+            <div id="toggle-gallery" data-action="hide"> </div>
+            <div id="load-image" class="button"> Upload image </div>
+            <input id="remote-url" type="text" placeholder="Charger une image depuis une  URL"/>
+            <div id="load-remote" class="button"> </div>
+        </div>
+
+        <div id="general-controls" class="group section">
+            <div class="name"> Options </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">Échelle</div>
+                <div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">Déplaçable</div>
+                <div class="ui-checkbox" data-topic='drag-subject'></div>
+            </div>
+            <div class="property right">
+                <div class="name">Hauteur de la section</div>
+                <div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000">
+                </div>
+            </div>
+        </div>
+
+        <div id="preview_section" class="group section">
+            <div id="subject">
+                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
+                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+        <!-- controls -->
+        <div id="controls" class="group section">
+
+            <!-- border-image-slice -->
+            <div id="border-slice-control" class="category">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox" data-topic='slice-fill'></div>
+                </div>
+            </div>
+
+            <!-- border-image-width -->
+            <div id="border-width-control" class="category">
+                <div class="title"> border-image-width </div>
+            </div>
+
+            <!-- border-image-outset -->
+            <div id="border-outset-control" class="category">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+            <!-- other-settings -->
+            <div id="aditional-properties" class="category">
+                <div class="title"> Autres propriétés </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
+                        <div data-value="0">repeat</div>
+                        <div data-value="0">stretch</div>
+                        <div data-value="0">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
+                        <div data-value="1">repeat</div>
+                        <div data-value="1">stretch</div>
+                        <div data-value="1">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
+                    </div>
+                </div>
+            </div>
+
+
+            <div id="output" class="category">
+                <div class="title"> Code CSS </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span id="out-border-slice" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span id="out-border-width" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span id="out-border-outset" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span id="out-border-repeat" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span id="out-border-source" class="value">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git "a/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-radius/index.html" "b/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-radius/index.html" new file mode 100644 index 0000000000..344dd64bcc --- /dev/null +++ "b/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-radius/index.html" @@ -0,0 +1,1600 @@ +--- +title: Générateur de border-radius +slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius +tags: + - CSS + - Outil +translation_of: 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

+ +

Contenu HTML

+ +
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> Coins arrondis </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> Unités pour la bordure </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+ +

Contenu CSS

+ +
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+
+ +

Contenu JavaScript

+ +
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +

{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}

diff --git "a/files/fr/web/css/arri\303\250re-plans_et_bordures_css/index.html" "b/files/fr/web/css/arri\303\250re-plans_et_bordures_css/index.html" new file mode 100644 index 0000000000..0b024147af --- /dev/null +++ "b/files/fr/web/css/arri\303\250re-plans_et_bordures_css/index.html" @@ -0,0 +1,161 @@ +--- +title: Arrière-plans et bordures CSS +slug: Web/CSS/Arrière-plans_et_bordures_CSS +tags: + - CSS + - Référence(2) +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +
{{CSSRef}}
+ +

Les arrière-plans et bordures CSS forment un module CSS qui définit la façon dont les arrière-plans et les bordures des éléments sont décrits. Les bordures peuvent ainsi être des lignes ou des images et les boîtes peuvent avoir un ou plusieurs arrière-plan, des coins arrondis, 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-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

+ +
+
Utiliser plusieurs arrière-plans CSS
+
Cet article explique comment définir plusieurs arrière-plans sur des éléments et la façon dont ceux-ci interagissent.
+
Redimensionner des images d'arrière-plan
+
Cet article décrit comment modifier l'apparence des images d'arrière-plan en les étirant ou en les retirant afin de couvrir (ou non) tout un élément.
+
+ +

Outils

+ +
+
Générateur de border-image
+
Cet outil interactif permet de créer, de façon visuelle, des bordures avec images pour {{cssxref("border-image")}}.
+
Générateur de border-radius
+
Cet outil interactif permet de créer des bordures arrondies pour {{cssxref("border-radius")}}.
+
Générateur de box-shadow
+
Cet outil interactif permet de créer des ombres portées derrière les éléments avec {{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')}} 
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support simple{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
+
diff --git a/files/fr/web/css/attr()/index.html b/files/fr/web/css/attr()/index.html new file mode 100644 index 0000000000..5fcae4a665 --- /dev/null +++ b/files/fr/web/css/attr()/index.html @@ -0,0 +1,254 @@ +--- +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

+ + + +
.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/auto/index.html b/files/fr/web/css/auto/index.html new file mode 100644 index 0000000000..363f2c2b82 --- /dev/null +++ b/files/fr/web/css/auto/index.html @@ -0,0 +1,28 @@ +--- +title: auto +slug: Web/CSS/auto +tags: + - CSS + - Référence CSS +translation_of: Web/CSS/width +--- +

{{ CSSRef() }}

+

Résumé

+

Indique qu'une valeur est calculée de manière automatique par le navigateur. Les effets de auto sont différents suivant la propriété à laquelle la valeur est affectée.

+

Utilisation

+
    +
  • {{ Cssxref("overflow") }}
    • +
  • {{ Cssxref("overflow-x") }}
    • +
  • {{ Cssxref("overflow-y") }}
    • +
  • {{ Cssxref("cursor") }}
    • +
  • {{ Cssxref("width") }}
    • +
  • {{ Cssxref("height") }}
    • +
  • {{ Cssxref("marker-offset") }}
    • +
  • {{ Cssxref("margin") }}
    • +
  • margin-* (left|bottom|top|right|start|end)
    • +
  • {{ Cssxref("bottom") }}
    • +
  • {{ Cssxref("left") }}
    • +
  • {{ Cssxref("table-layout") }}
    • +
  • {{ Cssxref("z-index") }}
    • +
  • {{ Cssxref("column-width") }}
    • +
diff --git a/files/fr/web/css/azimuth/index.html b/files/fr/web/css/azimuth/index.html new file mode 100644 index 0000000000..c8143dcaac --- /dev/null +++ b/files/fr/web/css/azimuth/index.html @@ -0,0 +1,104 @@ +--- +title: azimuth +slug: Web/CSS/azimuth +tags: + - CSS + - Obsolete + - Propriété + - Reference +translation_of: Archive/Web/CSS/azimuth +--- +
{{CSSRef}}{{obsolete_header}}{{outdated}}
+ +

Utilisée avec la propriété {{cssxref("elevation")}}, azimuth permet de positionner différentes sources audio dans l'espace pour une présentation auditive. Cela permet de séparer les voix de façons naturelles, qui pourront donc provenir de différents emplacements. Une sortie stereo permettra d'obtenir un son avec des sources situées sur deux dimensions, des écouteurs binauriculaires permettent d'obtenir un son tri-dimensionnel.

+ +

Syntaxe

+ +
{{csssyntax}}
+ +

Valeurs

+ +
+
angle
+
Un angle indiquant la position de la source dans l'intervalle -360deg - 360deg. La valeur 0deg (la valeur par défaut) est dirigée vers le centre, 90deg vers la droite, 180deg vers l'arrière et 270deg ou -90deg vers la gauche.
+
+ +

Image:Azimuth.png

+ +

Mots-clés pour cette propriété

+ +
    +
  • left-side : Synonyme de 270deg.
    • +
  • left-side behind : Synonyme de 270deg.
    • +
  • far-left : Synonyme de 300deg.
    • +
  • far-left behind : Synonyme de 240deg.
    • +
  • left : Synonyme de 320deg.
    • +
  • left behind : Synonyme de 220deg.
    • +
  • center-left : Synonyme de 340deg.
    • +
  • center-left behind : Synonyme de 200deg.
    • +
  • center : Synonyme de 0deg.
    • +
  • center behind : Synonyme de 180deg.
    • +
  • center-right : Synonyme de 20deg.
    • +
  • center-right behind : Synonyme de 160deg.
    • +
  • right : Synonyme de 40deg.
    • +
  • right behind : Synonyme de 140deg.
    • +
  • far-right : Synonyme de 60deg.
    • +
  • far-right behind : Synonyme de 120deg.
    • +
  • right-side : Synonyme de 90deg.
    • +
  • right-side behind : Synonyme de 90deg.
    • +
  • behind : Synonyme de 180deg. Also used as a modifier for other positional keyword values, as above.
    • +
  • leftwards : Moves the sound counter-clockwise by 20 degrees, relative to the current angle.
    • +
  • rightwards : Moves the sound clockwise by 20 degrees, relative to the current angle.
    • +
+ +

Exemples

+ +
h1 {
+  azimuth: 30deg;
+}
+
+td.a {
+  azimuth: far-right;
+}
+
+#12 {
+  azimuth: behind far-right;  /* 120deg */
+}
+
+p.comment {
+  azimuth: behind;  /* 180deg */
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'aural.html#spatial-props', 'azimuth')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.azimuth")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("elevation")}}
    • +
diff --git a/files/fr/web/css/backdrop-filter/index.html b/files/fr/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..a84b25a18e --- /dev/null +++ b/files/fr/web/css/backdrop-filter/index.html @@ -0,0 +1,138 @@ +--- +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 new file mode 100644 index 0000000000..66ebec410a --- /dev/null +++ b/files/fr/web/css/backface-visibility/index.html @@ -0,0 +1,217 @@ +--- +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 new file mode 100644 index 0000000000..05febc28f8 --- /dev/null +++ b/files/fr/web/css/background-attachment/index.html @@ -0,0 +1,151 @@ +--- +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

+ +

{{CompatibilityTable}}

+ + + +

{{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 new file mode 100644 index 0000000000..82cdf6bdd0 --- /dev/null +++ b/files/fr/web/css/background-blend-mode/index.html @@ -0,0 +1,120 @@ +--- +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 new file mode 100644 index 0000000000..9b8e6c5426 --- /dev/null +++ b/files/fr/web/css/background-clip/index.html @@ -0,0 +1,151 @@ +--- +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 new file mode 100644 index 0000000000..06f072c36e --- /dev/null +++ b/files/fr/web/css/background-color/index.html @@ -0,0 +1,161 @@ +--- +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 new file mode 100644 index 0000000000..25d4f59de3 --- /dev/null +++ b/files/fr/web/css/background-image/index.html @@ -0,0 +1,173 @@ +--- +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 new file mode 100644 index 0000000000..e43076730c --- /dev/null +++ b/files/fr/web/css/background-origin/index.html @@ -0,0 +1,109 @@ +--- +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 new file mode 100644 index 0000000000..b80a85a4da --- /dev/null +++ b/files/fr/web/css/background-position-x/index.html @@ -0,0 +1,108 @@ +--- +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 new file mode 100644 index 0000000000..f7cb19173f --- /dev/null +++ b/files/fr/web/css/background-position-y/index.html @@ -0,0 +1,107 @@ +--- +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 new file mode 100644 index 0000000000..106dc30a38 --- /dev/null +++ b/files/fr/web/css/background-position/index.html @@ -0,0 +1,197 @@ +--- +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 new file mode 100644 index 0000000000..de3634fb94 --- /dev/null +++ b/files/fr/web/css/background-repeat/index.html @@ -0,0 +1,234 @@ +--- +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.cdn.mozilla.net/media/redesign/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 new file mode 100644 index 0000000000..e3c5fdd761 --- /dev/null +++ b/files/fr/web/css/background-size/index.html @@ -0,0 +1,267 @@ +--- +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 new file mode 100644 index 0000000000..ea37897c46 --- /dev/null +++ b/files/fr/web/css/background/index.html @@ -0,0 +1,160 @@ +--- +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 new file mode 100644 index 0000000000..e72b58ad92 --- /dev/null +++ b/files/fr/web/css/basic-shape/index.html @@ -0,0 +1,189 @@ +--- +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()
+
+ 
inset( <shape-arg>{1,4} [round <border-radius>]? )
+ +

Cette fonction permet de définir un rectangle incrusté (inset).

+ +

Lorsque les quatre premiers arguments sont fournis, ils représentent respectivement les décalages, vers l'intérieur, depuis les côtés haut, droit, bas et gauche par rapport à la boîte de référence. Ces arguments peuvent être utilisés de la même façon que pour {{cssxref("margin")}} afin d'utiliser seulement une, deux ou quatre valeurs.

+ +

L'argument facultatif <border-radius> permet de définir des coins arrondis pour le rectangle incrusté en utilisant la même syntaxe que pour la propriété raccourcie {{cssxref("border-radius")}}.

+ +

Si on utilise deux valeurs de décalage pour le même axe (par exemple un décalage depuis le bas et un décalage depuis le haut) dont la somme est supérieure à la dimension de la boîte sur cet axe, la forme obtenue ne contiendra aucune zone. On aura alors une zone de flottement vide.

+
+
polygon()
+
+ 
polygon( [<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()
+
+ 
circle( [<shape-radius>]? [at <position>]? )
+ +

L'argument <shape-radius> représente le rayon du cercle. Les valeurs négatives ne sont pas autorisées et les valeurs exprimées en pourcentages seront calculées de la façon suivante en fonction de la hauteur et de la largeur de la boîte de référence sqrt(largeur^2+hauteur^2)/sqrt(2).

+ +

L'argument {{cssxref("<position>")}} définit la position pour le centre du cercle. La valeur par défaut est center.

+
+
ellipse()
+
+ 
ellipse( [<shape-radius>{2}]? [at <position>]? )
+ +

Les arguments <shape-radius> représentent les demi-axes horizontaux (rx) et verticaux (ry) de l'ellipse. Les valeurs négatives ne sont pas autorisées. Les valeurs exprimées en pourcentages sont calculées : en fonction de la hauteur de la boîte de référence pour le demi-axe vertical, en fonction de la largeur de la boîte de référence pour le demi-axe horizontal.

+ +

L'argument {{cssxref("<position>")}} définit l'emplacement du centre de l'ellipse. La valeur par défaut est center.

+
+
path()
+
+ 
path( [<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 new file mode 100644 index 0000000000..d7ef5c5700 --- /dev/null +++ b/files/fr/web/css/blend-mode/index.html @@ -0,0 +1,353 @@ +--- +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.

+ + + +

{{EmbedLiveSample('normal', "300", "300")}}

+
+
multiply
+
+

La couleur finale est obtenue en multipliant les couleurs du premier plan et de l'arrière-plan.
+ Si une des couches est noire, le résultat obtenu sera une image noire. Si une des couches est blanche, cela ne modifiera pas l'autre image. On obtient ainsi un effet semblable à la superposition de deux transparents.

+ + + +

{{EmbedLiveSample('multiply', "300", "300")}}

+
+
screen
+
+

La couleur finale est obtenue en : inversant les couleurs des deux plans, en les multipliant et en inversant la couleur obtenue. Si une des couches est noire, le résultat obtenu sera l'image de l'autre couche. Si une des couches est blanche, l'image obtenue sera blanche. L'effet obtenu est semblable à la projection de deux images sur un écran.

+ + + +

{{EmbedLiveSample('screen', "300", "300")}}

+
+
overlay
+
La couleur finale est celle décrite par multiply si l'arrière-plan est plus sombre ou de screen si elle est plus claire. On a un effet semblable à hard-light avec les couches interverties. + + +

{{EmbedLiveSample('overlay', "300", "300")}}

+
+
darken
+
+

La couleur finale est la couleur la plus sombre des deux couches.

+ + + +

{{EmbedLiveSample('darken', "300", "300")}}

+
+
lighten
+
+

La couleur finale est la couleur la plus claire des deux couches.

+ + + +

{{EmbedLiveSample('lighten', "300", "300")}}

+
+
color-dodge
+
+

La couleur finale est obtenue en divisant la couleur de l'arrière-plan avec l'inverse de la couleur du premier plan.
+ Un premier-plan noir n'entraînera aucun changement.

+ + + +

{{EmbedLiveSample('color-dodge', "300", "300")}}

+
+
color-burn
+
+

La couleur finale est obtenu en inversant la couleur de l'arrière-plan qui sera divisée par la couleur du premier-plan puis inversée. Un premier-plan blanc n'entraînera aucun changement et un premier-plan qui possède exactement l'inverse de l'arrière-plan entraînera une image noire.

+ + + +

{{EmbedLiveSample('color-burn', "300", "300")}}

+
+
hard-light
+
+

La couleur finale est le résultat de multiply si le premier plan est plus sombre ou de screen si la couleur de premier-plan est plus claire. L'effet obtenu est équivalent à overlay avec les deux couches interverties.

+ + + +

{{EmbedLiveSample('hard-light', "300", "300")}}

+
+
soft-light
+
+

La couleur finale obtenue est semblable à hard-light, mais est plus douce.

+ + + +

{{EmbedLiveSample('soft-light', "300", "300")}}

+
+
difference
+
+

La couleur finale est obtenue en soustrayant la couleur la plus sombre à la couleur la plus claire. Une couche noire n'aura aucun effet et une couche blanche inversera l'autre image.

+ + + +

{{EmbedLiveSample('difference', "300", "300")}}

+
+
exclusion
+
+

La couleur finale obtenue est semblable à difference avec moins de contraste. Comme pour difference, une couche noire n'aura aucun effet et une couche blanche inversera l'autre couche.

+ + + +

{{EmbedLiveSample('exclusion', "300", "300")}}

+
+
hue
+
+

La couleur finale aura la teinte de la couleur du premier-plan et la saturation et la luminosité de la couleur de l'arrière-plan.

+ + + +

{{EmbedLiveSample('hue', "300", "300")}}

+
+
saturation
+
+

La couleur finale aura la saturation de la couleur du premier plan et la teinte et la luminosité de la couleur de l'arrière-plan.

+ + + +

{{EmbedLiveSample('saturation', "300", "300")}}

+
+
color
+
+

La couleur finale aura la teinte et la saturation du premier plan et la luminosité de l'arrière-plan. Cet effet conserve les niveaux de gris et peut être utilisé pour coloriser le premier plan.

+ + + +

{{EmbedLiveSample('color', "300", "300")}}

+
+
luminosity
+
+

La couleur finale aura la luminosité de la couleur du premier plan et la teinte et la saturation de la couleur de l'arrière-plan.

+ + + +

{{EmbedLiveSample('luminosity', "300", "300")}}

+
+
+ +

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 new file mode 100644 index 0000000000..e77282ba64 --- /dev/null +++ b/files/fr/web/css/block-size/index.html @@ -0,0 +1,109 @@ +--- +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_formatting_context/index.html b/files/fr/web/css/block_formatting_context/index.html new file mode 100644 index 0000000000..5b324fc6bb --- /dev/null +++ b/files/fr/web/css/block_formatting_context/index.html @@ -0,0 +1,44 @@ +--- +title: Contexte de formatage de blocs +slug: Web/CSS/Block_formatting_context +tags: + - CSS + - Reference + - Web +translation_of: Web/Guide/CSS/Block_formatting_context +--- +
{{CSSRef}}
+ +

Un contexte de formatage de blocs (block formatting context) est une partie du rendu visuel par le CSS, d'une page web. C'est la région qui délimite la mise en page des blocs et dans laquelle les éléments flottant interagissent les uns avec les autres.

+ +

Un contexte de formatage de blocs est créé dans les situations suivantes :

+ +
    +
  • L'élément racine ou quelque chose qui le contient
    • +
  • Les éléments flottants (éléments avec une valeur pour la propriété {{cssxref("float")}} autre que none)
    • +
  • Les éléments avec une position absolue (éléments avec la propriété {{cssxref("position")}} à absolute ou fixed)
    • +
  • Les blocs en ligne (éléments avec la propriété {{cssxref("display")}} à inline-block)
    • +
  • Les cellules de tableau (éléments avec {{cssxref("display")}}: table-cell, ce qui est le défaut pour les cellules de tableau)
    • +
  • Les titres de tableau (éléments avec {{cssxref("display")}}: table-caption, ce qui est le défaut pour {{HTMLElement("caption")}})
    • +
  • Les éléments où {{cssxref("overflow")}} a une valeur autre que visible
    • +
  • Les boîtes flexibles (éléments avec {{cssxref("display")}}: flex ou inline-flex)
    • +
  • {{cssxref("display")}}: flow-root
    • +
+ +

Un contexte de formatage de blocs contient tout ce qui se trouve dans l'élément qui l'a créé, et qui ne se trouve pas aussi dans un élément descendant définissant un nouveau contexte de formatage de blocs.

+ +

Les contextes de formatage de blocs sont important pour le positionnement (voir {{cssxref("float")}} et {{cssxref("clear")}}). Les règles de positionnement et de "libération" des blocs flottants (par {{cssxref("clear")}}) s'appliquent seulement aux éléments au sein d'un même contexte de formatage de blocs. Les blocs flottants n'influent pas sur le positionnement des éléments se trouvant dans d'autres contextes de formatage de blocs, et {{cssxref("clear")}} ne libère que des blocs flottants dans le même contexte de formatage de blocs.

+ +

Spécifications

+ + + +

Voir aussi

+ +
    +
  • {{cssxref("float")}}
    • +
  • {{cssxref("clear")}}
    • +
  • {{cssxref("display")}}
    • +
diff --git a/files/fr/web/css/border-block-color/index.html b/files/fr/web/css/border-block-color/index.html new file mode 100644 index 0000000000..89093bbd82 --- /dev/null +++ b/files/fr/web/css/border-block-color/index.html @@ -0,0 +1,102 @@ +--- +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 new file mode 100644 index 0000000000..1d2a352129 --- /dev/null +++ b/files/fr/web/css/border-block-end-color/index.html @@ -0,0 +1,117 @@ +--- +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 new file mode 100644 index 0000000000..efe5c0b546 --- /dev/null +++ b/files/fr/web/css/border-block-end-style/index.html @@ -0,0 +1,110 @@ +--- +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 new file mode 100644 index 0000000000..ea7b2adf47 --- /dev/null +++ b/files/fr/web/css/border-block-end-width/index.html @@ -0,0 +1,106 @@ +--- +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 new file mode 100644 index 0000000000..45a72f3d55 --- /dev/null +++ b/files/fr/web/css/border-block-end/index.html @@ -0,0 +1,118 @@ +--- +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 new file mode 100644 index 0000000000..95ac2e171c --- /dev/null +++ b/files/fr/web/css/border-block-start-color/index.html @@ -0,0 +1,116 @@ +--- +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 new file mode 100644 index 0000000000..5b00ba2aaf --- /dev/null +++ b/files/fr/web/css/border-block-start-style/index.html @@ -0,0 +1,111 @@ +--- +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 new file mode 100644 index 0000000000..81552b8563 --- /dev/null +++ b/files/fr/web/css/border-block-start-width/index.html @@ -0,0 +1,107 @@ +--- +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 new file mode 100644 index 0000000000..f4bc895c1e --- /dev/null +++ b/files/fr/web/css/border-block-start/index.html @@ -0,0 +1,118 @@ +--- +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 new file mode 100644 index 0000000000..192bb68db3 --- /dev/null +++ b/files/fr/web/css/border-block-style/index.html @@ -0,0 +1,103 @@ +--- +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 new file mode 100644 index 0000000000..f3e3097db3 --- /dev/null +++ b/files/fr/web/css/border-block-width/index.html @@ -0,0 +1,96 @@ +--- +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 new file mode 100644 index 0000000000..10586d701e --- /dev/null +++ b/files/fr/web/css/border-block/index.html @@ -0,0 +1,111 @@ +--- +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 new file mode 100644 index 0000000000..bcb534cd89 --- /dev/null +++ b/files/fr/web/css/border-bottom-color/index.html @@ -0,0 +1,128 @@ +--- +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 new file mode 100644 index 0000000000..0f304a14ab --- /dev/null +++ b/files/fr/web/css/border-bottom-left-radius/index.html @@ -0,0 +1,143 @@ +--- +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 new file mode 100644 index 0000000000..9d596cb38f --- /dev/null +++ b/files/fr/web/css/border-bottom-right-radius/index.html @@ -0,0 +1,143 @@ +--- +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 new file mode 100644 index 0000000000..2ceac6d55b --- /dev/null +++ b/files/fr/web/css/border-bottom-style/index.html @@ -0,0 +1,228 @@ +--- +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 : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
 
+ 		L'effet obtenu est le même qu'avec hidden : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-bottom-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, none a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.
hidden +
 
+ 		L'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-bottom-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.
dotted +
 
+ 		Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-bottom-width")}}.
dashed +
 
+ 		Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
solid +
 
+ 		Affiche une ligne droite continue.
double +
 
+ 		Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-bottom-width")}}.
groove +
 
+ 		La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridge +
 
+ 		La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
inset +
 
+ 		La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut collapsed, cette valeur se comporte comme groove.
outset +
 
+ 		+

La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut collapsed, cette valeur se comporte comme ridge.

+
+
+
+ +

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 new file mode 100644 index 0000000000..f1718f62d0 --- /dev/null +++ b/files/fr/web/css/border-bottom-width/index.html @@ -0,0 +1,163 @@ +--- +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 +
 
+ 		Une bordure fine.
medium +
 
+ 		Une bordure moyenne.
thick +
 
+ 		Une bordure épaisse.
+ 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 new file mode 100644 index 0000000000..2a0c3e73cd --- /dev/null +++ b/files/fr/web/css/border-bottom/index.html @@ -0,0 +1,126 @@ +--- +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 new file mode 100644 index 0000000000..746860e8fe --- /dev/null +++ b/files/fr/web/css/border-collapse/index.html @@ -0,0 +1,152 @@ +--- +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 new file mode 100644 index 0000000000..c1adde982e --- /dev/null +++ b/files/fr/web/css/border-color/index.html @@ -0,0 +1,198 @@ +--- +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 new file mode 100644 index 0000000000..45aa632ec6 --- /dev/null +++ b/files/fr/web/css/border-end-end-radius/index.html @@ -0,0 +1,107 @@ +--- +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 new file mode 100644 index 0000000000..5df2061bff --- /dev/null +++ b/files/fr/web/css/border-end-start-radius/index.html @@ -0,0 +1,107 @@ +--- +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 new file mode 100644 index 0000000000..1f79067683 --- /dev/null +++ b/files/fr/web/css/border-image-outset/index.html @@ -0,0 +1,114 @@ +--- +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 new file mode 100644 index 0000000000..a790da5075 --- /dev/null +++ b/files/fr/web/css/border-image-repeat/index.html @@ -0,0 +1,108 @@ +--- +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 new file mode 100644 index 0000000000..35136b7f07 --- /dev/null +++ b/files/fr/web/css/border-image-slice/index.html @@ -0,0 +1,132 @@ +--- +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 new file mode 100644 index 0000000000..ad49355e23 --- /dev/null +++ b/files/fr/web/css/border-image-source/index.html @@ -0,0 +1,89 @@ +--- +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 new file mode 100644 index 0000000000..d46f98e4e9 --- /dev/null +++ b/files/fr/web/css/border-image-width/index.html @@ -0,0 +1,127 @@ +--- +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 new file mode 100644 index 0000000000..d941174c50 --- /dev/null +++ b/files/fr/web/css/border-image/index.html @@ -0,0 +1,166 @@ +--- +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 new file mode 100644 index 0000000000..8fb839bd4b --- /dev/null +++ b/files/fr/web/css/border-inline-color/index.html @@ -0,0 +1,102 @@ +--- +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 new file mode 100644 index 0000000000..5492baa5d7 --- /dev/null +++ b/files/fr/web/css/border-inline-end-color/index.html @@ -0,0 +1,115 @@ +--- +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 new file mode 100644 index 0000000000..5bfc8a592a --- /dev/null +++ b/files/fr/web/css/border-inline-end-style/index.html @@ -0,0 +1,110 @@ +--- +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 new file mode 100644 index 0000000000..03607a3631 --- /dev/null +++ b/files/fr/web/css/border-inline-end-width/index.html @@ -0,0 +1,106 @@ +--- +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 new file mode 100644 index 0000000000..aa0fd3e579 --- /dev/null +++ b/files/fr/web/css/border-inline-end/index.html @@ -0,0 +1,118 @@ +--- +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 new file mode 100644 index 0000000000..aadf962104 --- /dev/null +++ b/files/fr/web/css/border-inline-start-color/index.html @@ -0,0 +1,112 @@ +--- +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 new file mode 100644 index 0000000000..b09e1dad61 --- /dev/null +++ b/files/fr/web/css/border-inline-start-style/index.html @@ -0,0 +1,112 @@ +--- +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 new file mode 100644 index 0000000000..89a5e39ca6 --- /dev/null +++ b/files/fr/web/css/border-inline-start-width/index.html @@ -0,0 +1,107 @@ +--- +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 new file mode 100644 index 0000000000..d829e716ec --- /dev/null +++ b/files/fr/web/css/border-inline-start/index.html @@ -0,0 +1,119 @@ +--- +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 new file mode 100644 index 0000000000..1455b07238 --- /dev/null +++ b/files/fr/web/css/border-inline-style/index.html @@ -0,0 +1,103 @@ +--- +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 new file mode 100644 index 0000000000..bb3fb70daf --- /dev/null +++ b/files/fr/web/css/border-inline-width/index.html @@ -0,0 +1,96 @@ +--- +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 new file mode 100644 index 0000000000..3360d5b1c4 --- /dev/null +++ b/files/fr/web/css/border-inline/index.html @@ -0,0 +1,113 @@ +--- +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 new file mode 100644 index 0000000000..974ccbd709 --- /dev/null +++ b/files/fr/web/css/border-left-color/index.html @@ -0,0 +1,128 @@ +--- +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 new file mode 100644 index 0000000000..f677494c11 --- /dev/null +++ b/files/fr/web/css/border-left-style/index.html @@ -0,0 +1,228 @@ +--- +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 : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
 
+ 		L'effet obtenu est le même qu'avec hidden : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, none a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.
hidden +
 
+ 		L'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.
dotted +
 
+ 		Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-left-width")}}.
dashed +
 
+ 		Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
solid +
 
+ 		Affiche une ligne droite continue.
double +
 
+ 		Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-left-width")}}.
groove +
 
+ 		La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridge +
 
+ 		La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
inset +
 
+ 		La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut collapsed, cette valeur se comporte comme groove.
outset +
 
+ 		+

La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut collapsed, cette valeur se comporte comme ridge.

+
+
+
+ +

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 new file mode 100644 index 0000000000..047c1c5968 --- /dev/null +++ b/files/fr/web/css/border-left-width/index.html @@ -0,0 +1,169 @@ +--- +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 +
 
+ 		Une bordure fine.
medium +
 
+ 		Une bordure moyenne.
thick +
 
+ 		Une bordure épaisse.
+ 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 new file mode 100644 index 0000000000..8ba3a36011 --- /dev/null +++ b/files/fr/web/css/border-left/index.html @@ -0,0 +1,126 @@ +--- +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 new file mode 100644 index 0000000000..0966c69e16 --- /dev/null +++ b/files/fr/web/css/border-radius/index.html @@ -0,0 +1,256 @@ +--- +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 à droit 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 à droit 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 valeurall-corner.pngUne valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon à utiliser pour chaque coin lorsqu'on utilise une seule valeur dans la déclaration.
Deux valeurs (coin en haut à gauche et en bas à droite)top-left-bottom-right.pngUne valeur de longueur (type {{cssxref("<length>")}}) ou un pourcentage (type {{cssxref("<percentage>")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche et le coin en bas à droite de la boîte de bordure lorsqu'on utilise deux valeurs dans la déclaration.
Coin en haut à droite et en bas à gauche (syntaxe à deux et trois valeurs)top-right-bottom-left.pngUne 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 à gauchetop-left.pngUne 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 à droitetop-right.pngUne 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 à droitebottom-rigth.pngUne 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 à gauchebottom-left.pngUne 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 new file mode 100644 index 0000000000..23507f4a4e --- /dev/null +++ b/files/fr/web/css/border-right-color/index.html @@ -0,0 +1,126 @@ +--- +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 new file mode 100644 index 0000000000..0ae7291ec4 --- /dev/null +++ b/files/fr/web/css/border-right-style/index.html @@ -0,0 +1,230 @@ +--- +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 : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
 
+ 		L'effet obtenu est le même qu'avec hidden : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-right-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, none a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.
hidden +
 
+ 		L'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-right-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.
dotted +
 
+ 		Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-right-width")}}.
dashed +
 
+ 		Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
solid +
 
+ 		Affiche une ligne droite continue.
double +
 
+ 		Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-right-width")}}.
groove +
 
+ 		La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridge +
 
+ 		La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
inset +
 
+ 		La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut collapsed, cette valeur se comporte comme groove.
outset +
 
+ 		+

La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut collapsed, cette valeur se comporte comme ridge.

+
+
+
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 new file mode 100644 index 0000000000..1461fcc36c --- /dev/null +++ b/files/fr/web/css/border-right-width/index.html @@ -0,0 +1,162 @@ +--- +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 +
 
+ 		Une bordure fine.
medium +
 
+ 		Une bordure moyenne.
thick +
 
+ 		Une bordure épaisse.
+ 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 new file mode 100644 index 0000000000..f0e56d1448 --- /dev/null +++ b/files/fr/web/css/border-right/index.html @@ -0,0 +1,126 @@ +--- +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 new file mode 100644 index 0000000000..b40da3aece --- /dev/null +++ b/files/fr/web/css/border-spacing/index.html @@ -0,0 +1,137 @@ +--- +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 new file mode 100644 index 0000000000..958bb9fda2 --- /dev/null +++ b/files/fr/web/css/border-start-end-radius/index.html @@ -0,0 +1,107 @@ +--- +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 new file mode 100644 index 0000000000..89501028b0 --- /dev/null +++ b/files/fr/web/css/border-start-start-radius/index.html @@ -0,0 +1,107 @@ +--- +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 new file mode 100644 index 0000000000..2ff9885747 --- /dev/null +++ b/files/fr/web/css/border-style/index.html @@ -0,0 +1,247 @@ +--- +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.
hidden +
 
+ 		L'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.
dotted +
 
+ 		Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-width")}}.
dashed +
 
+ 		Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
solid +
 
+ 		Affiche une ligne droite continue.
double +
 
+ 		Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}}.
groove +
 
+ 		La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridge +
 
+ 		La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
inset +
 
+ 		La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut collapsed, cette valeur se comporte comme groove.
outset +
 
+ 		+

La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut collapsed, cette valeur se comporte comme ridge.

+
+
+
+ +

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 new file mode 100644 index 0000000000..e3a877462e --- /dev/null +++ b/files/fr/web/css/border-top-color/index.html @@ -0,0 +1,128 @@ +--- +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 new file mode 100644 index 0000000000..8654e68903 --- /dev/null +++ b/files/fr/web/css/border-top-left-radius/index.html @@ -0,0 +1,138 @@ +--- +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 new file mode 100644 index 0000000000..1b3c846a99 --- /dev/null +++ b/files/fr/web/css/border-top-right-radius/index.html @@ -0,0 +1,140 @@ +--- +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 new file mode 100644 index 0000000000..d541ac4b44 --- /dev/null +++ b/files/fr/web/css/border-top-style/index.html @@ -0,0 +1,230 @@ +--- +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 : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
 
+ 		L'effet obtenu est le même qu'avec hidden : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-top-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, none a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.
hidden +
 
+ 		L'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-top-width")}} sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.
dotted +
 
+ 		Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-top-width")}}.
dashed +
 
+ 		Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
solid +
 
+ 		Affiche une ligne droite continue.
double +
 
+ 		Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-top-width")}}.
groove +
 
+ 		La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridge +
 
+ 		La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
inset +
 
+ 		La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut collapsed, cette valeur se comporte comme groove.
outset +
 
+ 		+

La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut collapsed, cette valeur se comporte comme ridge.

+
+
+
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 new file mode 100644 index 0000000000..1f61f14ebc --- /dev/null +++ b/files/fr/web/css/border-top-width/index.html @@ -0,0 +1,158 @@ +--- +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 +
 
+ 		Une bordure fine.
medium +
 
+ 		Une bordure moyenne.
thick +
 
+ 		Une bordure épaisse.
+ 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 new file mode 100644 index 0000000000..9581bf1ec2 --- /dev/null +++ b/files/fr/web/css/border-top/index.html @@ -0,0 +1,126 @@ +--- +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 new file mode 100644 index 0000000000..a4ced190b5 --- /dev/null +++ b/files/fr/web/css/border-width/index.html @@ -0,0 +1,216 @@ +--- +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 +
 
+ 		La bordure est fine.
medium +
 
+ 		La bordure est moyenne.
thick +
 
+ 		La bordure est épaisse.
+  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 new file mode 100644 index 0000000000..19e1675de2 --- /dev/null +++ b/files/fr/web/css/border/index.html @@ -0,0 +1,148 @@ +--- +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 new file mode 100644 index 0000000000..e50831a502 --- /dev/null +++ b/files/fr/web/css/bottom/index.html @@ -0,0 +1,166 @@ +--- +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
+
+
    +
  • Pour les éléments positionnés de façon absolue : la position de l'élément se base sur la propriété {{cssxref("top")}} et height: auto est traitée comme une hauteur basée sur la taille du contenu
    • +
  • Pour les éléments positionnés de façon relative : le décalage avec lequel l'élément est déplacé est construit à partir de la propriété {{cssxref("top")}} et si celle-ci vaut également auto, l'élément n'est pas déplacé verticalement.
    • +
+
+
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 new file mode 100644 index 0000000000..1f9c66610d --- /dev/null +++ b/files/fr/web/css/box-align/index.html @@ -0,0 +1,134 @@ +--- +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 new file mode 100644 index 0000000000..94b952c8db --- /dev/null +++ b/files/fr/web/css/box-decoration-break/index.html @@ -0,0 +1,163 @@ +--- +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 :

+ +
    +
  1. Sans fragmentation
    2. +
+ +

A screenshot of the rendering of the block element used in the examples without any fragmentation.

+ +
    +
  1. En décomposant le bloc sur trois colonnes, normalement (slice), on aura :
    2. +
+ +

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

+ +
    +
  1. Si on applique box-decoration-break:clone, voici le résultat :
    2. +
+ +

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 new file mode 100644 index 0000000000..dfb902df46 --- /dev/null +++ b/files/fr/web/css/box-direction/index.html @@ -0,0 +1,81 @@ +--- +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 new file mode 100644 index 0000000000..d875361fa4 --- /dev/null +++ b/files/fr/web/css/box-flex-group/index.html @@ -0,0 +1,65 @@ +--- +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 new file mode 100644 index 0000000000..9a84412069 --- /dev/null +++ b/files/fr/web/css/box-flex/index.html @@ -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}}
+ +

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 new file mode 100644 index 0000000000..cae417f7d6 --- /dev/null +++ b/files/fr/web/css/box-lines/index.html @@ -0,0 +1,79 @@ +--- +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 new file mode 100644 index 0000000000..76bee83c53 --- /dev/null +++ b/files/fr/web/css/box-ordinal-group/index.html @@ -0,0 +1,63 @@ +--- +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 new file mode 100644 index 0000000000..a00996d4bd --- /dev/null +++ b/files/fr/web/css/box-orient/index.html @@ -0,0 +1,111 @@ +--- +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 new file mode 100644 index 0000000000..bd634e8f81 --- /dev/null +++ b/files/fr/web/css/box-pack/index.html @@ -0,0 +1,149 @@ +--- +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 new file mode 100644 index 0000000000..b92597dddb --- /dev/null +++ b/files/fr/web/css/box-shadow/index.html @@ -0,0 +1,156 @@ +--- +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 new file mode 100644 index 0000000000..5e39cf30d5 --- /dev/null +++ b/files/fr/web/css/box-sizing/index.html @@ -0,0 +1,142 @@ +--- +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 new file mode 100644 index 0000000000..8db0380d03 --- /dev/null +++ b/files/fr/web/css/break-after/index.html @@ -0,0 +1,211 @@ +--- +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 new file mode 100644 index 0000000000..35e2f5dbf8 --- /dev/null +++ b/files/fr/web/css/break-before/index.html @@ -0,0 +1,229 @@ +--- +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 new file mode 100644 index 0000000000..89fd65ae74 --- /dev/null +++ b/files/fr/web/css/break-inside/index.html @@ -0,0 +1,163 @@ +--- +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 new file mode 100644 index 0000000000..da2f5a704a --- /dev/null +++ b/files/fr/web/css/calc()/index.html @@ -0,0 +1,163 @@ +--- +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 new file mode 100644 index 0000000000..8dc73a5ca1 --- /dev/null +++ b/files/fr/web/css/caption-side/index.html @@ -0,0 +1,116 @@ +--- +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 new file mode 100644 index 0000000000..e7d3578762 --- /dev/null +++ b/files/fr/web/css/caret-color/index.html @@ -0,0 +1,104 @@ +--- +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/clamp()/index.html b/files/fr/web/css/clamp()/index.html new file mode 100644 index 0000000000..8b30108198 --- /dev/null +++ b/files/fr/web/css/clamp()/index.html @@ -0,0 +1,120 @@ +--- +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/clear/index.html b/files/fr/web/css/clear/index.html new file mode 100644 index 0000000000..a91dbec9b0 --- /dev/null +++ b/files/fr/web/css/clear/index.html @@ -0,0 +1,236 @@ +--- +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 new file mode 100644 index 0000000000..0fc8221df3 --- /dev/null +++ b/files/fr/web/css/clip-path/index.html @@ -0,0 +1,614 @@ +--- +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

+ + + +

{{EmbedLiveSample("clip-path", "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 new file mode 100644 index 0000000000..b5aed6422a --- /dev/null +++ b/files/fr/web/css/clip/index.html @@ -0,0 +1,145 @@ +--- +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 new file mode 100644 index 0000000000..b4ba77f6fd --- /dev/null +++ b/files/fr/web/css/color-adjust/index.html @@ -0,0 +1,118 @@ +--- +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/index.html b/files/fr/web/css/color/index.html new file mode 100644 index 0000000000..805eeb54fb --- /dev/null +++ b/files/fr/web/css/color/index.html @@ -0,0 +1,179 @@ +--- +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/column-count/index.html b/files/fr/web/css/column-count/index.html new file mode 100644 index 0000000000..97e3a14f65 --- /dev/null +++ b/files/fr/web/css/column-count/index.html @@ -0,0 +1,106 @@ +--- +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 new file mode 100644 index 0000000000..a2a64b6849 --- /dev/null +++ b/files/fr/web/css/column-fill/index.html @@ -0,0 +1,102 @@ +--- +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 new file mode 100644 index 0000000000..99ac3c185c --- /dev/null +++ b/files/fr/web/css/column-gap/index.html @@ -0,0 +1,206 @@ +--- +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 new file mode 100644 index 0000000000..e49ae2b9e4 --- /dev/null +++ b/files/fr/web/css/column-rule-color/index.html @@ -0,0 +1,110 @@ +--- +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 new file mode 100644 index 0000000000..64a2b08caa --- /dev/null +++ b/files/fr/web/css/column-rule-style/index.html @@ -0,0 +1,109 @@ +--- +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 new file mode 100644 index 0000000000..3797b147cb --- /dev/null +++ b/files/fr/web/css/column-rule-width/index.html @@ -0,0 +1,106 @@ +--- +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 new file mode 100644 index 0000000000..b5df7f6e0e --- /dev/null +++ b/files/fr/web/css/column-rule/index.html @@ -0,0 +1,109 @@ +--- +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 new file mode 100644 index 0000000000..384a645097 --- /dev/null +++ b/files/fr/web/css/column-span/index.html @@ -0,0 +1,101 @@ +--- +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 new file mode 100644 index 0000000000..748eadc8ec --- /dev/null +++ b/files/fr/web/css/column-width/index.html @@ -0,0 +1,113 @@ +--- +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/columns/index.html b/files/fr/web/css/columns/index.html new file mode 100644 index 0000000000..ce9e7257c9 --- /dev/null +++ b/files/fr/web/css/columns/index.html @@ -0,0 +1,112 @@ +--- +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/combinateur_colonne/index.html b/files/fr/web/css/combinateur_colonne/index.html new file mode 100644 index 0000000000..b971e8ae4c --- /dev/null +++ b/files/fr/web/css/combinateur_colonne/index.html @@ -0,0 +1,97 @@ +--- +title: Combinateur de colonne +slug: Web/CSS/Combinateur_colonne +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Column_combinator +--- +
{{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/combinateur_de_voisin_direct/index.html b/files/fr/web/css/combinateur_de_voisin_direct/index.html new file mode 100644 index 0000000000..4898c755c4 --- /dev/null +++ b/files/fr/web/css/combinateur_de_voisin_direct/index.html @@ -0,0 +1,86 @@ +--- +title: Combinateur de voisin direct +slug: Web/CSS/Combinateur_de_voisin_direct +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +
{{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/comments/index.html b/files/fr/web/css/comments/index.html new file mode 100644 index 0000000000..1176e56c99 --- /dev/null +++ b/files/fr/web/css/comments/index.html @@ -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/compartimentation_css/index.html b/files/fr/web/css/compartimentation_css/index.html new file mode 100644 index 0000000000..34af6f3274 --- /dev/null +++ b/files/fr/web/css/compartimentation_css/index.html @@ -0,0 +1,123 @@ +--- +title: Compartimentation CSS (CSS Containment) +slug: Web/CSS/Compartimentation_CSS +tags: + - CSS + - CSS Containment +translation_of: Web/CSS/CSS_Containment +--- +

{{CSSRef}}
+ L'objectif du module de spécification CSS Containment (pour Compartimentation CSS) consiste à améliorer les performances des pages web en permettant aux développeurs d'isoler un sous-ensemble de la page. Si le navigateur sait que cette partie est indépendante, le rendu peut être optimisé et les performances améliorées. Ce module de spécification définit une seule propriété CSS : {{cssxref("contain")}}. Dans cet article, nous verrons les objectifs principaux de cette spécification.

+ +

Exemple simple

+ +

De nombreuses pages web disposent de plusieurs sections qui sont indépendantes les unes des autres. Voici une liste d'articles avec leurs titres et leurs contenus.

+ +
<h1>Mon blog</h1>
+<article>
+  <h2>Titre d'un article sympa</h2>
+  <p>Un peu de contenu.</p>
+</article>
+<article>
+  <h2>Un autre titre pour un autre article</h2>
+  <p>Un peu plus de contenu ici.</p>
+</article>
+ +

Pour chaque article, on applique la propriété {{cssxref("contain")}} avec la valeur content.

+ +
article {
+  contain: content;
+}
+ +

Chaque article est indépendant des autres articles de la page et on fournit contain: content afin d'indiquer cette indépendance au navigateur. Ce dernier peut alors prendre des décisions quant au rendu du contenu (par exemple, ne pas travailler sur le rendu d'articles qui ne sont pas sur la zone visible).

+ +

Si on fournit contain: content pour chaque <article>, lorsque de nouveaux éléments sont insérés, le navigateur comprendra qu'il n'est pas nécessaire de tout repeindre/redisposer à l'intérieur de l'arbre de l'élément. Toutefois, si <article> est mis en forme de telle façon que sa forme dépend de son contenu (ex. height: auto), le navigateur devra prendre en compte le redimensionnement.

+ +

La valeur content est une valeur synthétique pour contain: layout paint. Elle indique au navigateur que la disposition de l'élément est complètement séparée de celle du reste de la page et que tout ce qui concerne l'élément est peint à l'intérieur de son cadre et que rien ne peut dépasser.

+ +

Cette information est parfois connue voire évidente pour la ou les personnes qui construisent la page. Toutefois, les navigateurs ne peuvent pas simplement deviner cette intention et partir du principe que chaque article ne débordera pas. Cette propriété permet ainsi d'expliquer la situation au navigateur afin que celui-ci puisse en tirer parti et optimiser ce qu'il peut grâce à cette hypothèse.

+ +

Concepts et terminologie

+ +

Cette spécification ne définit qu'une seule propriété : {{cssxref("contain")}}. Les valeurs fournies à cette propriété indiquent le type de compartimentation qu'on souhaite appliquer à l'élément.

+ +

Compartimentation de la disposition

+ +
article {
+  contain: layout;
+}
+ +

La disposition porte normalement sur l'intégralité d'un document et si on déplace un élément, c'est tout le document qui doit être reconsidéré car tout peut avoir bougé. Avec contain: layout, on indique au navigateur qu'il est uniquement nécessaire de vérifier cet élément et son contenu : tout ce qu'il contient n'affecte pas le reste de la page et la boîte englobante crée un contexte de formatage indépendant.

+ +

De plus :

+ +
    +
  • Les dispositions flottantes (avec display:float) seront traitées indépendamment.
    • +
  • Les marges ne fusionneront pas en dehors des limites du bloc englobant ainsi compartimenté
    • +
  • Le conteneur de la disposition sera un bloc englobant pour les éléments descendants avec des positions absolute/fixed.
    • +
  • La boîte englobante crée un contexte d'empilement et on peut donc utiliser {{cssxref("z-index")}}.
    • +
+ +

Compartimentation pour la peinture

+ +
article {
+  contain: paint;
+}
+ +

La compartimentation avec paint limite/rogne la boîte jusqu'à la limite de la zone de remplissage (padding) de la boîte principale. Autrement dit, il ne peut pas y avoir de chevauchement visible. On a également les mêmes règles qu'avec layout (voir ci-avant).

+ +

De plus, lorsque la boîte englobante est hors de l'écran, le navigateur n'a pas besoin de peindre ses éléments (car ceux-ci sont contenus dans cette boîte au sens géométrique).

+ +

Compartimentation pour le dimensionnement

+ +
article {
+  contain: size;
+}
+ +

La compartimentation du dimensionnement, utilisée seule, n'offre pas un grand intérêt quant aux performances. Cette valeur signifie que la taille des éléments fils ne doit pas affecter la taille de l'élément ciblé — sa taille est calculée comme si l'élément n'avait pas de fils.

+ +

Si on active contain: size, il faut alors définir la taille de l'élément sur lequel on l'applique. Sinon, dans la plupart des cas, l'élément aura des dimensions nulles.

+ +

Compartimentation pour le style

+ +
article {
+  contain: style;
+}
+ +

Malgré son nom, cette valeur ne fournit pas un style compartimenté comme on pourrait l'avoir avec un Shadow DOM. Cette valeur sert principlament pour les compteurs CSS qui pourraient changer sur un élément et affecter le reste de l'arborescence.

+ +

En utilisant contain: style, on s'assure que les propriétés {{cssxref("counter-increment")}} et {{cssxref("counter-set")}} créent de nouveaux compteurs limités à ce sous-arbre.

+ +
+

Note : La valeur style est considérée comme « à risque » dans la spécification actuelle et pourrait ne pas être prise en charge partout (elle n'est actuellement pas prise en charge dans Firefox - novembre 2019).

+
+ +

Valeurs spéciales

+ +

La propriété contain possède deux valeurs spéciales :

+ +
    +
  • content
    • +
  • strict
    • +
+ +

La première (vue dans le premier exemple) est un synonyme pour la conjonction de layout et paint. La spécification décrit cette valeur comme pouvant « raisonnablement être appliquée largement de façon saine ». Elle n'applique pas la compartimentation pour le dimensionnement (size) donc on ne risque pas d'avoir une boîte avec une taille nulle en raison de la taille de ses enfants.

+ +

Pour obtenir la compartimentation la plus forte, on utilisera contain: strict qui est synonyme de contain: size layout paint voire on ajoutera ensuite la compartimentation du style pour les navigateurs qui la prennent en charge :

+ +
contain: strict;
+contain: strict style;
+ +

Référence

+ +

Propriétés CSS

+ +
    +
  • {{cssxref("contain")}}
    • +
+ +

Ressources externes

+ + diff --git a/files/fr/web/css/compositing_and_blending/index.html b/files/fr/web/css/compositing_and_blending/index.html new file mode 100644 index 0000000000..a8df83d071 --- /dev/null +++ b/files/fr/web/css/compositing_and_blending/index.html @@ -0,0 +1,74 @@ +--- +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/comprendre_z-index/ajout_de_z-index/index.html b/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html new file mode 100644 index 0000000000..d12e2113d1 --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html @@ -0,0 +1,149 @@ +--- +title: Ajouter z-index +slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index +tags: + - Avancé + - CSS + - Guide + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +
{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}
+ +

Ajouter z-index

+ +

Dans le premier exemple, « empilement sans z-index »,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.

+ +

Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de z-index est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.

+ +
+

Attention : z-index a un effet sur les éléments uniquement si ceux-ci sont positionnés.

+
+ +
    +
  • Bas : couche la plus lointaine de l'observateur
    • +
  • …
    • +
  • Couche -3
    • +
  • Couche -2
    • +
  • Couche -1
    • +
  • Couche 0 couche de rendu par défaut
    • +
  • Couche 1
    • +
  • Couche 2
    • +
  • Couche 3
    • +
  • …
    • +
  • Haut : couche la plus proche de l'observateur
    • +
+ +
+

Notes :

+ +
    +
  • Lorsque la propriété z-index n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.
    • +
  • Si plusieurs éléments possède la même valeur de z-index (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans empilement sans z-index s'appliquent.
    • +
+
+ +

Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant z-index. Le z-index du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.

+ +

{{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}}

+ +

Code source de l’exemple

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b>
+  <br />position: absolute;
+  <br />z-index: 5;
+</div>
+
+<div id="rel1">
+  <b>DIV #2</b>
+  <br />position: relative;
+  <br />z-index: 3;
+</div>
+
+<div id="rel2">
+  <b>DIV #3</b>
+  <br />position: relative;
+  <br />z-index: 2;
+</div>
+
+<div id="abs2">
+  <b>DIV #4</b>
+  <br />position: absolute;
+  <br />z-index: 1;
+</div>
+
+<div id="sta1">
+  <b>DIV #5</b>
+  <br />no positioning
+  <br />z-index: 8;
+</div>
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+
+ +

{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}

diff --git a/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html b/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html new file mode 100644 index 0000000000..20fa6ab2ce --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html @@ -0,0 +1,213 @@ +--- +title: L'empilement de couches +slug: Web/CSS/Comprendre_z-index/Empilement_de_couches +tags: + - Avancé + - CSS + - Guide + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +
{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}
+ +

Le contexte d'empilement

+ +

Dans l'exemple précédent, Ajout de z-index, les blocs DIV sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de z-index est la plus forte. Dans cet exemple, il n'y a qu'un seul contexte d'empilement, qui est l'élément HTML racine de la page.

+ +

Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc DIV (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de z-index différente de auto crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de z-index de ses enfants n'ont de signification que dans ce contexte. Le bloc DIV entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.

+ +

Un contexte d'empilement est formé dans le document par n'importe quel élément qui répond à l'un de ces critères :

+ +
    +
  • L'élément racine du document (HTML)
    • +
  • Un élément pour lequel {{cssxref("position")}} vaut absolute ou relative et pour lequel {{cssxref("z-index")}} est différente de auto
    • +
  • Un élément pour lequel {{cssxref("position")}} vaut fixed ou sticky
    • +
  • Un élément qui est le fils d'un conteneur flexible ({{cssxref("flexbox")}}) pour lequel {{cssxref("z-index")}} est différente de auto
    • +
  • Un élément qui est le fils d'un conteneur en grille ({{cssxref("grid")}}) pour lequel {{cssxref("z-index")}} est différente de auto
    • +
  • Un élément pour lequel {{cssxref("opacity")}} est inférieure à 1 (cf. la spécification)
    • +
  • Un élément pour lequel {{cssxref("mix-blend-mode")}} est différente de normal
    • +
  • Un élément pour lequel n'importe laquelle de ces propriétés est différente de none : +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("filter")}}
      • +
    • {{cssxref("perspective")}}
      • +
    • {{cssxref("clip-path")}}
      • +
    • {{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}
      • +
    +
    • +
  • Un élément pour lequel {{cssxref("isolation")}} vaut isolate
    • +
  • Un élément pour lequel {{cssxref("-webkit-overflow-scrolling")}} vaut touch.
    • +
  • Un élément pour lequel la valeur de la propriété {{cssxref("will-change")}} concerne une propriété qui créerait un contexte d'empilement avec une valeur non-initiale.
    • +
  • Un élément pour lequel la valeur de la propriété {{cssxref("contain")}} est layout, paint ou une valeur composite contenant un de ces mots-clés (par exemple contain: strict ou contain: content).
    • +
+ +

Sans contexte d'empilement, les éléments fils sont empilés selon les règles vues avant. Les valeurs des z-index pour les contextes d'empilement des éléments fils ont uniquement un sens pour l'élément parent. Les contextes d'empilement sont traités de façon atomique, comme une seule unité, dans le contexte de l'élément parent.

+ +

En bref :

+ +
    +
  • Les contextes d'empilement peuvent être enfants d'autres contextes d'empilement, et ensemble forment une hiérarchie de contextes d'empilement.
    • +
  • Chaque contexte d'empilement est indépendant de ses voisins : seuls les éléments enfants sont pris en compte lorsque l'empilement est traité.
    • +
  • Chaque contexte d'empilement est autonome : Une fois que le contenu de l'élément est empilé, l'élément entier est pris en compte dans l'ordre d'empilement du contexte parent.
    • +
+ +
Notes : La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété z-index créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont assimilés par le contexte d'empilement parent.
+ +

Illustration

+ +

Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index

+ +

Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur z-index. La hiérarchie des contextes d'empilement est organisée comme suit :

+ +
    +
  • Racine +
      +
    • DIV #1
      • +
    • DIV #2
      • +
    • DIV #3 +
        +
      • DIV #4
        • +
      • DIV #5
        • +
      • DIV #6
        • +
      +
      • +
    +
    • +
+ +

Il est important de noter que les blocs DIV #4, DIV #5 et DIV #6 sont les enfants du bloc DIV #3, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément DIV #3 est prise en compte pour l'empilement dans l'élément racine par rapport à ses DIV voisins.

+ +
+

Notes :

+ +
    +
  • DIV #4 est rendu dans le bloc DIV #1 car le z-index (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le z-index (6) du bloc DIV #4 est valide à l'intérieur du contexte d'empilement du bloc DIV #3. Ainsi, DIV #4 se trouve sous DIV #1, parce que DIV #4 appartient à DIV #3, qui possède une valeur de z-index plus petite.
    • +
  • Pour la même raison DIV #2 (dont le z-index est 2) est rendu sous DIV#5 (de z-index égal à 1) parce que DIV #5 appartient à DIV #3, qui possède une valeur de z-index plus grande.
    • +
  • Le z-index du bloc DIV #3 est 4, mais cette valeur est indépendante du z-index du bloc DIV #4, DIV #5 et DIV #6, parce qu'il appartient à un contexte d'empilement différent.
    • +
+
+ +

Exemple

+ +

CSS

+ +
* {
+  margin: 0;
+}
+
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+
+div {
+  opacity: 0.7;
+  position: relative;
+}
+
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+
+#div1, #div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+
+#div2 {
+  z-index: 2;
+}
+
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+
+#div4, #div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: ce        }
+
+ +

HTML

+ +
<div id="div1">
+  <h1>Division Element #1</h1>
+  <code>position: relative;<br/>
+  z-index: 5;</code>
+</div>
+
+<div id="div2">
+  <h1>Division Element #2</h1>
+  <code>position: relative;<br/>
+  z-index: 2;</code>
+</div>
+
+<div id="div3">
+
+  <div id="div4">
+    <h1>Division Element #4</h1>
+    <code>position: relative;<br/>
+    z-index: 6;</code>
+  </div>
+
+  <h1>Division Element #3</h1>
+  <code>position: absolute;<br/>
+  z-index: 4;</code>
+
+  <div id="div5">
+    <h1>Division Element #5</h1>
+    <code>position: relative;<br/>
+    z-index: 1;</code>
+  </div>
+
+  <div id="div6">
+    <h1>Division Element #6</h1>
+    <code>position: absolute;<br/>
+    z-index: 3;</code>
+  </div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple","556","396")}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html b/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html new file mode 100644 index 0000000000..de0cc3761f --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html @@ -0,0 +1,135 @@ +--- +title: Empilement et éléments flottants +slug: Web/CSS/Comprendre_z-index/Empilement_et_float +tags: + - Avancé + - CSS + - Contextes d’empilement + - Guide + - Ordre d’empilement + - float + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
+ +

L'empilement et les éléments flottants

+ +

Pour les blocs flottants, l'ordre d'empilement est légèrement différent. Les blocs flottants sont disposés entre les blocs non positionnés et les blocs positionnés. Voici l'ordre d'empilement :

+ +
    +
  1. L'arrière-plan et les bordures de l'élément racine du document
    2. +
  2. Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ;
    3. +
  3. Les blocs flottants ;
    4. +
  4. Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML).
    5. +
+ +

En fait, comme on le voit avec l'exemple ci-après, l'arrière-plan et la bordure du bloc non positionné (DIV n°4) ne sont pas impactés par les blocs flottants alors que le contenu est affecté. Il s'agit du comportement standard de la propriété CSS {{cssxref("float")}}.

+ +

Ce comportement peut être expliqué en améliorant la liste précédente :

+ +
    +
  1. L'arrière-plan et les bordures de l'élément racine ;
    2. +
  2. Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ;
    3. +
  3. Les blocs flottants ;
    4. +
  4. Les éléments « en-ligne » enfants dans le flux normal ;
    5. +
  5. Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).
    6. +
+ +
Note : Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : What No One Told You About Z-Index de Philip Walton ou son excellente traduction de Vincent De Oliveira, Ce que personne ne vous a dit sur z-index et, bien-sûr, la spécification).
+ +

{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}

+ +

Code source de l'exemple

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b><br />position: absolute;</div>
+
+<div id="flo1">
+  <b>DIV #2</b><br />float: left;</div>
+
+<div id="flo2">
+  <b>DIV #3</b><br />float: right;</div>
+
+<br />
+
+<div id="sta1">
+  <b>DIV #4</b><br />no positioning</div>
+
+<div id="abs2">
+  <b>DIV #5</b><br />position: absolute;</div>
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 130px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}
+ +

Voir aussi

+ + + + + +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html b/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html new file mode 100644 index 0000000000..db892c51dc --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html @@ -0,0 +1,122 @@ +--- +title: Empilement sans z-index +slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index +tags: + - Avancé + - CSS + - Guide + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +
{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
+ +

Empilement sans z-index

+ +

Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) :

+ +
    +
  1. Arrière-plans et bordures de l'élément racine
    2. +
  2. Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML)
    3. +
  3. Éléments enfants positionnés, dans leur ordre d'apparition (en HTML)
    4. +
+ +

On gardera à l'esprit que, lorsque la propriété {{cssxref("order")}} modifie l'ordre visuel des conteneurs flexibles ({{cssxref("flex")}}), cela modifie également l'ordre du contexte d'empilement.

+ +

Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.

+ +
+

Notes :

+ +
    +
  • Dans un groupe d'éléments sans aucune propriété z-index, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.
    • +
  • Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.
    • +
  • Attention : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.
    • +
+
+ +

Figure 1. Exemple de règles d'empilement sans propriété z-index

+ +

Exemple

+ +

HTML

+ +
<div id="abs1" class="absolute">
+  <b>DIV #1</b><br />position: absolute;</div>
+<div id="rel1" class="relative">
+  <b>DIV #2</b><br />position: relative;</div>
+<div id="rel2" class="relative">
+  <b>DIV #3</b><br />position: relative;</div>
+<div id="abs2" class="absolute">
+  <b>DIV #4</b><br />position: absolute;</div>
+<div id="sta1" class="static">
+  <b>DIV #5</b><br />position: static;</div>
+
+ +

CSS

+ +
b {
+  font-family: sans-serif;
+}
+
+div {
+  padding: 10px;
+  border: 1px dashed;
+  text-align: center;
+}
+
+.static {
+  position: static;
+  height: 80px;
+  background-color: #ffc;
+  border-color: #996;
+}
+
+.absolute {
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  background-color: #fdd;
+  border-color: #900;
+  opacity: 0.7;
+}
+
+.relative {
+  position: relative;
+  height: 80px;
+  background-color: #cfc;
+  border-color: #696;
+  opacity: 0.7;
+}
+
+#abs1 {
+  top: 10px;
+  left: 10px;
+}
+
+#rel1 {
+  top: 30px;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  top: 15px;
+  left: 20px;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  top: 10px;
+  right: 10px;
+}
+
+#sta1 {
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple","600","400")}}

+ +
{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/exemple_1/index.html b/files/fr/web/css/comprendre_z-index/exemple_1/index.html new file mode 100644 index 0000000000..f155461dd4 --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/exemple_1/index.html @@ -0,0 +1,117 @@ +--- +title: Exemple d'empilement 1 +slug: Web/CSS/Comprendre_z-index/Exemple_1 +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}
+ +

Premier exemple

+ +

Commençons par un exemple simple, dans le contexte d'empilement racine nous avons deux blocs DIV (DIV #1 et DIV #3), tout deux positionnés relativement, mais sans propriété {{ cssxref("z-index") }}. Dans le bloc DIV #1 il y a un bloc DIV #2 en position absolue, alors que dans le bloc DIV #3 il y a un bloc DIV #4 en position absolue, tout deux également sans propriété z-index.

+ +

Le seul et unique contexte d'empilement est le contexte racine. Sans z-index, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.

+ +

Figure 5a : Exemple de contexte d'empilement 1

+ +

Si on assigne au bloc DIV #2 une valeur de z-index positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.

+ +

Figure 5b : Exemple de contexte d'empilement 1

+ +

Si maintenant on assigne également au bloc DIV #4 une valeur de z-index positive, plus grande que celle du DIV #2, le bloc DIV #4 est rendu par dessus tous les autres, y compris par dessus le bloc DIV #2.

+ +

Figure 5c : Exemple de contexte d'empilement 1

+ +

Dans le dernier exemple, vous pouvez voir que les blocs DIV #2 et DIV #4 ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc DIV #4, tout en respectant le bloc DIV #2, peut être contrôlé avec la propriété z-index. Il se fait que les éléments DIV #1 et DIV #3 n'ayant pas de z-index défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs DIV #2 et DIV #3, appartient au contexte d'empilement de la racine.

+ +

Dans le contexte d'empilement, les blocs DIV #1 et DIV #3 sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante :

+ +
    +
  • Contexte d'empilement racine +
      +
    • DIV #2 (z-index 1)
      • +
    • DIV #4 (z-index 2)
      • +
    +
    • +
+ +
Note : Les blocs DIV #1 et DIV #3 ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés z-index. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.
+ +

Exemple

+ +

CSS

+ +
.bold {
+  font-weight: bold;
+  font: 12px Arial;
+}
+#div1,
+#div3 {
+  height: 80px;
+  position: relative;
+  border: 1px dashed #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#div2 {
+  opacity: 0.8;
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 20px;
+  left: 170px;
+  border: 1px dashed #990000;
+  background-color: #ffdddd;
+  text-align: center;
+}
+
+#div4 {
+  opacity: 0.8;
+  z-index: 2;
+  position: absolute;
+  width: 200px;
+  height: 70px;
+  top: 65px;
+  left: 50px;
+  border: 1px dashed #000099;
+  background-color: #ddddff;
+  text-align: left;
+  padding-left: 10px;
+}
+ +

HTML

+ +
<div id="div1">
+  <br/>
+  <span class="bold">DIV #1</span>
+  <br/>position: relative;
+  <div id="div2">
+    <br/><span class="bold">DIV #2</span>
+    <br/>position: absolute;
+     <br/>z-index: 1;
+  </div>
+</div>
+
+<br/>
+
+<div id="div3">
+  <b/><span class="bold">DIV #3</span>
+  <br/>position: relative;
+  <div id="div4">
+    <br/><span class="bold">DIV #4</span>
+    <br/>position: absolute;
+    <br/>z-index: 2;
+  </div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple')}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/exemple_2/index.html b/files/fr/web/css/comprendre_z-index/exemple_2/index.html new file mode 100644 index 0000000000..75bbba62d9 --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/exemple_2/index.html @@ -0,0 +1,128 @@ +--- +title: Exemple d'empilement 2 +slug: Web/CSS/Comprendre_z-index/Exemple_2 +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
+ +

Deuxième exemple

+ +

Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de contexte d'empilement. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.

+ +

Figure 6 : Exemple de contexte d'empilement 2

+ +

Vous pouvez voir que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #3 (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de z-index régissent l'empilement des éléments.

+ +

Ce qui peut apparaitre comme étrange, c'est que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #4 (z-index : 10), malgré leurs valeurs de z-index. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc DIV #4 appartient au contexte d'empilement créé par le bloc DIV #3, et, comme expliqué précédemment, le bloc DIV #3 (et tout son contenu) est au dessous du bloc DIV #2.

+ +

Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :

+ +
    +
  • Contexte d'empilement racine +
      +
    • DIV #2 (z-index 2)
      • +
    • DIV #3 (z-index 1) +
        +
      • DIV #4 (z-index 10)
        • +
      +
      • +
    +
    • +
+ +
Note : Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.
+ +

Exemple

+ +

CSS

+ +
div {
+  font: 12px Arial;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
+#div2 {
+  z-index: 2;
+}
+
+#div3 {
+  z-index: 1;
+}
+
+#div4 {
+  z-index: 10;
+}
+
+#div1,#div3 {
+  height: 80px;
+  position: relative;
+  border: 1px dashed #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#div2 {
+  opacity: 0.8;
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 20px;
+  left: 170px;
+  border: 1px dashed #990000;
+  background-color: #ffdddd;
+  text-align: center;
+}
+
+#div4 {
+  opacity: 0.8;
+  position: absolute;
+  width: 200px;
+  height: 70px;
+  top: 65px;
+  left: 50px;
+  border: 1px dashed #000099;
+  background-color: #ddddff;
+  text-align: left;
+  padding-left: 10px;
+}
+ +

HTML

+ +
<br/>
+
+<div id="div1">
+  <br/><span class="bold">DIV #1</span>
+  <br/>position: relative;
+  <div id="div2">
+    <br/><span class="bold">DIV #2</span>
+    <br/>position: absolute;
+    <br/>z-index: 2;
+  </div>
+</div>
+
+<br/>
+
+<div id="div3">
+  <br/><span class="bold">DIV #3</span>
+  <br/>position: relative;
+  <br/>z-index: 1;
+  <div id="div4">
+    <br/><span class="bold">DIV #4</span>
+    <br/>position: absolute;
+    <br/>z-index: 10;
+  </div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/exemple_3/index.html b/files/fr/web/css/comprendre_z-index/exemple_3/index.html new file mode 100644 index 0000000000..5530887ec2 --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/exemple_3/index.html @@ -0,0 +1,160 @@ +--- +title: Exemple d'empilement 3 +slug: Web/CSS/Comprendre_z-index/Exemple_3 +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
+ +

Troisième exemple

+ +

Ce dernier exemple illustre les problèmes qui peuvent survenir lorsqu'on utilise des éléments positionnés dans une hiérarchie HTML à plusieurs niveaux et lorsque des {{cssxref("z-index")}} sont assignés à l'aide de sélecteurs de classe.

+ +

Prenons un exemple de menu hiérarchique à 3 niveaux, fait de plusieurs DIV positionnés. Les deuxième et troisième niveaux apparaissent lors du survol ou d'un clic sur leur parent. D'ordinaire, ce type de menu est généré par un script, côté client ou côté serveur, de façon à ce que les règles de styles soient assignées à l'aide de sélecteurs de classe plutôt qu'avec des sélecteurs d'id.

+ +

Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.

+ +

Figure 7 : Exemple de contexte d'empilement 3

+ +

Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.

+ +

Le menu de deuxième niveau est positionné en absolu à l'intérieur de son élément parent. Afin de le faire apparaître au dessus de tous les menus de premier niveau, on utilise un z-index. Le problème est que pour chaque menu de deuxième niveau, un contexte d'empilement se crée et chaque menu de troisième niveau appartient au contexte d'empilement de son parent.

+ +

Ainsi donc, un menu de troisième niveau s'empilera sous les menus de deuxième niveau suivants, car tous les menus de deuxième niveau partagent la même valeur de z-index et que les règles d'empilement par défaut s'appliquent.

+ +

Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :

+ +
    +
  • Contexte d'empilement racine +
      +
    • Niveau #1 +
        +
      • Niveau #2 (z-index : 1) +
          +
        • Niveau #3
          • +
        • …
          • +
        • Niveau #3
          • +
        +
        • +
      • Niveau #2 (z-index : 1)
        • +
      • …
        • +
      • Niveau #2 (z-index : 1)
        • +
      +
      • +
    • Niveau #1
      • +
    • …
      • +
    • Niveau #1
      • +
    +
    • +
+ +

On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de z-index individuelles (et différentes) assignées à l'aide de sélecteurs d'id plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.

+ +
Note : Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes DIV contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.
+ +

Exemple

+ +

CSS

+ +
div {
+  font: 12px Arial;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
+div.lev1 {
+  width: 250px;
+  height: 70px;
+  position: relative;
+  border: 2px outset #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#container1 {
+  z-index: 1;
+  position: absolute;
+  top: 30px;
+  left: 75px;
+}
+
+div.lev2 {
+  opacity: 0.9;
+  width: 200px;
+  height: 60px;
+  position: relative;
+  border: 2px outset #990000;
+  background-color: #ffdddd;
+  padding-left: 5px;
+}
+
+#container2 {
+  z-index: 1;
+  position: absolute;
+  top: 20px;
+  left: 110px;
+}
+
+div.lev3 {
+  z-index: 10;
+  width: 100px;
+  position: relative;
+  border: 2px outset #000099;
+  background-color: #ddddff;
+  padding-left: 5px;
+}
+ +

HTML

+ +
<br/>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+  <div id="container1">
+    <div class="lev2">
+      <br/><span class="bold">LEVEL #2</span>
+      <br/>z-index: 1;
+      <div id="container2">
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+      </div>
+    </div>
+    <div class="lev2">
+      <br/><span class="bold">LEVEL #2</span>
+      <br/>z-index: 1;
+    </div>
+  </div>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/index.html b/files/fr/web/css/comprendre_z-index/index.html new file mode 100644 index 0000000000..0c6c636886 --- /dev/null +++ b/files/fr/web/css/comprendre_z-index/index.html @@ -0,0 +1,36 @@ +--- +title: Comprendre z-index en CSS +slug: Web/CSS/Comprendre_z-index +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +

{{CSSRef}}{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}

+ +

Généralement, les pages HTML sont vues comme des objets en deux dimensions et le texte, les images et les autres éléments sont disposés sans se chevaucher. Il y a un seul flux de rendu, et tous les éléments connaissent la place occupée par les autres.

+ +
+

Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement.

+
+ +

Source : Section 9.9.1. de CSS 2.1 - La présentation en couches

+ +

Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.

+ +

z-index peut sembler simple d'utilisation : il ne s'agit que d'une seule propriété, exprimée avec un entier et un comportement plutôt simple de prime abord. Cependant, lorsque z-index est appliquée à des hiérarchies complexes d'éléments HTML, son comportement peut vite devenir difficile à appréhender, voire imprévisible. Ceci est dû aux règles complexes d'empilement.

+ +

Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples.

+ +
    +
  1. L'empilement sans z-index : Règles d'empilement par défaut
    2. +
  2. L'empilement et float : Comportement des éléments flottants
    3. +
  3. Ajouter z-index : Utiliser z-index pour modifier l'empilement par défaut
    4. +
  4. L'empilement de couches : Remarques sur l'empilement de couches
    5. +
  5. Exemple d'empilement n°1 : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau
    6. +
  6. Exemple d'empilement n°2 : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments
    7. +
  7. Exemple d'empilement n°3 : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau
    8. +
+ +

{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}

diff --git a/files/fr/web/css/concepts_viewport/index.html b/files/fr/web/css/concepts_viewport/index.html new file mode 100644 index 0000000000..56143515c0 --- /dev/null +++ b/files/fr/web/css/concepts_viewport/index.html @@ -0,0 +1,156 @@ +--- +title: Concepts relatifs au viewport +slug: Web/CSS/Concepts_viewport +tags: + - CSS + - Guide + - viewport +translation_of: Web/CSS/Viewport_concepts +--- +

{{CSSRef}}

+ +

Dans cet article, nous définirons le concept de viewport ou de zone d'affichage, les différences entre la zone d'affichage visuelle et la zone d'affichage pour la disposition. Nous verrons également ce que signifie la zone d'affichage pour CSS, SVG et pour les appareils mobiles.

+ +

Qu'est-ce qu'une zone d'affichage (viewport) ?

+ +

Une zone d'affichage (aussi appelée viewport en anglais) représente la zone actuellement visible sur l'appareil. Pour un navigateur web, la zone d'affichage correspond généralement à la fenêtre du navigateur sans les éléments d'interface du navigateur (barre de menu, etc.). Bref, sur le Web, la zone d'affichage correspond la plupart du temps à la région à l'intérieur de la fenêtre dans laquelle vous consultez un site ou une application.

+ +

Les documents (à l'instar de cet article) peuvent être très longs. La zone d'affichage correspond à ce qui est actuellement visible. Dans notre cas particulier, vous devriez pouvoir voir le titre Qu'est-ce qu'une zone d'affichage peut-être le menu de navigation. La taille de la zone d'affichage dépend de la taille de l'écran, de l'activation du mode plein écran, du niveau de zoom, etc. Le contenu situé à l'extérieur de la zone d'affichage (la section Voir aussi de ce document par exemple) n'est pas visible tant que l'utilisateur n'a pas fait défilé le contenu jusqu'à ce point.

+ +
    +
  • Pour les écrans les plus grands où les applications ne sont pas nécessairement en plein écran, la zone d'affichage mesure la taille de la fenêtre du navigateur
    • +
  • Sur la plupart des appareils mobiles ou lorsque le navigateur est en plein écran, la zone d'affichage correspond à l'ensemble de l'écran
    • +
+ +

En mode plein écran, la zone d'affichage sera l'écran de l'appareil, la fenêtre du navigateur pourra être plus grande ou plus petite que la zone d'affichage et le document sera le site web consulté et qui peut être plus grand ou plus large que la zone d'affichage.

+ +

Pour résumer, la zone d'affichage est la zone du document actuellement visible à l'écran.

+ +

Les dimensions de la zone d'affichage sont modifiables

+ +

La largeur de la zone d'affichage n'est pas toujours la largeur de la fenêtre. Si vous accédez à la largeur et à la hauteur de la fenêtre et à celles du document avec Chrome ou Firefox, vous pourrez obtenir un résultat comme celui-ci :

+ +
document.documentElement.clientWidth /* 1200 */
+window.innerWidth /* 1200 */
+window.outerWidth /* 1200 */
+
+ +
document.documentElement.clientHeight /* 800 */
+window.innerHeight /* 800 */
+window.outerHeight /* 900 */
+
+ +

Il existe plusieurs propriétés du DOM qui permettent d'obtenir la taille de la zone d'affichage et certaines dimensions associées :

+ +
    +
  • La propriété du document {{DOMxRef("Element.clientWidth")}} est la largeur interne du document, exprimée en pixels CSS, et inclut le remplissage (padding) mais pas les marges, les bordures et les barres de défilement. C'est la largeur de la zone d'affichage.
    • +
  • La propriété {{DOMxRef("Window.innerWidth")}} correspond à la largeur, exprimée en pixels CSS, de la zone d'affichage dans la fenêtre du navigateur qui contient les éventuelles barres de défilement verticales.
    • +
  • La propriété {{DOMxRef("Window.outerWidth")}} correspond à la largeur extérieure de la fenêtre du navigateur et qui contient l'ensemble du chrome (les éléments d'interface utilisateur du navigateur qui ne sont pas ceux de la page web consultée).
    • +
+ +

Dans l'exemple précédent, on peut voir que innerWidth et outerWidth ont la même valeur mais que outerHeight mesure 100 pixels de plus que innerHeight. En effet, outerHeight tient compte du chrome du navigateur et les mesures ont été effectuées avec un navigateur dont la barre d'adresse, les onglets et la barre de favoris mesuraient ensemble 100 pixels de haut. En revanche, il n'y avait pas de chrome à gauche ou à droite de la fenêtre.

+ +

La zone contenu entre innerHeight et innerWidth correspond à la zone d'affichage pour la disposition (layout viewport). Le chrome du navigateur ne fait pas partie de la zone d'affichage.

+ +

Lorsqu'on zoome, FIrefox et Chrome renvoient une nouvelle taille, en pixels CSS, pour innerWidth et clientWidth. Les valeurs renvoyées pour outerWidth et outerHeight dépendent du navigateur : Firefox rapporte la nouvelle valeur en pixels CSS et Chrome renvoie la longueur exprimée avec la taille par défaut d'un pixel. Lorsqu'on a zoomé, on pourra obtenir :

+ +
document.documentElement.clientWidth /* 800 */
+window.innerWidth /* 800 */
+window.outerWidth /* 800 dans Firefox, 1200 dans Chrome */
+
+ +
document.documentElement.clientHeight /* 533 */
+window.innerHeight /* 533 */
+window.outerHeight /* 596 dans Firefox, 900 dans Chrome */
+
+ +

La zone d'affichage mesurait initialement 1200 x 800 pixels. Après le zoom, la zone d'affichage mesure 800 x 533 pixels. C'est la zone d'affichage pour la disposition. Avec la feuille de style suivante, les hauts et pieds de page seront placés en haut et en bas de la zone d'affichage pour la disposition.

+ +
body > header {
+  position: fixed;
+  top: 0;
+}
+body > footer {
+  position: fixed;
+  bottom: 0;
+}
+
+ +

On a mesuré 800 x 533 après avoir zoomé à l'aide du clavier. Le haut et le bas de page ont suivi le haut et le bas de la fenêtre. Mais que ce serait-il passé si on avait zoomé au doigt sur une tablette ? Que se serait-il passé si un clavier tactile logiciel s'était ouvert sur le bas du téléphone ?

+ +

Dans le contexte du Web, on parle de deux zones d'affichage : la zone d'affichage pour la disposition (layout viewport) et la zone d'affichage visuelle (visual viewport). La zone d'affichage visuelle est la partie de la page web qui est actuellement visible dans le navigateur et qui peut changer. Lorsqu'un utilisateur zoome en pinçant, provoque l'ouverture d'un clavier tactile ou lorsqu'une barre d'adresse s'affiche, la zone d'affichage visuelle se réduit mais la zone d'affichage pour la disposition reste inchangée.

+ +

Les hauts et bas de pages vus dans l'exemple précédent se caleront en haut et en bas de la zone d'affichage pour la disposition. Aussi, ils resteront visibles lorsqu'on zoome au clavier mais pourrait être masqués (partiellement ou complètement) par un clavier visuel : autrement dit, ils pourraient ne pas faire partie de la zone d'affichage visuelle.

+ +

La zone d'affichage visuelle correspond à la partie de l'écran qui est visible sans contenir les claviers visuels, les zones en dehors de la région zoomée ou toute autre partie qui ne suit pas les dimensions d'une page. Ainsi, la zone d'affichage visuelle pourra avoir la même taille ou être plus petite que la zone d'affichage pour la disposition.

+ +

Pour une page contenant des iframes, des objets ou des SVG externes, chaque page imbriquée et chaque fichier inclus possède son propre objet pour la fenêtre. Seule la fenêtre de plus haut niveau possède une zone d'affichage visuelle qui peut être différente de la zone d'affichage pour la disposition. Pour les éléments imbriqués, la zone d'affichage visuelle et la zone d'affichage pour la disposition sont identiques.

+ +

CSS

+ +

La zone d'affichage pour la disposition et la zone d'affichage visuelle mentionnées jusqu'à présent ne sont pas les seules zones d'affichages à considérer. Toute zone d'affichage imbriquée, pleinement ou partiellement affichée dans la zone d'affichage pour la disposition sera considérée comme une zone d'affichage visuelle.

+ +

On pense généralement que les hauteurs et largeurs utilisées pour les requêtes média correspondent à la hauteur et à la largeur de la fenêtre du navigateur mais elles correspondent en réalité à la taille de la zone d'affichage (la fenêtre pour le document principal ou les dimensions intrinsèques des objets imbriqués). En CSS, on peut également utiliser des unités proportionnelles aux dimensions de la zone d'affichage. Un vh correspond à 1% de la hauteur de la zone d'affichage pour la disposition et vw mesurera, de façon analogue, 1% de la largeur de la zone d'affichage pour la disposition.

+ +

<iframe>

+ +

À l'intérieur d'une iframe, la zone d'affichage visuelle est mesurée comme la largeur et la hauteur internes de l'iframe et non comme celles du document parent. Il est possible de définir n'importe quelle hauteur et largeur pour une iframe mais le document pourra ne pas être visible dans son intégralité.

+ +

Si on utilise les unités de longueur relatives à la zone d'affichage pour la mise en forme du document situé dans l'iframe, 1vh correspondra à 1% de la hauteur de l'iframe et 1vw correspondra à 1% de la largeur du document imbriqué.

+ +
iframe {
+  width: 50vw;
+}
+
+ +

Si l'iframe est dimensionnée à 50vw, elle mesurera 50% de large des 1200px du document parent (soit 600px). À l'intérieur de cette iframe, 1vw correspondra donc à 6px. Lorsqu'on zoomera, l'iframe se réduira à 400px de large et 1vw correspondra alors à 4px.

+ +

Lorsqu'on utilise une requête média à l'intérieur du document de l'iframe, les dimensions utilisées sont relatives à la zone d'affichage de l'iframe.

+ +
@media screen and (min-width: 500px) {
+  p {
+    color: red;
+  }
+}
+
+ +

Si le fragment de code CSS était inclus dans l'iframe, les paragraphes seraient rouges avec un zoom utilisateur et normaux sinon.

+ +

SVG

+ +

Pour un document SVG, la zone d'affichage correspond à la partie de l'image SVG qui est visible à l'écran. On peut définir n'importe quelle hauteur et largeur sur un SVG mais l'image pourra ne pas être entièrement visible. La taille de la zone d'affichage pourra être définie à l'aide des attributs width et height de l'élément {{SVGElement("svg")}}.

+ +
<svg height="300" width="400"></svg>
+ +

Dans cet exemple, la zone d'affichage possède un ratio de 3::4 et mesure 400 x 300 unités (où les unités par défaut sont généralement des pixels CSS).

+ +

SVG possède un système de coordonnées interne qui est défini grâce à l'attribut viewbox mais qui n'est pas directement lié à la problématique des zones d'affichage.

+ +

Si on inclut un fichier SVG dans un document HTML, la zone d'affichage pour le SVG sera le bloc englobant initial ou la largeur et la hauteur du conteneur SVG. Si on utilise une requête média {{CSSxRef("@media")}} dans le code CSS du SVG, celle-ci sera relative à la taille du conteneur et pas à celle de la zone d'affichage du document.

+ +
@media screen and (min-width: 400px) and (max-width: 500px) {
+  /* styles CSS ici */
+}
+ +

Lorsqu'on utilise la requête média précédente, les styles sont généralement appliqués lorsque la fenêtre du navigateur mesure entre 400px et 500px de large. Lorsqu'on utilise cette même requête à l'intérieur d'un document SVG, ce sera la largeur du conteneur (l'élément {{htmlelement("img")}} par exemple ou l'élément parent) qui sera considérée. Autrement dit, si on utilise la requête média précédente sur un document SVG, les styles seront appliqués si le conteneur du SVG mesure entre 400 et 500 pixels.

+ +

JavaScript

+ +

L'API Visual Viewport fournit des outils pour récupérer et modifier les propriétés de la zone d'affichage visuelle.

+ +

Zones d'affichage sur mobiles

+ +

Il existe une grande variété de tailles et de proportions pour les appareils mobiles. La zone d'affichage d'un navigateur mobile est la zone de la fenêtre sur laquelle le contenu web peut être consulté et cette zone n'a pas nécessairement la même taille que la page affichée. Les navigateurs mobiles affichent les pages sur une zone d'affichage virtuelle (mesurant généralement 960px) plus large que l'écran puis réduisent le résultat afin que l'utilisateur puisse voir l'ensemle du document. L'utilisateur peut alors se déplacer ou zoomer au doigt pour accéder aux différentes zones de la page. Ainsi, si un appareil mobile a un écran large de 320px, un site web pourra être affiché selon une zone d'affichage virtuelle sur 960px puis réduit afin de pouvoir s'inscrire dans l'espace large de 320px. Le résultat ainsi obtenu risque peu d'être lisible. Pour indiquer à un navigateur mobile d'utiliser la largeur de la zone d'affichage réelle plutôt que la largeur virtuelle de 960px, on pourra placer la balise <meta> suivante :

+ +
<meta name="viewport" content="width=device-width">
+ +

La propriété width contrôle la taille de la zone d'affichage et on l'utilisera généralement avec device-width qui correspond à la largeur de l'écran, exprimée en pixels CSS, avec un zoom de 100%. Il est possible d'utiliser d'autres propriétés comme maximum-scale, minimum-scale et user-scalable afin de contrôler si l'utilisateur peut zoomer/dézoomer sur la page mais les valeurs par défaut restent les meilleures en termes d'accessibilité et d'ergonomie et ne seront pas plus abordées ici par souci de concision.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/conic-gradient()/index.html b/files/fr/web/css/conic-gradient()/index.html new file mode 100644 index 0000000000..a403061a07 --- /dev/null +++ b/files/fr/web/css/conic-gradient()/index.html @@ -0,0 +1,264 @@ +--- +title: conic-gradient() +slug: Web/CSS/conic-gradient() +tags: + - CSS + - Fonction + - Guide + - Reference +translation_of: Web/CSS/conic-gradient() +--- +
{{CSSRef}}
+ +

La fonction CSS conic-gradient() permet de créer une image consistuée d'un dégradé radial pour lequel les transitions entre les couleurs ont lieu autour d'un centre plutôt que depuis le centre. Un dégradé conique pourra par exemple être un graphique en camembert. Le résultat de la fonction conic-gradient() est un objet du type de données {{CSSxRef("<gradient>")}} qui est un type particulier d'{{CSSxRef("<image>")}}.

+ +

{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}}

+ + + +

À l'instar des autres dégradés, les dégradés coniques ne possèdent pas de dimension intrinsèque (ils n'ont pas de taille préférentielle ou de ratio) : la taille réelle correspondra à la taille de l'élément auquel le dégradé s'applique ou à la taille de l'image.

+ +

Pour créer un dégradé conique qui se répète afin de couvrir 360° (un tour complet), on utilisera plutôt la notation fonctionnelle {{CSSxRef("repeating-conic-gradient")}}.

+ +

Les dégradés (<gradient>) sont un type d'image (<image>) et ne peuvent être utilisés qu'aux endroits où les images peuvent être utilisées. Aussi, conic-gradient() ne fonctionnera pas pour la propriété {{CSSxRef("background-color")}} ou pour les autres propriétés qui utilisent les données de type {{CSSxRef("<color>")}}.

+ +
+

Note : Un tel dégradé est appelé conique car, vu du dessus, la répartition des couleurs fait apparaître un cône.

+
+ +

Qu'est-ce qu'un dégradé conique ?

+ +

Un dégradé conique est semblable à un dégradé radial mais les transitions de couleurs sont placées sur différents angles plutôt que sur différents rayons. Avec les dégradés coniques, les transition entre les couleurs commencent depuis la direction pointant vers le haut puis dans le sens des aiguilles d'une montre. Avec un dégradé radial, les transitions progressent depuis le centre vers l'extérieur du cercle.

+ +

color stops along the circumference of a conic gradient and the axis of a radial gradient.

+ +

Un dégradé conique est défini en indiquant un angle de rotation, le centre du dégradé puis en indiquant une liste de points d'arrêt de couleur. À la différence des dégradés linéaires et des dégradés radiaux pour lesquels les points d'arrêt de couleur sont placés avec une longueur, les points d'arrêt de couleur d'un dégradé conique sont placés à l'aide d'un angle. Les unités utilisables pour les angles sont deg (pour les degrés), rad (pour les radians), grad (pour les grades) et turn (pour les tours). Un cercle se divise en 360 degrés, 400 grades, 2 radians et un tour. Les navigateurs qui prennent en charge les dégradés coniques acceptent également les valeurs exprimées en pourcentage (100% correspondant à 360 degrés) mais cela ne fait pas partie de la spécification.

+ +

Comme pour les dégradés radiaux, la syntaxe pour les dégradés coniques permet de situer le centre du dégradé à n'importe quel endroit de l'image ou de l'élément, même en dehors. La position s'exprime avec deux valeurs, de façon semblable à la syntaxe de {{cssxref("background-position")}}.

+ +

L'arc du dégradé représente le périmètre du dégradé. Le point de départ du dégradé est situé en haut de l'axe vertical. Ensuite le dégradé évolue à partir de cet angle. Les couleurs du dégradé sont déterminées grâce aux points d'arrêt de couleur angulaires, aux points de départ et aux points d'arrivée et éventuellement aux points d'arrêt intermédiaires. Les transitions entre les couleurs peuvent être modifiées grâce à des indications entre les différents points d'arrêt.

+ +

Adapter les dégradés

+ +

En ajoutant plusieurs points d'arrêt de couleur sur l'arc du dégradé, il est possible de créer une transition personnalisée entre de nombreuses couleurs. La position d'un point d'arrêt de couleur peut être définie de façon explicite grâce à une valeur de type {{CSSxRef("<angle>")}}. Si on ne définit pas l'emplacement d'un point d'arrêt, ce dernier sera placé à mi-chemin entre le point d'arrêt précédent et le suivant. Si on ne définit pas d'angle pour le premier ou le dernier point d'arrêt de couleur, ils seront respectivement situés à 0deg et 360deg. Autrement dit, les deux dégradés suivants sont équivalents :

+ +
conic-gradient(red, orange, yellow, green, blue);
+conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);
+ +

Par défaut, la transition entre les couleurs de deux points d'arrêt se fera progressivement avec la moitié de la transition à la moitié de l'angle. Ce milieu de transition peut être déplacé en ajoutant une indication de couleur qui définit l'emplacement voulu. L'exemple suivant commence avec du rouge jusqu'à 10%, fait une transition du rouge au bleu sur 80% du tour, les 10% restants sont en bleu. Cependant, le point de changement entre le bleu et le rouge se situe à 20% plutôt qu'à 50% (ce qui se serait produit sans l'indication 80grad).

+ +
conic-gradient(red 40grad, 80grad, blue 360grad);
+ +

Si deux ou plusieurs points d'arrêt de couleur partagent le même emplacement, la transition sera franche entre la première et la dernière couleur déclarées pour cet emplacement. Si on emploie les dégradés coniques pour faire des camemberts (une mauvaise pratique car les dégradés ne sont pas accessibles), on peut utiliser des points d'arrêt avec plusieurs couleurs au même endroit pour créer une transition nette. Les deux déclarations suivantes sont synonymes :

+ +
conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
+conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);
+ +

Les points d'arrêt de couleur devraient être listés dans l'ordre croissant. Les points d'arrêt situés après mais dont la valeur d'angle est inférieure surchargeront les valeurs des points d'arrêt précédents et créeraient une rupture tranchée. Le dégradé qui suit passe de rouge à jaune à 30% puis de jaune à bleu après 35% :

+ +
conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
+
+ +

Il est possible d'obtenir d'autres effets avec les dégradés coniques. On peut même créer un damier en créant des quadrants supérieurs gauches et inférieurs droits en blanc et supérieurs droits et inférieurs gauches en noir puis en répétant le dégradé 16 fois (quatre fois en horizontal et quatre fois en vertical) :

+ +
conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
+background-size: 25% 25%;
+
+ +

On voit avec l'exemple précédent qu'il est aussi possible de mélanger différentes unités d'angle mais attention, cela diminue fortement la lisibilité.

+ +

Syntaxe

+ +
/* Un dégradé conique tourné de 45 degrés,
+   qui commence en bleu et finit en rouge */
+conic-gradient(from 45deg, blue, red);
+
+/* Une boîte bleu violette : le dégradé commence du bleu
+   vers le rouge mais seule la partie inférieure droite du
+   quadrant est visible car le centre du dégradé conique est
+   dans le coin supérieur gauche */
+conic-gradient(from 90deg at 0 0, blue, red);
+
+/* Une roue des couleurs */
+background: conic-gradient(
+    hsl(360, 100%, 50%),
+    hsl(315, 100%, 50%),
+    hsl(270, 100%, 50%),
+    hsl(225, 100%, 50%),
+    hsl(180, 100%, 50%),
+    hsl(135, 100%, 50%),
+    hsl(90, 100%, 50%),
+    hsl(45, 100%, 50%),
+    hsl(0, 100%, 50%)
+);
+ +

Valeurs

+ +
+
{{CSSxRef("<angle>")}}
+
Une valeur précédée du mot-clé from qui indique un angle et qui définit la rotation du dégradé selon le sens des aiguilles d'une montre.
+
<position>
+
La position définit le centre du dégradé en respectant la même syntaxe que celle utilisée pour la propriété {{cssxref("background-position")}}. Si cette valeur est absente, ce sera la valeur center qui sera utilisée comme valeur par défaut, indiquant que le dégradé sera centré.
+
<angular-color-stop>
+
Un point d'arrêt de couleur utilisant une valeur de type {{CSSxRef("<color>")}} suivie par une ou deux positions d'arrêt (une valeur de type {{CSSxRef("<angle>")}} située le long de l'arc du dégradé).
+
<color-hint>
+
Une indication de couleur pour l'interpolation entre deux points d'arrêt. La longueur définit l'emplacement où les deux couleurs des points d'arrêts alentour doivent se joindre. Autrement dit, la longueur à laquelle la transition est effectuée à moitié. Si cette valeur est absente, la moitié de la transition est atteinte à la moitié de l'angle entre les deux points d'arrêt.
+
+
+

Note : Le rendu des points d'arrêt de couleur pour les dégradés CSS respecte les mêmes règles que les points d'arrêt de couleur des dégradés SVG.

+
+
+
+ +

Syntaxe formelle

+ +
conic-gradient(
+  [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
+  \---------------------------------/ \----------------------------/
+        Gradient definition                List of color stops
+
+where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
+  and <angular-color-stop> = <color> && <color-stop-angle>?
+  and <angular-color-hint> = <angle-percentage>
+  and <color-stop-angle> = <angle-percentage>{1,2}
+ +

Exemples

+ +
+

Un dégradé à 40°

+ + + +
div {
+  background-image:
+     conic-gradient(from 40deg, #fff, #000);
+}
+
+ +

{{EmbedLiveSample("Un_dégradé_à_40°", 120, 120)}}

+
+ +
+

Un dégradé décentré

+ + + +
div {
+  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
+}
+ +

{{EmbedLiveSample("Un_dégradé_décentré", 120, 120)}}

+
+ +
+

Un camembert sous forme de dégradé

+ +

This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.

+ + + +
div {
+  background: conic-gradient(
+     red 36deg, orange 36deg 170deg, yellow 170deg);
+  border-radius: 50%
+}
+ +

{{EmbedLiveSample("Un_camembert_sous_forme_de_dégradé", 120, 120)}}

+
+ +
+

Un damier

+ + + +
div {
+  background:
+     conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn)
+     top left / 25% 25% repeat;
+  border: 1px solid;
+}
+ +

{{EmbedLiveSample("Un_damier", 120, 120)}}

+
+ +
+

Note : Voir Utiliser les dégradés CSS pour plus d'exemples.

+
+ +

Acessibilité

+ +

Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Aussi, bien qu'il soit possible de créer des camemberts graphiques, des damiers ou d'autres effets grâce aux dégradés coniques, les images construites en CSS ne sont pas accessibles. Les images créées avec des dégradés coniques ne sont donc pas accessibles non plus. 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.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Images', '#conic-gradients', 'conic-gradient()')}}{{Spec2('CSS4 Images')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image.gradient.conic-gradient")}}

+ +

Voir aussi

+ +
    +
  • Utiliser les dégradés CSS
    • +
  • Les autres fonctions associées aux dégradés : {{CSSxRef("repeating-conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}
    • +
  • {{CSSxRef("<image>")}}
    • +
  • {{cssxref("_image","image()")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("image-set","image-set()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git a/files/fr/web/css/contain/index.html b/files/fr/web/css/contain/index.html new file mode 100644 index 0000000000..c6c9747b19 --- /dev/null +++ b/files/fr/web/css/contain/index.html @@ -0,0 +1,98 @@ +--- +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/content/index.html b/files/fr/web/css/content/index.html new file mode 100644 index 0000000000..6734f52912 --- /dev/null +++ b/files/fr/web/css/content/index.html @@ -0,0 +1,268 @@ +--- +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("<counter>")}})
+
Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("counter")}} or {{cssxref("counters")}}.
+
La première possède deux formes : 'counter(name)' ou 'counter(name, style)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (decimal par défaut).
+
La seconde a également deux formes : counters(name, string) ou counters(name, string, style). Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (decimal par défaut). Voir la section sur les compteurs automatiques et sur la numérotation pour plus d'informations.
+
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/contexte_de_formatage_en_ligne/index.html b/files/fr/web/css/contexte_de_formatage_en_ligne/index.html new file mode 100644 index 0000000000..bb40bcce6d --- /dev/null +++ b/files/fr/web/css/contexte_de_formatage_en_ligne/index.html @@ -0,0 +1,63 @@ +--- +title: Contexte de formatage en ligne (inline/incise) +slug: Web/CSS/Contexte_de_formatage_en_ligne +tags: + - CSS + - Guide +translation_of: Web/CSS/Inline_formatting_context +--- +

{{CSSRef}}

+ +

Dans cet article, nous allons voir ce qu'est le contexte de formatage en ligne (inline formatting context).

+ +

Concepts-clés

+ +

Le contexte de formatage en ligne est une des méthodes permettant de créer le rendu visuel d'une page web. Les boîtes en ligne sont disposées les unes après les autres selon le mode d'écriture utilisé :

+ +
    +
  • Pour un mode d'écriture horizontal, les boîtes en ligne sont disposées horizontalement de la gauche vers la droite.
    • +
  • Pour une mode d'écriture vertical, les boîtes en lignes sont disposées verticalement du haut vers le bas.
    • +
+ +

Dans l'exemple qui suit, on a deux éléments ({{HTMLElement("div")}}) avec une bordure noire qui forment chacuns un contexte de formatage de bloc au sein duquel chaque mot contribue à un contexte de formatage en ligne. Les boîtes utilisées dans le mode d'écriture horizontal sont organisées horizontalement tandis que celles dans l'élément avec un mode d'écriture vertical sont disposées verticalement.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}}

+ +

Les boîtes qui forment une ligne sont contenues dans une zone rectangulaire qu'on appelle boîte de ligne (line box). Cette boîte sera assez grande pour contenir l'ensemble des boîtes en ligne de cette ligne. Lorsqu'il n'y a plus de place disponible sur l'axe en ligne, une autre ligne est créée. Ainsi, un paragraphe est formé par un ensemble de boîtes de ligne, empilées le long de l'axe de bloc.

+ +

Lorsqu'une boîte en ligne est découpée en deux, les marges, bordures et le remplissage (padding) n'ont pas d'impact visuel à l'emplacement de la séparation. Dans le prochain exemple, on peut voir un élément ({{HTMLElement("span")}}) enveloppant un ensemble de mots s'étirant sur deux lignes. On voit que la bordure sur <span> est coupée au passage à la ligne.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/break.html", '100%', 720)}}

+ +

Les marges, les bordures et le remplissage (padding) le long de la direction en ligne sont respectés. Dans l'exemple suivant, on peut voir comment sont ajoutés les marges, bordures et le remplissage à l'élément en ligne <span> qui a été ajouté.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}

+ +
+

Note : Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir les propriétés et les valeurs logiques en CSS.

+
+ +

Alignement sur la direction de bloc (block)

+ +

Les boîtes en ligne peuvent être alignées sur la direction de bloc de différentes façons avec la propriété {{cssxref("vertical-align")}}. Celle-ci permettra d'aligner le contenu sur l'axe de bloc (lorsque le mode d'écriture est vertical, vertical-align ne permet pas d'aligner sur l'axe vertical !). Dans l'exemple qui suit, une portion de texte plus grande rend la boîte de ligne plus grande pour la première phrase. On peut alors utiliser vertical-align afin d'aligner les boîtes en ligne. L'exemple utilise initialement la valeur top mais vous pouvez le modifier en utilisant middle, bottom ou encore baseline.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/align.html", '100%', 920)}}

+ +

Alignement le long de la direction en ligne (inline)

+ +

S'il reste de l'espace le long de la direction en ligne, la propriété {{cssxref("text-align")}} permetra d'aligner le contenu des boîtes en lignes au sein des boîtes de ligne. Dans l'exemple qui suit, vous pouvez notamment changer la valeur de text-align afin d'utiliser end.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/text-align.html", '100%', 920)}}

+ +

Effets du flottement (float)

+ +

Les boîtes de ligne ont généralement la même taille sur l'axe en ligne (c'est-à-dire la même largeur quand on utilise un mode d'écriture horizontal ou la même hauteur si on utilise un mode d'écriture vertical). S'il existe un élément flottant ({{cssxref("float")}}) au sein du même contexte de formatage de bloc, cet élément entraînera la diminution de la taille des boîtes de ligne pour celles qui entourent l'élément flottant.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/couleurs_css/index.html b/files/fr/web/css/couleurs_css/index.html new file mode 100644 index 0000000000..75f099f9d7 --- /dev/null +++ b/files/fr/web/css/couleurs_css/index.html @@ -0,0 +1,132 @@ +--- +title: Couleurs CSS +slug: Web/CSS/Couleurs_CSS +tags: + - Aperçu + - CSS + - CSS Color + - Reference +translation_of: Web/CSS/CSS_Color +--- +
{{CSSRef}}
+ +

Les couleurs CSS (CSS Color en anglais) forment un module CSS qui décrit la manipulation des couleurs, les types de données liées aux couleurs et l'application de la transparence en CSS.

+ +

Référence

+ +

Propriétés CSS

+ +
+
    +
  • {{cssxref("color")}}
    • +
  • {{cssxref("opacity")}}
    • +
+
+ +

Types de donnée

+ +
+
    +
  • {{cssxref("<color>")}}
    • +
+
+ +

Guide

+ +
+
Appliquer des couleurs sur des éléments HTML grâce à CSS
+
Un guide qui illustre comment utiliser CSS afin d'appliquer des couleurs sur différents contenus.
+
+ +

Outils

+ +
+
Un sélecteur de couleurs
+
Cet outil vous permet de créer, ajuster et manipuler des couleurs.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple1.0{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support simple1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

Voir aussi

+ +
    +
  • Attention, en CSS, les dégradés de couleurs ne sont pas des couleurs mais des images.
    • +
  • Les autres propriétés relatives aux couleurs et qui font partie d'autres modules de spécification : {{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/couleurs_css/s\303\251lecteur_de_couleurs/index.html" "b/files/fr/web/css/couleurs_css/s\303\251lecteur_de_couleurs/index.html" new file mode 100644 index 0000000000..df4aa4661c --- /dev/null +++ "b/files/fr/web/css/couleurs_css/s\303\251lecteur_de_couleurs/index.html" @@ -0,0 +1,3235 @@ +--- +title: Sélecteur de couleurs CSS +slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPIcker Tool

+ +

HTML Content

+ +
 <div id="container">
+  <div id="palette" class="block">
+   <div id="color-palette"></div>
+   <div id="color-info">
+    <div class="title">Couleurs CSS </div>
+   </div>
+  </div>
+
+  <div id="picker" class="block">
+   <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+   <div id="picker-samples" sample-id="master"></div>
+   <div id="controls">
+    <div id="delete">
+     <div id="trash-can"></div>
+    </div>
+    <div id="void-sample" class="icon"></div>
+   </div>
+  </div>
+
+  <div id="canvas" data-tutorial="drop">
+   <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+    data-max="20" data-sensivity="10"></div>
+  </div>
+ </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 28%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Déposez vos couleurs ici";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: center;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "pour les comparer, les ajuster ou les modifier.";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click pour activer";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Teinte', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Luminosité';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Valeur';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ + +
{{CSSRef}}
+ +

Cet outil vous permet de définir des couleurs web personnalisées.

+ +

L'outil offre également une conversion facile entre les différents formats de couleurs CSS: couleurs hexadécimales, RVB (Rouge, Vert, Bleu) (aussi appelé RGB en anglais) et TSL (Teinte, Saturation Luminosité) (aussi appelé HSL en anglais). Le canal Alpha est également pris en charge pour les formats RGB (rgba) et HSL (hsla).

+ +

Chaque couleur est prédéfinie dans les 3 formats standard CSS.

+ +

En fonction de la couleur courante, une palette de couleurs est générée sur une échelle TSL ainsi que sur une échelle de transparence (en faisant varier l'alpha).

+ +

Le sélecteur peut être réglé sur les formats HSL ou HSV (valeur de teinte et staturation).

+ +

{{EmbedLiveSample('ColorPIcker_Tool', '100%', '900')}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/counter()/index.html b/files/fr/web/css/counter()/index.html new file mode 100644 index 0000000000..a53c715337 --- /dev/null +++ b/files/fr/web/css/counter()/index.html @@ -0,0 +1,142 @@ +--- +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 new file mode 100644 index 0000000000..7eaa65b7d3 --- /dev/null +++ b/files/fr/web/css/counter-increment/index.html @@ -0,0 +1,133 @@ +--- +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 new file mode 100644 index 0000000000..ec093ec4ac --- /dev/null +++ b/files/fr/web/css/counter-reset/index.html @@ -0,0 +1,142 @@ +--- +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 new file mode 100644 index 0000000000..30836ddc75 --- /dev/null +++ b/files/fr/web/css/counter-set/index.html @@ -0,0 +1,108 @@ +--- +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 new file mode 100644 index 0000000000..9c58ab42a0 --- /dev/null +++ b/files/fr/web/css/counters()/index.html @@ -0,0 +1,189 @@ +--- +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 new file mode 100644 index 0000000000..0c995b6816 --- /dev/null +++ b/files/fr/web/css/cross-fade()/index.html @@ -0,0 +1,166 @@ +--- +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_backgrounds_and_borders/index.html b/files/fr/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..3180021066 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,117 @@ +--- +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/scaling_background_images/index.html b/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html new file mode 100644 index 0000000000..f9cce126c9 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html @@ -0,0 +1,117 @@ +--- +title: Mettre à l'échelle des images en arrière-plan +slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +tags: + - CSS + - Guide + - Intermédiaire + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_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/utiliser_plusieurs_arri\303\250re-plans/index.html" "b/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arri\303\250re-plans/index.html" new file mode 100644 index 0000000000..fd4961c49f --- /dev/null +++ "b/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arri\303\250re-plans/index.html" @@ -0,0 +1,55 @@ +--- +title: Utiliser plusieurs arrière-plans +slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +
{{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 new file mode 100644 index 0000000000..2e2abcc1f1 --- /dev/null +++ b/files/fr/web/css/css_basic_user_interface/index.html @@ -0,0 +1,75 @@ +--- +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/utilisation_d_url_pour_la_propri\303\251t\303\251_cursor/index.html" "b/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propri\303\251t\303\251_cursor/index.html" new file mode 100644 index 0000000000..69b0043c13 --- /dev/null +++ "b/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propri\303\251t\303\251_cursor/index.html" @@ -0,0 +1,104 @@ +--- +title: Utilisation d'URL pour la propriété cursor +slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor +tags: + - CSS + - Débutant + - Guide +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +
{{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/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" new file mode 100644 index 0000000000..45945b3040 --- /dev/null +++ "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" @@ -0,0 +1,77 @@ +--- +title: 'L''alignement des boîtes pour les dispositions : en bloc, absolue, en tableau' +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables +--- +
{{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/alignement_bo\303\256tes_disposition_colonnes/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" new file mode 100644 index 0000000000..36bee5640e --- /dev/null +++ "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" @@ -0,0 +1,51 @@ +--- +title: L'alignement des boîtes avec une disposition en colonnes +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout +--- +
{{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/alignement_bo\303\256tes_disposition_flexbox/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" new file mode 100644 index 0000000000..8acebc248d --- /dev/null +++ "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" @@ -0,0 +1,119 @@ +--- +title: L'alignement des boîtes avec Flexbox +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox +tags: + - CSS + - Guide + - flexbox +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_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/alignement_bo\303\256tes_disposition_grille/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" new file mode 100644 index 0000000000..4adf375ac4 --- /dev/null +++ "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" @@ -0,0 +1,119 @@ +--- +title: L'alignement des boîtes avec une grille CSS +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille +tags: + - CSS + - CSS Grid + - Grilles CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout +--- +
{{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("grid-row-gap")}}
    • +
  • {{cssxref("grid-column-gap")}}
    • +
  • {{cssxref("grid-gap")}}
    • +
+ +

La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("grid-gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification Box Alignment et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.

+ +

À 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/index.html b/files/fr/web/css/css_box_alignment/index.html new file mode 100644 index 0000000000..e0787aca03 --- /dev/null +++ b/files/fr/web/css/css_box_alignment/index.html @@ -0,0 +1,249 @@ +--- +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("grid-gap")}} en plus de la propriété {{cssxref("gap")}}. Les propriétés d'espacement, initialement définies pour la disposition en grille, étaient préfixées par grid- et certains navigateurs ne prennent encore en charge que ces versions préfixées :

+ +
    +
  • {{cssxref("grid-row-gap")}}
    • +
  • {{cssxref("grid-column-gap")}}
    • +
  • {{cssxref("grid-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_color/index.html b/files/fr/web/css/css_color/index.html new file mode 100644 index 0000000000..1ac8eca152 --- /dev/null +++ b/files/fr/web/css/css_color/index.html @@ -0,0 +1,121 @@ +--- +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_columns/concepts_base_multi-colonnes/index.html b/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html new file mode 100644 index 0000000000..2032e1c2c6 --- /dev/null +++ b/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html @@ -0,0 +1,92 @@ +--- +title: Concepts de base pour la disposition multi-colonnes +slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +--- +
{{CSSRef}}
+ +

La disposition sur plusieurs colonnes (« Multiple-column Layout » ou « multicol » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.

+ +

Concepts et terminologie

+ +

La disposition multi-colonnes se distinguent des autres dispositions CSS car elle fragmente le contenu, y compris les éléments descendants, en colonnes. Cela se produira de façon analogue en fragmentant sur des pages avec le module de spécification CSS Paged Media.

+ +

Les propriétés définies dans cette spécification sont :

+ +
    +
  • {{cssxref("column-width")}}
    • +
  • {{cssxref("column-count")}}
    • +
  • {{cssxref("columns")}}
    • +
  • {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("column-rule-style")}}
    • +
  • {{cssxref("column-rule-width")}}
    • +
  • {{cssxref("column-rule")}}
    • +
  • {{cssxref("column-span")}}
    • +
  • {{cssxref("column-fill")}}
    • +
  • {{cssxref("column-gap")}}
    • +
+ +

En ajoutant column-count ou column-width à un élément, on le transforme en conteneur multi-colonnes. Les colonnes sont des boîtes anonymes et sont décrites comme des « boîtes de colonne » dans la spécification.

+ +

Definir des colonnes

+ +

Afin de créer un conteneur multi-colonnes, il est nécessaire d'utiliser au moins une propriété column-* (column-count ou column-width).

+ +

La propriété column-count

+ +

La propriété column-count définit le nombre de colonnes sur lesquelles on veut afficher le contenu. Le navigateur affectera l'espace nécessaire à chaque boîte de colonne afin d'en créer le nombre indiqué.

+ +

Dans l'exemple qui suit, on utilise la propriété column-count afin de créer trois colonnes au sein de l'élément .container. Le contenu, y compris l'élément fils de .container est alors divisé en trois colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

+ +

Dans l'exemple qui précède, le contenu est intégré dans des paragraphes avec une mise en forme par défaut. Aussi, il y a une marge au dessus de chaque paragraphe. On peut voir comment cette marge décale la première ligne de texte vers le bas. Cela se produit car un conteneur multi-colonnes crée un nouveau contexte de formatage de bloc, ce qui signifie que les marges des éléments fils ne fusionnent pas avec les marges du conteneur.

+ +

La propriété column-width

+ +

La propriété column-width est utilisé afin de définir la largeur optimale pour chaque boîte de colonne. Si on déclare une valeur pour column-width, le navigateur calculera combien de colonnes de cette taille peuvent être intégrées puis répartira l'espace supplémentaire équitablement entre les colonnes. Aussi mieux vaut-il voir column-width comme une largeur minimale plutôt que comme une largeur exacte, l'espace restant étant rajouté ensuite.

+ +

Il existe un seul cas où la boîte de colonne peut être plus petite que column-width : lorsqu'il n'y a qu'une seule colonne et que l'espace disponible est inférieur à column-width.

+ +

Dans l'exemple qui suit, on utilise la propriété column-width avec une valeur de 200px et on obtient donc autant de colonnes de 200 pixels que possible avec l'espace restant partagé équitablement entre les différentes colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}

+ +

Utiliser column-count et column-width

+ +

Si on définit les deux propriétés pour un conteneur multi-colonnes, column-count agira comme un maximum pour le nombre de colonnes. Le comportement décrit avant pour column-width aura bien lieu, jusqu'à ce que le nombre de colonnes décrit par column-count soit atteint. Ensuite, aucune autre colonne ne sera ajoutée et l'espace restant sera réparti entre les colonnes existantes (et ce même si l'espace restant permettrait de rajouter une ou plusieurs colonnes de largeur column-width).

+ +

Lorsqu'on utilise les deux propriétés ensemble, on peut obtenir un nombre de colonnes réel inférieur à la valeur fournie avec column-count.

+ +

Dans l'exemple suivant, on utilise column-width avec une valeur de 200px et column-count avec une valeur de 2. S'il y a de l'espace pour plus de deux colonnes, on aura uniquement deux colonnes. S'il n'y a pas assez d'espace pour deux colonnes de 200 pixels, il n'y en aura qu'une.

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}

+ +

La propriété raccourcie columns

+ +

La propriété raccourcie columns peut être utilisée afin de définir à la fois column-count et column-width. Si on utilise une unité de longueur, la valeur sera utilisée pour column-width, si on utilise un entier, la valeur sera utilisée pour column-count. Les deux peuvent être définies simultanément en étant séparées d'un espace.

+ +

Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où column-count vaut 3.

+ +
.container {
+  columns: 3;
+}
+ +

Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où column-width vaut 200px.

+ +
.container {
+  columns: 200px;
+}
+ +

Enfin, ce fragment de code CSS donnera le même résultat que le troisième exemple où les deux propriétés column-count et column-width sont définies.

+ +
.container {
+  columns: 2 200px;
+}
+ +

Prochaines étapes

+ +

Dans ce guide, nous avons vu des cas d'utilisation simples avec une disposition multi-colonnes. Dans le prochain article, nous verrons comment mettre en forme chacune des colonnes.

diff --git "a/files/fr/web/css/css_columns/gestion_d\303\251passement_multi-colonnes/index.html" "b/files/fr/web/css/css_columns/gestion_d\303\251passement_multi-colonnes/index.html" new file mode 100644 index 0000000000..7dc6078442 --- /dev/null +++ "b/files/fr/web/css/css_columns/gestion_d\303\251passement_multi-colonnes/index.html" @@ -0,0 +1,49 @@ +--- +title: Gestion du dépassement en multi-colonnes +slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.

+ +

Le dépassement dans les boîtes des colonnes

+ +

On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de column-width ou à la largeur des colonnes selon le nombre indiqué avec column-count.

+ +

Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent).

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}

+ +

+ +

Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et max-width: 100% pour y parvenir.

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}

+ +

Plus de colonnes que d'espace disponible

+ +

La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ?

+ +

Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal.

+ +

Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur.

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}

+ +
+

Note : On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne).

+
+ +

Utiliser les requêtes média verticales

+ +

Lorsque les colonnes sont plus hautes que la zone d'affichage (viewport), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante.

+ +

Dans l'exemple qui suit, on utilise par exemple une requête média avec min-height pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}

+ +

Dans le dernier guide de cette série, nous verrons comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes.

diff --git "a/files/fr/web/css/css_columns/g\303\251rer_rupture_contenu_entre_colonnes/index.html" "b/files/fr/web/css/css_columns/g\303\251rer_rupture_contenu_entre_colonnes/index.html" new file mode 100644 index 0000000000..909c9bd2a5 --- /dev/null +++ "b/files/fr/web/css/css_columns/g\303\251rer_rupture_contenu_entre_colonnes/index.html" @@ -0,0 +1,72 @@ +--- +title: Gérer la rupture du contenu entre les colonnes +slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol +--- +
{{CSSRef}}
+ +

Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification CSS Fragmentation. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.

+ +

Quelques notions de bases sur la fragmentation

+ +

Le module de spécification CSS Fragmentation détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne.

+ +

Le contenu d'une boîte de colonne peut être varié et une coupure peut être malvenue à certains endroits. On préfèrerait par exemple qu'une légende ne soit pas séparée de l'image entre une colonne et la suivante. Les propriétés relatives à la fragmentation permettent de contrôler certains aspects de ces coupures.

+ +

Voici plusieurs emplacements où on peut souhaiter contrôler les ruptures :

+ +
    +
  • Les ruptures à l'intérieur des boîtes, par exemple à l'intérieur d'un élément <figure>
    • +
  • Les ruptures avant et après les boîtes
    • +
  • Les ruptures entre les lignes
    • +
+ +

Les ruptures à l'intérieur des boîtes

+ +

Pour contrôler la façon dont le contenu est coupé à l'intérieur d'une boîte, on pourra utiliser la propriété {{cssxref("break-inside")}}. Cette propriété peut prendre les valeurs suivantes :

+ +
    +
  • auto
    • +
  • avoid
    • +
  • avoid-page
    • +
  • avoid-column
    • +
  • avoid-region
    • +
+ +

Dans l'exemple qui suit, on a appliqué break-inside sur l'élément figure afin d'éviter que la légende soit séparée de l'image.

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}

+ +

Les ruptures avant et après les boîtes

+ +

Les propriétés {{cssxref("break-before")}} et {{cssxref("break-after")}} contrôlent respectivement les ruptures avant et après les éléments. Dans une disposition multi-colonnes, ces propriétés peuvent être utilisées avec les valeurs suivantes :

+ +
    +
  • auto
    • +
  • avoid
    • +
  • avoid-column
    • +
  • column
    • +
+ +

Avec l'exemple suivant, on force une rupture avant chaque élément de titre h2.

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}

+ +

Les ruptures entre les lignes

+ +

On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété  orphans contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété widows contrôle le nombre de lignes qui restent au début d'un fragment.

+ +

Les propriétés orphans et widows prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble.

+ +

Dans l'exemple ci-après, on utilise la propriété orphans pour contrôler le nombre de lignes conservées à la fin d'une colonne. Vous pouvez modifier la valeur afin de voir l'impact sur la rupture du contenu.

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}

+ +

Résultat non garanti

+ +

Si on souhaite prévenir la rupture à de nombreux endroits, le navigateur sera quand même obligé de couper le contenu entre les colonnes. D'une certaine façon, ces propriétés agissent plutôt comme des suggestions envers le moteur que comme des ordres.

+ +

De plus, la prise en charge de ces propriétés n'est pas la plus homogène possible entre les navigateurs. Vous pouvez vous référer aux tableaux de compatibilité des pages de chaque propriété pour en savoir plus. Dans la plupart des cas, mieux vaudra encore laisser gérer le système plutôt que d'avoir trop de ruptures aux endroits indésirables.

diff --git a/files/fr/web/css/css_columns/index.html b/files/fr/web/css/css_columns/index.html new file mode 100644 index 0000000000..b66e0686ea --- /dev/null +++ b/files/fr/web/css/css_columns/index.html @@ -0,0 +1,97 @@ +--- +title: Colonnes CSS +slug: Web/CSS/CSS_Columns +tags: + - Aperçu + - CSS + - CSS Multi-column Layout + - Reference +translation_of: Web/CSS/CSS_Columns +--- +
{{CSSRef}}
+ +

Les colonnes CSS (CSS Multi-column Layout en anglais) forment un module CSS qui définit le comportement d'une disposition en colonnes, qui permet de décrire comment le contenu doit être réparti entre les colonnes et qui détaille comment sont gérées les espaces et les règles entre les colonnes.

+ +

Exemple simple

+ +

Dans l'exemple qui suit, on applique la propriété {{cssxref("column-count")}}  sur l'élément qui possède la classe container. La valeur de la propriété column-count est 3, et le contenu est donc arrangé entre trois colonnes de tailles égales.

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

+ +

Liens avec le module de spécification CSS Fragmentation

+ +

La disposition en colonnes est fortement liée aux média paginés pour lesquels chaque colonne devient un fragment (de la même façon qu'une page imprimée devient un fragment d'un document). Aussi, les propriétés désormais définies dans le module de spécification CSS Fragmentation sont nécessaires afin de contrôler la façon dont le contenu est scindé entre les colonnes.

+ +

Référence

+ +

Propriétés relatives à la disposition en colonnes

+ +
+
    +
  • {{cssxref("column-count")}}
    • +
  • {{cssxref("column-fill")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("column-rule")}}
    • +
  • {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("column-rule-style")}}
    • +
  • {{cssxref("column-rule-width")}}
    • +
  • {{cssxref("column-span")}}
    • +
  • {{cssxref("column-width")}}
    • +
  • {{cssxref("columns")}}
    • +
+
+ +

Propriétés relatives à la fragmentation

+ +
+
    +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-inside")}}
    • +
  • {{cssxref("orphans")}}
    • +
  • {{cssxref("widows")}}
    • +
+
+ +

Guides

+ +
+
Concepts de base relatifs à la disposition en colonnes
+
Un aperçu du module de spécification CSS pour la disposition avec plusieurs colonnes.
+
Mettre en forme les colonnes
+
Comment utiliser les règles liées aux colonnes et gérer l'espace entre les colonnes.
+
Équilibrer le remplissement des colonnes
+
Comment répartir un élément sur plusieurs colonnes et comment contrôler la façon dont les colonnes sont remplies.
+
Gérer le dépassement
+
Comprendre ce qui se produit quand un élément dépasse de la colonne à laquelle il appartient et ce qui se produit lorsqu'il y a trop de contenu pour un conteneur en colonnes.
+
Gérer la fragmentation du contenu en multi-colonnes
+
Une introduction au module de spécification CSS Fragmentation et à la façon dont le contenu est coupé entre les colonnes.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
+ +

Voir aussi

+ +

Les autres modules liées aux dispositions possibles en CSS :

+ + diff --git a/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html b/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html new file mode 100644 index 0000000000..0689060daf --- /dev/null +++ b/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html @@ -0,0 +1,48 @@ +--- +title: Mettre en forme les colonnes +slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes +tags: + - CSS + - CSS Multi-column Layout + - Guide +translation_of: Web/CSS/CSS_Columns/Styling_Columns +--- +
{{CSSRef}}
+ +

Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.

+ +

Peut-on mettre en forme les boîtes des colonnes ?

+ +

Malheureusement, ce n'est pas possible actuellement. Il est impossible de cibler les boîtes anonymes des colonnes de quelque façon que ce soit. On ne peut donc pas changer la couleur d'arrière-plan d'une colonne donnée ou agrandir une colonne plus qu'une autre. De futures versions du module de spécification permettront peut-être de réaliser cela un jour mais nous devons pour le moment nous cantonner à paramétrer l'espacement entre les colonnes et à mettre en forme les lignes séparatrices entre les colonnes.

+ +

L'espaceement : la propriété column-gap

+ +

L'espacement entre les colonnes est contrôlé par la propriété column-gap. Cette propriété était initialement définie dans le module de spécification Multi-column Layout mais est désormais définie dans le module de spécification Box Alignment (dont le but est d'unifier la gestion des espacements entre les boîtes, que ce soit pour les colonnes ou pour d'autres types de disposition telles que les grilles CSS).

+ +

Dans une disposition multi-colonne, la valeur initiale de la propriété column-gap est 1em. Cela signifie que les colonnes ne se touchent pas les unes les autres. Pour les autres méthodes de disposition, la valeur initiale de column-gap est 0. Le mot-clé normal est une valeur qui permet d'obtenir un écart de 1em.

+ +

Il est possible de modifier l'espacement en utilisant n'importe quelle unité de longueur pour column-gap. Dans l'exemple qui suit, on a ainsi paramétré column-gap avec la valeur 40px.

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}}

+ +

Les valeurs autorisées pour column-gap sont de type <length-percentage>, cela signifie que les pourcentages sont également autorisés. Lorsque de telles valeurs sont utilisées, elles sont calculées relativement à la largeur du conteneur multi-colonnes.

+ +

Créer un délimiteur entre les colonnes : column-rule

+ +

La spécification définit les propriétés column-rule-width, column-rule-style and column-rule-color et fournit une propriété raccourcie column-rule. Ces propriétés fonctionnent de la même façon que les propriétés relatives à la bordure. Toute valeur valide pour border-style pourra être utilisée pour column-rule-style.

+ +

Ces propriétés sont appliquées à l'élément qui est le conteneur multi-colonnes. Aussi, toutes les colonnes disposeront du même délimiteur. Les lignes sont uniquement dessinées entre les colonnes et pas sur les bords extérieurs. Les lignes sont également uniquement dessinées entre les colonnes qui ont du contenu.

+ +

Dans le prochain exemple, on a ajouté une ligne en pointillée, épaisse de 5 pixels et dont la couleur est rebeccapurple, sans utiliser la propriété raccourcie.

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}}

+ +

On notera que la ligne n'occupe pas d'espace supplémentaire. Autrement dit, une ligne plus épaisse ne « repoussera » pas les colonnes de part et d'autre. La ligne est superposée sur l'espace occupé par l'espacement entre les colonnes.

+ +

Dans le prochain exemple, on utilise une ligne très large de 40 pixels et un espacement qui mesure uniquement 10 pixels. On peut alors voir que la ligne est dessinée sous le contenu des colonnes. Pour avoir un espace de chaque côté de la ligne, il faut avoir un espacement supérieur à 40 pixels.

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}}

+ +

Résumé

+ +

Voici comment mettre en forme les colonnes avec les contraintes actuelles. Dans le prochain guide, nous verrons comment propager les éléments du conteneur sur l'ensemble des colonnes.

diff --git "a/files/fr/web/css/css_columns/r\303\251partir_entre_les_colonnes/index.html" "b/files/fr/web/css/css_columns/r\303\251partir_entre_les_colonnes/index.html" new file mode 100644 index 0000000000..d1116ebd7d --- /dev/null +++ "b/files/fr/web/css/css_columns/r\303\251partir_entre_les_colonnes/index.html" @@ -0,0 +1,63 @@ +--- +title: Répartir et équilibrer le contenu entre les colonnes +slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Spanning_Columns +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.

+ +
+

Note : Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés.

+
+ +

Étendre sur plusieurs colonnes

+ +

Afin qu'un élément s'étende sur plusieurs colonnes, on peut utiliser la propriété {{cssxref("column-span")}} avec la valeur all. Ainsi, l'élément concerné s'étendra sur l'ensemble des colonnes.

+ +

N'importe quel élément descendant du conteneur multi-colonnes peut être étendu de cette façon, que ce soit un titre qui est un élément fils direct ou un titre contenu dans une section contenue dans le conteneur.

+ +

Dans l'exemple qui suit, on a column-span: all appliqué sur l'élément h2 qui s'étend ainsi sur toutes les colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}

+ +

Dans ce deuxième exemple, le titre est à l'intérieur de l'élément {{HTMLElement("article")}} mais le contenu est bien réparti comme voulu.

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}

+ +

Lorsqu'un élément est étendu, il brise le flux des colonnes et un nouvel ensemble de boîtes de colonnes sont créées. Ce n'est pas le contenu qui « reprend » sous l'élément étendu.

+ +

Les limites de column-span

+ +

Avec la spécification de niveau 1, seules deux valeurs sont autorisées pour column-span : none qui est la valeur initiale et qui indique que l'élément ne s'étendra pas (il restera sur une colonne) et all qui indiquera que l'élément s'étendra sur l'ensemble des colonnes. Ainsi, on ne pourra pas étendre spécifiquement un élément sur deux ou trois colonnes.

+ +

Quelques points d'attention

+ +

Si l'élément qui s'étend est à l'intérieur d'un élément qui possède des marges, du remplissage et une bordure ou une couleur d'arrière-plan, on pourra avoir l'élément qui s'étend et qui recouvre le reste. Aussi, attention à bien gérer ce cas lorsqu'on étend un élément sur plusieurs colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}

+ +

De plus, si un élément qui s'étend sur les colonnes se retrouve plus loin dans le contenu, on peut avoir un comportement hasardeux s'il n'y a pas assez de contenu après l'élément étendu pour créer d'autres colonnes. Aussi, mieux vaudra utiliser column-span avec précaution pour éviter ces effets indésirables.

+ +

Équilibrer et remplir les colonnes

+ +

Lorsque toutes les colonnes possèdent environ la même quantité de contenu, on parle d'un ensemble équilibré. On pourra jouer sur le remplissage et l'équilibrage des colonnes lorsque la quantité de contenu est inférieure à la quantité d'espace fournie, notamment lorsque le conteneur a une hauteur donnée.

+ +

La valeur initiale de la propriété {{cssxref("column-fill")}}, dans une disposition multi-colonnes, est balance. Cette valeur signifie que les colonnes doivent être aussi équilibrées que possible. Pour les contextes fragmentés tels que les médias paginés, seul le dernier fragment est équilibré. Cela signifie que c'est sur la dernière page du document que l'ensemble des colonnes sera équilibré.

+ +

La valeur balance-all permet quant à elle d'avoir des colonnes équilibrées sur l'ensemble des fragments (et pas uniquement sur le dernier).

+ +

Dans cet exemple, on a des colonnes qui contiennent une image et du texte qui sont équilibrées. L'image ne peut pas être divisée et est placée dans la première colonne puis les colonnes suivantes contiennent du texte sur la même hauteur que l'image.

+ +

{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}

+ +

auto est une autre valeur qui peut être utilisée avec column-fill. Avec cette valeur, plutôt que d'équilibrer les colonnes, celles-ci sont remplies les unes après les autres. Dans ce dernier exemple, on a modifié column-fill pour utiliser auto et les colonnes sont désormais remplies dans l'ordre en suivant la hauteur du conteneur multi-colonnes. On a ainsi quelques colonnes vides à la fin.

+ +

{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}

+ +

On notera que l'équilibrage des colonnes n'est pas pris en charge de façon homogène par les navigateurs. Aussi, si vous l'utilisez, vérifiez vos résultats dans les différents navigateurs pour contrôler l'effet obtenu. Vous pouvez aussi consulter les tableaux de compatibilité des navigateurs à la fin des pages de chacune des propriétés.

+ +

Dans le prochain guide, nous verrons comment gérer le dépassement au sein d'un conteneur multi-colonnes, à l'intérieur des colonnes et lorsqu'il y a plus de contenu que le conteneur peut en avoir.

diff --git a/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html b/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html new file mode 100644 index 0000000000..897ac5c989 --- /dev/null +++ b/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html @@ -0,0 +1,201 @@ +--- +title: Utiliser une disposition multi-colonnes +slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +
{{CSSRef}}
+ +

La disposition multi-colonnes étend le mode de disposition en bloc et permet de définir simplement plusieurs colonnes de texte. Lorsqu'on lit un texte, si les lignes sont trop longues, il faudra trop de temps aux yeux pour revenir au début de la ligne et passer à la ligne suivante : on perdra alors la ligne sur laquelle on était. Ainsi, pour utiliser efficacement l'espace fourni par un grand écran, on préfèrera utiliser des colonnes de largeur fixe, disposée côte à côte, à la façon d'un journal.

+ +

Utiliser les colonnes CSS

+ +

Le nombre de colonnes et leur largeur

+ +

Deux propriétés CSS permettent de définir quand et comment les colonnes apparaissent : {{cssxref("column-count")}} et {{cssxref("column-width")}}.

+ +

On utilisera la propriété column-count pour définir le nombre de colonnes qu'on souhaite avoir.

+ +

Utilisation de column-count

+ +
CSS
+ +
#col {
+  column-count: 2;
+}
+
+ +
HTML
+ +
+
<div id="col">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua.
+  </p>
+  <p>
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat.
+  </p>
+  <p>
+    Duis aute irure dolor in reprehenderit in voluptate velit
+    esse cillum dolore eu fugiat nulla pariatur.
+  </p>
+  <p>
+    Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</div>
+
+
+ +
Résultat
+ +

{{EmbedLiveSample('Utilisation_de_column-count','100%')}}

+ +

Si on utilise un navigateur qui permet d'utiliser ce module CSS, on aura un contenu affiché sur 2 colonnes.

+ +

La propriété column-width permet quant à elle de définir la largeur minimale d'une colonne. Si la propriété column-count n'est pas utilisée, le navigateur créera automatiquement autant de colonnes que le permet la largeur disponible.

+ +

Utilisation de column-width

+ +
CSS
+ +
+
#wid {
+  column-width: 100px;
+}
+
+
+ +
HTML
+ +
+
<div id="wid">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+
+ +
Résultat
+ +

{{EmbedLiveSample('Utilisation_de_column-width','100%')}}

+ +

En utilisant une disposition multi-colonnes, le contenu est automatiquement réparti entre les colonnes.

+ +

La propriété raccourcie columns

+ +

La plupart du temps, on souhaitera utiliser l'une de ces deux propriétés ({{cssxref("column-count")}} ou {{cssxref("column-width")}}). Comme les valeurs de ces deux propriétés ne se « chevauchent » pas, on pourra utiliser la propriété raccourcie {{cssxref("columns")}} qui synthétisent ces deux propriétés.

+ +

Ainsi, la déclaration column-width:12em pourra être remplacée de la façon suivante :

+ +
CSS
+ +
+
#col_short {
+  columns: 12em;
+}
+
+
+ +
HTML
+ +
+
<div id="col_short">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+
+ +
Résultat
+ +

{{EmbedLiveSample('La_propriété_raccourcie_columns','100%')}}

+ +

De même, on pourra remplacer la déclaration column-count: 4 avec ce bloc :

+ +
+
#columns_4{
+  columns: 4;
+}
+
+
+ +

Enfin, pour synthétiser les instructions column-width:8em et column-count:12, on pourra utiliser les instructions suivantes :

+ +
+
#columns_12 {
+  columns: 12 8em;
+}
+
+
+ +

Équilibrage de la hauteur

+ +

La spécification CSS pour ce module indique que la hauteur des colonnes doit être équilibrée. Autrement dit, le navigateur doit définir la hauteur des différentes colonnes afin que la hauteur du contenu dans chaque colonne soit environ égale.

+ +

Toutefois, dans certaines situations, on veut pouvoir définir la hauteur maximale des colonnes de façon explicite. Ainsi, lorsque la hauteur est contrainte, on peut utiliser les propriétés {{cssxref("height")}} ou {{cssxref("max-height")}} afin que chaque colonne mesure au plus la taille indiquée avant qu'une nouvelle colonne soit créée.

+ +

L'espacement entre les colonnes

+ +

Entre chaque colonne, on aura un espace horizontal. La valeur recommandée (et souvent utilisée par défaut) est 1em. Cette taille peut être ajustée si nécessaire en utilisant la propriété {{cssxref("column-gap")}} sur le bloc découpé en colonnes.

+ +

Utilisation de column-gap

+ +
CSS
+ +
#column_gap {
+  column-count: 5;
+  column-gap: 2em;
+}
+ +
HTML
+ +
+
<div id="column_gap">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+
+ +
Résultat
+ +

{{EmbedLiveSample('Utilisation_de_column-gap','100%')}}

+ +

Amélioration progressive

+ +

Les propriétés liées à la disposition multi-colonnes seront simplement ignorées par les navigateurs qui ne prennent pas en charge cette fonctionnalité. On peut donc simplement créer une disposition qui n'utilisera qu'une colonne pour les anciens navigateurs et qui tirera parti de cette fonctionnalité dans les navigateurs plus récents.

+ +

Conclusion

+ +

Les colonnes CSS permettent aux développeurs web de mieux utiliser l'espace disponible à l'écran. Avec un peu d'imagination et en connaissant cette fonctionnalité d'équilibrage vertical automatique, on peut trouver de nombreux usages pour cette fonctionnalité.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_conditional_rules/index.html b/files/fr/web/css/css_conditional_rules/index.html new file mode 100644 index 0000000000..2c42f2f816 --- /dev/null +++ b/files/fr/web/css/css_conditional_rules/index.html @@ -0,0 +1,71 @@ +--- +title: CSS Conditional Rules +slug: Web/CSS/CSS_Conditional_Rules +tags: + - Aperçu + - CSS + - CSS Conditional Rules + - Reference +translation_of: Web/CSS/CSS_Conditional_Rules +--- +
{{CSSRef}}
+ +

CSS Conditional Rules (ou règles conditionnelles CSS) est un module CSS qui permet de définir un ensemble de règles qui ne s'appliqueront qu'en fonction des capacités du processeur ou du document auquel la feuille de styles est appliquée.

+ +

Référence

+ +

Règles @

+ +
+
    +
  • {{cssxref("@document")}}
    • +
  • {{cssxref("@media")}}
    • +
  • {{cssxref("@supports")}}
    • +
  • {{cssxref("@import")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

@document

+ + + +

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

+ +

@import

+ + + +

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

+ +

@media

+ + + +

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

+ +

@supports

+ + + +

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

diff --git "a/files/fr/web/css/css_conditional_rules/utiliser_requ\303\252tes_fonctionnalit\303\251_(feature_queries)/index.html" "b/files/fr/web/css/css_conditional_rules/utiliser_requ\303\252tes_fonctionnalit\303\251_(feature_queries)/index.html" new file mode 100644 index 0000000000..811f5c4b22 --- /dev/null +++ "b/files/fr/web/css/css_conditional_rules/utiliser_requ\303\252tes_fonctionnalit\303\251_(feature_queries)/index.html" @@ -0,0 +1,112 @@ +--- +title: Utiliser les requêtes de fonctionnalité (feature queries) +slug: >- + Web/CSS/CSS_Conditional_Rules/Utiliser_requêtes_fonctionnalité_(feature_queries) +tags: + - Amélioration progressive + - CSS + - Guide +translation_of: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries +--- +
{{CSSRef}}
+ +

Les requêtes de fonctionnalité (ou feature queries) sont créées à l'aide de la règle @supports et permettent aux développeurs web de tester la prise en charge d'une fonctionnalité donnée par le navigateur puis de fournir le code CSS qui sera appliqué selon le résultat de ce test. Dans ce guide, nous verrons comment gérer l'amélioration progressive grâce à l'aide des requêtes de fonctionnalité.

+ +

Syntaxe

+ +

Les requêtes de fonctionnalité CSS s'inscrivent dans le module de spécification CSS Conditional Rules qui décrit également le fonctionnement de la règle @media. Vous pourrez ici voir que les requêtes de fonctionnalité fonctionnent de façon semblable aux requêtes de média. Pour les requêtes de média, on teste une caractéristique de l'environnement dans lequel la page web est affichée/exécutée tandis que pour les requêtes de fonctionnalité, on teste la prise en charge d'une fonctionnalité CSS dans le navigateur.

+ +

Une requête de fonctionnalité commence par une règle @supports, suivi du nom de la propriété et de la valeur qu'on souhaite tester. Il n'est pas possible de tester une propriété seule (ex. display) mais uniquement un couple nom/valeur :

+ +
@supports (propriété: valeur) {
+  Règles CSS à appliquer
+}
+ +

Si, par exemple, on souhaite vérifier qu'un navigateur prend en charge la propriété row-gap, on écrira la requête suivant. Dans la plupart des cas, peu importe la valeur utilisée avec cette propriété, on souhaite simplement la prise en charge de cette propriété et on peut donc utiliser n'importe quelle valeur valide pour ça.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}}

+ +

La partie dédiée à la valeur de la propriété permet de tester les cas où une nouvelle valeur est spécifiée pour une propriété donnée. Le cas de display est particulièrement intéressant. Tous les navigateurs prennent en charge display (display: block faisait partie de CSS1) mais les valeurs display: flex et display: grid ont été ajoutées plus récemment. Les propriétés CSS peuvent parfois se voir doter de nouvelles valeurs et on peut alors tester leur prise en charge avec @supports.

+ +

Tester l'absence de prise en charge d'une fonctionnalité

+ +

Il est aussi possible de tester l'absence de prise en charge d'une fonctionnalité en ajoutant le mot-clé not :

+ +
@supports not (propriété: valeur) {
+  Règles CSS à appliquer
+}
+ +

Les règles CSS contenues dans la requête suivante seront uniquement appliquées lorsque le navigateur ne prend pas en charge row-gap.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/not.html", '100%', 600)}}

+ +

Tester la prise en charge de plusieurs fonctionnalités

+ +

Si on souhaite tester la prise en charge de plusieurs fonctionnalités en même temps, on pourra les combiner avec le mot-clé and :

+ +
@supports (property1: value) and (property2: value) {
+  CSS rules to apply
+}
+ +

On peut, par exemple, vérifier que le navigateur prend en charge les formes (shapes) et grilles CSS grâce à une règle qui teste cette conjonction. La règle suivante renverra true uniquement si shape-outside: circle() et display: grid sont pris en charge par le navigateur.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}}

+ +

De la même façon, on peut utiliser le mot-clé or si on souhaite tester la prise en charge d'au moins une fonctionnalité :

+ +
@supports (property1: value) or (property2: value) {
+  CSS rules to apply
+}
+ +

Cela peut s'avérer particulièrement utile lorsqu'un préfixe est présent dans le nom d'une propriété (on peut alors tester la prise en charge de la propriété standard et des versions préfixées).

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}}

+ +

Limites des requêtes de fonctionnalité

+ +

Une règle @supports ne permet de vérifier qu'un navigateur peut interpréter une ou plusieurs paires de propriétés/valeurs. Si cette paire est comprise par le navigateur, celui-ci renverra une réponse positive. Une telle requête ne permet pas d'indiquer que la fonctionnalité est complètement prise en charge, sans bug…

+ +

De plus, de telles requêtes ne permettent pas de tester une implémentation partielle. Prenons l'exemple de la propriété gap, à l'heure actuelle (novembre 2019) : tous les navigateurs prennent en charge gap avec les grilles CSS et seul Firefox prend en charge gap avec les boîtes flexibles (flexbox). Si on teste la propriété gap car on souhaite l'utiliser avec les boîtes flexibles, on recevra une réponse positive bien que ce ne soit pas implémenté.

+ +

Comment utiliser @supports pour l'amélioration progressive ?

+ +

Les requêtes de fonctionnalité sont un outil précieux pour améliorer un site de façon progressive. Elles permettent de fournir une solution fonctionnelle pour tous les navigateurs et d'améliorer le résultat pour les navigateurs qui prennent en charge de nouvelles fonctionnalités.

+ +

Toutefois, il existe des navigateurs pour lesquels même les requêtes de fonctionnalité/@supports ne sont pas pris en charge. Ainsi, si on souhaite utiliser les grilles CSS (qui ne sont pas prises en charge par IE11), on ne peut pas tester leur prise en charge dans IE11 car ce dernier ne permet pas d'utiliser @supports. En pratique, cela ne devrait pas poser de problème : le code CSS principal est destiné aux navigateurs les plus anciens et on ajoute le CSS plus récent dans les requêtes de fonctionnalité.

+ +

Prenons un exemple plus construit.

+ +

Imaginons qu'on veuille créer une disposition avec trois boîtes qui se suivent sur une ligne. Idéalement, on voudrait utiliser les grilles CSS. Toutefois, on voudrait aussi une disposition qui fonctionne pour les navigateurs plus anciens avec des éléments flottants. Pour commencer, on crée la disposition flottante avec le code suivante (on a alors trois colonnes).

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}}

+ +

Lorsque les navigateurs ne comprennent pas une propriété ou une valeur CSS, ils l'ignorent. On peut donc améliorer progressivement notre disposition avec les grilles CSS. Les navigateurs qui ne prennent pas en charge les grilles ignoreront la valeur grid pour la propriété display. Une fois qu'un objet flottant devient un élément de grille, son caractère flottant est retiré (voir Prendre en charge les navigateurs plus anciens) et la grille écrase alors la version flottante.

+ +

Un problème persiste cependant. La propriété width, utilisée par les objets flottants pour afficher trois colonnes, est désormais interprétée par la grille comme étant la largeur de la piste pour la colonne (et pas la largeur du conteneur comme c'était le cas pour la disposition flottante).

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step2.html", '100%', 900)}}

+ +

Il faut une façon de retirer la largeur si display: grid est pris en charge. C'est là que les requêtes de fonctionnalité montrent leur force. On peut réinitialiser width avec la valeur auto si les grilles sont prises en charge.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step3.html", '100%', 900)}}

+ +

Dans le scénario précédent, peu importe que IE11 ne prenne pas en charge les requêtes de fonctionnalité ou les grilles CSS : c'est la version flottante qui sera utilisée dans tous les cas où le navigateur ne prend pas en charge les grilles.

+ +

Une autre façon d'écrire cette solution consiste à grouper le code utilisant la grille dans une même requête de fonctionnalité.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step4.html", '100%', 900)}}

+ +

De cette façon, on a un peu plus de code mais on peut alors tester le fonctionnement par défaut en changeant simplement le nom de la valeur. Dans l'exemple qui suit, vous pouvez ainsi alterner entre les deux solutions en changeant display: grid en display: grip (une valeur invalide et donc non prise en charge).

+ +

Résumé

+ +

Les requêtes de fonctionnalité permettent d'utiliser des fonctionnalités récentes dans l'amélioration progressive de sites fonctionnels avec les anciens navigateurs. En destinant le code CSS aux navigateurs qui le prennent en charge, on ne risque pas d'interférences avec la disposition de base (comme nous avons pu le voir avec l'exemple précédent sur les grilles CSS).

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_counter_styles/index.html b/files/fr/web/css/css_counter_styles/index.html new file mode 100644 index 0000000000..b8e1d2eca2 --- /dev/null +++ b/files/fr/web/css/css_counter_styles/index.html @@ -0,0 +1,91 @@ +--- +title: CSS Counter Styles +slug: Web/CSS/CSS_Counter_Styles +tags: + - Aperçu + - CSS + - CSS Counter Styles + - Reference +translation_of: Web/CSS/CSS_Counter_Styles +--- +
{{cssref}}
+ +

CSS Counter Styles est un module CSS qui permet de définir ses propres styles pour les compteurs utilisés dans les listes numérotées.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("counter-reset")}}
    • +
+
+ +

Règles @

+ +
+
{{cssxref("@counter-style")}}
+
+
+
    +
  • {{cssxref("@counter-style/system","system")}}
    • +
  • {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
    • +
  • {{cssxref("@counter-style/negative", "negative")}}
    • +
  • {{cssxref("@counter-style/prefix", "prefix")}}
    • +
  • {{cssxref("@counter-style/suffix", "suffix")}}
    • +
  • {{cssxref("@counter-style/range", "range")}}
    • +
  • {{cssxref("@counter-style/pad", "pad")}}
    • +
  • {{cssxref("@counter-style/speak-as", "speak-as")}}
    • +
  • {{cssxref("@counter-style/fallback", "fallback")}}
    • +
+
+
+
+ +

Guides

+ +
+
Manipuler les compteurs CSS
+
Cet article décrit comment utiliser les compteurs CSS afin de numéroter des éléments HTML et de réaliser des comptages complexes.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Counter Styles')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

@counter-style

+ + + +

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

+ +

counter-increment

+ + + +

{{Compat("css.properties.counter-increment")}}

+ +

counter-reset

+ + + +

{{Compat("css.properties.counter-reset")}}

diff --git a/files/fr/web/css/css_device_adaptation/index.html b/files/fr/web/css/css_device_adaptation/index.html new file mode 100644 index 0000000000..6cc6189902 --- /dev/null +++ b/files/fr/web/css/css_device_adaptation/index.html @@ -0,0 +1,48 @@ +--- +title: CSS Device Adaptation +slug: Web/CSS/CSS_Device_Adaptation +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Device_Adaptation +--- +
{{CSSRef}}
+ +

CSS Device Adapation est un module CSS qui permet de définir les dimensions, le facteur d'agrandissement et l'orientation de la zone d'affichage (viewport).

+ +

Référence

+ +

Règles @

+ +
+
    +
  • {{cssxref("@viewport")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Device")}}{{Spec2("CSS3 Device")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

@viewport

+ + + +

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

diff --git a/files/fr/web/css/css_display/index.html b/files/fr/web/css/css_display/index.html new file mode 100644 index 0000000000..b8f91c262b --- /dev/null +++ b/files/fr/web/css/css_display/index.html @@ -0,0 +1,115 @@ +--- +title: CSS Display +slug: Web/CSS/CSS_Display +tags: + - Aperçu + - CSS + - CSS Display + - Reference +translation_of: Web/CSS/CSS_Display +--- +
{{CSSRef}}
+ +

L'affichage CSS (CSS Display) est un module CSS qui définit la façon dont l'arbre des boîtes pour la mise en forme est généré à partir de l'arbre des éléments du document et qui définit les propriétés qui le contrôlent.

+ +

Référence

+ +

Propriétés CSS

+ +
+
    +
  • {{cssxref("display")}}
    • +
+
+ +

Types de donnée CSS

+ +
+
    +
  • {{CSSxRef("<display-outside>")}}
    • +
  • {{CSSxRef("<display-inside>")}}
    • +
  • {{CSSxRef("<display-listitem>")}}
    • +
  • {{CSSxRef("<display-box>")}}
    • +
  • {{CSSxRef("<display-internal>")}}
    • +
  • {{CSSxRef("<display-legacy>")}}
    • +
+
+ +

Guides

+ +

Disposition en flux (display: block, display: inline)

+ + + +

Les boîtes flexibles (display: flex)

+ + + +

Les grilles CSS (display: grid)

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}{{Spec2('CSS3 Display')}}Ajout des valeurs run-in, flow, flow-root, contents et de la syntaxe avec plusieurs mots-clés.
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}Ajout des valeurs pour les tableaux et ajout de inline-block.
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}Spécification initiale. Valeurs de base : none, block, inline et list-item.
+ +

En plus du module de spécification CSS Display de niveau 3, d'autres modules de spécifications définissent le comportement à avoir selon les différentes valeurs de display.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.display", 10)}}

diff --git "a/files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" "b/files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" new file mode 100644 index 0000000000..2321587479 --- /dev/null +++ "b/files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" @@ -0,0 +1,218 @@ +--- +title: Aligner des éléments dans un conteneur flexible +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible +tags: + - CSS + - Flex + - Guide + - Web + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +

{{CSSRef}}

+ +

Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.

+ +

Afin de centrer notre boîte, nous allons utiliser la propriété align-items afin d'aligner l'objet sur l'axe secondaire (cross axis en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement. La propriété justify-content est quant à elle utilisée pour aligner l'objet sur l'axe principal (main axis en anglais) (ici l'axe principal est l'axe en ligne qui s'étend horizontalement).

+ +

Un élément contenant une autre boîte centrée à l'intérieur

+ +

 

+ +

Vous pouvez étudier le code de l'exemple suivant et modifier la taille du conteneur ou d'un élément imbriqué : l'élément imbriqué sera toujours centré.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

Les propriétés responsables de l'alignement

+ +

Voici les propriétés que nous étudierons dans ce guide :

+ +
    +
  • {{cssxref("justify-content")}} — contrôle l'alignement de tous les objets sur l'axe principal.
    • +
  • {{cssxref("align-items")}} — contrôle l'alignement de tous les objets sur l'axe secondaire.
    • +
  • {{cssxref("align-self")}} — contrôle l'alignement d'un objet flexible donné le long de l'axe secondaire.
    • +
  • {{cssxref("align-content")}} — contrôle l'espace entre les lignes flexibles sur l'axe secondaire.
    • +
+ +

Nous verrons également comment les marges automatiques peuvent être utilisées dans l'alignement des boîtes flexibles.

+ +
+

Note : Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : CSS Box Alignment Level 3. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.

+
+ +

L'axe secondaire (cross axis)

+ +

Les propriétés align-items et align-self permettent de gérer l'alignement des éléments flexibles sur l'axe secondaire.

+ +

Prenons un exemple simple : nous ajoutons display: flex à un conteneur qui contient trois objets. Tous s'étirent afin d'être aussi grands que le plus grand des éléments car celui-ci définit la taille du conteneur sur l'axe secondaire. Si le conteneur flexible possède une hauteur définie, les objets qu'il contient s'étireront pour atteindre cette taille, quel que soit le contenu dont ils disposent.

+ +

Trois objets dont un avec un texte plus long qui le rend plus grand que les autres

+ +

Trois objets étirés pour mesurer 200 pixels de haut

+ +

Les éléments obtiennent la même hauteur à cause de la valeur initiale de align-items qui contrôle l'alignement sur l'axe secondaire. Cette valeur initiale est stretch (qui indique que les objets du conteneur doivent être étirés sur l'axe).

+ +

Voici les valeurs disponibles pour aligner les objets :

+ +
    +
  • align-items: flex-start
    • +
  • align-items: flex-end
    • +
  • align-items: center
    • +
  • align-items: stretch
    • +
  • align-items: baseline
    • +
+ +

Dans l'exemple qui suit, la valeur d'align-items est stretch. Vous pouvez essayer les autres valeurs afin de voir comment les objets s'alignent dans le conteneur.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

+ +

Aligner un objet avec align-self

+ +

La propriété align-items définit la valeur de la propriété align-self pour l'ensemble des objets flexibles. Cela signifie qu'on peut utiliser la propriété align-self de façon explicite, sur un élément donné, afin de préciser son alignement. La propriété align-self prend en charge les mêmes valeurs que align-items ainsi qu'un mot-clé auto qui reprendra la valeur définie sur le conteneur flexible.

+ +

Dans le prochain exemple, le conteneur flexible a align-items: flex-start, ce qui signifie que les éléments sont tous alignés au début de l'axe secondaire. On utilise le sélecteur first-child afin de cibler le premier élément fils pour lequel on indique align-self: stretch ; un autre élément a été sélectionné via la classe selected et est paramétré avec align-self: center. Vous pouvez modifier la valeur de align-items ou changer les valeurs d'align-self sur les éléments afin d'observer le fonctionnement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} 

+ +

Changer d'axe principal

+ +

Jusqu'à présent, les exemples fonctionnaient avec flex-direction valant row et avec un langage dont les lignes progressent du haut vers le bas. Cela signifie que l'axe principal est une ligne horizontale et que l'axe secondaire est une ligne verticale dirigée vers le bas.

+ +

Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical..

+ +

Si on passe flex-direction à column, align-items et align-self aligneront les éléments à gauche et à droite.

+ +

Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal.

+ +

Vous pouvez manipuler cet exemple qui reprend le même code que l'exemple précédent avec la seule exception que flex-direction vaut ici column.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}

+ +

Aligner le contenu sur l'axe secondaire : align-content

+ +

Jusqu'à présent, nous avons aligné les éléments ou un élément donné dans la zone définie par le conteneur flexible. Si on a un conteneur qui s'étend / se divise sur plusieurs lignes, on pourra utiliser la propriété align-content afin de contrôler la distribution de l'espace entre les lignes. La spécification décrit cela comme le groupement des lignes flexibles.

+ +

Afin qu'align-content puisse fonctionner, il faut un conteneur dont la hauteur est supérieure à celle qui est nécessaire à l'affichage des éléments. Le moteur applique alors les règles sur l'ensemble des éléments et régit l'utilisation de l'espace restant et l'alignement de l'ensemble dans cet espace.

+ +

La propriété align-content prend les valeurs suivantes :

+ +
    +
  • align-content: flex-start
    • +
  • align-content: flex-end
    • +
  • align-content: center
    • +
  • align-content: space-between
    • +
  • align-content: space-around
    • +
  • align-content: stretch
    • +
  • align-content: space-evenly (cette valeur n'est pas définie dans le module de spécification Flexbox)
    • +
+ +

Dans l'exemple suivant, le conteneur flexible a une hauteur de 400 pixels, ce qui est supérieur à ce qui est nécessaire pour afficher le contenu. align-content vaut space-between ce qui signifie que l'espace disponible sera réparti entre les lignes flexibles dont la première commence en étant adjacente à la ligne de début et dont la dernière est adjacente à la ligne de fin de l'axe secondaire.

+ +

Vous pouvez modifier la valeur de align-content afin d'observer comment cette propriété fonctionne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

+ +

Là encore, on peut passer avec flex-direction: column afin de voir comment les propriétés se comportent sur les colonnes. Là aussi, il faut suffisamment d'espace le long de l'axe secondaire afin qu'il y ait de l'espace libre à répartir.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

+ +
+

Note : La valeur space-evenly n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.

+
+ +

Vous pouvez consulter la documentation sur {{cssxref("align-content")}} pour en savoir plus, notamment sur la compatibilité des navigateurs.

+ +

Aligner le contenu sur l'axe principal

+ +

Nous avons pu voir comment fonctionne l'alignement sur l'axe secondaire. Concentrons-nous désormais sur l'alignement relatif à l'axe principal. Ici, une seule propriété est disponible : justify-content. En effet, sur cet axe, les éléments sont gérés comme un seul groupe. Avec, justify-content on contrôle comment l'espace disponible est réparti s'il y a plus d'espace que nécessaire pour afficher les objets.

+ +

Dans l'exemple initial avec display: flex appliqué au conteneur, les éléments formaient une ligne qui commençait au début du conteneur. Cela provient de la valeur initiale de justify-content qui est flex-start. Avec cette valeur, tout l'espace disponible est placé à la fin, après les éléments.

+ +

Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments.

+ +

La propriété justify-content prend en charge les mêmes valeurs que align-content.

+ +
    +
  • justify-content: flex-start
    • +
  • justify-content: flex-end
    • +
  • justify-content: center
    • +
  • justify-content: space-between
    • +
  • justify-content: space-around
    • +
  • justify-content: stretch
    • +
  • justify-content: space-evenly (ce mot-clé n'est pas défini dans la spécification CSS sur les boîtes flexibles)
    • +
+ +

Dans le prochain exemple, justify-content vaut space-between. L'espace disponible après l'affichage des éléments est alors distribué entre les éléments et le premier élément est adjacent à la ligne de début et le dernier est adjacent à la ligne de fin.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} 

+ +

Si l'axe principal suit la direction de bloc (orthogonale au sens d'écriture) car flex-direction est paramétré avec la valeur column, justify-content distribuera l'espace selon cet axe tant que l'espace du conteneur flexible est suffisant.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}

+ +

L'alignement et les modes d'écriture

+ +

Rappelons ici qu'avec ces méthodes d'alignement, flex-start et flex-end respectent le mode d'écriture utilisé. Si on utilise justify-content avec la valeur start pour un contenu écrit en anglais (un mode d'écriture de la gauche vers la droite), les éléments commenceront à gauche du conteneur.

+ +

Trois éléments alignés sur la gauche

+ +

Mais si le contenu est écrit en arabe (un mode d'écriture de la droite vers la gauche), les éléments démarreront à la droite du conteneur.

+ +

Trois éléments alignés sur la droite

+ +

Dans l'exemple qui suit, on indique explicitement la valeur rtl pour la propriété display afin de forcer un mode d'écriture de droite à gauche. Vous pouvez retirer cette déclaration ou modifier la valeur de justify-content afin de voir comment les boîtes flexibles s'organisent lorsque le début de la ligne est à droite.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

+ +

L'alignement et la propriété flex-direction

+ +

La ligne de début sera également modifiée si on change la valeur de la propriété flex-direction, par exemple en utilisant row-reverse à la place de row.

+ +

Dans le prochain exemple, on utilise flex-direction: row-reverse et justify-content: flex-end. Pour une langue écrite de gauche à droite, les éléments seront regroupés à gauche. Si vous modifiez les valeurs et passez de flex-direction: row-reverse à flex-direction: row. Vous verrez que les éléments sont désormais groupés à droite.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

+ +

Si cela peut paraître déroutant, la règle principale à mémoriser est que, par défaut, si on ne change rien, les éléments flexibles sont organisés dans la direction naturelle de la langue dans laquelle le document est écrit. flex-start correspondra donc à la ligne de début depuis laquelle une phrase démarrerait.

+ +

Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite

+ +

On peut changer l'axe avec flex-direction: column. Dans ce cas, flex-start correspondra à l'emplacement du début du premier paragraphe d'un texte.

+ +

Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas

+ +

Si on utilise flex-direction avec une des valeurs inversée, les éléments seront organisés dans l'ordre inverse (à l'opposé de la disposition naturelle de la langue utilisée pour le document). flex-start correspondra alors à la « fin » usuelle d'une ligne de texte sur une disposition en ligne et au dernier paragraphe sur une disposition organisée sur un axe principal vertical.

+ +

Un diagramme illustrant la ligne de début à droite et celle de fin à gauche

+ +

Un diagramme illustrant la ligne de début en bas et celle de fin en haut

+ +

Utiliser les marges automatiques pour aligner sur l'axe principal

+ +

Il n'existe pas de propriété justify-items ou justify-self qui permettent d'aligner un élément donné parmi le groupe d'éléments flexibles organisés sur l'axe principal. Toutefois, on peut obtenir un alignement individuel pour séparer un élément ou un groupe d'éléments grâce aux marges automatiques et aux boîtes flexibles.

+ +

Un motif fréquent est l'organisation d'une barre de navigation où certains éléments clés sont situés à droite alors qu'un groupe principal est présent à gauche. On pourrait alors penser qu'il s'agit d'un cas d'utilisation pour une propriété comme justify-self… Cependant, si on regarde l'image qui suit et qu'on était capable de modifier justify-self sur l'élément d, cela changerait également l'alignement de l'élément e qui suit, ce qui pourrait ou non être voulu.

+ +

Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite.

+ +

Plutôt que cela, on peut cibler le quatrième élément et le séparer des trois premiers en utilisant margin-left: auto. Une marge automatique consommera tout l'espace disponible sur l'axe correspondant.

+ +

Dans l'exemple qui suit, on a plusieurs éléments flexibles organisés sur une ligne avec les valeurs de base pour les propriétés liées aux boîtes flexibles. La classe push possède la déclaration margin-left: auto. Vous pouvez observer l'effet obtenu en retirant cette classe ou en l'appliquant à un autre élément.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

+ +

Les prochaines fonctionnalités pour l'alignement et les boîtes flexibles

+ +

Au début de cet article, nous avons vu que les propriétés d'alignement actuellement définies dans le module de spécification CSS de niveau 1 pour les boîtes flexibles étaient également définies dans le module de spécification de niveau 3 pour l'alignement des boîtes. Ce module pourrait voir l'apparition de nouvelles valeurs pour ces propriétés comme le montre d'ailleurs l'introduction de la valeur space-evenly pour les propriétés align-content et justify-content.

+ +

Le module de spécification sur l'alignement des boîtes inclut également d'autres méthodes pour créer des espaces entre les objets telles que les propriétés column-gap et row-gap décrites dans le module de grille CSS (CSS Grid). L'inclusion de ces propriétés dans le module d'alignement des boîtes signifie que nous pourrons plus tard les utiliser dans les dispositions avec les boîtes flexibles. Cela signifie qu'il ne sera plus nécessaire d'utiliser des marges afin d'espacer des éléments flexibles. Firefox 63 devrait implémenter les propriétés gap pour les dispositions flexibles.

+ +

Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (CSS Grid Layout). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille grâce à cet article. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : Box Alignment Cheatsheet.

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" "b/files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" new file mode 100644 index 0000000000..f6baae1432 --- /dev/null +++ "b/files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" @@ -0,0 +1,187 @@ +--- +title: Utiliser les boîtes flexibles pour les applications web +slug: Web/CSS/CSS_Flexible_Box_Layout/Boîtes_flexibles_pour_applications_web +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +
{{CSSRef}}
+ +

Les boîtes flexibles permettent de concevoir des dispositions qui s'appliquent mieux à des environnements mobiles et de bureau et qui peuvent servir aux applications web. Fini d'utiliser des éléments {{HTMLElement("div")}} flottants, le positionnement absolu et des bidouilles JavaScript. Quelques lignes CSS permettent de construire des dispositions verticales et horizontales, flexibles. Voici quelques exemples de cas d'utilisation :

+ +
    +
  • Centrer un élément au milieu d'une page
    • +
  • Définir des conteneurs qui s'organisent verticalement, l'un après l'autre
    • +
  • Créer une ligne de boutons ou d'autres éléments qui se condensent verticalement sur les écrans de petite taille.
    • +
+ +

Cet article ne couvre que l'utilisation des propriétés relatives aux boîtes flexibles non préfixées et standard. Pour plus d'informations sur les préfixes et les anciens navigateurs, se référer au guide plus générique sur la manipulation des boîtes flexibles en CSS.

+ +

Les bases

+ +

Pour qu'un élément flotte dans une boîte flexible, on peut utiliser la propriété {{cssxref("display")}} avec la valeur flex puis définir {{cssxref("flex-flow")}} avec la valeur row (si on souhaite que les éléments s'organisent horizontalement) ou avec la valeur column (si on souhaite que les éléments s'empilent verticalement). Si on veut avoir une boîte flexible horizontale et que les éléments « passent à la ligne » verticalement, on pourra définir la propriété wrap.

+ +

Ensuite, pour chaque élément qui s'inscrit dans le conteneur flexible, on pourra définir la propriété {{cssxref("flex")}}. Généralement, on utilisera les valeurs suivantes :

+ +
    +
  • Si on veut qu'un élément n'occupe que la place qui lui est allouée (ex. un bouton), on pourra utiliser flex: none that expands to 0 0 auto.
    • +
  • Si on veut définir la taille explicite d'un élément, on pourra utiliser flex: 0 0 taille. Par exemple : flex 0 0 60px.
    • +
  • Si on veut qu'un élément occupe tout l'espace disponible de façon équitable avec ses voisins, on pourra utiliser flex: auto. It expands to 1 1 auto.
    • +
+ +

Il existe bien entendu d'autres possibilités en dehors de cas d'usage simples. Voici quelques exemples d'application.

+ +

Centrer un élément

+ +

Pour ce cas, le plus simple consiste à créer deux boîtes flexibles, l'une dans l'autre. Chaque boîte flexible aura trois élément, deux autour de l'élément centré ainsi que l'élément en question.

+ +

CSS

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.horizontal-box {
+  display: flex;
+  flex-flow: row;
+}
+.spacer {
+  flex: auto;
+  background-color: black;
+}
+.centered-element {
+  flex: none;
+  background-color: white;
+}
+
+ +

HTML

+ +
<div class="vertical-box">
+  <div class="spacer"></div>
+  <div class="centered-element horizontal-box">
+    <div class="spacer"></div>
+    <div class="centered-element">Centered content</div>
+     <div class="spacer"></div>
+  </div>
+  <div class="spacer"></div>
+</div>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Centrer_un_élément', 500, 500)}}

+ +

Répartir des conteneurs verticalement

+ +

Prenons une page qui se compose d'un en-tête, d'une zone de contenu et d'un pied de page. On souhaite que l'en-tête et le pied de page aient la même taille mais que le contenu s'adapte selon l'espace disponible. Pour cela, on peut utiliser la propriété {{cssxref("flex")}} avec la valeur auto pour le contenu et la valeur none pour l'en-tête et le pied de page.

+ +

CSS

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.fixed-size {
+  flex: none;
+  height: 30px;
+  background-color: black;
+  text-align: center;
+}
+.flexible-size {
+  flex: auto;
+  background-color: white;
+}
+
+ +

HTML

+ +
<div id="document" class="vertical-box">
+  <div class="fixed-size"><button id="increase-size">Augmenter la taille du conteneur</button></div>
+  <div id="flexible-content" class="flexible-size"></div>
+  <div class="fixed-size"><button id="decrease-size">Réduire la taille du conteneur</button></div>
+</div>
+
+ +

JavaScript

+ +
var height = 400;
+document.getElementById('increase-size').onclick=function() {
+  height += 10;
+  if (height > 500) height = 500;
+  document.getElementById('document').style.height = (height + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  height -= 10;
+  if (height < 300) height = 300;
+  document.getElementById('document').style.height = (height + "px");
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Répartir_des_conteneurs_verticalement', 500, 500)}}

+ +

Créer un conteneur horizontal qui se replie

+ +

Dans certains cas, on veut pouvoir afficher des informations horizontalement lorsque l'écran le permet et les replier en vertical lorsque la taille est trop réduire. On peut obtenir cet effet simplement avec les boîtes flexibles en utilisant la valeur wrap sur la propriété {{cssxref("flex-flow")}}.

+ +

CSS

+ +
.horizontal-container {
+  display: flex;
+  width: 300px;
+  flex-flow: row wrap;
+}
+.fixed-size {
+  flex: none;
+  width: 100px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+ +

HTML

+ +
<div id="container" class="horizontal-container">
+  <div class="fixed-size">Élément 1</div>
+  <div class="fixed-size">Élément 2</div>
+  <div class="fixed-size">Élément 3</div>
+</div>
+<button id="increase-size">Augmenter la taille du conteneur</button>
+<button id="decrease-size">Réduire la taille du conteneur</button>
+
+ +

JavaScript

+ +
var width = 300;
+
+document.getElementById('increase-size').onclick=function() {
+  width += 100;
+  if (width > 300) width = 300;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  width -= 100;
+  if (width < 100) width = 100;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Créer_un_conteneur_horizontal_qui_se_replie', 500, 200)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html new file mode 100644 index 0000000000..26a4738980 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html @@ -0,0 +1,140 @@ +--- +title: Cas d'utilisation classiques de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox +tags: + - CSS + - Guide + - Intermediate + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +

{{CSSRef}}

+ +

Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.

+ +

Pourquoi choisir les boîtes flexibles ?

+ +

Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec l'article sur les relations entre flexbox et les autres méthodes de disposition où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.

+ +

Dans la réalité, on utilise souvent les boîtes flexibles pour créer des organisations qu'il serait plus pertinent de construire avec une disposition en grille et pour lesquelles les boîtes flexibles sont une méthode de recours et offrent une certaine capacité d'alignement. Sur ce deuxième aspect, cela pourra évoluer lorsque l'alignement des boîtes sera implémenté dans la disposition en bloc. Dans ce guide, nous verrons quels sont les cas classiques où on utilise les boîtes flexibles aujourd'hui.

+ +

La navigation

+ +

Un motif souvent utilisé pour la navigation consiste à avoir une liste d'objets qui forment une barre horizontale. Ce motif, bien que simple, était plutôt compliqué à obtenir avant l'apparition des boîtes flexibles. C'est l'exemple le plus simple pour les boîtes flexibles et cela constitue un cas d'utilisation idéal.

+ +

Lorsqu'on a un ensemble d'objets qu'on souhaite organiser horizontalement, on peut avoir plus d'espace que nécessaire. Il faut décider comment utiliser cet espace : on peut afficher cet espace entre les éléments afin de les espacer ou bien agrandir les objets. Dans ce dernier cas, il nous faut une méthode pour permettre aux objets de grandir et d'occuper cet espace.

+ +

L'espace distribué en dehors des éléments

+ +

Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide Aligner des objets dans un conteneur flexible, qui décrit comment aligner des objets sur l'axe principal.

+ +

Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille naturelle et on écrit justify-content: space-between afin de répartir l'espace équitablement entre chaque élément. Cette répartition de l'espace peut être modifiée en utilisant la valeur space-around ou, lorsqu'elle est prise en charge, la valeur space-evenly. On peut également utiliser flex-start afin de placer l'espace après les éléments ou encore flex-end pour placer l'espace avant les éléments voire center afin de centrer les éléments.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

+ +

L'espace distribué au sein des éléments

+ +

On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés  {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans Contrôler les proportions des éléments flexibles le long de l'axe principal.

+ +

Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera flex: auto qui correspond à la notation raccourcie de flex: 1 1 auto — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace.

+ +

Dans l'exemple qui suit, vous pouvez modifier flex: auto pour utiliser flex: 1 qui correspond à la notation raccourcie de flex: 1 1 0 et qui permet d'avoir la même largeur pour chaque élément, car la base (flex-basis) vaut 0 et permet de répartir l'intégralité de l'espace de façon équitable.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

+ +

La navigation séparée

+ +

Une autre façon d'aligner les éléments le long de l'axe principal consiste à utiliser des marges automatiques. Cela permet d'obtenir une barre où une partie des éléments sont alignés à gauche alors qu'un second groupe est aligné à droite.

+ +

Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans Utiliser les marges automatiques pour l'alignement sur l'axe principal. Les éléments sont alignés le long de l'axe principal avec flex-start, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.

+ +

Dans cet exemple, on utilise également des marges sur les éléments flexibles afin de créer des gouttières entre les éléments ainsi qu'une marge négative sur le conteneur afin que les éléments aux extrémités soient bien alignés sur les bords gauche et droit. Tant que les propriétés gap de la spécification sur l'alignement des boîtes (Box Alignment) ne sont pas implémentées pour les boîtes flexibles, il nous faut utiliser les marges de cette façon si on souhaite créer une gouttière entre les éléments.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

+ +

Centrer des éléments

+ +

Avant l'apparition des boîtes flexibles, une blague récurrente consistait à dire qu'un des défis majeur sur le Web était le centrage vertical des éléments. Disposant désormais des propriétés d'alignement pour les boîtes flexibles, surmonter ce défi est beaucoup plus accessible. Nous allons le voir dans l'exemple suivant.

+ +

Vous pouvez manipuler les propriétés d'alignement pour aligner les objets au début avec flex-start ou à la fin avec flex-end.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

+ +

À l'avenir, il ne sera peut-être plus nécessaire d'utiliser un conteneur flexible afin de centrer un seul élément, car les propriétés d'alignement des boîtes auront également été implémentées pour la disposition en bloc. Mais aujourd'hui, si on souhaite correctement centrer un objet dans un centre, il faut utiliser les boîtes flexibles. On procède comme dans l'exemple ci-avant : on modifie le conteneur afin que ce soit un conteneur flexible puis on utilise la propriété align-items sur l'élément parent ou bien on cible l'élément voulu avec align-self.

+ +

Une disposition en cartes avec un pied ajustable

+ +

Qu'on utilise les boîtes flexibles ou les grilles CSS afin d'organiser une liste de cartes, ces méthodes fonctionnent uniquement sur les éléments fils directs du conteneur flexible ou du conteneur de grille. Cela signifie que si on dispose d'une quantité de contenu variable, la carte s'étirera sur toute la hauteur de la grille ou sur toute la hauteur du conteneur flexible. Tout le contenu à l'intérieur utilise une disposition en bloc classique qui signifie que le pied de page d'une carte avec moins de contenu sera plus haut que celui d'une carte disposant de plus de contenu pour lequel le pied est bien aligné en bas de la carte.

+ +

Deux composants "carte" montrant que l'élément contenant le texte ne s'étire pas.

+ +

On peut résoudre ce problème avec les boîtes flexibles. Pour commencer, on transforme la carte en conteneur flexible avec {{cssxref("flex-direction")}}: column. Ensuite, on affecte un coefficient flex: 1 à la zone du contenu (ce qui correspond à la notation raccourcie flex: 1 1 0) : l'élément pourra s'étirer ou se rétrécir avec une base 0. Comme c'est le seul élément de la carte qui peut grandir, il occupera tout l'espace encore disponible dans le conteneur flexible et poussera le pied en bas de carte. Dans l'exemple qui suit, si on retire la propriété flex, on peut voir le pied remonter pour être inscrit directement après le contenu.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

+ +

Les objets média

+ +

Un objet média est un motif classique en design web. Dans ce motif, on a une image ou un autre média d'un côté et le texte associé à droite. Idéalement, on souhaite pouvoir inverser les deux composants et déplacer l'image à droite.

+ +

On peut voir ce motif utilisé avec les commentaires, les endroits où on affiche des images et leur description. Avec les boîtes flexibles, on peut dimensionner l'objet média en fonction des dimensions de l'image et occuper le reste de l'espace avec le contenu textuel.

+ +

Dans l'exemple suivant, on utilise les propriétés d'alignement des objets sur l'axe secondaire avec flex-start puis on définit .content avec flex: 1. Comme vu dans l'exemple précédent, flex: 1 signifie que cette partie de la carte peut grandir.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

+ +

Vous pouvez ici essayer d'appliquer les différentes contraintes relatives à votre conception.

+ +

Pour empêcher l'image de devenir trop large, on pourra ajouter la propriété {{cssxref("max-width")}} à l'image. Cette dimension de l'objet utilisant les valeurs initiales des propriétés flexibles, elle pourra rétrécir mais pas grandir et elle utilisera auto comme valeur pour flex-basis. Toute largeur {{cssxref("width")}} ou max-width appliquée à l'image sera utilisée comme mesure pour flex-basis.

+ +
.image img {
+  max-width: 100px;
+}
+
+ +

On peut également permettre aux deux côtés de grandir/rétrécir proportionnellement. Si on paramètre les deux côtés avec flex: 1, ils grandiront/rétréciront à partir d'une base {{cssxref("flex-basis")}} égale à 0 et on obtiendra alors deux colonnes de même taille. Si on souhaite plutôt utiliser la taille du contenu comme base, on pourra utiliser flex: auto et les deux côtés grandiront/rétréciront à partir de la taille de leur contenu ou de toute taille qui leur serait explicitement appliquée en CSS (par exemple une largeur sur l'image).

+ +
.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser flex: 1 pour le côté avec l'image et flex: 3 pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base flex-basis  0 et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de flex-grow. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide Contrôler les proportions des éléments flexibles le long de l'axe principal.

+ +
.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

Inverser la position de l'objet média

+ +

Si on souhaite échanger la position de l'image dans l'objet média pour l'afficher à droite avec le contenu textuel à gauche, on pourra utiliser la propriété flex-direction avec la valeur row-reverse. L'objet média est désormais affiché dans l'autre sens. Dans l'exemple, cela s'obtient grâce à l'ajout de la classe flipped (en plus de la classe existante .media). Vous pouvez donc annuler cet effet en retirant la classe dans le code HTML.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+ +

Les contrôles de formulaire

+ +

Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément  {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique).

+ +

Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément <button> et l'élément <input> dans un conteneur auquel on ajoute une bordure et pour lequel on a display: flex. On utilise ensuite les propriétés flexibles afin de permettre à l'élément <input> de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

+ +

On pourrait ajouter un libellé ou une icône à gauche aussi facilement qu'on a ajouté un bouton à droite. Dans la version suivante, on ajoute un libellé et d'autres règles de mise en forme pour l'arrière-plan. Il n'est pas nécessaire de modifier le reste de la disposition. Le champ de saisie adaptable possède désormais moins d'espace mais continue à consommer l'espace disponible après le placement des deux autres objets.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

+ +

De tels motifs facilitent la création d'une bibliothèque d'éléments de formulaires pour les différents documents d'un projet. On tire parti de la flexibilité des boîtes flexibles en mélangeant les éléments qui peuvent s'étendre et ceux qui restent à une taille constante.

+ +

Conclusion

+ +

En explorant les motifs de ce guide, nous avons vu certaines des meilleures façons d'utiliser les boîtes flexibles pour obtenir le résultat souhaité. La plupart du temps, plusieurs choix s'offrent à nous. Mélanger des éléments qui peuvent s'étirer avec d'autres qui ne le peuvent pas, utiliser la taille du contenu comme point de départ ou encore permettre aux boîtes flexibles de gérer tout l'espace.

+ +

Pensez à la meilleure façon de présenter le contenu dont vous disposez puis voyez comment les boîtes flexibles ou les autres méthodes de disposition peuvent vous aider à obtenir cette présentation.

diff --git a/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html new file mode 100644 index 0000000000..dadea30a48 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html @@ -0,0 +1,235 @@ +--- +title: Les concepts de base pour flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox +tags: + - Beginner + - CSS + - Débutant + - Guide + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

Le module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des flexbox que nous approfondirons ensuite dans d'autres articles.

+ +

Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les flexbox gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de la disposition en grille (CSS Grid) qui contrôle à la fois les colonnes et les lignes.

+ +

Les deux axes des boîtes flexibles

+ +

Lorsqu'on travaille avec les boîtes flexibles, deux axes interviennent : l'axe principal (main axis en anglais) et l'axe secondaire (cross axis en anglais). L'axe principal est défini par la propriété {{cssxref("flex-direction")}} et l'axe secondaire est l'axe qui lui est perpendiculaire. Tout ce que nous manipulons avec les boîtes flexibles fera référence à ces axes.

+ +

L'axe principal

+ +

L'axe principal est défini par la propriété flex-direction qui peut prendre quatre valeurs :

+ +
    +
  • row
    • +
  • row-reverse
    • +
  • column
    • +
  • column-reverse
    • +
+ +

Si on choisit la valeur row ou row-reverse, l'axe principal sera aligné avec la direction « en ligne » (inline direction) (c'est la direction logique qui suit le sens d'écriture du document).

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

Si on choisit la valeur column ou column-reverse, l'axe principal suivra la direction de bloc (block direction) et progressera le long de l'axe perpendiculaire au sens d'écriture.

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

L'axe secondaire (cross axis)

+ +

L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si flex-direction vaut row ou row-reverse, l'axe secondaire suivra l'axe des colonnes.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

Si l'axe principale est column ou column-reverse, l'axe secondaire suivra celui des lignes (horizontales).

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

Comprendre les liens entre les différents axes est crucial lorsqu'on commence à aligner/justifier des éléments flexibles sur un axe ou l'autre grâce aux fonctionnalités et propriétés des boîtes flexibles.

+ +

Les lignes de début et de fin

+ +

Une autre notion fondamentale est l'absence d'hypothèse sur le mode d'écriture du document. Pour les modèles de disposition précédents, CSS était fortement orienté vers les modes d'écritures de droite à gauche et de gauche à droite. Les modèles de disposition modernes permettent de gérer naturellement les différents modes d'écriture et ne reposent plus sur l'idée qu'une ligne de texte commencera en haut à gauche d'un document puis progressera vers la droite et que chaque nouvelle ligne apparaîtra sous la précédente.

+ +

Nous verrons plus tard les détails des relations entre les spécifications des boîtes flexibles et celles des modes d'écriture. Toutefois, décrivons ici pourquoi on ne parlera plus de gauche ou de droite et de bas ou de haut lorsque nous évoquerons la direction dans laquelle s'organisent les éléments flexibles.

+ +

Si flex-direction vaut row et que nous travaillons sur un document écrit en français, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite.

+ +

Working in English the start edge is on the left.

+ +

Si on travaille sur un document écrit dans une langue arabe, la ligne de début de l'axe principal sera à droite et la ligne de fin à gauche.

+ +

The start edge in a RTL language is on the right.

+ +

Dans les deux cas, la ligne de début de l'axe secondaire est située en haut et la ligne de fin de cet axe est située en bas car ces deux langues sont écrites horizontalement.

+ +

Nous verrons qu'au fur et à mesure, il devient naturel de parler de début et de fin plutôt que de gauche et de droite. De plus, ce niveau d'abstraction sera utile pour comprendre d'autres méthodes de disposition comme les grilles CSS car il y est également utilisé.

+ +

Le conteneur flexible

+ +

La zone d'un document sujette au modèle de disposition flexbox est appelée un conteneur flexible. Pour créer un conteneur flexible, il faut que la valeur de la propriété {{cssxref("display")}} de cet élément soit flex ou inline-flex. Dès que c'est le cas, les éléments « enfants » directs deviennent des éléments flexibles (flex items). Comme pour les autres propriétés CSS, certaines valeurs initiales sont définies, aussi, lorsqu'on crée un conteneur flexible, tous les éléments flexibles se comporteront de la façon suivante :

+ +
    +
  • Les éléments s'afficheront en lignes horizontales (la valeur par défaut de la propriété flex-direction est row).
    • +
  • Les éléments seront placés à partir de la ligne de début de l'axe principal.
    • +
  • Les éléments ne s'étireront pas le long de l'axe principal mais pourront se rétrécir si nécessaire.
    • +
  • Les éléments seront étirés le long de l'axe secondaire afin d'occuper l'espace sur cet axe.
    • +
  • La propriété {{cssxref("flex-basis")}} vaut auto.
    • +
  • La propriété {{cssxref("flex-wrap")}} vaut nowrap.
    • +
+ +

Autrement dit, tous les éléments formeront une ligne en utilisant la taille de leur contenu. S'il y a plus d'éléments que le conteneur peut en contenir, ils ne formeront pas une nouvelle ligne mais dépasseront du conteneur. Si certains éléments sont plus grands (selon l'axe secondaire) que d'autres, tous les éléments s'étireront sur l'axe secondaire afin d'avoir la plus grande taille.

+ +

Vous pouvez étudier l'exemple qui suit pour voir le résultat obtenu. N'hésitez pa à éditer les éléments ou à en ajouter d'autres pour tester ce comportement initial.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 510)}} 

+ +

Modifier flex-direction

+ +

En ajoutant la propriété {{cssxref("flex-direction")}} au conteneur flexible, on peut modifier la direction dans laquelle les éléments flexibles seront affichés. En utilisant flex-direction: row-reverse, les éléments seront affichés le long d'une ligne horizontale mais les lignes de début et de fin seront inversées.

+ +

Si on utilise column comme valeur de flex-direction, l'axe principal est modifié et les éléments sont affichés sur une colonne. Si on utilise column-reverse, les lignes de début et de fin seront également inversées.

+ +

Dans l'exemple suivant, on utilise flex-direction avec la valeur row-reverse. Vous pouvez utiliser d'autres valeurs — row, column et column-reverse — afin de voir le résultat produit.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

Créer un conteneur flexible sur plusieurs lignes avec flex-wrap

+ +

Bien que le modèle des boîtes flexibles soit organisé sur une dimension, il est possible d'organiser les éléments flexibles afin que ceux-ci s'étendent sur plusieurs lignes ou colonnes (plutôt que de dépasser). Lorsque c'est le cas, chaque nouvelle ligne ou colonne agit comme un nouveau conteneur flexible. La distribution de l'espace sur cette ligne/colonne ne tiendra pas compte des autres lignes/colonnes.

+ +

Pour obtenir ce « passage à la ligne », on ajoute la propriété {{cssxref("flex-wrap")}} avec la valeur wrap. Désormais, si les éléments sont trop grands pour tenir sur une seule ligne, ils passeront sur une autre ligne. L'exemple suivant illustre le résultat obtenu lorsque la somme des tailles des éléments dépasse celle du conteneur. Avec flex-wrap qui vaut wrap, les éléments passent à la ligne. Si on modifie la valeur avec nowrap (qui correspond à la valeur initiale), les éléments seront rétrécis pour tenir sur une ligne (car les valeurs initiales des boîtes flexibles permettent aux éléments d'être ainsi redimensionnés). Si on utilise nowrap et que les éléments ne peuvent pas être redimensionnés (ou pas suffisamment), cela causera un dépassement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

Pour approfondir ces notions, vous pouvez consulter l'article Maîtriser le passage à la ligne des éléments flexibles.

+ +

La propriété raccourcie flex-flow

+ +

Il est possible de synthétiser les propriétés flex-direction et flex-wrap avec la propriété raccourcie {{cssxref("flex-flow")}}. La première valeur de cette propriété sera utilisée pour flex-direction et la seconde pour flex-wrap.

+ +

Dans l'exemple qui suit, vous pouvez changer les valeurs de flex-direction en utilisant row, row-reverse, column ou column-reverse pour la première et wrap ou nowrap pour la seconde.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

Les propriétés appliquées aux éléments flexibles

+ +

Pour mieux contrôler les éléments flexibles, on peut les cibler directement avec trois propriétés :

+ +
    +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
+ +

Nous verrons ici un rapide aperçu de ces propriétés que nous approfondirons dans l'article Contrôler les proportions des éléments flexibles le long de l'axe principal.

+ +

Avant de revenir à ces propriétés, il nous faut définir le concept d'espace disponible. Lorsque nous modifierons l'une de ces propriétés, cela modifiera la façon dont l'espace disponible est distribué parmi les éléments. Ce concept est également important lorsqu'on aligne les éléments.

+ +

Prenons un conteneur de 500 pixels de large et qui contient trois éléments de 100 pixels de large. Il faut donc 300 pixels pour disposer ces éléments et il reste ainsi 200 pixels d'espace disponible. Si on ne modifie pas les valeurs initiales, l'espace disponible sera placé après le dernier élément.

+ +

This flex container has available space after laying out the items.

+ +

Si on préfère que les éléments s'étirent pour occuper l'espace restant, il nous faut une méthode pour distribuer cet espace parmi les éléments. C'est le rôle des propriétés flex- qui s'appliquent aux éléments.

+ +

La propriété flex-basis

+ +

La propriété flex-basis définit la taille de l'élément en termes d'espace occupé. La valeur initiale de cette propriété est auto — dans ce cas, le navigateur analyse si les éléments ont une taille. Dans l'exemple précédent, les éléments mesurent 100 pixels de large et c'est donc cette mesure qui est utilisée pour flex-basis.

+ +

Si les éléments n'ont pas de taille définie, c'est la taille du contenu qui est utilisée comme base. C'est pour ça que nous avons simplement déclaré display: flex sur l'élément parent afin de créer des éléments flexibles (qui prennent alors tout l'espace nécessaire à leur contenu).

+ +

La propriété flex-grow

+ +

La propriété flex-grow est un entier positif qui, lorsqu'elle est définie, permet aux éléments flexibles de s'étendre à partir de la mesure de flex-basis. Ainsi, l'élément sera étiré et occupera l'espace disponible sur cet axe ou une part de cet espace si les autres éléments peuvent s'étendre également.

+ +

Si on utiliseflex-grow: 1 pour les différents éléments de l'exemple précédent, l'espace disponible sera alors partagé de façon égale entre les éléments qui seront alors étirés pour occuper l'ensemble du conteneur le long de l'axe principal.

+ +

La propriété flex-grow permet de répartir l'espace disponible en « parts ». Si, pour le premier élément, on indique flex-grow avec une valeur de 2 et, pour les autres éléments, flex-grow avec une valeur de 1, deux « parts » de l'espace disponible seront données au premier élément (il recevra donc 100 pixels parmi les 200 pixels restants) et une part sera fournie à chacun des autres éléments (soit 50 pixels chacun parmi les 200 pixels restants).

+ +

La propriété flex-shrink

+ +

La propriété flex-grow permet de gérer la façon dont l'espace est ajouté sur l'axe principal. La propriété flex-shrink permet quant à elle de contrôler la façon dont l'espace est réduit. S'il n'y a pas suffisamment d'espace dans le conteneur pour disposer les éléments et que flex-shrink est un entier positif, l'élément peut alors devenir plus petit que la taille définie par flex-basis. De façon analogue à flex-grow, il est possible d'affecter différents coefficients aux différents éléments afin que ceux-ci rétrécissent plus fortement que d'autres. Plus la valeur de flex-shrink sera élevée, plus l'élément ciblé rétrécira (si les éléments voisins ont une valeur de flex-shrink plus faibles).

+ +

La taille minimale de l'élément sera prise en compte lors du rétrécissement. Cela signifie que flex-shrink peut être moins cohérent que flex-grow selon les cas aux limites. Nous verrons plus en détails comment cet algorithme fonctionne dans l'article Contrôler les proportions des éléments le long de l'axe principal.

+ +
+

Note : Les valeurs de flex-grow et flex-shrink sont des proportions. Autrement dit, si tous les éléments ont flex: 1 1 200px et qu'on souhaite qu'un d'eux grandissent deux fois plus, on utiliserait flex: 2 1 200px pour cet élément. Mais avoir flex: 10 1 200px d'une part et flex: 20 1 200px d'autre part fonctionnerait exactement de la même façon.

+
+ +

La propriété raccourcie flex et les valeurs synthétiques

+ +

On voit rarement flex-grow, flex-shrink et flex-basis utilisées individuellement mais plutôt combinées avec la propriété raccourcie {{cssxref("flex")}}. La propriété raccourcie flex permet de définir les valeurs de cette propriété dans cet ordre : flex-grow, flex-shrink, flex-basis.

+ +

L'exemple suit vous permet de tester différentes valeurs pour flex. La première valeur est flex-grow et un coefficient positif permettra à l'élément de grandir, la deuxième valeur est flex-shrink et un coefficient positif permettra de rétrécir l'élément s'il dépasse du conteneur sur l'axe principal. Enfin, la troisième valeur sert à flex-basis qui indique la taille de base à partir de laquelle l'élément sera étendu ou rétréci.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}

+ +

Cette propriété permet également d'utiliser des valeurs synthétiques qui couvrent la majorité des scénarios. Vous verrez souvent ces valeurs utilisées dans les tutoriels et, dans de nombreux cas, celles-ci suffiront :

+ +
    +
  • flex: initial
    • +
  • flex: auto
    • +
  • flex: none
    • +
  • flex: <nombre-positif>
    • +
+ +

Avec flex: initial, les éléments récupèrent les valeurs initiales pour les différentes propriétés du modèle de boîte flexible. Cette valeur permettra d'obtenir le même comportement que flex: 0 1 auto. Ici, flex-grow vaut 0 et les éléments ne s'agrandiront pas au-delà de la taille flex-basis. flex-shrink vaut 1 et les éléments pourront rétrécir si besoin plutôt que de dépasser du conteneur. flex-basis vaut auto et les éléments utiliseront donc la taille qui leur a été définie sur l'axe principale ou la taille déterminée à partir du contenu.

+ +

Avec flex: auto, on obtient le même comportement que flex: 1 1 auto, la seule différence avec flex:initial est que les éléments peuvent s'étirer si besoin.

+ +

Avec flex: none, les éléments ne seront pas flexibles. Cette valeur est synonyme de flex: 0 0 auto. Les éléments ne peuvent ni s'agrandir, ni se rétrécir mais seront disposés avec flex-basis: auto.

+ +

On voit aussi souvent des valeurs comme flex: 1 ou flex: 2, etc. Cela correspond à flex: 1 1 0. Les éléments peuvent s'agrandir ou bien rétrécir à partir d'une taille de base égale à 0.

+ +

Vous pouvez utiliser ces valeurs synthétiques dans l'exemple suivant :

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+ +

Alignement, justification et distribution de l'espace disponible entre les éléments

+ +

Une fonctionnalité majeure des boîtes flexibles est de permettre l'alignement et la justification des éléments le long des axes principal et secondaire tout en distribuant l'espace entre les éléments flexibles.

+ +

align-items

+ +

La propriété {{cssxref("align-items")}} permet d'aligner les éléments le long de l'axe secondaire.

+ +

La valeur initiale de cette propriété est stretch, ce qui explique pourquoi, par défaut, les éléments flexibles sont étirés sur l'axe perpendiculaire afin d'avoir la même taille que l'élément le plus grand dans cet axe (qui définit la taille du conteneur sur cet axe).

+ +

On peut également utiliser la valeur flex-start afin que les éléments soient alignés sur la ligne de début de l'axe secondaire, la valeur flex-end afin que les éléments soient alignés sur la ligne de fin de l'axe secondaire ou bien center pour les aligner au centre. Vous pouvez utiliser les valeurs suivantes dans l'exemple (on a donné un hauteur fixe au conteneur afin de pouvoir observer la façon dont les éléments se déplacent à l'intérieur) :

+ +
    +
  • stretch
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

La propriété {{cssxref("justify-content")}} est utilisée afin d'aligner les éléments le long de l'axe principal dans la direction définie par flex-direction. La valeur initiale est flex-start qui place les éléments à partir de la ligne de début du conteneur sur l'axe principal. La valeur flex-end permet de les placer vers la fin et la valeur center permet de les centrer le long de l'axe principal.

+ +

On peut également utiliser la valeur space-between afin de répartir l'espace disponible de façon égale entre chaque élément. Si on souhaite que l'espace soit également réparti autour des éléments, y compris au début et à la fin, on pourra utiliser la valeur space-around (il y aura alors un demi espace à la fin et au début). Si on souhaite que l'espace soit également réparti et qu'il y ait un espace entier au début et à la fin, on utilisera la valeur space-evenly.

+ +

Vous pouvez essayer les valeurs suivantes dans l'exemple suivant :

+ +
    +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
  • space-around
    • +
  • space-between
    • +
  • space-evenly
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

Dans l'article Aligner des éléments dans un conteneur flexible, nous verrons plus en détails comment ces propriétés fonctionnent. Ces premiers exemples permettent toutefois de comprendre comment utiliser ces propriétés sur une majorité de cas.

+ +

Prochaines étapes

+ +

Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux flexbox. Dans le prochain article, nous verrons comment cette spécification s'articule avec les autres modules CSS.

diff --git "a/files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" "b/files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" new file mode 100644 index 0000000000..a05bdb1ca2 --- /dev/null +++ "b/files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" @@ -0,0 +1,200 @@ +--- +title: Contrôler les proportions des boîtes flexibles le long de l'axe principal +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal +tags: + - Boîtes flexibles + - CSS + - Flex + - Guide + - Intermediate + - flexbox +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.

+ +

Un premier aperçu

+ +

Ces trois propriétés contrôlent différents aspects relatifs à la flexibilité des éléments :

+ +
    +
  • flex-grow : quelle proportion de l'espace libre peut-on allouer en supplément à cet élément ?
    • +
  • flex-shrink : quelle proportion de l'espace peut être retirée à cet élément ?
    • +
  • flex-basis : quelle est la taille de l'élément avant tout agrandissement/réduction ?
    • +
+ +

Ces propriétés sont généralement définies via la propriété raccourcie {{cssxref("flex")}}. Le code suivant définira flex-grow avec la valeur 2, flex-shrink avec la valeur 1 et flex-basis avec la valeur auto.

+ +
.item {
+  flex: 2 1 auto;
+}
+
+ +

Dans l'article sur les concepts de base relatifs aux boîtes flexibles, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.

+ +

Les concepts majeurs relatifs à l'axe principal

+ +

Avant de rentrer dans le détail des propriétés, définissons certains concepts clés qui interviennent lorsqu'on travaille sur les proportions le long de l'axe principal. Ces concepts se basent sur la taille naturelle des éléments flexibles (avant tout redimensionnement) et sur la notion d'espace libre.

+ +

Le dimensionnement des objets flexibles

+ +

Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ?

+ +

CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et  {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque et ces valeurs peuvent être utilisées comme unité de longueurs.

+ +

Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est min-content. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur min-content correspond à la taille du plus grand mot du paragraphe.

+ +

Dans le second paragraphe, on utilise la valeur max-content et on voit le résultat opposé. Le texte prend autant de place que possible et aucun saut à la ligne supplémentaire n'est introduit. Le texte dépasserait de la boîte si le conteneur était trop étroit.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}

+ +

Si votre navigateur ne prend pas en charge ces mots-clés, les paragraphes seront affichés normalement. La capture d'écran qui suit illustre le résultat obtenu avec un navigateur compatible :

+ +

Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse.

+ +

Pour la suite de cet article, gardez à l'esprit l'impact de min-content et max-content lorsque nous verrons les propriétés flex-grow et flex-shrink.

+ +

Espace libre positif et négatif

+ +

Pour étudier ces propriétés, nous devons définir le concept d'espace libre positif et négatif. Lorsqu'un conteneur flexible possède un espace libre positif, il dispose de plus d'espace qu'il n'est nécessaire pour afficher les éléments flexibles qu'il contient. Si on a, par exemple, un conteneur dont la largeur mesure 500 pixels, la propriété {{cssxref("flex-direction")}} qui vaut row et trois éléments qui mesurent chacun 100 pixels, il reste alors 200 pixels d'espace libre positif qui pourrait être réparti entre les éléments si on le souhaitait.

+ +

Une image illustrant l'espace restant après que les éléments aient été affichés.

+ +

L'espace libre négatif est l'espace supplémentaire qui aurait été nécessaire pour contenir tous les éléments à l'intérieur du conteneur flexible. Si on dispose d'un conteneur dont la largeur mesure 500 pixels et trois éléments flexibles dont chacun mesure 200, l'espace total occupé mesure 600 pixels et on a donc 100 pixels d'espace libre négatif. Cet espace pourrait être retiré des éléments afin qu'ils soient contenus dans le conteneur.

+ +

Les objets dépassent du conteneur.

+ +

C'est cette distribution de l'espace libre qu'il est nécessaire de comprendre afin d'étudier les différentes propriétés relatives aux propriétés flexibles.

+ +

Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-direction")}} avec la valeur row, ce sera donc leur largeur qui sera leur dimension principale. Vous pouvez modifier les exemples afin d'utiliser flex-direction: column (dans ce cas, l'axe principal sera celui des colonnes et la dimension principale sera la hauteur).

+ +

La propriété flex-basis

+ +

La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est auto. Si  flex-basis vaut auto, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour flex-basis (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour flex-basis pour cet élément).

+ +

Si la taille initiale de l'élément n'est pas définie de façon absolue, auto correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de min- et max-content, car la boîte flexible utilisera max-content comme valeur pour flex-basis. Dans l'exemple suivant, nous verrons comment en tirer parti.

+ +

Dans cet exemple, on crée un ensemble de boîtes inflexibles avec la valeur 0 pour flex-grow et flex-shrink. On peut voir comment le premier objet, ayant une largeur explicite de 150 pixels, occupe une flex-basis de 150px tandis que les deux autres objets qui n'ont pas de largeur sont dimensionnés en fonction de la largeur de leur contenu.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}

+ +

En plus du mot-clé auto, on peut également utiliser le mot-clé content comme valeur pour flex-basis. Ainsi, flex-basis sera calculée en fonction de la taille du contenu, même s'il y a une largeur explicitement définie sur l'objet. Ce mot-clé est plus récent et est moins largement pris en charge. Toutefois, on peut obtenir le même effet en utilisant le mot-clé auto et en s'assurant que l'objet n'a pas de largeur définie, ainsi, le dimensionnement automatique sera effectué en fonction du contenu.

+ +

Si on souhaite que la boîte flexible ignore complètement la taille du contenu lors de la répartition de l'espace, on pourra utiliser flex-basis avec la valeur 0. En résumé, cela revient à indiquer que tout l'espace est disponible et peut être réparti proportionnellement. Nous verrons des exemples utilisant cette valeur lorsque nous étudierons flex-grow.

+ +

La propriété flex-grow

+ +

La propriété {{cssxref("flex-grow")}} définit le coefficient d'agrandissement flexible, qui détermine la façon dont l'objet flexible grandira par rapport aux autres objets flexibles du même conteneur lorsque l'espace libre sera distribué.

+ +

Si tous les objets possèdent la même valeur pour le coefficient flex-grow, l'espace sera réparti également entre chacun. Dans ce cas, on utilisera généralement la valeur 1. Ceci étant dit, on pourrait tout aussi bien utiliser la valeur 88, 100 ou 1.2 — ce coefficient est un simple ratio. Si le coefficient est le même pour tous les objets et qu'il reste de l'espace libre dans le conteneur, cet espace sera réparti équitablement.

+ +

Combiner flex-grow et flex-basis

+ +

Les choses se compliquent lorsque flex-grow et flex-basis interagissent. Prenons un exemple où trois objets flexibles ont chacun des contenus de longueurs différentes et auxquels on applique la règle suivante :

+ +

flex: 1 1 auto;

+ +

Dans ce cas, flex-basis vaut auto et les objets n'ont pas de largeur explicite définie : ils sont donc dimensionnés automatiquement. Cela signifie que la boîte flexible utilisera la taille max-content des éléments. Après avoir disposé les objets, il reste de l'espace libre dans le conteneur flexible (ce qui correspond à la zone hachurée de la figure suivante) :

+ +

Une image illustrant l'espace libre positif avec une zone hachurée.

+ +

On utilise ici une valeur flex-basis égale à la taille du contenu, l'espace disponible qui peut être distribué est donc égal à la taille du conteneur (ici sa largeur) moins la taille des éléments. Cet espace est partagé équitablement entre les différents objets. Ainsi, l'objet le plus grand finira avec une taille plus grande, car sa taille de départ est plus importante bien que la même quantité d'espace restant ait été affectée aux autres objets :

+ +

L'espace positif est réparti entre les éléments.

+ +

Si on souhaite obtenir trois objets de la même taille alors qu'ils ont des tailles initiales différentes, on pourra utiliser :

+ +

flex: 1 1 0;

+ +

Ici, on indique que, lors de la phase de répartition de l'espace, la taille des objets vaut 0 — tout l'espace peut être utilisé. Or, les trois objets ayant tous le même coefficient flex-grow, ils récupèrent chacun la même quantité d'espace. On obtient donc trois objets flexibles de même largeur.

+ +

Vous pouvez modifier le coefficient flex-grow pour le passer de 1 à 0 dans l'exemple qui suit pour observer la façon dont les objets se comportent :

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}

+ +

Affecter différents coefficients flex-grow aux éléments

+ +

Notre compréhension du fonctionnement de flex-grow avec flex-basis nous permet de mieux contrôler chacun des éléments en leur affectant différents coefficients flex-grow. Si on conserve la valeur 0 pour flex-basis afin que tout l'espace soit distribué, on pourra affecter différentes valeurs de flex-grow afin qu'ils grandissent différemment. Dans l'exemple qui suit, on utilise les valeurs suivantes :

+ +
    +
  • 1 pour le premier élément
    • +
  • 1 pour le deuxième élément
    • +
  • 2 pour le troisième
    • +
+ +

On utilise flex-basis avec la valeur 0 ce qui signifie que l'espace disponible est réparti de la façon suivante. On additionne les différents facteurs flex-grow puis on divise l'espace libre du conteneur par cette somme (dans notre exemple, elle vaut 4). Ensuite, on répartit l'espace en fonction des différents coefficients individuels : le premier objet récupère une part d'espace, le deuxième en récupère également une et le dernier récupère deux parts. Autrement dit, le troisième objet sera deux fois plus grand que le premier et le deuxième objet.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}

+ +

Rappelons qu'on peut utiliser n'importe quelle valeur positive pour ces facteurs. C'est le rapport entre ces différents facteurs qui importe. Vous pouvez aussi bien utiliser des nombres entiers ou des nombres décimaux. Pour tester cela, vous pouvez changer les coefficients précédents afin de plutôt utiliser respectivement .25, .25 et .50 — vous obtiendrez alors le même résultat.

+ +

La propriété flex-shrink

+ +

La propriété {{cssxref("flex-shrink")}} définit le coefficient de rétrécissement flexible qui détermine la façon dont l'objet flexible se réduit relatviement aux autres objets du conteneur flexible lorsque l'espace négatif est distribué.

+ +

Cette propriété est utilisée lorsque le navigateur calcule les valeurs flex-basis des différents objets flexibles et obtient des valeurs qui dépassent la taille du conteneur flexible. Tant que flex-shrink possède une valeur positive, les éléments pourront rétrécir afin de ne pas dépasser du conteneur.

+ +

Ainsi, si flex-grow gère la façon dont on peut ajouter de l'espace disponible, flex-shrink gère la façon dont on retire de l'espace aux boîtes des objets afin qu'ils ne dépassent pas de leur conteneur.

+ +

Dans le prochain exemple, on dispose de trois éléments dans le conteneur flexible. Chacun mesure 200 pixels de large dans un conteneur qui mesure 500 pixels de large. Si flex-shrink vaut 0, les éléments ne sont pas autorisés à rétrécir et ils dépassent donc de la boîte.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}

+ +

En passant la valeur de flex-shrink à 1, on peut voir que la taille de chaque élément diminue de la même façon afin que l'ensemble des objets tiennent dans la boîte. Les éléments ont désormais une taille inférieure à leur taille initiale.

+ +

Combiner flex-shrink et flex-basis

+ +

On pourrait dire et penser que flex-shrink fonctionne de la même façon que flex-grow. Toutefois, deux arguments viennent contrecarrer cette analogie.

+ +

Le premier, expliqué de façon subtile dans la spécification est la différence de comportement entre flex-shrink et l'espace libre négatif et celui de flex-grow avec l'espace libre positif :

+ +
+

“Note : Le coefficient flex-shrink est multiplié par la taille de base (flex-basis) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.”

+
+ +

Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille  min-content — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles.

+ +

On peut observer ce seuil avec min-content dans l'exemple qui suit où flex-basis est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que min-content. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}

+ +

En pratique, cette méthode de rétrécissement fournit des résultats prévisibles, car on ne souhaite pas que le contenu disparaisse entièrement ou que les boîtes soient plus petites que leur contenu minimal. Les règles présentées ci-avant sont donc pertinentes lorsqu'on souhaite rétrécir des objets afin qu'ils rentrent dans un conteneur.

+ +

Utiliser différents coefficients flex-shrink pour différents éléments

+ +

Comme avec flex-grow, on peut utiliser différents coefficients flex-shrink. Cela permet de modifier le comportement par défaut et on peut ainsi avoir un élément qui se réduit plus ou moins rapidement que ses voisins (voire qui ne se réduit pas du tout).

+ +

Dans l'exemple suivant, le premier objet possède un coefficient flex-shrink égal à 1, le deuxième a un coefficient égal à 0 (il ne rétrécira pas du tout) et le troisième est paramétré avec 4. Ainsi, le troisième élément rétrécit plus vite que le premier. N'hésitez pas à utiliser différentes valeurs pour observer le résultat obtenu. De la même façon qu'avec flex-grow, on peut utiliser nombres entiers ou des nombres décimaux, utilisez ce qui vous paraît le plus pertinent.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}

+ +

Maîtriser le dimensionnement des objets flexibles

+ +

Comprendre le dimensionnement des objets flexibles revient avant tout à comprendre les différentes étapes qui sont déroulées et notamment celles-ci que nous avons pu étudier dans ces guides :

+ +

Quelle est la taille de base de l'objet ?

+ +
    +
  1. Si  flex-basis vaut auto et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée.
    2. +
  2. Si  flex-basis vaut auto ou content (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément
    3. +
  3. Si flex-basis est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément.
    4. +
  4. Si  flex-basis vaut 0, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace.
    5. +
+ +

De l'espace est-il disponible ?

+ +

Les objets ne s'étendent pas s'il n'y a pas d'espace libre positif et ne se réduisent pas s'il n'y a pas d'espace libre négatif.

+ +
    +
  1. Si on prend tous les objets et qu'on somme leur dimension principale (la largeur si on travaille en ligne ou la hauteur si on travaille en colonne) et qu'on obtient une quantité inférieure à la dimension principale du conteneur, on aura alors un espace libre positif et c'est la propriété flex-grow qui entrera en jeu.
    2. +
  2. Si cette somme dépasse la taille du conteneur flexible, on aura alors un espace libre négatif et c'est la propriété flex-shrink qui sera utilisée.
    3. +
+ +

Les autres façons de distribuer l'espace

+ +

Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans le guide sur l'alignement. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.

+ +

Tout ces outils relatifs aux boîtes flexibles vous permettent d'accomplir la plupart des dispositions et n'auront plus de secret au fur et à mesure de vos essais et expérimentations.

diff --git a/files/fr/web/css/css_flexible_box_layout/index.html b/files/fr/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..46576643ce --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,114 @@ +--- +title: Disposition des boîtes flexibles CSS +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - Aperçu + - CSS + - CSS Flexible Box Layout + - CSS Flexible Boxes + - Reference +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +
{{CSSRef}}
+ +

Le module de disposition des boîtes flexibles CSS (CSS Flexible Box Layout) est un module de CSS qui définit un modèle de boîtes optimisé pour la conception des interfaces utilisateurs. En utilisant le modèle des boîtes flexibles, les éléments d'une conteneur flexible peuvent être disposés dans n'importe quelle direction et étendre leurs dimensions (pour remplir un espace vide) ou se réduire pour éviter de dépasser en dehors de l'élément parent. On peut facilement manipuler les alignements horizontal et vertical des éléments fils. On peut aussi imbriquer plusieurs niveaux de boîtes flexibles afin de construire des dispositions en deux dimensions..

+ +

Exemple

+ +

Dans l'exemple qui suit, on utilise display: flex pour un conteneur. Cela signifie que les trois éléments fils deviennent des éléments flexibles. La propriété justify-content a été paramétrée avec la valeur space-between afin d'espacer les éléments de façon égale le long de l'axe principal. Ainsi, on a le même espace à droite et à gauche de chaque élément et, aux extrêmités du conteneur, les bords des éléments fils qui sont alignés avec les bords du conteneur. On peut également voir que les éléments sont étirés le long de l'axe orthogonal (cross axis) car la valeur par défaut de la propriété align-items est stretch. Ainsi, les éléments flexibles s'étirent pour occuper toute la hauteur du conteneur flexible, ils sont donc aussi grands que le plus grand des éléments.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

+ +

Référence

+ +

Propriétés CSS

+ +
+
    +
  • {{cssxref("flex")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
  • {{cssxref("flex-direction")}}
    • +
  • {{cssxref("flex-flow")}}
    • +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-wrap")}}
    • +
  • {{cssxref("order")}}
    • +
+
+ +

Propriétés relatives à l'alignement

+ +

Les propriétés align-content, align-self, align-items et justify-content étaient initialement définies dans la spécification Flexbox mais sont désormais définies dans la spécification sur l'alignement des boîtes et la spécification Flexbox fait référence à cette nouvelle spécification pour les définitions à jour. Des propriétés d'alignement additionnelles ont également été définies dans le module de spécification Box Alignment.

+ +
+
    +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("place-content")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

Termes du glossaire

+ +
+ +
+ +

Guides

+ +
+
Les concepts de base des boîtes flexibles
+
Un aperçu des différentes fonctionnalités offertes par les boîtes flexibles.
+
Les liens entre flexbox et les autres méthodes de disposition
+
Comment flexbox s'articule avec les autres méthodes de disposition et les différents modules de spécification CSS.
+
L'alignement des éléments au sein d'un conteneur flexible
+
Le fonctionnement des propriétés d'alignement des boîtes dans le contexte des boîtes flexibles.
+
Ordonner les éléments flexibles
+
Ce guide explique les différentes méthodes qui permettent de modifier l'ordre et la direction des éléments dans le conteneur flexible et aborde également les problèmes que cela peut causer.
+
Contrôler les proportions des éléments flexibles le long de l'axe principal
+
Cet article explique le fonctionnement des propriétés flex-grow, flex-shrink et flex-basis.
+
Maîtriser le passage à la ligne des éléments flexibles
+
Comment créer des conteneur flexibles qui s'étendent sur plusieurs lignes et contrôler l'affichage des éléments sur ces lignes.
+
Les cas d'utilisation classiques des boîtes flexibles
+
Des design patterns pouvant être résolus avec les boîtes flexibles.
+
La rétrocompatibilité de flexbox
+
L'état de la compatibilité des navigateurs pour les boîtes flexibles, les différents problème d'interopérabilité, la gestion des anciens navigateurs et l'évolution de la spécification.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Flexbox')}}{{ Spec2('CSS3 Flexbox') }}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html b/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html new file mode 100644 index 0000000000..c6e9691ae5 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html @@ -0,0 +1,125 @@ +--- +title: Les liens entre flexbox et les autres méthodes de disposition +slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions +tags: + - CSS + - Guide + - display + - flexbox + - grid +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods +--- +
{{CSSRef}}
+ +

Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.

+ +
+

Note : Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.

+
+ +

Le module d'alignement des boîtes (Box Alignment)

+ +

La plupart des personnes s'intéressent aux boîtes flexibles car elles permettent d'aligner efficacement des éléments flexibles au sein d'un conteneur. Les boîtes flexibles permettent d'utiliser des propriétés pour aligner les éléments sur l'axe secondaire et de les justifier sur l'axe principal.

+ +

Ces propriétés sont apparues dans la spécification dédiée aux boîtes flexibles mais font désormais également partie de la spécification sur l'alignement des boîtes (Box Alignment). Cette spécification détaille la façon dont l'alignement fonctionne pour l'ensemble des dispositions (et pas uniquement pour les boîtes flexibles). L'alignement des boîtes permet de gérer l'alignement et la justification, ainsi que la distribution de l'espace le long d'un axe.

+ +

Ces propriétés d'alignement sont actuellement détaillées dans les spécifications de flexbox et d'alignement des boîtes afin d'être sûr que la spécification des boîtes flexibles n'est pas bloquée par l'état de la spécification sur l'alignement des boîtes. Dans la spécification flexbox, une note indique que lorsque la spécification sur l'alignement des boîtes sera terminée, ces définitions remplaceront celles de la spécification sur les boîtes flexibles :

+ +
+

« Note : Bien que les propriétés d'alignement soient définies dans le module CSS Box Alignment CSS-ALIGN-3, le module Flexible Box Layout reproduit les définitions des propriétés qui sont ici pertinentes afin de ne pas créer de dépendance normative qui ralentirait l'avancement de la spécification. Ces propriétés s'appliquent uniquement à la disposition flexible jusqu'à ce que CSS Box Alignment Level 3 soit terminé et définisse leurs effets pour les autres modes de disposition. De plus, toute nouvelle valeur qui apparaîtra dans le module Box Alignment s'appliquera également à la disposition en boîtes flexibles. Autrement dit, le module Box Alignment, lorsqu'il sera complet, remplacera les définitions énoncées ici. »

+
+ +

Dans un prochain article de ce guide (Aligner les éléments d'un conteneur flexibles), nous verrons dans le détail comment les propriétés du module d'alignement des boîtes s'appliquent aux éléments flexibles.

+ +

Les propriétés d'espacement (gap)

+ +

Récemment, les propriétés {{cssxref("row-gap")}} et {{cssxref("column-gap")}}, ainsi que la propriété raccourcie {{cssxref("gap")}} ont été ajoutées au module d'alignement des boîtes. Ces propriétés furent initialement définies dans la spécification de la grille CSS et étaient nommées grid-row-gap, grid-column-gap et grid-gap. Elles ont été renommées et déplacées dans le module d'alignement des boîtes afin de pouvoir être utilisées dans d'autres modes de disposition et, à terme, avec les boîtes flexibles. Avant la prise en charge des propriétés gap, c'était les propriétés {{cssxref("margin")}} qui étaient utilisées afin de créer des espaces entre les éléments.

+ +

Les modes d'écritures (Writing Modes)

+ +

Dans l'article sur les concepts de bases relatifs aux flexbox, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS Writing Modes qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions de bloc et en ligne qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.

+ +

On notera qu'il est possible de modifier le mode d'écriture d'un document pour d'autres raisons que des raisons linguistiques. Vous pouvez consulter cet article pour en savoir plus sur les différentes façons d'utiliser les modes d'écriture, que ce soit en fonction de la langue du contenu ou pour des raisons créatives.

+ +

Les différents modes d'écritures

+ +

La spécification sur les modes d'écriture définit les différentes valeurs qui peuvent être utilisées avec la propriété {{cssxref("writing-mode")}}. Cette propriété permet de modifier la direction de la disposition des blocs sur la page pour correspondre à l'orientation d'un mode d'écriture donné. Vous pouvez manipuler l'exemple qui suit en utilisant les valeurs suivantes pour voir l'impact que cela a sur la disposition flexible :

+ +
    +
  • horizontal-tb
    • +
  • vertical-rl
    • +
  • vertical-lr
    • +
  • sideways-rl
    • +
  • sideways-lr
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} 

+ +

Actuellement, seul Firefox prend en charge sideways-rl et sideways-lr. Il existe également certains problèmes relatifs à writing-mode et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter les informations de compatibilité pour la propriété writing-mode. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !

+ +

On notera que la propriété writing-mode CSS ne doit pas être utilisée pour modifier le mode d'écriture d'un document entier. Cela doit être fait avec HTML en ajoutant un attribut dir et lang sur l'élément html afin d'indiquer la direction du texte par défaut et la langue du document. Ainsi, le document serait correctement affiché, même si le CSS n'était pas chargé.

+ +

Les boîtes flexibles et les autres méthodes de disposition

+ +

La spécification sur les boîtes flexibles contient une définition de ce qui se produit lorsqu'un élément utilisant une autre méthode de disposition devient un élément flexible (par exemple : un élément est positionné de façon flottante et son élément parent devient un conteneur flexible). Elle décrit également comment un conteneur flexible s'inscrit dans une disposition.

+ +

Un élément avec display: flex se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et les marges des conteneurs ne fusionneront pas.

+ +

Pour un élément flexible, si celui-ci était avant un élément flottant ou dégagé (cleared) et qu'il devient flexible car son élément parent reçoit display: flex, le flottement et le dégagement ne s'appliquent plus. L'élément ne sera pas retiré du flux normal (ce qui aurait lieu avec un flottement). Si on a utilisé la propriété {{cssxref("vertical-align")}} avec inline-block ou si on a utilisé une disposition tabulaire, cela n'aura plus d'effet et on pourra utiliser les propriétés d'alignement des boîtes flexibles à la place.

+ +

Dans le prochain exemple, on applique un flottement sur les éléments fils puis leur conteneur reçoit display: flex. Si vous retirez display: flex, vous pouvez voir que l'élément .box s'écrase car aucun dégagement n'est appliqué. Cela permet de voir que le flottement s'applique. En remettant display: flex, l'élément ne s'écrase plus car les éléments fils sont devenus des éléments flexibles.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}

+ +

Les boîtes flexibles et la disposition en grille

+ +

La disposition en grille (CSS Grid) et les boîtes flexibles agissent de la même façon lorsqu'elles surchargent les autres méthodes de disposition. Les boîtes flexibles pourront être utilisées comme solution de repli si les grilles CSS ne sont pas prises en charge. En effet, les boîtes flexibles bénéficient d'une meilleure prise en charge pour les navigateurs moins récents. Cette approche fonctionne sans problème car, si un élément flexible devient un élément d'une grille, les propriétés flex qui auraient pu être affectées aux éléments enfants seront ignorées.

+ +

Les propriétés du module d'alignement des boîtes peuvent être utilisées pour ces deux modes de dispositions.

+ +

Flexbox / grille : quelle différence ?

+ +

On demande souvent quelle est la différence entre la disposition avec les boîtes flexibles et la disposition avec la grille CSS. Pourquoi avoir deux spécifications quand celles-ci semblent avoir le même effet ?

+ +

La réponse la plus directe se trouve dans ces deux spécifications. Les boîtes flexibles sont une méthode de disposition unidimensionnelle alors que la grille CSS est une méthode de disposition bidimensionnelle. Dans l'exemple ci-après, on utilise une disposition avec les boîtes flexibles. Comme nous avons vu dans l'article sur les concepts de base, les éléments flexibles peuvent « passer à la ligne » mais chaque ligne forme alors un conteneur flexible indépendant. On voit ici que l'espace est distribué sans prendre en compte le placement des éléments sur les autres lignes/colonnes, il n'y a pas d'alignement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}

+ +

Si on crée une disposition semblable avec une grille, on peut à la fois contrôler la disposition des lignes et des colonnes.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}

+ +

Ces exemples illustrent une autre différence majeure entre ces méthodes. Avec la disposition en grille, la majeure partie du dimensionnement s'applique au conteneur (on y définit les pistes et on place les éléments sur ces pistes). Avec la disposition utilisant les boîtes flexibles, on crée un conteneur flexible et on indique sa direction, tout le reste est géré au niveau des éléments.

+ +

Dans certains cas, les deux méthodes peuvent fonctionner sans problème. En les utilisant plus fréquemment, vous pourrez voir qu'elles répondent à des besoins différents et vous utiliserez sans doute ces deux méthodes dans votre CSS. Comme souvent, il n'y a pas de solution miracle et de « bonne » ou de « mauvaise » réponse.

+ +

De façon générale, si vous ajoutez des marges autour d'éléments flexibles afin que ceux-ci soient alignés, vous devriez utiliser une méthode de disposition bidimensionnelle comme la grille CSS qui vous permettra de mieux organiser votre contenu. La taille du composant à mettre en forme n'a pas d'importance, on n'utilisera pas plus les boîtes flexibles pour un « petit » composant et la grille pour un « grand ». Essayez les différentes méthodes, profitez de la liberté de choix qui existe désormais avec ces outils.

+ +

Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter cet article à propos des relations entre la grille CSS et les autres méthodes de disposition. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.

+ +

Les boîtes flexibles et display: contents

+ +

La valeur contents de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite ainsi dans la spécification :

+ +
+

« L'élément ne génère aucune boîte de lui-même mais ses éléments fils et ses pseudo-éléments continuent de générer des boîtes normalement. En termes de génération de boîtes et de disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document. »

+
+ +

La valeur de la propriété display contrôle la façon dont les boîtes sont générées et si un élément doit générer une boîte qui puisse être mise en forme et vue sur la page ou si la boîte normalement créée devrait être retirée afin que ses éléments fils soient « remontés » dans l'arbre et participent à la disposition dont l'élément (parent) aurait dû faire partie. Un exemple étant beaucoup plus efficace qu'un long discours, passons à la suite.

+ +

Dans l'exemple suivant on dispose d'un conteneur flexible avec trois éléments fils. L'un de ces éléments flexibles possède deux éléments à l'intérieur. Normalement, ces deux éléments ne participent pas à la disposition en boîtes flexibles, car cette disposition s'applique uniquement aux éléments fils directs du conteneur flexible.

+ +

En ajoutant display: contents à l'élément flexible qui contient deux éléments fils, on peut voir que l'élément disparaît de la disposition et permet à ses deux éléments fils d'agir comme des éléments flexibles. Vous pouvez essayer de retirer la ligne avec display: contents afin que l'élément parent « revienne ».

+ +

On notera que cela ne retire que la boîte de la disposition. Les éléments fils au deuxième niveau ne deviennent pas des éléments fils directs pour d'autres notions. On peut voir dans l'exemple qu'on utilise un sélecteur sur les éléments fils directs pour gérer l'arrière-plan et les bordures : ces styles n'ont pas été appliqués aux éléments fils de deuxième rang. Ces éléments ont été disposés comme des éléments flexibles, mais ils ne récupèrent pas la mise en forme des éléments fils directs.

+ +
+

Attention ! Utiliser display: contents entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé display: none). La valeur contents doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).

+
+ +

En retirant la boîte de l'élément parent, on ne peut pas utiliser cette boîte pour, par exemple, ajouter une couleur d'arrière-plan commune aux éléments fils imbriqués. Si on retire display: contents dans l'exemple, on peut voir que l'arrière-plan orange rattaché à l'élément disparaît avec la boîte.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}

+ +

La prise en charge de display:contents est actuellement limitée parmi les différents navigateurs et cette fonctionnalité est nécessaire au bon fonctionnement de cette démonstration. Firefox prend en charge display: contents et la gestion de cette valeur est en cours d'implémentation dans Chrome. Lorsque cette fonctionnalité sera plus largement disponible, elle sera très utile lorsqu'on souhaitera utiliser une structure à des fins sémantiques mais sans, pour autant, afficher les boîtes générées par défaut.

diff --git "a/files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" "b/files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" new file mode 100644 index 0000000000..6b78cba48f --- /dev/null +++ "b/files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" @@ -0,0 +1,101 @@ +--- +title: Maîtriser le passage à la ligne des éléments flexibles +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles +tags: + - CSS + - Grille + - Guide + - Intermediate + - flexbox + - grid + - wrapping +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +--- +

{{CSSRef}}

+ +

Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut row ou de nouvelles colonnes si flex-direction vaut column. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser une disposition en grille (CSS Grid).

+ +

Créer des passages à la ligne

+ +

La valeur initiale de la propriété {{cssxref("flex-wrap")}} est nowrap. Cela signifie que si on a un ensemble d'éléments flexibles trop larges pour tenir dans le conteneur, ces éléments dépasseront. Si on souhaite que ces éléments créent une nouvelle ligne lorsque la largeur du conteneur est dépassée, on peut ajouter la propriété flex-wrap avec la valeur wrap, ou utiliser la propriété raccourcie {{cssxref("flex-flow")}} avec les valeurs row wrap ou column wrap.

+ +

Les éléments passeront alors à la ligne dans le conteneur. Dans l'exemple qui suit, on dispose de 10 éléments pour lesquels flex-basis vaut 160px et qui peuvent grandir/rétrécir. Une fois que la première ligne est composée de suffisamment d'éléments et qu'il n'y a plus d'espace suffisant pour placer un autre objet de 160 pixels, une nouvelle ligne flexible est créée dans laquelle on place les éléments suivants et ainsi de suite. Les éléments pouvant grandir, ils s'étireront sur plus de 160 pixels afin de remplir chaque ligne complètement. S'il n'y a qu'un seul élément sur la dernière ligne, cet élément s'étirera pour remplir toute la ligne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}

+ +

On peut avoir le même effet en colonnes. Ici le conteneur devra avoir une hauteur afin que les éléments créent de nouvelles colonnes et s'étirent en hauteur pour remplir chaque colonne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}

+ +

Le retour à la ligne et flex-direction

+ +

Le retour à la ligne fonctionne comme on pourrait s'y attendre lorsqu'on manipule flex-direction. Si flex-direction vaut row-reverse, les éléments commenceront à créer une nouvelle ligne à partir de la ligne de fin du conteneur et rempliront les lignes dans l'ordre inverse.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}

+ +

On notera que l'inversion a uniquement lieu dans le sens de la ligne. On démarre à droite puis on passe à la deuxième ligne pour laquelle on démarre également à droite. On n'inverse pas les deux directions et on ne commence donc pas à partir du bas du conteneur pour le remplir vers le haut.

+ +

Des explications sur cette disposition unidimensionnelle

+ +

Comme nous avons pu le voir dans les exemples précédents, si les éléments peuvent grandir et rétrécir, lorsqu'il y a moins d'éléments dans la dernière ligne ou colonne, ces éléments grandissent pour occuper tout l'espace disponible.

+ +

Il n'existe pas de méthode, avec les boîtes flexibles, qui permettent d'aligner les éléments d'une ligne avec ceux de la ligne du dessus : chaque ligne flexible agit comme un nouveau conteneur, décorrélé du précédent et gère la distribution de l'espace sur l'axe principal pour cette ligne uniquement. S'il n'y a qu'un seul élément et que celui-ci peut grandir, il remplira alors tout l'espace, comme si on a avait eu un conteneur flexible avec un seul élément flexible.

+ +

Si on souhaite organiser du contenu sur deux dimensions, mieux vaut utiliser les grilles CSS. On peut comparer notre exemple précédent avec la version utilisant une disposition en grille pour observer les différences. Dans l'exemple qui suit, on utilise une grille CSS composée d'autant de colonnes de 160 pixels de large que possible et on distribue l'espace restant entre chaque colonne. Toutefois, les éléments restent ici sur la grille et ne s'étirent pas s'il y en a moins sur la dernière ligne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}

+ +

C'est la différence entre une disposition unidimensionnelle et une disposition bidimensionnelle. Avec une méthode unidimensionnelle comme les boîtes flexibles, on ne contrôle que la ligne ou la colonne. Avec une méthode bidimensionnelle, on contrôle les deux axes simultanément. Aussi, si vous souhaitez organiser l'espace ligne par ligne ou colonne par colonne, vous pouvez utiliser les boîtes flexibles mais sinon, utilisez les grilles CSS.

+ +

Comment fonctionnent les systèmes de grilles basés sur les boîtes flexibles ?

+ +

La plupart du temps, les systèmes de grilles basés sur les boîtes flexibles fonctionnent en combinant les boîtes flexibles et les dispositions avec les flottements (floats). Si on affecte des largeurs en pourcentage aux éléments flexibles (via flex-basis ou avec une largeur sur l'élément et avec flex-basis en auto) on peut obtenir l'impression d'une disposition organisée sur deux dimensions, comme on peut voir dans l'exemple ci-après.

+ +

Dans cet exemple, on a flex-grow et flex-shrink qui valent 0 afin que les éléments ne soient pas flexibles et que leur flexibilité puisse être maîtrisée avec des pourcentages, comme on pouvait le faire avec des dispositions flottantes.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}

+ +

Si on souhaite que les éléments flexibles s'alignent le long de l'axe secondaire, on pourra ajuster les largeurs avec ces pourcentages. Dans la plupart des cas, cet ajout de largeur aux éléments flexibles témoigne plutôt d'un scénario où les grilles CSS seraient plus pertinentes.

+ +

Créer des gouttières entre les éléments

+ +

Lorsque les éléments flexibles passent à la ligne, il faudra sans doute les espacer. À l'heure actuelle, il n'existe pas d'implémentation des propriétés de gouttières pour le module d'alignement des boîtes et pour Flexbox. À l'avenir, nous pourrons utiliser row-gap et column-gap pour les boîtes flexibles, comme nous pouvons le faire avec les grilles CSS. En attendant, il faut utiliser les marges pour obtenir l'effet escompté.

+ +

On peut voir dans l'exemple suivant que créer des gouttières entre les éléments sans créer d'espace sur les bords des conteneurs nécessite l'utilisation de marges négatives sur le conteneur flexible. Toutes les bordures du conteneur flexibles sont déplacées vers un deuxième conteneur afin que la marge négative puisse absorber les éléments le long du conteneur.

+ +

Cette contrainte sera levée lorsque les propriétés de gouttières seront implémentées. De telles gouttières s'appliqueront uniquement sur les bords des éléments situés à l'intérieur du conteneur.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}

+ +

L'impact de visibility: collapse

+ +

La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique visibility: collapse (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit :

+ +
+

“Indiquer visibility:collapse sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de visibility:collapse sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe  secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - Éléments repliés

+
+ +

Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario.

+ +

Dans l'exemple qui suit, on a un conteneur flexible sans passage à la ligne. Le troisième élément possède plus de contenu que les autres mais est paramétré avec visibility: collapse et le conteneur flexible conserve donc une toise pour la hauteur nécessaire à l'affichage de cet élément. Si on retire visibility: collapse ou qu'on modifie la valeur de visible, on pourra voir l'élément disparaître et l'espace être redistribué entre les éléments qui ne sont pas repliés. La hauteur du conteneur flexible ne devrait pas changer.

+ +
+

Note : Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent collapse comme équivalent à hidden.

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}

+ +

Lorsqu'on manipule des conteneurs flexibles qui sont composés de plusieurs lignes flexibles, il faut être conscient que le passage à la ligne est réappliqué après le repliage des éléments. Ainsi, le navigateur doit réappliquer les mécanismes de passage à la ligne afin de tenir compte de l'espace libéré par l'élément plié dans la direction principale.

+ +

Cela signifie qu'un ou plusieurs éléments pourraient être déplacés sur une autre ligne que leur ligne initiale.

+ +

Vous pouvez observer ce comportement dans l'exemple qui suit. On peut voir comment la composition des lignes varie en fonction de l'élément qui est replié. Si vous ajoutez plus de contenu au deuxième élément, il changera de ligne s'il est suffisamment grand. La ligne du haut sera alors aussi haute qu'une seule ligne de texte.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}

+ +

Si cela pose problème dans votre structure, il peut être nécessaire de revoir son organisation et, par exemple, de placer chaque ligne de contenu dans un conteneur flexible séparé afin que le contenu ne puisse pas changer de ligne.

+ +

La différence entre visibility: collapse et display: none

+ +

Lorsqu'on utilise display: none sur un élément afin de le cacher, cet élément est complètement retiré de la structure de la page. En pratique, cela signifie que les compteurs ignoreront cet élément et que les opérations telles que les transitions ne lui seront pas appliquées. visibility: hidden permet quant à elle de conserver la boîte dans la structure et peut être pratique si on souhaite que l'élément contribue à la disposition sans que l'utilisateur puisse le voir.

diff --git a/files/fr/web/css/css_flexible_box_layout/mixins/index.html b/files/fr/web/css/css_flexible_box_layout/mixins/index.html new file mode 100644 index 0000000000..652541e0c1 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/mixins/index.html @@ -0,0 +1,369 @@ +--- +title: Mises en page avancées avec les boîtes flexibles +slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins +tags: + - CSS + - Reference + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins +--- +
{{CSSRef}}
+ +

Voici un ensemble de mixins pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.

+ +

Dans ces mixins, on utilisera :

+ +
    +
  • Des fallbacks avec l'ancienne syntaxe 'box' (Firefox et les anciens WebKit) et les syntaxes préfixées (IE10, les navigateurs WebKit sans ajout de flex)
    • +
  • La syntaxe finale standard (Firefox, Safari, Chrome, IE11, Opera)
    • +
+ +

Ces mixins ont été inspirés par : https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

+ +

Et les articles suivants ont été d'une aide précieuse :

+ + + +
+

Note : Actuellement, les mixins ne sont pas pris en charge nativement par les navigateurs. Il faut utiliser un pré-processeur CSS afin de tirer parti des techniques suivantes. Cependant, les pré-processeurs ne font que générer du code CSS valide et on pourra donc appliquer les techniques précédentes en utilisant du « pur » CSS si on le souhaite.

+
+ +

Les conteneurs flexibles

+ +

En utilisant la valeur flex pour la propriété {{cssxref("display")}}, on génère une boîte pour un conteneur flexible de bloc. La valeur inline-flex permet quant à elle de générer un conteneur flexible en ligne (inline).

+ + + +
+
@mixin flexbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+// Exemple d'utilisation
+%flexbox { @include flexbox; }
+
+ +
+
@mixin inline-flex {
+  display: -webkit-inline-box;
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }
+
+ +

Direction des boîtes flexibles

+ +

La propriété {{cssxref("flex-direction")}} indique la façon dont les objets flexibles sont organisés dans le conteneur flexible en définissant la direction principale du conteneur. Autrement dit, elle détermine la direction selon laquelle les éléments flexibles sont disposés.

+ +
    +
  • Valeurs possibles : row (la valeur par défaut)| row-reverse | column | column-reverse
    • +
  • Spécification
    • +
+ +
+
@mixin flex-direction($value: row) {
+  @if $value == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: reverse;
+    -moz-box-orient: horizontal;
+  } @else if $value == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: normal;
+    -moz-box-orient: vertical;
+  } @else if $value == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: reverse;
+    -moz-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: normal;
+    -moz-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+}
+
+// Version plus courte :
+@mixin flex-dir($args...) { @include flex-direction($args...); }
+
+ +

flex-wrap

+ +

La propriété {{cssxref("flex-wrap")}} permet de contrôler si le conteneur flexible s'étend sur une ou sur un plusieurs lignes ainsi que la direction de l'axe secondaire (qui définit la direction dans laquelle les lignes sont « empilées »).

+ +
    +
  • Valeurs possibles : nowrap (la valeur par défaut)| wrap | wrap-reverse
    • +
  • Spécification
    • +
+ +
+
@mixin flex-wrap($value: nowrap) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+ +

flex-flow

+ +

La propriété {{cssxref("flex-flow")}} est une propriété raccourcie pour définir flex-direction et flex-wrap qui permettent respectivement de définir l'axe principal et l'axe secondaire.

+ +
    +
  • Valeur par défaut : row (la valeur par défaut)| nowrap
    • +
  • Spécification
    • +
+ +
+
@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}
+
+ +

order

+ +

La propriété {{cssxref("order")}}  contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux.

+ +
    +
  • Valeur : un entier ({{cssxref("<integer>")}} (0 est la valeur par défaut)
    • +
  • Spécification
    • +
+ +
+
@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -moz-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}
+
+ +

flex-grow

+ +

La propriété {{cssxref("flex-grow")}} définit le facteur d'expansion flexible. Les nombres négatifs ne sont pas autorisés.

+ +
    +
  • Valeur : un entier ({{cssxref("<integer>")}} (1 est la valeur par défaut)
    • +
  • Spécification
    • +
+ +
+
@mixin flex-grow($int: 1) {
+  -webkit-box-flex: $int;
+  -moz-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -ms-flex: $int;
+  flex-grow: $int;
+}
+
+ +

flex-shrink

+ +

La propriété {{cssxref("flex-shrink")}} permet de définir le facteur de réduction des éléments flexibles. Les nombres négatifs ne sont pas autorisés.

+ +
    +
  • Valeur : un entier ({{cssxref("<integer>")}} (1 est la valeur par défaut)
    • +
  • Spécification
    • +
+ +
+
@mixin flex-shrink($int: 0) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex: $int;
+  flex-shrink: $int;
+}
+
+ +

flex-basis

+ +

La propriété {{cssxref("flex-basis")}} permet de définir la longueur de base à partir de laquelle s'étendre ou se réduire. Les longueurs négatives ne sont pas autorisées.

+ +
    +
  • Valeurs : voir la page {{cssxref("flex-basis")}}, la valeur par défaut est auto.
    • +
  • Spécification
    • +
+ +
+
@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  flex-basis: $value;
+}
+
+ +

flex

+ +

La propriété raccourcie {{cssxref("flex")}} permet de définir les composants d'une longueur flexible : le facteur d'expansion (flex-grow), le facteur de réduction (flex-shrink) et la longueur de base (flex-basis). Lorsqu'un élément est un élément flexible, c'est flex qui sera utilisée (plutôt que width ou height) afin de déterminer la taille de l'élément. Si l'élément n'est pas un objet flexible, flex n'aura aucun effet.

+ +
    +
  • Valeur : voir la page {{cssxref("flex")}} pour les valeurs possibles et la valeur par défaut
    • +
  • Spécification
    • +
+ +
+
@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+
+  // Définir une variable pour l'utiliser
+  // avec les propriétés box-flex
+  $fg-boxflex: $fg;
+
+  // Box-Flex ne prend qu'une valeur, on prend donc
+  // la première valeur de la liste et on la renvoie.
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box: $fg-boxflex;
+  -moz-box: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -ms-flex: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}
+
+ +

justify-content

+ +

La propriété {{cssxref("justify-content")}} permet d'aligner les éléments flexibles le long de l'axe principal pour la ligne en cours dans le conteneur flexible. Cet alignement s'effectue après que les longueurs flexibles et les marges automatiques aient été résolues. Généralement, cela permet de distribuer l'espace restant entre les éléments d'une ligne qui ne sont pas flexibles ou qui ont atteint leur taille maximale. Cela contrôle également le comportement des éléments lorsqu'ils dépassent de la ligne.

+ +
+

Note : Les valeurs de la forme space-* ne sont pas prises en charge avec les anciennes syntaxes.

+
+ +
    +
  • Valeurs : flex-start (la valeur par défaut)| flex-end | center | space-between | space-around
    • +
  • Spécification
    • +
+ +
+
@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -moz-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  justify-content: $value;
+}
+  // Version plus courte :
+  @mixin flex-just($args...) { @include justify-content($args...); }
+
+ +

align-items

+ +

Les objets flexibles peuvent être alignés le long de l'axe secondaire (comme pour justify-content mais dans l'axe perpendiculaire). {{cssxref("align-items")}} définit l'alignement par défaut de tous les objets du conteneur flexible. align-self permet aux objets flexibles de surcharger cette valeur (pour les objets anonymes, align-self correspondra toujours à align-items).

+ +
    +
  • Valeurs : flex-start | flex-end | center | baseline | stretch (la valeur par défaut)
    • +
  • Spécification
    • +
+ +
+
@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -moz-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -moz-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  align-items: $value;
+}
+
+ +

align-self

+ +
    +
  • Valeurs : auto (la valeur par défaut)| flex-start | flex-end | center | baseline | stretch
    • +
  • Spécification
    • +
+ +
+
@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+ +

align-content

+ +

La propriété {{cssxref("align-content")}} permet d'aligner les lignes créées dans le conteneur flexible lorsqu'il reste de l'espace le long de l'axe secondaire. Cette propriété n'a aucun effet lorsqu'il n'y a qu'une seule ligne.

+ +
    +
  • Valeurs : flex-start | flex-end | center | space-between | space-around | stretch (la valeur par défaut)
    • +
  • Spécification
    • +
+ +
+
@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}
+
diff --git "a/files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" "b/files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" new file mode 100644 index 0000000000..acd32e0de0 --- /dev/null +++ "b/files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" @@ -0,0 +1,139 @@ +--- +title: Ordonner les éléments flexibles +slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles +tags: + - Accessibilité + - Boîtes flexibles + - CSS + - Guide + - Intermediate + - a11y + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +--- +

{{CSSRef}}

+ +

Les nouvelles méthodes de disposition telles que les boîtes flexibles (flexbox) et la grille CSS (CSS Grid) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.

+ +

Inverser l'affichage des éléments

+ +

La propriété {{cssxref("flex-direction")}} peut être utilisée avec quatre valeurs :

+ +
    +
  • row
    • +
  • column
    • +
  • row-reverse
    • +
  • column-reverse
    • +
+ +

Les deux premières valeurs permettent de conserver l'ordre des éléments tels qu'ils apparaissent dans le document source et de les afficher les uns à la suite des autres à partir de la ligne du début.

+ +

Les objets sont affichés sur une ligne horizontale qui commence à gauche.

+ +

Les objets sont affichés sur une colonne qui commence en haut.

+ +

Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les lignes de début et de fin.

+ +

Les éléments sont affichés dans l'ordre inverse et commencent à droite.

+ +

Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas.

+ +

Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment row et row-reverse fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), row correspondrait au côté droit et  row-reverse au côté gauche.

+ +

Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse.

+ +

Cette méthode peut donc sembler efficace pour afficher des éléments dans un ordre inversé. Toutefois, il faut garder à l'esprit que seul l'affichage est inversé. Sur ce sujet, la spécification explique :

+ +
+

“Note : les possibilités de réorganisation de la disposition flexible modifient uniquement et intentionnellement le rendu visuel. L'ordre de lecture et l'ordre de navigation restent basés sur l'ordre des éléments dans le document source. Cela permet aux auteurs de manipuler la présentation visuelle toute en conservant intact l'ordre de la source pour les agents utilisateurs qui n'utilisent pas CSS et pour les modèles de navigation linéaires comme la navigation vocale ou séquentielle.” - Ordre et Orientation

+
+ +

Si les éléments présentés étaient des liens ou d'autres éléments sur lequel un utilisateur pourrait naviguer grâce aux tabulations, l'ordre de la navigation au clavier serait celui des éléments dans le document source et ne correspondrait alors pas à l'ordre visuel.

+ +

Si vous utilisez une valeur qui inverse cet affichage ou une méthode qui réordonne vos éléments, demandez-vous s'il ne faut pas modifier l'ordre logique des éléments dans le document source. Par la suite, la spécification émet un avertissement : ces valeurs de réorganisation ne doivent pas être utilisées comme palliatifs à un problème dans l'ordre du document source :

+ +
+

“Les auteurs ne doivent pas utiliser order ou les valeurs -reverse de flex-flow/flex-direction comme remplacement d'un ordre correct dans le document source car cela peut nuire à l'accessibilité du document.”

+
+ +
+

Note : Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.

+
+ +

Dans l'exemple qui suit, nous avons ajouté une mise en forme sur le focus afin que vous puissiez voir quel lien est actif lorsque vous naviguez au clavier. Si vous modifier la valeur de flex-direction, vous pouvez voir que la navigation au clavier continue de suivre l'ordre dans lequel les éléments sont écrits dans le document source.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

+ +

De la même façon, changer la valeur de flex-direction ne modifie pas l'ordre avec lequel on navigue parmi les éléments. Cela ne modifie pas non plus l'ordre dans lequel les éléments sont rendus à l'écran. Il s'agit uniquement d'une inversion visuelle.

+ +

La propriété order

+ +

En plus de cette inversion, il est également possible de cibler des éléments en particulier et de modifier leur ordre visuel grâce à la propriété {{cssxref("order")}}.

+ +

La propriété order permet de disposer les éléments au sein de groupes ordinaux. Cela signifie que chaque élément reçoit un entier qui représente le numéro d'un groupe. Les éléments sont ensuite placés visuellement dans l'ordre qui correspond à cet entier, les éléments avec les numéros les plus petits étant placés en premiers. Si plusieurs éléments possèdent le même coefficient, les éléments de ce groupe sont alors ordonnés en suivant l'ordre du document source entre eux.

+ +

Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les valeurs order comme suit :

+ +
    +
  • Premier élément selon la source : order: 2
    • +
  • Deuxième élément selon la source : order: 3
    • +
  • Troisième élément selon la source : order: 1
    • +
  • Quatrième élément selon la source :order: 3
    • +
  • Cinquième élément selon la source :order: 1
    • +
+ +

Les éléments seront affichés sur la page dans l'ordre suivant :

+ +
    +
  • Troisième élément selon la source : order: 1
    • +
  • Cinquième élément selon la source : order: 1
    • +
  • Premier élément selon la source : order: 2
    • +
  • Deuxième élément selon la source : order: 3
    • +
  • Quatrième élément selon la source : order: 3
    • +
+ +

Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé.

+ +

Vous pouvez manipuler les valeurs dans l'exemple qui suit afin de voir comment l'ordre est modifié. Essayez également de modifier la valeur de flex-direction pour utiliser row-reverse — la ligne de début est inversée et l'ordre des éléments commence à partir du côté opposé.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}

+ +

Par défaut, la valeur de la propriété order est 0 pour les éléments flexibles. Aussi, si on utilise un coefficient supérieur à 0, les éléments concernés seront affichés après les éléments pour lesquels aucune valeur explicite n'a été fournie pour order.

+ +

On peut également utiliser des valeurs négatives. Cela est plutôt pratique si on souhaite afficher un élément en premier sans avoir à indiquer de valeurs pour les autres éléments : il suffira d'affecter l'ordre -1 au premier élément. Cette valeur étant inférieure à 0, l'élément sera toujours affiché en premier.

+ +

Dans l'exemple qui suit, les éléments sont disposés avec les boîtes flexibles. En modifiant l'élément qui possède la classe active dans le code HTML, vous pouvez modifier l'élément qui apparaît en premier et qui prend alors toute la largeur en haut, les autres éléments étant affichés en dessous.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

+ +

Les éléments sont affichés dans ce que la spécification intitule un ordre modifié à partir de l'ordre du document (en anglais "order-modified document order"). La valeur de la propriété order est prise en compte avant que les éléments soient affichés.

+ +

L'ordre modifie également l'ordre de rendu des éléments à l'écran. Les éléments pour lesquels order est plus petit seront affichés en premier et ceux avec un coefficient d'ordre plus élevé seront affichés ensuite.

+ +

La propriété order et l'accessibilité

+ +

La propriété order aura exactement les mêmes conséquences qu'une modification de flex-direction sur l'accessibilité. Utiliser order modifie l'ordre dans lequel les éléments sont affichés à l'écran et l'ordre dans lequel ils sont présentés visuellement. Cela ne modifie pas l'ordre de navigation. Aussi, si un utilisateur navigue grâce aux tabulations entre les éléments, cette disposition peut prêter à confusion.

+ +

En utilisant la tabulation pour naviguer au sein des exemples de cette page, vous pouvez voir comment l'ordre peut créer une expérience pour le moins étrange de navigation si on n'utilise pas de pointeur (souris, stylet, interface tactile). Pour approfondir cette notion et les problèmes qu'un déphasage entre l'ordre visuel et logique peut causer, vous pouvez consulter les ressources suivantes :

+ + + +

Cas d'utilisation pour order

+ +

Il existe certains cas où l'ordre logique (correspondant à l'ordre de lecture) est distinct de l'ordre visuel. Dans ces cas, utiliser la propriété order à bon escient permet d'implémenter certains motifs récurrents.

+ +

Prenons comme exemple une disposition avec des cartes dont chacune contient une nouvelle. Le titre de la nouvelle est l'élément qui doit être mis en avant et celui sur lequel l'utilisateur doit arriver s'il navigue au clavier à la recherche d'un contenu à lire. Chaque carte possède également une date de façon à obtenir un design comme celui-ci.

+ +

Un composant avec une date, un titre puis un contenu.

+ +

Visuellement, la date apparaît au-dessus du titre. Toutefois, si la carte était lue par un lecteur d'écran, on préfèrerait que le titre soit annoncé en premier puis que soit ensuite lue la date de publication. Pour ce faire, on peut utiliser la propriété order.

+ +

Dans cet exemple, la carte sera le conteneur flexible et flex-direction aura la valeur column. Pour la date, on affectera un ordre avec la propriété order qui vaut -1 qui permettra de la placer au-dessus du titre.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

+ +

Ces légères adaptations sont caractéristiques des cas où la propriété order se révèle pertinente. L'ordre logique doit suivre l'ordre de lecture et de navigation au clavier dans le document. Il doit maintenir la structure de la façon la plus accessible. order peut alors être ensuite utilisé pour opérer des ajustements visuels. Lorsque vous réordonnez des éléments, assurez-vous que cela n'a pas d'impact sur les éléments parmi lesquels on peut naviguer au clavier. De façon générale, lorsque vous utilisez de nouvelles méthodes de disposition, assurez-vous que la phase de test via le navigateur inclut également des tests de navigation au clavier (sans souris ni écran tactile). Vous pourrez alors rapidement constater si vos choix de développement rendent certains contenus difficiles d'accès.

diff --git "a/files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" "b/files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" new file mode 100644 index 0000000000..b36e1eb0f4 --- /dev/null +++ "b/files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" @@ -0,0 +1,121 @@ +--- +title: Rétrocompatibilité de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox +tags: + - '@supports' + - Boîtes flexibles + - CSS + - Guide + - Intermediate + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +--- +
{{CSSRef}}
+ +

Les boîtes flexibles (flexbox) sont largement prises en charge parmi les navigateurs modernes. Toutefois, quelques problèmes peuvent survenir. Dans ce guide, nous verrons précisément quelle est la prise en charge des boîtes flexibles dans les navigateurs. Nous verrons les problèmes éventuels ainsi que les ressources et méthodes afin de créer des méthodes de contournement ou des alternatives.

+ +

Il était une fois flexbox…

+ +

Comme toute spécification CSS, la spécification Flexbox a vu de nombreuses modifications avant d'atteindre le statut de Candidate Recommendation dont elle dispose aujourd'hui. Dans cet état actuel, il ne devrait pas y avoir de modification majeur dans la spécification, mais cette stabilité n'a pas toujours existé par le passé.

+ +

Les boîtes flexibles ont été implémentées de façon expérimentale dans plusieurs navigateurs. À cette époque, créer une implémentation expérimentale consistait à utiliser un préfixe spécifique. Ces préfixes devaient permettre aux implémentations de la spécification d'être testées et manipulées par les développeurs des navigateurs et par les développeurs web, sans qu'il y ait de conflit avec les autres implémentations. On ne devait pas utiliser d'implémentation expérimentale pour du code de production. Toutefois, les préfixes ont fini par être utilisés en production et les modifications apportées à la spécification expérimentale nécessitaient une réactivité des développeurs web pour maintenir leurs sites.

+ +

En 2009, la spécification était plutôt différente. Pour créer un conteneur flexible, il fallait utiliser display: box et on disposait ensuite de différentes propriétés box-* qui permettaient d'obtenir des résultats semblables à ceux qu'offrent les boîtes flexibles actuelles.

+ +

Vint ensuite une mise à jour de la spécification pour mettre à jour la syntaxe : display: flexbox — là encore, ces valeurs étaient préfixées.

+ +

Enfin, la spécification a été mise à jour pour définir display: flex comme façon de créer un conteneur flexible. La prise en charge des navigateurs sur la version à jour de la spécification est excellent à partir de ce moment.

+ +

Quelques anciens articles font référence à d'anciennes versions de la spécification. Ceux-ci sont facilement identifiables en raison des modifications concernant la création d'un conteneur flexible. Si vous lisez des règles telles que display: box ou display: flexbox, vous pouvez en déduire qu'il s'agit d'informations obsolètes.

+ +

État de la compatibilité des navigateurs

+ +

La prise en charge des navigateurs pour les boîtes flexibles est excellente et la grande partie des navigateurs n'ont pas besoin de préfixe. Safari a été le dernier des principaux navigateurs à retirer les préfixes avec la sortie de Safari 9 en 2015. Les deux navigateurs pour lesquels il est nécessaire de faire attention à la compatibilité sont :

+ +
    +
  • Internet Explorer 10 qui implémentait la version display: flexbox avec le préfixe -ms-.
    • +
  • UC Browser qui prend en charge la version de 2009 avec display: box et avec le préfixe -webkit-.
    • +
+ +

On notera qu'Internet Explorer 11 prend bien en charge la spécification actuelle avec display: flex mais que de nombreux bugs sont présents dans cette implémentation.

+ +

Problèmes fréquents

+ +

La plupart des problèmes relatifs aux boîtes flexibles sont liés aux modifications de la spécification lors de son développement et au fait que de nombreux développeurs ont essayé d'utiliser des implémentations expérimentales en production. Si vous souhaitez garantir une rétrocompatibilité avec certaines anciennes versions de navigateurs et notamment IE10 et IE11, le site Flexbugs représente une ressource précieuse. Vous pourrez voir que de nombreux bugs sont présents pour d'anciennes versions des navigateurs et sont désormais corrigés pour les versions actuelles. Chacun de ces bugs possède une méthode de contournement associée, ce qui peut faire gagner un temps précieux.

+ +

Si vous souhaitez inclure de très anciens navigateurs prenant en charge les boîtes flexibles, il vous faudra inclure les préfixes éditeurs dans votre feuille CSS, en plus de la version non-préfixée. Cela devient de moins en moins nécessaire vue l'étendue de la compatibilité actuelle.

+ +
.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+ +

Autoprefixer Online est un outil utile pour déterminer quels préfixes sont recommandés selon les versions des navigateurs qu'on souhaite prendre en charge. Vous pouvez également consulter Can I Use ou les tableaux de compatibilité en bas des pages de référence MDN pour savoir quand les préfixes ont été retirés des navigateurs.

+ +

Techniques de recours

+ +

La mise en place des boîtes flexibles dans un document est effectuée grâce à la propriété {{cssxref("display")}}. Lorsqu'on souhaite prendre en charge de très anciens navigateurs qui ne prennent pas du tout en charge les boîtes flexibles, des méthodes alternatives peuvent être construites en surchargeant une méthode de disposition par une autre. La spécification définit ce qui se produit si on utilise une autre méthode de disposition sur un élément qui devient ensuite un élément flexible.

+ +

Éléments flottants

+ +
+

“float et clear ne créent pas de flottement ou de dégagement pour les éléments flexibles et ne les retirent pas du flux.” - 3. Conteneurs flexibles

+
+ +

Dans l'exemple qui suit, on a deux blocs flottants et on applique ensuite display: flex sur le conteneur. Les éléments sont alors des éléments flexibles ce qui signifie qu'ils sont étirés sur des hauteurs égales. Tout comportement associé au flottement n'aura pas lieu.

+ +

Pour tester le comportement alternatif, vous pouvez retirer display: flex du conteneur englobant.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}

+ +

display: inline-block

+ +

Lorsqu'un élément disposé avec inline-block devient un élément flexible, cet élément devient analogue à un bloc et le comportement de display: inline-block qui permet de conserver les espaces blancs entre les éléments ne s'applique plus.

+ +

Vous pouvez retirer la règle avec display: flex dans l'exemple qui suit pour voir le comportement alternatif. Vous verrez de l'espace ajouté entre les éléments car c'est ce que préfère display: inline-block.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}

+ +

display: table-

+ +

Les propriétés CSS relatives aux dispositions en tableaux s'avèrent potentiellement très utiles comme méthode de recours car elles permettent d'obtenir des organisations de contenu analogues avec des colonnes sur toute la hauteur, du centrage vertical et car elles fonctionnent jusqu'à Internet Explorer 8.

+ +

Si vous utilisez display: table-cell sur un élément HTML, cet élément récupèrera la mise en forme d'une cellule de tableau HTML. Pour celles-ci, CSS crée des boîtes anonymes qui représentent ces éléments et il n'est pas nécessaire d'envelopper chaque élément dans un conteneur pour représenter une ligne puis dans un second qui représente le tableau. Il n'est pas possible de mettre en forme ces boîtes anonymes, celles-ci servent uniquement à corriger la structure.

+ +

Si vous déclarez ensuite display: flex sur l'élément parent, ces boîtes anonymes ne sont pas créées et l'élément redevient un enfant direct qui peut devenir un élément flexible, perdant tout aspect relatif au tableau.

+ +
+

“Note : certaines valeurs de display déclenchent normalement la création de boîtes anonymes autour de la boîte originale. Si une telle boîte est un élément flexible, cet élément devient un bloc puis la création des boîtes anonymes n'a pas lieu. Ainsi, deux éléments flexibles adjacents avec display: table-cell deviendront deux éléments flexibles distincts avec display: block plutôt que d'être enveloppés au sein d'un même tableau anonyme.” - 4. Éléments flexibles

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}

+ +

La propriété vertical-align

+ +

L'exemple qui suit illustre l'utilisation de la propriété {{cssxref("vertical-align")}} associée au mode display: inline-block. Les deux modes display: table-cell et display: inline-block permettent d'utiliser cette propriété. La propriété vertical-align permet d'opérer un alignement vertical avant l'application des boîtes flexibles. Cette propriété est ignorée avec les boîtes flexibles et elle peut donc être utilisée avec display: table-cell ou display: inline-block comme méthode d'alignement alternative aux propriétés d'alignement des boîtes flexibles.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}

+ +

Requêtes de fonctionnalités et flexbox

+ +

Il est possible d'utiliser les requêtes de fonctionnalité (feature queries) afin de détecter la prise en charge des boîtes flexibles :

+ +
@supports (display: flex) {
+  // code utilisé pour les navigateurs qui
+  // prennent en charge cette fonctionnalité
+}
+ +

On notera qu'Internet Explorer 11 ne prend pas en charge les requêtes de fonctionnalité mais prend bien en charge les boîtes flexibles. Si vous choisissez de considérer l'implémentation d'IE11 comme étant trop erronée et que vous souhaitez que ce navigateur utilise votre code de recours, vous pouvez alors utiliser les requêtes de fonctionnalité pour ne servir le code flexbox qu'aux navigateurs qui disposent d'une prise en charge suffisante. Pour rappel, si on souhaite inclure les versions des navigateurs qui utilisaient des préfixes spécifiques, on devra inclure la version préfixée dans la requête de fonctionnalité. La requête suivant inclura par exemple UC Browser qui prend en charge les requêtes de fonctionnalités et une ancienne syntaxe, préfixée, pour les boîtes flexibles :

+ +
@supports (display: flex) or (display: -webkit-box) {
+  // code pour les navigateurs qui
+  // prennent en charge cette fonctionnalité
+}
+ +

Pour plus d'informations sur les requêtes de fonctionnalités, vous pouvez lire Using Feature Queries in CSS (en anglais) sur le blog Hacks de Mozilla.

+ +

Conclusion

+ +

Bien que nous ayons vu ici certains problèmes potentiels et méthodes alternatives, les boîtes flexibles peuvent tout à fait être utilisées en production et de façon généralisée. Ce guide vous sera utile si vous rencontrez un problème particulier ou qu'il vous faut prendre en charge de plus vieux navigateurs.

diff --git a/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html b/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html new file mode 100644 index 0000000000..663f0a9c8a --- /dev/null +++ b/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html @@ -0,0 +1,68 @@ +--- +title: Être ou ne pas être dans le flux +slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +--- +
{{CSSRef}}
+ +

Dans le précédent guide, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.

+ +

Dans l'exemple qui suit, on a un titre, un paragraphe, une liste puis un paragraphe final qui contient un élément strong. Le titre et les paragraphes sont des éléments de blocs et l'élément strong est un élément en ligne. La liste est affichée en utilisant les boîtes flexibles afin d'avoir les éléments de la liste sur une même ligne mais cette liste contribue bien à la disposition en ligne et en bloc car le conteneur a un type display externe qui vaut block.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}

+ +

Dans ce cas, on peut dire que tous les éléments sont « dans le flux » et ils apparaissent sur la page selon le même ordre que le document source.

+ +

Retirer un élément du flux

+ +

Tous les éléments d'un document sont dans le flux à l'exception :

+ +
    +
  • des éléments flottants
    • +
  • des éléments avec position: absolute ou avec position: fixed
    • +
  • de l'élément racine (html)
    • +
+ +

Les éléments qui ne sont pas dans le flux créent un nouveau contexte de formatage de bloc (ou Block Formatting Context (BFC) en anglais) et tout ce qui est dans ce contexte peut être vu comme une disposition imbriquée, séparée et indépendante du reste de la page. L'élément racine est ainsi en dehors du flux car c'est le conteneur qui contient l'intégralité du document et qui fournit le contexte de formatage de bloc pour l'ensemble du document.

+ +

Les éléments flottants

+ +

Dans cet exemple, on a un élément div puis deux paragraphes. On a ajouté une couleur d'arrière-plan sur les paragraphes puis on a appliqué un flottement à gauche pour l'élément div. L'élément div est désormais en dehors du flux.

+ +

Un élément flottant est d'abord disposé à l'endroit où il aurait été dans le flux normal puis il est retiré du flux et déplacé. Ici, il est déplacé le plus à gauche possible.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}

+ +

On peut voir que la couleur du paragraphe suivant s'étend en dessous. Seules les boîtes de ligne du paragraphe ont été raccourcies et causent le passage à la ligne du contenu autour de l'élément flottant. La boîte du paragraphe s'affiche toujours selon les règles du flux normal. C'est pour cela qu''il faut ajouter une marge autour de l'élément flottant si on veut créer un espace autour. Avec une marge, on repoussera les boîtes de lignes adjacentes. Il n'est pas possible d'appliquer quoi que ce soit au contenu dans le flux pour obtenir le même effet.

+ +

Le positionnement absolu

+ +

En utilisant position: absolute ou position: fixed sur un élément, celui-ci est retiré du flux et tout l'espace qu'il aurait occupé est retiré. Dans l'exemple ci-après, on a trois paragraphes et le deuxième est ciblé avec position absolute et décalé avec les valeurs top: 30px et right: 30px. Cet élément est retiré du flux du document.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}

+ +

Utiliser position: fixed retire également un objet de flux. Dans ce cas, les décalages seront calculés relativement à la zone d'affichage (viewport) plutôt que par rapport au bloc englobant.

+ +

Lorsqu'on retire un élément du flux grâce au positionnement, il faut également gérer les cas où le contenu peut se superposer. Lorsqu'un élément est en dehors du flux, les autres éléments ne « sauront » plus qu'il est là et ne seront pas déplacés pour lui laisser la place.

+ +

Le positionnement relatif et le flux

+ +

Si on fournit un positionnement relatif en appliquant position: relative à un élément, celui-ci reste dans le flux mais on peut alors utiliser des décalages pour le déplacer. Toutefois, l'espace initialement occupé par l'élément est toujours réservé, comme on peut le voir dans l'exemple qui suit.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}

+ +

Dès qu'on retire ou qu'on décale un élément de son emplacement dans le flux normal, il faut s'attendre à devoir gérer le contenu environnant pour éviter les chevauchements. On pourra par exemple utiliser les flottements ou s'assurer que l'élément utilisant position: absolute n'est pas sur un autre contenu. C'est pour ces raisons que les méthodes qui retirent les éléments du flux doivent être utilisées avec circonspection.

+ +

Résumé

+ +

Dans ce guide, nous avons vu les différentes façons qui permettent de retirer un élément du flux afin d'obtenir certains positionnements spécifiques. Dans le prochain guide, nous verrons un concept similaire, celui de contexte de formatage de bloc dans Explications relatives aux contextes de formatage.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html b/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html new file mode 100644 index 0000000000..8566b8accd --- /dev/null +++ b/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html @@ -0,0 +1,128 @@ +--- +title: Disposition de bloc et en ligne avec le flux normal +slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.

+ +

Le flux normal est défini par la spécification CSS 2.1 qui explique comment les boîtes du flux normal s'inscrivent dans le contexte de formatage. Les boîtes peuvent être de bloc (block) ou en ligne (inline) mais pas les deux à la fois. Les boîtes de bloc contribuent au contexte de formatage des blocs et les boîtes en ligne contribuent au contexte de formatage en ligne.

+ +

Le comportement des éléments qui ont un contexte de formatage de bloc ou en ligne est également défini dans cette spécification. Pour les éléments avec un contexte de formatage de bloc, voici ce qui est indiqué dans la spécification :

+ +
+

« Dans un contexte de formatage de bloc, les boîtes sont disposées l'une après l'autre, verticalement, en démarrant en haut du bloc englobant. La distance verticale entre deux boîtes voisines est déterminée par les propriétés relatives aux marges. Les marges verticales fusionnent pour deux boîtes de bloc voisines au sein d'un contexte de formatage de bloc.
+
+ Dans un contexte de formatage de bloc, chaque bord gauche de chaque boîte touche le bord gauche du bloc englobant (pour les documents écrits de droite à gauche, ce sont les bords droits qui coïncident). » - 9.4.1

+
+ +

Quant aux éléments du contexte de formatage en ligne :

+ +
+

« Dans un contexte de formatage en ligne, les boîtes sont disposées horizontalement les unes après les autres, en démarrant en haut du bloc englobant. Les marges, bordures, espaces de remplissage (padding) entre ces boîtes sont respectées. L'alignement vertical des boîtes peut varier (alignement du bas et du haut ou alignement des lignes de base du texte). La zone rectangulaire contenant les boîtes qui forment une ligne est appelée une "boîte de ligne". » - 9.4.2

+
+ +

On notera que la spécification CSS 2.1 décrit des documents dont le mode d'écriture est horizontal, allant de haut en bas. C'est notamment le cas avec la description de la distance verticale entre les boîtes de bloc. Le comportement des éléments de bloc et en ligne est donc le même lorsqu'on a un mode d'écriture vertical. Nous verrons cela dans un article suivant.

+ +

Les éléments qui participent à un contexte de formatage de bloc

+ +

Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.

+ +

+ +

Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.

+ +

+ +

Dans la suite de ce guide, nous prendrons l'hypothèse d'un mode d'écriture horizontal. Toutefois, tout ce qui est décrit fonctionne de la même façon pour un mode d'écriture vertical.

+ +

Comme indiqué dans la spécification, les marges entre deux boîtes de bloc permettent de créer une séparation entre les éléments. On peut voir ceci dans un exemple simple avec deux paragraphes auxquels on ajoute une bordure. La feuille de style par défaut du navigateur ajoute un espace entre les paragraphes en ajoutant une marge en haut et en bas.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}

+ +

Si on définit explicitement des marges nulles sur les paragraphes, les bordures se toucheront.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}

+ +

Par défaut, les éléments de bloc consomment tout l'espace disponible sur l'axe en ligne. Ainsi, les paragraphes « s'étalent » horizontalement autant qu'ils le peuvent au sein du bloc englobant. Si on fixait leur longueur afin que deux paragraphes puissent tenir horizontalement, ils seraient tout de même l'un au dessus de l'autre. Chaque boîte de bloc commencera au début de l'axe de bloc du bloc englobant.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}

+ +

La fusion des marges

+ +

La spécification indique que les marges verticales entre chaque éléments de bloc fusionnent. Cela signifie que si un élément avec une marge en haut suit directement un élément avec une marge en bas, plutôt que la marge résultante soit la somme des deux marges, on aura une fusion des marges et ce sera uniquement la plus grande des marges qui sera appliquée.

+ +

Dans l'exemple suivant, les paragraphes ont une marge en haut qui mesure 20 pixels et une marge en bas qui mesure 40 pixels. La taille de la marge entre les deux paragraphes est donc de 40px car la plus petite est « fusionnée » avec la plus grande.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}

+ +

Pour en savoir plus à propos de la fusion des marges, vous pouvez lire l'article dédié à la fusion des marges.

+ +
+

Note : Si vous n'êtes pas certain⋅e que la fusion des marges a lieu, vous pouvez utiliser les outils de développement de votre navigateur afin de voir la valeur réellement utilisée pour les marges.

+ +

+
+ +

Les éléments qui participent à un contexte de formatage en ligne

+ +

Les éléments en ligne sont affichés les uns à la suite des autres selon la direction avec laquelle les phrases sont écrites pour ce mode d'écriture. Ces boîtes en ligne se suivent les unes après les autres. S'il n'y a pas suffisamment d'espace dans la boîte englobante, une boîte en ligne pourra être scindée pour passer à la ligne. Les lignes ainsi créées sont appelées des boîtes de ligne. Comme la plupart des objets en CSS, les éléments en ligne disposent bien d'une boîte (qu'on oublie parfois).

+ +

Dans l'exemple suivant on a trois boîtes en ligne créées par un paragraphe avec un élément {{HTMLElement("strong")}} à l'intérieur.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}

+ +

Les boîtes autour des mots, avant et après l'élément {{HTMLElement("<strong>")}} sont qualifiées de boîtes anonymes. Ce sont des boîtes qui permettent que tout soit contenu dans une boîte mais on ne peut pas cibler ces boîtes spécifiquement.

+ +

La taille de la boîte de la ligne sur l'axe orthogonal à l'axe de lecture est définie avec la taille de la plus grande boîte qu'elle contient. Dans l'exemple suivant, on a un élément {{HTMLElement("<strong>")}} qui a une taille de 300% et c'est donc son contenu qui détermine la hauteur de la boîte de ligne pour cette ligne.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}

+ +

Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter le guide sur le modèle de formatage visuel.

+ +

La propriété display et la disposition de flux

+ +

En plus des règles existantes en CSS 2.1, les spécifications CSS ultérieures décrivent plus en détail le comportement des boîtes en ligne et des boîtes en bloc. La propriété display définit la façon dont une boîte, et celles qu'elle contient, se comporte. Avec la spécification CSS Display Model Level 3, on en apprend plus sur la façon dont la propriété display modifie comportement des boîtes et des boîtes qu'elles génèrent.

+ +

Le type d'affichage d'un élément définit deux choses :

+ +
    +
  • le type d'affichage extérieur, qui décrit comment la boîte s'affiche au sein des éléments du même contexte de formatage
    • +
  • le type d'affichage intérieur comment les boîtes situées à l'intérieur de cet élément doivent se comporter
    • +
+ +

Dans l'exemple suivant, on a un élément {{HTMLElement("div")}} sur lequel on a appliqué display: flex. Le conteneur flexible se comporte comme un élément de bloc : il s'affiche sur une nouvelle ligne et occupe tout l'espace du bloc englobant dans l'axe en ligne. Aussi, le type d'affichage extérieur vaut block.

+ +

Les objets flexibles, à l'intérieur, contribuent à un contexte de formatage flexible car leur élément parent a display: flex. Aussi, le type d'affichage intérieur vaut flex et un nouveau contexte de formatage flexible est mis en place pour les éléments enfants.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}

+ +

On peut envisager chaque boîte CSS sous cet angle. La boîte possède un type d'affichage extérieur et sait ainsi comment se comporter avec les boîtes qui l'entourent. Ensuite, la boîte possède un type d'affichage intérieur qui permet d'organiser les éléments qu'elle contient. Ces éléments, à leur tour, disposent d'un type d'affichage extérieur et d'un type d'affichage intérieur. Dans l'exemple précédent, les objets flexibles ont des boîtes flexibles. Le type d'affichage extérieur est dicté par le contexte de formatage flexible. En revanche, leur type d'affichage intérieur est flow et leurs éléments enfants participeront à un flux normal. Les éléments enfants s'organiseront comme des éléments en ligne ou de bloc sauf si leur type d'affichage est explicitement modifié.

+ +

Le concept de type d'affichage extérieur et intérieur est important car il nous indique qu'un conteneur utilisant Flexbox (display: flex) ou les grilles CSS (display: grid) continue de participer à une disposition bloc/en ligne du fait du type d'affichage extérieur qui est block.

+ +

Modifier le contexte de formatage auquel un élément participe

+ +

Les navigateurs affichent les éléments en bloc ou ligne selon ce qui est pertinent pour chaque élément. Ainsi, l'élément {{HTMLElement("strong")}}, utilisé pour mettre en avant un mot (souvent alors affiché en gras), ne crée pas de nouvelle ligne pour afficher son contenu : ce n'est pas un élément de bloc mais un élément en ligne.

+ +

Si on souhaitait afficher tous les éléments {{HTMLElement("strong")}} comme des éléments de bloc, il suffirait d'ajouter la règle display: block en ciblant les éléments <strong>. Cela signifie qu'on peut toujours écrire un code HTML qui soit le plus sémantique possible pour le contenu puis modifier la façon dont le document est affiché grâce à CSS.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}

+ +

Résumé

+ +

Dans ce guide, nous avons vu comment les éléments étaient affichés dans le flux normal, comme éléments de bloc ou comme éléments en ligne. Les éléments HTML s'afficheront par défaut de façon lisible sans CSS. En comprenant comment fonctionne le flux normal, vous comprendrez comment apporter les modifications nécessaires pour parvenir à la disposition désirée.

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/css_flow_layout/disposition_flux_et_d\303\251passement/index.html" "b/files/fr/web/css/css_flow_layout/disposition_flux_et_d\303\251passement/index.html" new file mode 100644 index 0000000000..703af33bee --- /dev/null +++ "b/files/fr/web/css/css_flow_layout/disposition_flux_et_d\303\251passement/index.html" @@ -0,0 +1,70 @@ +--- +title: La disposition en flux et le dépassement +slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +--- +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
+ +

Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.

+ +

Qu'est-ce que le dépassement ?

+ +

Pour créer un exemple de dépassement, prenons un élément avec une hauteur et une largeur fixés puis ajoutons un contenu trop important dans la boîte :

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}

+ +

Le contenu « arrive » dans la boîte puis remplit celle-ci et ensuite, il dépasse en affichant du contenu en dehors de la boîte éventuellement en dessous du contenu environnant. Pour contrôler le comportement du dépassement, on pourra utiliser la propriété overflow. La valeur initiale de cette propriété est visible et c'est pour cela qu'on voit le contenu dépasser.

+ +

Contrôler le dépassement

+ +

La propriété overflow possède d'autres valeurs qui permettent de contrôler le dépassement. Afin de masquer le contenu qui dépasse, on peut utiliser la valeur hidden. Avec cette valeur, une partie du contenu peut ne pas être visible.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}

+ +

Avec la valeur scroll, le contenu est dans la boîte et des barres de défilement sont ajoutées à la boîte afin de pouvoir défiler et voir le contenu. Les barres de défilement seront ajoutées, même si le contenu « tient » dans la boîte.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}

+ +

Avec la valeur auto, le contenu sera affiché sans barre de défilement s'il tient dans la boîte. S'il dépasse, des barres de défilement sont ajoutées. En comparant l'exemple précédent avec celui qui suit, on peut voir que overflow: scroll ajoute des barres de défilement verticales et horizontales (même s'il y a uniquement besoin du défilement vertical). Avec la valeur auto, seules les barres de défilement nécessaires sont ajoutées.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}

+ +

Comme nous l'avons vu plus tôt, toute valeur qui est différente de visible créera un nouveau contexte de formatage de bloc.

+ +
+

Note : Dans le brouillon du module de spécification Overflow de niveau 3, une valeur est ajoutée : overflow: clip. Cette valeur agira comme overflow: hidden mais ne permettra de faire défiler le contenu à l'aide de code. La boîte ne pourra pas défiler. De plus, cette valeur ne crée pas de contexte de formatage de bloc.

+
+ +

Pour être tout à fait précis, la propriété overflow est une propriété raccourcie pour les propriétés overflow-x et overflow-y. Si on fournit une valeur, celle-ci sera utilisée pour les deux axes. On peut aussi fournir deux valeurs, auquel cas la première sera utilisée pour overflow-x et la seconde pour overflow-y. Dans l'exemple qui suit, seule overflow-y: scroll est utilisée et la barre de défilement horizontale superflue n'est pas ajoutée.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}

+ +

Les propriétés relatives

+ +

Dans le guide sur les modes d'écriture et la disposition en flux, nous avons étudié des propriétés plus récentes block-size et inline-size qui permettent de raisonner avec les modes d'écriture plutôt qu'avec les dimensions physiques de l'écran. La spécification de niveau 3 Overflow inclut également les propriétés correspondantes pour le dépassement : overflow-block et overflow-inline. Ces propriétés « logiques » correspondent aux propriétés « physiques » overflow-x et overflow-y où la correspondance varie en fonction du mode d'écriture du document.

+ +

À l'heure où nous écrivons ces lignes, ces deux propriétés ne sont pas implémentées par les navigateurs et il faut donc s'en tenir aux propriétés physiques et ajuster selon le mode d'écriture.

+ +

Gérer le dépassement

+ +

Dans la spécification de niveau 3 sur le dépassement, certaines propriétés aident à améliorer l'apparence du contenu lors d'un dépassement.

+ +

Dépassement sur l'axe en ligne

+ +

La propriété text-overflow indique comment afficher le texte qui dépasse sur l'axe en ligne. La valeur clip qui coupe le contenu qui dépasse, c'est la valeur initiale et le comportement par défaut. La valeur ellipsis permet d'afficher une ellipse qui peut être adaptée en fonction de la langue ou du mode d'écriture utilisé.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}

+ +

Dépassement sur l'axe de bloc

+ +

Il existe également une proposition pour une propriété block-overflow. Toutefois, celle-ci (ainsi que son nom) est toujours en discussion. La proposition consisterait à pouvoir afficher une ellipse lorsque le contenu dépasse sur l'axe de bloc.

+ +

Cette propriété serait par exemple utile lorsqu'on a une liste d'article avec une boîte pour chaque article dont la hauteur est fixée. Si le texte qui dépasse est masqué, ce n'est pas nécessairement évident qu'il y a du contenu supplémentaire et qu'il faut cliquer pour le lire. Ajouter une ellipse rendrait ce dépassement plus perceptible.

+ +

Résumé

+ +

Qu'on manipule un média « continu » sur le Web ou un format paginé (impression ou EPUB), il est utile de comprendre la façon dont le dépassement agit, quelle que soit la méthode de dépassement. En comprenant comment le dépassement fonctionne avec le flux normal, ce devrait être plus simple de comprendre le fonctionnement du dépassement pour les autres méthodes comme les grilles ou les boîtes flexibles.

diff --git "a/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_\303\251criture/index.html" "b/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_\303\251criture/index.html" new file mode 100644 index 0000000000..2ecf299ce2 --- /dev/null +++ "b/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_\303\251criture/index.html" @@ -0,0 +1,90 @@ +--- +title: Disposition de flux et modes d'écriture +slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture +tags: + - CSS + - Guide + - Mode d'écriture +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +--- +

La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. Les propriétés liées à la disposition devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.

+ +

Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer aux ressources externes ainsi qu'à la section Voir aussi en fin de page.

+ +

La spécification des modes d'écriture

+ +

Le module de spécification CSS Writing Modes de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introduction de la spécification quant aux modes d'écriture :

+ +
+

« En CSS, un mode d'écriture est défini par les propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Ce mode est principalement défini selon sa direction en ligne (inline) et selon sa direction de bloc. »

+
+ +

La spécification définit la direction en ligne comme la direction selon laquelle le contenu est ordonné sur une ligne. Cela définit le début et la fin de la direction en ligne. Le début correspond à l'emplacement du début d'une phrase sur la ligne et la fin correspond à l'emplacement où la ligne de texte se coupe pour passer sur une nouvelle ligne.

+ +

La direction de bloc correspond à la direction selon laquelle les boîtes (ex. les paragraphes) s'empilent pour ce mode d'écriture. La propriété writing-mode contrôle la direction de bloc. Si on souhaite changer la page ou une partie de la page afin d'utiliser la direction vertical-lr, on pourra utiliser writing-mode: vertical-lr sur un élément. Cela aura pour effet de modifier la direction de bloc et, par conséquent, de modifier la direction en ligne.

+ +

Les modes d'écritures peuvent être utilisés pour respecter la façon d'écrire de certaines langues. Ils peuvent également être utilisés à des fins stylistiques (pour avoir un titre vertical par exemple).

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}

+ +

La propriété writing-mode et le flux de bloc

+ +

La propriété {{cssxref("writing-mode")}} s'utilise avec les valeurs horizontal-tb, vertical-rl et vertical-lr. Ces valeurs contrôlent la direction selon laquelle les blocs se suivent sur la page. La valeur initiale de cette propriété est horizontal-tb ce qui signifie que l'axe de bloc est dirigé de haut en bas (tb pour top to bottom qui signifie de haut en bas) et que l'axe en ligne est horizontal. Les langues qui s'écrivent de gauche à droite telles que le français ou les langues qui s'écrivent de droite à gauche telles que l'arabe utilisent toutes horizontal-tb.

+ +

Voici un exemple avec horizontal-tb.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}

+ +

La valeur vertical-rl permet d'avoir une direction de bloc de droite à gauche et une direction en ligne verticale, comme on peut le voir dans l'exemple qui suit.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}

+ +

Dans cet autre exemple, on voit comment se comporte la troisième valeur possible pour writing-mode : vertical-lr. On a une direction de bloc horizontal de la gauche vers la droite et une direction en ligne verticale.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}

+ +

Les boîtes utilisant un mode d'écriture différent de leur parent

+ +

Lorsqu'une boîte imbriquée se voit affecter un mode d'écriture différent de son parent, une boîte en ligne s'affichera comme si elle avait display: inline-block.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}

+ +

Une boîte de bloc créera un nouveau contexte de formatage. Ainsi, si son type d'affichage intérieur vaut flow, le type d'affichage calculé sera flow-root. On peut voir ce comportement dans l'exemple qui suit où la boîte affichée avec horizontal-tb contient un élément flottant contenu car son élément parent crée un nouveau contexte de formatage.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}

+ +

Les éléments remplacés

+ +

Les éléments remplacés tels que les images ne changeront pas d'oritentation selon la valeur de la propriété writing-mode. Toutefois, les éléments remplacés tels que les éléments de formulaires qui incluent du texte devraient utiliser le mode d'écriture courant.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}

+ +

Les propriétés et valeurs logiques

+ +

Lorsqu'on travaille avec des modes d'écriture autres que horizontal-tb, la plupart des propriétés et des valeurs correspondant aux dimensions physiques de l'écran semblent étranges. Ainsi, si on a une boîte qui fait 100 pixels de large, avec horizontal-tb cette largeur sera selon la direction en ligne. Mais avec le mode vertical-lr cela contrôlera la direction de bloc car elle ne tourne pas avec le texte.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}

+ +

C'est pour cela que des propriétés logiques ont fait leur apparition comme {{cssxref("block-size")}} et {{cssxref("inline-size")}}. Si on fournit inline-size: 100px sur un bloc, peu importe qu'on ait un mode d'écriture horizontal ou vertical, inline-size correspondra à la direction en ligne quoi qu'il arrive.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}

+ +

Le module de spécification CSS sur les propriétés et valeurs logiques contient des versions logiques des propriétés contrôlant les marges, le remplissage (padding) et les bordures et d'autres correspondances pour les concepts qu'on manipulait habituellement avec des directions physiques.

+ +

Résumé

+ +

Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.

+ +

Voir aussi

+ + + +

Ressources externes

+ + + +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html b/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html new file mode 100644 index 0000000000..88ed84ff16 --- /dev/null +++ b/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html @@ -0,0 +1,89 @@ +--- +title: Explications quant aux contextes de formatage +slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +--- +
{{CSSRef}}
+ +

Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.

+ +

Sur une page web, tout s'inscrit dans un contexte de formatage, une zone qui a été définie pour être organisée d'une certaine façon. Un contexte de formatage en bloc (ou block formatting context (BFC)) organisera ses éléments fils selon une disposition en bloc, un contexte de formatage flexible organisera ses éléments fils comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques qui décrivent le comportement de la disposition pour ce contexte.

+ +

Le contexte de formatage de bloc

+ +

L'élément html définit le contexte de formatage de bloc initial pour la page. Cela signifie que tous les éléments contenus dans <html></html> s'organisent selon le flux normal en suivant les règles de la disposition de bloc et en ligne. Les élméents qui participent à un contexte de formatage de bloc (Block formatting context ou BFC en anglais) utilisent les règles décrites par le modèle de boîte CSS qui définit la façon dont les marges, bordures et zones de remplissage (padding) d'un élément interagissent avec les autres blocs du même contexte.

+ +

Créer un nouveau contexte de formatage de bloc

+ +

L'élément {{HTMLElement("html")}} n'est pas le seul élément capable de créer un nouveau contexte de formatage de bloc. Des propriétés CSS peuvent également être utilisées afin de créer un contexte de formatage de bloc. Cela peut s'avérer utile car un nouveau contexte se comportera comme notre document : on aura une mini-disposition contenu dans la disposition principale. Un contexte de formatage de bloc contient tout ses éléments fils et ses descendants. Le flottement ({{cssxref("float")}}) ou le dégagement ({{cssxref("clear")}}) ne s'appliqueront qu'aux éléments d'un même contexte de formatage. Les marges ne fusionneront que pour des éléments d'un même contexte formatage.

+ +

Au delà de l'élément racine du document (ici l'élément html), un nouveau contexte de formatage de bloc est créé dans les situations suivantes :

+ +
    +
  • Pour les éléments flottants ({{cssxref("float")}})
    • +
  • Pour les éléments positionnés de façon absolue (y compris avec {{cssxref("position", "position: fixed", "#fixed")}} ou {{cssxref("position", "position: sticky", "#sticky")}})
    • +
  • Pour les éléments avec {{cssxref("display", "display: inline-block", "#inline-block")}}
    • +
  • Pour les cellules de tableau ou pour les éléments avec display: table-cell, y compris pour les cellules de tableau anonymes créées avec les propriétés display: table-*
    • +
  • Les légendes de tableau ou les éléments avec display: table-caption
    • +
  • Les éléments de blocs pour lesquels overflow a une valeur différente de visible
    • +
  • display: flow-root
    • +
  • Les éléments avec {{cssxref("contain", "contain: layout", "#layout")}}, content ou strict
    • +
  • Les élément flexibles
    • +
  • Les éléments de grille
    • +
  • Les conteneurs multi-colonnes
    • +
  • Les éléments avec {{cssxref("column-span")}}:all
    • +
+ +

Prenons quelques exemples afin de voir les conséquences de la création d'un nouveau contexte de formatage de bloc.

+ +

Dans le prochain exemple, on a un élément flottant à l'intérieur d'un élément <div> où une bordure est appliquée. Le contenu de cet élément div flotte avec l'élément flottant. Le contenu de l'élément flottant étant plus grand que le contenu environnant, la bordure du div passe sur le contenu flottant. Comme expliqué dans le guide sur les éléments appartenant ou non au flux, l'élément flottant a été retiré du flux afin que l'arrière-plan et la bordure du div ne contienne que le contenu et pas l'élément flottant.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

+ +

En créant un nouveau contexte, l'élément flottant serait contenu dans ce contexte. Par le passé, une méthode classique consistait à appliquer overflow: auto ou à utiliser d'autres valeurs que overflow: visible.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}

+ +

En utilisant overflow: auto, on crée un nouveau contexte de formatage de bloc qui contient l'élément flottant. Notre élément div devient en quelque sorte responsable de sa disposition interne et chaque élément enfant sera intégré dans cette disposition.

+ +

Toutefois, utiliser overflow pour créer un nouveau contexte de formatage peut poser problème car la propriété overflow est avant tout conçue pour indiquer au navigateur comment on souhaite gérer le contenu qui dépasse. On peut obtenir des situations où on obtient des barres de défilement indésirables ou des ombres rognées lorsqu'on utilise principalement cette propriété pour créer un nouveau contexte. De plus, cette méthode peut ne pas être évidente et lisible pour un autre développeur et complexifier la maintenance du code associé. Si vous devez utiliser cette méthode, mieux vaudra commenter le code pour l'expliquer.

+ +

Créer un contexte de formatage de bloc explicite : utiliser display: flow-root

+ +

Une valeur plus récente de display permet de créer un nouveau contexte de formatage de bloc sans autre effet de bord indésirable. En utilisant display: flow-root sur le bloc englobant, on créera un nouveau contexte de formatage de bloc.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}

+ +

Ainsi, en utilisant display: flow-root; sur l'élément {{HTMLElement("div")}} tout son contenu contribue au contexte de formatage de bloc et l'élément flottant n'est plus éjecté en bas de l'élément.

+ +

Le nom de cette valeur, flow-root, prend son sens lorsqu'on voit que l'élément agit comme une racine (root) pour le nouveau contexte qui est créé.

+ +

Un contexte de formatage en ligne

+ +

Les contextes de formatage en ligne existent au sein des autres contextes de formatage et peuvent être vus comme le contexte d'un paragraphe. Un paragraphe crée un contexte de formatage en ligne au sein duquel les éléments {{HTMLElement("strong")}}, {{HTMLElement("a")}} ou {{HTMLElement("span")}} entre autres, sont utilisés sur du texte.

+ +

Le modèle de boîte ne s'applique pas complètement aux objets qui s'inscrivent dans un contexte de formatage en ligne. Pour une ligne écrite avec un mode d'écriture horizontal, les remplissages (padding), bordures et marges seront appliqués à l'élément et écarteront le texte environnant à droite et ou à gauche. Le remplissage et bordures verticaux seront appliqués mais peuvent chevaucher le contenu au dessus et en dessous. Pour un contexte de formatage en ligne, les boîtes de ligne ne seront pas décalées par les bordures ou par le remplissage.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}

+ +

Les autres contexte de formatage

+ +

Ce guide porte sur la disposition de flux et n'aborde pas tous les contextes de formatage possibles en dehors de ce type de disposition. Il est important de comprendre que n'importe quel contexte de formatage modifiera la façon dont ses éléments et son contenu sont organisés. Le comportement des autres contextes de formatage est décrit dans les modules de spécification respectifs et sur MDN.

+ +

Résumé

+ +

Dans ce guide, nous avons approfondi les notions relatives aux contextes de formatage en ligne et de bloc. Dans le prochain guide, nous verrons les interactions entre le flux normal et les différents modes d'écriture.

+ +

Voir aussi

+ + + +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/fr/web/css/css_flow_layout/index.html b/files/fr/web/css/css_flow_layout/index.html new file mode 100644 index 0000000000..236f7b9341 --- /dev/null +++ b/files/fr/web/css/css_flow_layout/index.html @@ -0,0 +1,42 @@ +--- +title: CSS Flow Layout +slug: Web/CSS/CSS_Flow_Layout +tags: + - CSS + - CSS Flow Layout + - Reference +translation_of: Web/CSS/CSS_Flow_Layout +--- +
{{CSSRef}}
+ +

Le flux normal ou « disposition en flux » (Flow Layout) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du flux, il est traité indépendamment.

+ +

Avec un flux normal, les éléments en ligne (inline elements) sont affichés dans la direction « en incise », c'est-à-dire dans le sens dans lequel les mots sont écrits selon le mode d'écriture du document. Les éléments de bloc (block elements) sont affichés les uns après les autres, à la façon des paragraphes selon le mode d'écriture du document.

+ +

Par exemple, pour un document français, les éléments en ligne sont affichés les uns à la suite des autres de gauche à droite et les éléments de bloc sont affichés les uns en dessous des autres.

+ +

Exemple simple

+ +

Dans l'exemple suivant, on peut voir des boîtes de bloc et des boîtes en ligne. Les deux éléments correspondants aux paragraphes avec des bordures vertes sont des éléments de bloc. Ces deux éléments s'affichent l'un en dessous de l'autre.

+ +

La première phrase contient également un élément {{HTMLElement("span")}} avec un arrière-plan bleu. C'est un élément en ligne qui s'affiche donc en incise de la phrase.

+ +

{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}

+ +

Guides

+ + + +

Référence

+ +

Termes du glossaire

+ + diff --git "a/files/fr/web/css/css_fonts/guide_caract\303\251ristiques_police_opentype/index.html" "b/files/fr/web/css/css_fonts/guide_caract\303\251ristiques_police_opentype/index.html" new file mode 100644 index 0000000000..6980ff4d78 --- /dev/null +++ "b/files/fr/web/css/css_fonts/guide_caract\303\251ristiques_police_opentype/index.html" @@ -0,0 +1,229 @@ +--- +title: Guide des caractéristiques de police OpenType +slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType +tags: + - CSS + - Fonts + - Guide + - Polices +translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide +--- +
{{CSSRef}}
+ +

Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (kerning en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec  CSS.

+ +

Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations.

+ +

En plus des caractéristiques communément utilisées telles que les ligatures ou les chiffres elzéviriens, il existe d'autres caractéristiques spécifiques telles que les ensembles stylistiques, les ensembles alternatifs voire des ensembles avec des altérations spécifiques pour une langue donnée. Pour ce dernier cas, ces altérations sont nécessaires à l'expression correcte du langage et il s'agit donc d'une caractéristique qui dépasse largement l'aspect purement stylistique d'autres caractéristiques.

+ +
+

Attention ! Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise font-feature-settings pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique.

+
+ +

Découvrir la disponibilité des caractéristiques pour certaines polices

+ +

Il est parfois délicat de savoir quelles caractéristiques sont disponibles pour une police donnée si celle-ci n'est pas accompagnée d'une documentation (la plupart des fonderies proposeront une page d'exemple et du CSS). Certains sites permettent de contourner ce problème : vous pouvez visiter wakamaifondue.com, y uploader le fichier de la police et recevoir un rapport complet peu de temps après ; le site Axis-praxis.org fournit des fonctionnalités analogues et permet de cliquer pour activer/désactiver une ou plusieurs caractéristiques sur un bloc de texte donné.

+ +

Pourquoi utiliser les caractéristiques d'une police ?

+ +

Étant donné que ces caractéristiques peuvent être difficilement accessibles, on peut légitiement se demander pourquoi il faudrait les utiliser. Pour répondre à cette question, il faut voir comment ces caractéristiques peuvent aider à rendre un site plus lisible, accessible, élégant :

+ +
    +
  • Les ligatures telles que œ ou celles qui existent entre 'ff' répartissent plus également l'espace entre les lettres et permettent un lecture plus douce.
    • +
  • Les fractions permettent d'améliorer la compréhension et la lecture de certains textes (des recettes par exemple).
    • +
  • L'écriture des nombres au sein de paragraphes qui suivent la ligne de base du texte ou au contraire dont les jambages passent sous la ligne de base.
    • +
+ +

Bien qu'aucune de ces caractéristiques ne soit critique pour l'utilisabilité d'un site, chacune d'elle peut rendre un site plus lisible voire raffiné

+ +
+

Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. Tim Brown, Directeur de la typographie chez Adobe.

+
+ +

Au-delà du style : le contenu même

+ +

Il existe certains cas (notamment avec {{cssxref("font-variant-east-asian")}}) où les caractéristiques OpenType sont directement liées à l'utilisation de formes différentes pour certains glyphes. Ces caractéristiques auront un impact sur la lisibilité mais aussi et surtout sur la signification du texte. Dans ces cas, les caractéristiques de police ne sont pas un outil de style mais font partie intégrante du contenu.

+ +

Les caractéristiques

+ +

Il existe une variété de caractéristiques. Nous les avons ici regroupées selon leurs attributs principaux et les options développées dans les spécifications du W3C.

+ +
+

Note : Les exemples qui suivent illustrent certaines propriétés et des combinaisons d'exemple et sont accompagnés des équivalents utilisant la syntaxe de plus bas niveau. Il est possible que ces deux versions d'exemple ne correspondent pas exactement selon l'implémentation des navigateurs. Les polices utilisées ici sont Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script et Kokoro (qui sont libres d'utilisation et disponibles via différents services tels que Google Fonts).

+
+ +

Le crénage (kerning) ({{cssxref("font-kerning")}})

+ +

Le crénage correspond à l'espace entre les caractères pour certaines combinaisons de caractères. Cette caractéristique, comme recommandé par la spécification OpenType, est généralement activée par défaut. On notera également que la propriété {{cssxref("letter-spacing")}} permet d'imposer un crénage supplémentaire au texte.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}
+ +

Les formes alternatives ({{cssxref("font-variant-alternates")}})

+ +

Les polices peuvent fournir différentes formes pour différents glyphes. Cette propriété permet d'activer un ensemble de formes alternatives ou une forme alternative spécifique selon la valeur utilisée. Dans l'exemple qui suit, on voit différentes formes d'utilisation des caractères alternatifs. Les polices qui possèdent des glyphes alternatifs peuvent les rendre disponibles sur la grille de caractères ou dans des ensembles stylistiques séparés voire pour des caractères individuels. Dans cet exemple, on utilise deux polices et la règle-@ {{cssxref("@font-feature-values")}}. Cette méthode permet de définir des raccourcis ou des options nommées qui peuvent ensuite être utilisée sur un ensemble de polices. Ainsi, on peut avoir une option appliquée à une police ou appliquée plus généralement.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}
+ +
 
+ +
Dans ce cas, @stylistic(alternates) affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique  @styleset(alt-a), seule l'apparence de la lettre a minuscule changera.
+ +

Vous pouvez modifier :

+ +
font-variant-alternates: styleset(alt-a);
+ +

en :

+ +
font-variant-alternates: styleset(alt-g);
+
+ +

et voir comment la lettre a retrouve sa forme normale et comment la lettre g est modifiée.

+ +

En savoir plus sur les formes alternatives

+ + + +

Les ligatures ({{cssxref("font-variant-ligatures")}})

+ +

Les ligatures sont des glyphes qui remplacent deux ou plusieurs glyphes afin de les représenter de façon plus harmonieuse (pour l'espacement et l'esthétique notamment). Certaines de ces ligatures sont fréquemment utilisées (œ) et d'autres sont plus spécialisées et moins usitées (on parle de « ligatures discrétionaires », de « ligatures historiques » ou encore d' « alternatifs contextuels »).

+ +

Bien qu'elles soient plus fréquemment utilisées avec les polices d'écriture, dans l'exemple qui suit, on les utilise afin de créer des flèches :

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}
+ +

Les positions ({{cssxref("font-variant-position")}})

+ +

Les variantes de positions permettent d'activer le support typographique des glyphes pour les exposants et les indices. Celles-ci sont utilisées dans le texte sans modifier la ligne de base ou l'interlignage (c'est un des avantages par rapport à l'utilisation des éléments HTML {{htmlelement("sub")}} et {{cssxref("sup")}}).

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}
+ +

Les capitales ({{cssxref("font-variant-caps")}})

+ +

Une utilisation fréquente des caractéristiques OpenType est l'activation de « vraies » petites capitales qui sont généralement utilisées pour les acronymes et les abréviations.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}
+ +

Les chiffres ({{cssxref("font-variant-numeric")}})

+ +

Il existe généralement différents types de chiffre dans les polices :

+ +
    +
  • Les chiffres classiques (ou chiffres Didot) qui sont alignées sur la ligne de base du texte et qui ont la même hauteur que les majuscules
    • +
  • Les chiffres elzéviriens qui ont des jambages et des hampes à la façon des autres lettres minuscules. Ces chiffres sont conçus pour être utilisés en incise et se « fondre » au sein des glyphes alentours, à la manières des petites capitales.
    • +
+ +

On y retrouve également la notion d'espacement. L'espacement proportionnel est le réglage par défaut et l'espacement tabulaire permet d'avoir un espace identique entre chaque chiffre, quelle que soit la largeur du caractère. Ce dernier mode est notamment utile pour l'affichage de nombre dans des tableaux (où on peut souhaiter comparer des montants d'une ligne à l'autre).

+ +

Deux types de fractions peuvent être prises en charge avec cette propriété :

+ +
    +
  • Les fractions avec barre diagonale.
    • +
  • Les fractions empilées verticalement.
    • +
+ +

Les nombres ordinaux peuvent également être pris en charge (« 1er », « 2e ») s'ils sont présents dans la police. De même on peut utiliser un zéro barré si celui-ci est disponible.

+ +

Chiffres classiques et chiffres elzéviriens

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}
+ +

Fractions, nombres ordinaux et zéro barré

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}
+ +

Caractères d'Asie orientale ({{cssxref("font-variant-east-asian")}})

+ +

Cette caractéristique permet d'accéder à différentes formes alternatives de glyphes dans une police. L'exemple qui suit illustre une chaîne de glyphes où seul l'ensemble OpenType 'jis78' est activé. Vous pouvez décocher la case et voir alors d'autres caractères s'afficher.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}
+ +
+

Note : Ces glyphes ont été copiés à partir d'un exemple et le texte qu'ils constituent n'ont aucun sens particulier.

+
+ +

Propriété raccourcie ({{Cssxref("font-variant")}})

+ +

La propriété raccourcie font-variant permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur normal, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant none,  font-variant-ligatures vaudra none et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque none est fourni).

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}
+ +

Utiliser font-feature-settings

+ +

La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser des propriétés CSS personnalisées afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.

+ +

Il existe une myriade de caractéristiques possibles. Vous pouvez en voir quelques exemples ici et il existe plusieurs ressources pour en exploiter d'autres.

+ +

La syntaxe générale suivra cette structure :

+ +
.small-caps {
+  font-feature-settings: "smcp", "c2sc";
+}
+
+ +

Selon la spécification, on peut fournir le code à quatre caractères de la caractéristique ou fournir le code suivi d'un 1 pour activer la fonctionnalité ou suivi d'un 0 pour la désactiver. Ainsi, si on dispose de caractéristiques liées à la ligatures et qui sont activées par défaut, on peut les désactiver de la façon suivante :

+ +
.no-ligatures {
+  font-feature-settings: "liga" 0, "dlig" 0;
+}
+ +

En savoir plus sur les codes des caractéristiques font-feature-settings

+ + + +

Utiliser la détection de fonctionnalités CSS

+ +

Étant donné que toutes les propriétés ne sont pas implémentées de façon homogène, il est préférable d'utiliser la règle @ {{cssxref("@supports")}} pour vérifier quelles propriétés peuvent être utilisées correctement et s'en remettre à {{cssxref("font-feature-settings")}} si nécessaire.

+ +

Ainsi, les petites capitales peuvent être activées de différentes façons mais si on veut s'assurer que la mise en forme fonctionne quelle que soit la capitalisation, il faudra 2 paramètres avec font-feature-settings et une seule valeur pour {{cssxref("font-variant-caps")}}.

+ +
.small-caps {
+   font-feature-settings: "smcp", "c2sc";
+}
+
+@supports (font-variant-caps: all-small-caps) {
+   .small-caps {
+       font-feature-settings: normal;
+       font-variant-caps: all-small-caps;
+   }
+}
+
+ +

Voir aussi

+ +

Démonstrations de caractéristiques OpenType en CSS

+ + + +

Outils web d'analyse de polices

+ + + +

Spécifications W3C

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/css/css_fonts/guide_polices_variables/index.html b/files/fr/web/css/css_fonts/guide_polices_variables/index.html new file mode 100644 index 0000000000..043902094e --- /dev/null +++ b/files/fr/web/css/css_fonts/guide_polices_variables/index.html @@ -0,0 +1,265 @@ +--- +title: Guide des polices variables +slug: Web/CSS/CSS_Fonts/Guide_polices_variables +tags: + - CSS + - Fonts + - Guide + - Polices +translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide +--- +
{{CSSRef}}
+ +

Les polices variables sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables.

+ +
+

Attention !  Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple.

+
+ +

Qu'est-ce qu'une police variable ?

+ +

Pour mieux comprendre le fonctionnement des polices variables, revenons sur les polices « statiques » et comparons les deux systèmes.

+ +

Les polices standard ou polices statiques

+ +

Auparavant, une police de caractères était représentées par différents fichiers pour les différentes fontes. Aussi, on avait par exemple différents fichiers pour 'Roboto Regular', 'Roboto Bold' et 'Roboto Bold Italic' et on pouvait avoir 20 à 30 fichiers distincts pour représenter l'intégralité d'une police.

+ +

Avec un tel scénario et pour utiliser une police de façon classique sur un site, il fallait au moins quatre fichier pour les différents styles : normal, italique, gras et gras-italique. Si on souhaitait ajouter un autre niveau de graisse (par exemple une fonte plus légère pour les légendes), il fallait rajouter un fichier. Sur le réseau, cela se traduisait par d'autres requêtes HTTP et plus de données téléchargées (environ 20Ko pour chaque fichier).

+ +

Les polices variables

+ +

Avec une police variable, toutes ces combinaisons de style et de graisse sont contenues dans un seul fichier. On a donc un fichier plus gros qu'un fichier de police classique mais dont la taille est inférieure ou proche de celle des 4 fichiers qu'on chargerait pour la police principale d'un site. L'avantage d'une police variable est qu'on peut accéder à l'intégralité des corps, graisses et italiques sans être plus contraint par ceux du ou des fichiers chargés séparément.

+ +

Cela permet d'utiliser des techniques typographiques classiques pour avoir des niveaux de titre avec différents corps, d'utiliser une fonte plus étroite lorsqu'il y a plus de données à afficher, etc. Dans un magazine, par exemple, il n'est pas rare d'avoir un système typographique qui utilise 10 à 15 fontes qui sont autant de combinaisons de corps et de graisse.

+ +

Quelques notes à propos des familles de polices, des corps et des variantes

+ +

On a mentionné avant qu'on avait différents fichiers pour chaque graisse et italique et qu'on ne demandait pas au navigateur de synthétiser ces aspects. En effet, la plupart des polices ont des dessins spécifiques pour chaque graisse et chaque niveau d'italique (le a et le g minuscule sont souvent assez différents en italique par exemple). Afin de respecter ces spécificités et d'éviter les différences entre les implémentations des navigateurs, on préfèrera charger les fichiers correspondant à chaque graisse / italique lorsqu'on n'utilise pas de police variable.

+ +

Vous pourrez aussi remarquer que certaines polices viennent avec deux fichiers : un contenant les caractères sans italique et leurs variations et un autre contenant les variations italiques. Cette méthode est parfois choisie afin de réduire la taille du fichier lorsqu'on n'a pas besoin des italiques. Dans tous les cas, il est toujours possible de les lier avec un nom {{cssxref("font-family")}} et d'appeler chaque style avec la valeur pertinente pour {{cssxref("font-style")}}.

+ +

L'axe de variation

+ +

Le concept clé des polices variables est celui d'axe de variation qui décrit l'intervalle autorisé pour faire varier un aspect donné d'une police. Ainsi, l'axe de la graisse décrit l'étendue entre les caractères les plus fins et les plus gras qui puissent être ; l'axe de la largeur parcourt l'étroitesse ou la largeur de la police ; l'axe italique décrit si des formes italiques sont présentes, etc. Un axe peut être un intervalle ou un choix binaire. Ainsi, la graisse pourra varier entre 1 et 999 tandis que l'italique pourrait être uniquement activable ou désactivable (1 ou 0 respectivement).

+ +

Comme indiqué dans la spécification, deux types d'axe existent : les axes enregistrés et les axes spécifiques (custom axes) :

+ +
    +
  • +

    Les axes enregistrés sont ceux que l'on rencontre le plus souvent et qui ont donc été standardisés dans la spécification. À l'heure actuelle, il existe 5 axes enregistrés : le corps, la largeur, la pente, l'italique et la taille optique. Chacun de ces axes possède un attribut CSS correspondant.

    +
    • +
  • +

    Les axes spécifiques peuvent être n'importe quel axe défini par le concepteur de la police. Chaque axe doit simplement être défini par une étiquette avec quatre lettres qui permettront de l'identifier. Ces étiquettes pourront être utilisées dans le code CSS pour indiquer quel niveau de variation utiliser (cf. exemples ci-après).

    +
    • +
+ +

Les axes enregistrés et les attributs CSS existants

+ +

Dans cette section, nous verrons en détails les cinq axes enregistrés ainsi que des exemples CSS associés. Dans les cas où c'est possible, nous inclurons la syntaxe standard et la syntaxe de plus bas niveau qui utilise ({{cssxref("font-variation-settings")}}).

+ +

Cette propriété fut le premier mécanisme implémenté pour tester les premières implémentations des polices variables et elle reste nécessaire pour utiliser de nouveaux axes ou des axes spécifiques au-delà des cinq axes enregistrés. Toutefois, lorsque c'est possible, cette syntaxe ne doit pas être utilisée si une propriété de plus haut niveau est disponible. Autrement dit, font-variation-settings doit uniquement être utilisée afin de définir des valeurs pour des axes qui ne seraient pas accessibles autrement.

+ +

Notes

+ +
    +
  1. +

    Les noms d'axes utilisés avec font-variation-settings sont sensibles à la casse. Les noms des axes enregistrés doivent être écrits en minuscules et les noms des axes spécifiques doivent être écrits en majuscules. Ainsi, dans ce cas :

    + + 
    font-variation-settings: 'wght' 375, 'GRAD' 88;
    + +

    wght correspondra à l'axe enregistré du même nom et GRAD à un axe spécifique.

    +
    2. +
  2. +

    Si on a défini des valeurs avec font-variation-settings et qu'on souhaite changer une de ces valeurs, il sera nécessaire de redéclarer l'ensemble des valeurs (de la même façon qu'on doit redéclarer l'ensemble des caractéristiques OpenType avec {{cssxref("font-feature-settings")}}). Il est possible de contourner cet écueil en utilisant des propriétés CSS personnalisées pour les valeurs individuelles et en modifiant uniquement la valeur d'une des propriétés personnalisée (cf. l'exemple en fin d'article).

    +
    3. +
+ +

La graisse (weight)

+ +

La graisse (représenté par l'étiquette wght) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que normal ou bold qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables.

+ +

On notera qu'il n'est pas possible d'utiliser la déclaration @font-face afin qu'un point donné sur cet axe corresponde au mot-clé bold (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS :

+ +
font-weight: 375;
+
+font-variation-settings: 'wght' 375;
+ +

Vous pouvez éditer l'exemple CSS suivant pour voir l'effet sur la graisse de la police.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
+ +

La largeur (width)

+ +

La largeur (indiquée par l'étiquette wdth) correspond à l'axe selon lequel les caractères sont plus ou moins étroits ou larges. En CSS, c'est le descripteur {{cssxref("font-stretch")}} qui peut être utilisé avec un pourcentage inférieur ou supérieur à 100% (la largeur « normale ») ou avec n'importe quel nombre positif. Si une valeur numérique est fournie et se situe en dehors de l'intervalle couvert par la police variable, le navigateur devra choisir la valeur la plus proche possible.

+ +
+

Note : Lorsqu'on utilise la notation « bas niveau » avec font-variation-settings, on n'écrit pas le caractère %.

+
+ +
font-stretch: 115%;
+
+font-variation-settings: 'wdth' 115;
+
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}
+ +

L'italique

+ +

L'axe italique (ital) fonctionne différemment car il ne s'agit pas d'un intervalle mais d'une option activée ou désactivée : il n'y a pas de valeurs intermédiaires. Les caractères en italique sont la plupart du temps très différents de leur équivalent sans italique et passer d'un mode à l'autre entraîne généralement l'utilisation de glyphes différents. Attention à ne pas confondre l'italique et l'oblique (cf. l'axe de pente ci-après) : une police aura une forme italique ou une variabilité sur l'axe de pente mais rarement les deux.

+ +

En CSS, l'italique est appliqué grâce à la propriété {{cssxref("font-style")}} (qui permet aussi d'appliquer l'oblique). On notera l'apparition de la propriété font-synthesis: none; qui empêche les navigateurs de synthétiser l'italique en penchant les caractères (on pourra aussi utiliser cette valeur de façon équivalente pour éviter de synthétiser la graisse).

+ +
font-style: italic;
+
+font-variation-settings: 'ital' 1;
+
+font-synthesis: none;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}
+ +

La pente (slant)

+ +

La pente (indiquée par l'étiquette slnt), également appelée « oblique », diffère de l'italique car elle applique une pente sur les caractères mais ne change aucun des glyphes. Cet axe est un intervalle numérique allant généralement de 0 (droit) à 20 degrés. Toutefois, les valeurs allant de -90 et à 90 (degrés) sont autorisées. C'est également le descripteur font-style qui peut être utilisé pour cet axe.

+ +
+

Note : Le mot-clé deg ne doit pas être utilisé comme unité pour la notation avec font-variation-settings.

+
+ +
font-style: oblique 14deg;
+
+font-variation-settings: 'slnt' 14;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
+ +

La taille optique

+ + + + + +

La taille optique, indiquée par l'étiquette opsz, correspond à la variation de l'épaisseur des traits formants le caractère afin de s'assurer que celui-ci puisse être lu avec un petit corps et ainsi de garantir une bonne impression ou un bon affichage à l'écran.

+ +

Ainsi, pour les petits corps, on pourra avoir des traits plus épais et pour des grands corps, on pourra avoir une variation d'épaisseur plus importante entre les différents traits du caractères pour développer correctement le dessin de la police.

+ +

La plupart du temps, les valeurs liées à la taille optique sont appliquées automatiquement avec les valeurs correspondantes de font-size mais on peut tout à fait les manipuler avec la syntaxe de bas niveau font-variation-settings.

+ +

Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur font-optical-sizing permet uniquement d'utiliser les valeurs auto ou none et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec font-variation-settings: 'opsz' <num>, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour font-size et pour opsz. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique.

+ +
font-optical-sizing: auto;
+
+font-variation-settings: 'opsz' 36;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}
+ +

Les axes spécifiques

+ +

Les axes spécifiques sont introduits spécifiquement par les concepteurs de polices et peuvent correspondre à n'importe quelle variation. Il est possible que certains axes spécifiques deviennent fréquemment utilisés voire finissent par être intégrés aux axes enregistrés mais seul l'avenir le dira avec certitude.

+ +

Le grade

+ +

Le grade est une variation qui consiste à épaissir certains des traits des glyphes sans agrandir la largeur totale du glyphe. En augmentant le grade, on a ainsi un caractère plus « dense ». Il ne faut pas confondre le corps et le grade : le premier augmente la taille générale, largeur incluse, des glyphes tandis que le second ne modifie pas l'espace physique occupé par le caractère. Le grade est un axe spécifique plutôt populaire car il permet de faire varier la densité apparente du texte sans modifier sa largeur et ainsi il évite de générer un décalage du texte.

+ +
font-variation-settings: 'GRAD' 88;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}
+ +

Utiliser une police variable : les changements pour @font-face

+ +

Pour charger une police variable, la syntaxe est proche de celle utilisée pour les polices statiques. Les quelques différences notables sont apportées par des ajouts à la syntaxe {{cssxref("@font-face")}} disponible dans la plupart des navigateurs modernes.

+ +

La syntaxe de base est la même mais on peut indiquer la technologie utilisée pour la police ainsi que les intervalles autorisés pour les descripteurs font-weight et font-stretch.

+ +

Exemple d'une police standard réale droite :

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: normal;
+}
+
+ +

Exemple d'une police avec une forme droite et une forme italique :

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 20deg;
+}
+ +
+

Note : Il n'existe pas de valeur spécifique pour la mesure du degré supérieur. Les valeurs fournies à font-style indiquent simplement qu'un axe est présent afin que le navigateur puisse afficher correctement les caractères droits ou en italique.

+
+ +

Exemple d'une police qui ne contient que des italiques et aucun caractère droit :

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: italic;
+}
+ +

Exemple d'une police avec un axe de pente :

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 12deg;
+}
+ +
+

Note : La syntaxe complète n'est pas implémentée par l'ensemble des navigateurs et il faudra donc tester avec précaution. Tous les navigateurs qui prennent en charge les polices variables sauront les afficher même si seul le format de fichier est indiqué (plutôt que le format complet : par exemple woff2 à la place de woff2-variations), mais mieux vaut utiliser la syntaxe la plus précise si possible.

+
+ +
+

Note : Fournir des valeurs d'intervalle pour font-weight, font-stretch et font-style empêchera le navigateur d'afficher des polices en dehors de ces intervalles en utilisant les attributs font-weight ou font-stretch. En revanche, cela ne bloquera pas la syntaxe de plus bas niveau avec font-variation-settings !

+
+ +

Amélioration progressive et anciens navigateurs

+ +

La prise en charge des polices variables peut être vérifié grâce à {{cssxref("@supports")}}. Il est donc possible d'utiliser des polices variables en production et de limiter la portée des polices variables à l'intérieur d'une requête de prise en charge.

+ +
h1 {
+ font-family: some-non-variable-font-family;
+}
+
+@supports (font-variation-settings: 'wdth' 115) {
+ h1 {
+    font-family: some-variable-font-family;
+ }
+}
+ +

Pages d'exemples

+ +

Les pages d'exemples suivantes illustrent deux façons pour structurer le CSS. La première utilise les attributs standards où c'est possible et la seconde utilise les propriétés personnalisées afin de définir les valeur pour la chaîne de caractères fournie à font-variation-settings et montre comment mettre à jour une valeur plutôt que de redéfinir l'intégralité de la chaîne de caractères. On notera aussi l'effet au survol (hover) sur l'élément h2 qui ne joue que sur l'axe de grade.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_fonts/index.html b/files/fr/web/css/css_fonts/index.html new file mode 100644 index 0000000000..ac5fb425fd --- /dev/null +++ b/files/fr/web/css/css_fonts/index.html @@ -0,0 +1,142 @@ +--- +title: CSS Fonts +slug: Web/CSS/CSS_Fonts +tags: + - Aperçu + - CSS + - CSS Fonts + - Reference +translation_of: Web/CSS/CSS_Fonts +--- +
{{CSSRef}}
+ +

CSS Fonts est un module CSS qui définit des propriétés relatives aux polices de caractères et la façon dont les ressources des polices sont chargées. Il permet de définir le style d'une police, comme sa famille, sa taille ou sa graisse ainsi que la variante du glyphe à utiliser dans le cas des polices disposant de plusieurs glyphes par caractère. Il permet également de définir la hauteur d'une ligne.

+ +

Exemple simple

+ +

L'exemple qui suit illustre l'utilisation simple de propriétés relatives aux polices afin de mettre en forme le texte d'un paragraphe.

+ +

CSS

+ +
p {
+  width: 600px;
+  margin: 0 auto;
+  font-family: "Helvetica Neue", "Arial",  sans-serif;
+  font-style: italic;
+  font-weight: 100;
+  font-variant-ligatures: normal;
+  font-size: 2rem;
+  letter-spacing: 1px;
+}
+ +

HTML

+ +
<p>
+   Alice ne fut pas très-étonnée, tant elle commençait à s’habituer aux
+   événements extraordinaires. Tandis qu’elle regardait encore l’endroit
+   que le Chat venait de quitter, il reparut tout à coup.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple_simple', '100%', '200')}}

+ +

Exemples utilisant les polices variables

+ +

Vous pouvez trouver plusieurs exemples utilisant les polices variables sur v-fonts.com et axis-praxis.org. Notre guide sur les polices variables contient des informations et des exemples d'utilisation.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("font")}}
    • +
  • {{cssxref("font-family")}}
    • +
  • {{cssxref("font-feature-settings")}}
    • +
  • {{cssxref("font-kerning")}}
    • +
  • {{cssxref("font-language-override")}}
    • +
  • {{cssxref("font-optical-sizing")}}
    • +
  • {{cssxref("font-size")}}
    • +
  • {{cssxref("font-size-adjust")}}
    • +
  • {{cssxref("font-stretch")}}
    • +
  • {{cssxref("font-style")}}
    • +
  • {{cssxref("font-synthesis")}}
    • +
  • {{cssxref("font-variant")}}
    • +
  • {{cssxref("font-variant-alternates")}}
    • +
  • {{cssxref("font-variant-caps")}}
    • +
  • {{cssxref("font-variant-east-asian")}}
    • +
  • {{cssxref("font-variant-ligatures")}}
    • +
  • {{cssxref("font-variant-numeric")}}
    • +
  • {{cssxref("font-variant-position")}}
    • +
  • {{cssxref("font-variation-settings")}}
    • +
  • {{cssxref("font-weight")}}
    • +
  • {{cssxref("line-height")}}
    • +
+
+ +

Règles @

+ +
+
{{cssxref("@font-face")}}
+
+
+
    +
  • {{cssxref("@font-face/font-family", "font-family")}}
    • +
  • {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
    • +
  • {{cssxref("@font-face/font-style", "font-style")}}
    • +
  • {{cssxref("@font-face/font-variant", "font-variant")}}
    • +
  • {{cssxref("@font-face/font-weight", "font-weight")}}
    • +
  • {{cssxref("@font-face/font-stretch", "font-stretch")}}
    • +
  • {{cssxref("@font-face/src", "src")}}
    • +
  • {{cssxref("@font-face/unicode-range", "unicode-range")}}
    • +
+
+
+
{{cssxref("@font-feature-values")}}
+
+ +

Guides

+ +
+
Mise en forme du texte et utilisation des polices
+
Dans cet article, destiné aux débutants, nous abordons en détail les fonctionnalités pour la mise en forme du texte et la modification de la police.
+
Guide sur les caractéristiques de police OpenType
+
Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS.
+
Guide sur les polices variables
+
Les polices variables sont une évolution de la spécification OpenType qui permet de faire varier différents axes d'une police (provenant d'un seul fichier) plutôt que d'avoir plusieurs polices d'une même fonte. Cet article fournit l'ensemble des informations nécessaires à l'exploration des polices variables.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts')}}{{Spec2('CSS4 Fonts')}}Ajout de font-variation-settings (ainsi que des propriétés de haut niveau associées) et de font-optical-sizing.
{{SpecName('CSS3 Fonts')}}{{Spec2('CSS3 Fonts')}}Ajout de font-feature-settings (ainsi que des propriétés de haut niveau associées)
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1', '#font', '')}}{{Spec2('CSS1')}}Définition initiale.
diff --git a/files/fr/web/css/css_fragmentation/index.html b/files/fr/web/css/css_fragmentation/index.html new file mode 100644 index 0000000000..e6e860fb54 --- /dev/null +++ b/files/fr/web/css/css_fragmentation/index.html @@ -0,0 +1,48 @@ +--- +title: CSS Fragmentation +slug: Web/CSS/CSS_Fragmentation +tags: + - Aperçu + - CSS + - CSS Fragmentation + - NeedsContent + - Reference +translation_of: Web/CSS/CSS_Fragmentation +--- +
{{cssref}}
+ +

CSS Fragmentation est un module CSS qui décrit la façon dont le contenu est divisé (fragmenté) entre plusieurs pages, régions ou colonnes.

+ +

La fragmentation se produit lorsqu'une boîte en ligne se retrouve sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne au sein d'un conteneur de colonne ou sur un saut de page lorsque le document est imprimé. Chaque morceau de l'élément ainsi divisé est appelé un fragment.

+ +

Référence

+ +
+
    +
  • {{cssxref("box-decoration-break")}}
    • +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-inside")}}
    • +
  • {{cssxref("orphans")}}
    • +
  • {{cssxref("widows")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fragmentation')}}{{Spec2('CSS3 Fragmentation')}}Définition initiale.
diff --git a/files/fr/web/css/css_generated_content/index.html b/files/fr/web/css/css_generated_content/index.html new file mode 100644 index 0000000000..09d0a27ed9 --- /dev/null +++ b/files/fr/web/css/css_generated_content/index.html @@ -0,0 +1,48 @@ +--- +title: CSS Generated Content +slug: Web/CSS/CSS_Generated_Content +tags: + - Aperçu + - CSS + - CSS Generated Content + - Reference +translation_of: Web/CSS/CSS_Generated_Content +--- +
{{CSSRef}}
+ +

CSS Generated Content est un module CSS qui définit comment ajouter du contenu à un élément.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("content")}}
    • +
  • {{cssxref("quotes")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Content")}}{{Spec2("CSS3 Content")}} 
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}Définition initiale.
diff --git "a/files/fr/web/css/css_grid_layout/alignement_des_bo\303\256tes_avec_les_grilles_css/index.html" "b/files/fr/web/css/css_grid_layout/alignement_des_bo\303\256tes_avec_les_grilles_css/index.html" new file mode 100644 index 0000000000..8353f2c29e --- /dev/null +++ "b/files/fr/web/css/css_grid_layout/alignement_des_bo\303\256tes_avec_les_grilles_css/index.html" @@ -0,0 +1,661 @@ +--- +title: L'alignement des boîtes avec les grilles CSS +slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS +tags: + - CSS + - CSS Grid + - Grille CSS + - Guides + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}

+ +

Si vous connaissez les boîtes flexibles (flexbox) vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification Box Alignment Level 3. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.

+ +

Chaque méthode de disposition qui implémente cette nouvelle spécification se comportera légèrement différemment selon les différences de contraintes et de fonctionnalités (et aussi selon le comportement historique). On ne pourra donc pas avoir un alignement exactement homogène. La spécification pour l'alignement des boîtes détaille le fonctionnement de chaque méthode mais malheureusement, à l'heure actuelle, aucun navigateur ne prend en charge cette spécification. À l'heure actuelle, les navigateurs respectent les règles de cette spécification pour l'alignement et la répartition de l'espace lorsqu'on utilise une disposition en grille. Dans cet article, nous verrons comment celles-ci fonctionnent. On retrouvera de nombreux points communs avec les boîtes flexibles pour le fonctionnement de ces propriétés et valeurs. Toutefois, les grilles fonctionnant sur deux axes et les boîtes flexibles sur un seul, il faudra faire attention à quelques différences. Commençons par analyser les deux axes utilisés lorsqu'il s'agit d'aligner des objets sur une grille.

+ +

Les deux axes d'une grille

+ +

Lorsqu'on manipule une grille, on dispose  de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (block layout). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.

+ +

+ +

L'axe en ligne est orthogonal à l'axe de bloc. C'est la direction selon laquelle progresse le texte.

+ +

+ +

Grâce aux propriétés et à leurs valeurs, nous serons en mesure d'aligner le contenu de la grillle par rapport à ces deux axes.

+ +

Aligner des objets sur l'axe de bloc (block axis)

+ +

Les propriétés {{cssxref("align-self")}} et {{cssxref("align-items")}} permettent de contrôler l'alignement selon l'axe de bloc. Lorsqu'on utilise ces propriétés, on modifie l'alignement de l'objet au sein de la zone de grille sur laquelle il est placé.

+ +

Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la propriété {{cssxref("align-items")}} sur le conteneur de la grille afin d'aligner les objets avec l'une des valeurs suivantes :

+ +
    +
  • auto
    • +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+  align-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_1', '500', '450')}}

+
+ +

Lorsqu'on utilise align-self: start, la hauteur de chaque <div> sera déterminée par le contenu du <div>. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque <div> sera étiré afin de remplir la zone de la grille.

+ +

La propriété {{cssxref("align-items")}} définit en fait la valeur de la propriété {{cssxref("align-self")}} pour tous les éléments fils de la grille. Cela signifie qu'on peut avoir un réglage plus fin sur chacun des objets de la grille en utilisant align-self pour les objets.

+ +

Dans le prochain exemple, on utilise la propriété align-self afin d'illustrer les différentes valeurs pour l'alignement. La première zone illustre le comportement par défaut pour align-self : l'objet est étiré. Le deuxième objet utilise la valeur start, le troisième utilise end et le quatrième utilise center.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: c;
+  align-self: end;
+}
+.item4 {
+  grid-area: d;
+  align-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_2', '500', '450')}}

+
+ +

Gestion des objets avec un ratio intrinsèque

+ +

La spécification indique que le comportement par défaut pour {{cssxref("align-self")}} est d'étirer l'objet sauf si celui-ci possède un ratio intrinsèque. Dans ce cas, le comportement par défaut correspond à la valeur start. En effet, si le comportement par défaut était le même pour les éléments avec un ratio intrinsèque (une image matricielle par exemple), l'étirement distordrait l'objet.

+ +

Bien que ce comportement ait récemment été clarifié dans la spécification, il n'est pas encore implémenté dans les différents navigateurs. Pour le moment, il faut donc s'assurer d'utiliser {{cssxref("align-self")}} et {{cssxref("justify-self")}} avec les valeurs start pour les éléments concernés comme les images. Cela correspondra au comportement par défaut lorsqu'il aura été implémenté.

+ +

Justifier les objets sur l'axe en ligne (inline axis)

+ +

{{cssxref("align-items")}} et {{cssxref("align-self")}} gèrent l'alignement des objets sur l'axe de bloc. {{cssxref("justify-items")}} et {{cssxref("justify-self")}} permettent quant à eux de gérer l'alignement sur l'axe en ligne. Les valeurs disponibles sont les mêmes que pour align-self :

+ +
    +
  • auto
    • +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

Juste après, on voit le même exemple qu'avec {{cssxref("align-items")}} où on a utilisé la propriété {{cssxref("justify-self")}}.

+ +

Là encore, la valeur par défaut stretch pour les objets qui n'ont pas de ratio intrinsèque. Cela signifie que, par défaut, les objets de la grille couvriront l'ensemble de la zone de grille sur laquelle ils sont placés. Dans l'exemple qui suit, le premier objet illustre cet alignement par défaut.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  justify-self: start;
+}
+.item3 {
+  grid-area: c;
+  justify-self: end;
+}
+.item4 {
+  grid-area: d;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_3', '500', '450')}}

+
+ +

Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille.

+ +

Les propriétés {{cssxref("justify-self")}} et {{cssxref("justify-items")}} ne sont pas disponibles lorsqu'on utilise les boîtes flexibles car celles-ci s'étendent uniquement sur une dimension. Pour aligner les éléments sur l'axe principale d'une boîte flexible, on utilisera la propriété {{cssxref("justify-content")}}.

+ +

Propriétés raccourcies

+ +

La propriété {{CSSxRef("place-items")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-items")}} et {{CSSxRef("justify-items")}}. {{CSSxRef("place-self")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}}.

+ +

Centrer un objet sur une zone

+ +

En combinant les propriétés align-* et justify-*, on peut facilement centrer un objet sur sa zone de grille.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 200px;
+  grid-template-areas:
+    ". a a ."
+    ". a a .";
+}
+.item1 {
+  grid-area: a;
+  align-self: center;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+ <div class="item1">Objet 1</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_4', '500', '480')}}

+
+ +

Aligner les pistes d'une grille sur l'axe de bloc

+ +

Si on a des pistes qui n'occupent pas tout l'espace du conteneur, on pourra aligner les pistes au sein du conteneur. Là aussi, on peut obtenir cet alignement sur l'axe des colonnes et l'axe des lignes : {{cssxref("align-content")}} permet d'aligner les pistes selon l'axe des colonnes et {{cssxref("justify-content")}} permettant d'aligner sur l'axe en ligne.

+ +

La propriété {{cssxref("place-content")}} est une propriété raccourcie pour {{cssxref("align-content")}} et {{cssxref("justify-content")}}.

+ +

Les valeurs disponibles pour {{cssxref("align-content")}}, {{cssxref("justify-content")}} et {{cssxref("place-content")}} sont :

+ +
    +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • space-around
    • +
  • space-between
    • +
  • space-evenly
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

Dans l'exemple qui suit, on a un conteneur qui mesure 500 pixels de haut sur 500 pixels de large. On définit trois pistes de ligne et trois pistes de colonnes qui mesurent chacune 100 pixels et avec une gouttière de 10 pixels. On a donc un espace disponible dans le conteneur dans chaque direction.

+ +

La propriété align-content s'applique sur le conteneur de la grille car elle porte sur l'ensemble de la grille. Pour une disposition en grille, la valeur par défaut est start : cela indique que les pistes commencent à partir du coin en haut à gauche de la grille.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_5', '500', '520')}}

+
+ +

Si on ajoute align-content avec la valeur end sur le conteneur, les pistes seront déplacées à la fin du conteneur selon l'axe des colonnes.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: end;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_6', '500', '520')}}

+
+ +

Pour cette propriété, on peut également utiliser des valeurs qu'on manipule avec les boîtes flexibles : space-between, space-around et space-evenly qui permettent de répartir l'espace. Si on utilise {{cssxref("align-content")}} avec space-between pour notre exemple, on voit alors que les éléments sont espacés de façon équitable.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_7', '500', '1570')}}

+
+ +

On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer.

+ +

Dans l'image qui suit, on a a placé une grille en utilisant align-content: start et une autre grille qui utilise align-content: space-between. On peut voir la façon dont les objets 1 et 2 (qui s'étalent sur deux lignes) ont gagné en hauteur pour combler l'espace entre les pistes.

+ +

+ +

Justifier les pistes sur l'axe des lignes

+ +

Sur l'axe des lignes, on peut utiliser {{cssxref("justify-content")}} de la même façon qu'on utilisait {{cssxref("align-content")}} pour l'axe des colonnes.

+ +

Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur space-around. Là encore, les pistes qui s'étalent sur plus d'une colonne gagnent en largeur.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-content: space-around;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_8', '500', '500')}}

+
+ +

Alignement et marges automatiques

+ +

Pour aligner les objets dans une zone, on peut également utiliser des marges automatiques. Si vous avez déjà utiliser auto pour les marges droite et gauche d'un conteneur de bloc, vous savez qu'une telle marge absorbe l'espace disponible. En utilisant auto pour les deux côtés, le bloc est contraint au milieu car les deux marges occupent le plus d'espace possible.

+ +

Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec auto. On peut alors voir le contenu poussé à droite de la zone (la marge à gauche occupant le plus d'espace possible).

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+  margin-left: auto;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_9', '500', '500')}}

+
+ +

On peut voir comment l'objet est aligné grâce à l'outil de mise en évidence des grilles dans Firefox.

+ +

+ +

L'alignement et les modes d'écriture

+ +

Dans tout ces exemples, nous avons travaillé en français ou en anglais, des langues qui s'écrivent de gauche à droite. Cela signifie que les lignes de début de notre grille étaient situées en haut et à gauche lorsqu'on raisonnait avec des directions physiques.

+ +

Les spécifications pour les grilles CSS et les boîtes flexibles sont conçues pour fonctionner avec les différents modes d'écriture. Cela signifie que si on travaille avec une langue qui s'écrit de droite à gauche (comme l'arabe), le début de la grille serait en haut à droite. Cela signifie également que la valeur par défaut justify-content: start placerait les pistes du côté droit de la grille. En revanche, si on utilise les marges automatiques avec margin-right ou margin-left ou si on utilise le positionnement absolu avec les valeurs top, right, bottom et left, on ne tiendra pas compte des modes d'écritures. Dans le guide suivant, nous verrons plus en détails comment les grilles et l'alignement interagissent avec les modes d'écriture. Cet aspect est fondamental si vous souhaitez développer des sites qui puissent être affichés dans plusieurs langues ou si vous souhaitez mélanger certaines langues ou modes d'écriture pour une application.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html b/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html new file mode 100644 index 0000000000..44e85dda1f --- /dev/null +++ b/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html @@ -0,0 +1,560 @@ +--- +title: Construire des dispositions courantes avec des grilles CSS +slug: >- + Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}

+ +

Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise les zones nommées d'une grille, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.

+ +

Une disposition adaptative avec une à trois colonnes en utilisant grid-template-areas

+ +

De nombreux sites web sont construits comme une variation autour de cette disposition avec du contenu, une ou plusieurs barres latérale, un en-tête et un pied de page. Pour que le site soit responsive, on peut souhaiter avoir une seule colonne pour certaines tailles d'affichage, ajouter une barre latérale lorsqu'on a plus d'espace et enfin, avoir trois colonnes pour les écrans les plus larges.

+ +

Image of the three different layouts created by redefining our grid at two breakpoints.

+ +

Ici, on crée une disposition avec des zones nommées comme on a pu le voir dans l'article correspondant.

+ +

Dans le document on a un conteneur qui contient un en-tête, un pied de page, du contenu principal, une barre de navigation, une barre latérale et un bloc dans lequel on souhaite placer de la publicité.

+ +
+ + +
<div class="wrapper">
+  <header class="main-head">L'en-tête</header>
+  <nav class="main-nav">
+    <ul>
+      <li><a href="">Nav 1</a></li>
+      <li><a href="">Nav 2</a></li>
+      <li><a href="">Nav 3</a></li>
+    </ul>
+  </nav>
+  <article class="content">
+    <h1>L'article principal</h1>
+    <p>
+       Dans cette disposition, on affiche les zones dans le même
+       ordre que dans le document pour les écrans dont la largeur
+       est inférieure à 500 pixels. On passe à une disposition sur
+       deux colonnes ou trois colonnes en redéfinissant la grille
+       et le placement des objets sur la grille.
+    </p>
+  </article>
+  <aside class="side">Barre latérale</aside>
+  <div class="ad">Publicité</div>
+  <footer class="main-footer">Le pied de page</footer>
+</div>
+
+ +

On utilise {{cssxref("grid-template-areas")}} afin de créer la disposition. On nomme les zones en dehors des différentes media queries. Les propriétés sont nommées grâce à la propriété {{cssxref("grid-area")}}.

+ +
.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+
+ +

Avec ces différentes règles, on n'a pas encore de disposition, uniquement des noms qu'on pourra utiliser. Ensuite, on définit la disposition qu'on aura par défaut et qui sera utilisée pour les mobiles. Dans cette règle, on garde le même ordre que celui utilisé dans le document (cf. le guide sur les grilles CSS et l'accessibilité). On ne définit aucune piste (colonne ou ligne) mais cela suffit pour décrire une disposition sur une seule colonne, les lignes seront créées implicitement lorsqu'elles seront nécessaires.

+ +
.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+
+ +

Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une requête média (media query) et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :

+ +
@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

On peut voir la disposition organisée dans la valeur pour la propriété {{cssxref("grid-template-areas")}}. L'en-tête header s'étale sur deux colonnes et le bloc nav également. Sur la troisième ligne, on a la barre latérale (sidebar) à côté du contenu (content). Sur la quatrième ligne, on a le bloc pour la publicité (ad) qui apparaît sous la barre latérale et enfin le pied de page qui apparaît sous le contenu. On utilise une boîte flexible pour la barre de navigation afin de l'étaler sur une ligne homogène.

+ +

Enfin, on ajoute une autre requête de média pour la disposition avec trois colonnes :

+ +
@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+}
+
+ +

Cette disposition en trois colonnes possède une première colonne qui s'étend sur 1fr, une colonne centrale qui s'étend sur 4fr et une dernière colonne qui mesure également 1fr. Cela signifie que l'espace disponible dans le conteneur est découpé en 6 et que chacun de ces morceaux est affecté à une de ces pistes.

+ +

Dans cette disposition, la barre de navigation est affichée dans la colonne à gauche, à côté du contenu. Sur la colonne à droite, on a la barre latérale au-dessus de la publicité. Le pied de page, quant à lui, s'étale sur tout le bas du conteneur. Ici aussi, on utilise une boîte flexible en colonne pour la barre de navigation.

+ +

{{EmbedLiveSample('layout_1', '800', '430')}}

+
+ +

Cet exemple est assez simple mais permet d'illustrer comme utiliser une grille afin de réorganiser le contenu pour différentes tailles d'écran. On voit par exemple comment on déplace le bloc ad dans les différentes organisations. L'utilisation des noms pour les zones permet de prototyper rapidement de nouvelles dispositions. Vous pouvez toujours utiliser la grille pour agencer votre prototype même si ce n'est pas la technologie que vous utiliserez pour votre site ou votre application en production.

+ +

Une disposition flexible avec 12 colonnes

+ +

Si vous travaillez avec un framework ou avec un système de grille, vous êtes peut-être habitué-e à travailler sur une grille avec 12 ou 16 colonnes. On peut recréer ce genre de système avec une grille CSS. Pour commencer, on crée une grille avec 12 colonnes dont chaque piste mesure 1fr-unit et commence par une ligne intitulée col-start. Autrement dit, on aura 12 colonnes intitulées col-start.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

Pour voir comment ce système fonctionne, on place quatre éléments dans le conteneur :

+ +
<div class="wrapper">
+  <div class="item1">Début à la première colonne, s'étend sur 3 colonnes.</div>
+  <div class="item2">Début à la colonne 6, s'étend sur 4 colonnes et deux lignes.</div>
+  <div class="item3">Début à la colonne 2 de la ligne 2, s'étend sur 2 colonnes.</div>
+  <div class="item4">Début à la colonne 3, s'étend jusqu'à la fin de la grille.</div>
+</div>
+
+ +

Et on place ces éléments sur la grille en utilisant les noms utilisés précédemment, avec le mot-clé span :

+ +
.item1 {
+  grid-column: col-start / span 3;
+}
+.item2 {
+  grid-column: col-start 6 / span 4 ;
+  grid-row: 1 / 3;
+}
+.item3 {
+  grid-column: col-start 2 / span 2;
+  grid-row: 2;
+}
+.item4 {
+  grid-column: col-start 3 / -1;
+  grid-row: 3;
+}
+
+ +

{{EmbedLiveSample('layout_2', '800', '330')}}

+
+ +

Comme nous l'avons vu dans le guide sur le nommage des lignes, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.

+ +

Plutôt que d'indiquer le numéro de la dernière colonne pour chaque élément, on a ici utilisé le mot-clé span pour indiquer la taille de chaque élément. Cette approche permet de revoir plus clairement la taille de chaque élément lorsqu'on ajoute une nouvelle disposition pour une nouvelle taille d'écran. Dans la capture qui suit, on peut voir comment les blocs sont positionnés sur la grilles. Pour cela, on a utilisé l'inspecteur de grille de Firefox qui indique de façon claire comment les objets sont placés.

+ +

Showing the items placed on the grid with grid tracks highlighted.

+ +

Il y a certainement certaines différences fondamentales avec les systèmes que vous auriez pu utiliser précédemment. On voit par exemple qu'il n'est pas nécessaire d'ajouter de règles supplémentaires pour créer une ligne. Généralement, il faut ajouter des contrôles pour éviter que les éléments remontent sur les lignes au-dessus. Avec une grille CSS, ce n'est pas un problème, les lignes supérieures sont laissées vides. La disposition étant stricte, on peut très bien laisser des espaces dans notre plan. Il n'est pas non plus nécessaire de définir des classes spécifiques afin d'indenter les différents objets, il suffit ici d'indiquer la colonne de début et la colonne de fin.

+ +

Construire une disposition avec ce système à 12 colonnes

+ +

Pour voir comment cette méthode fonctionne en pratique, nous allons créé le même plan que celui que nous avons vu avec les zones nommées et {{cssxref("grid-template-areas")}} mais en utilisant désormais ce système à 12 colonnes. Commençons avec la même structure que celle utilisée plus haut avec les zones nommées :

+ +
+ + +
<div class="wrapper">
+  <header class="main-head">L'en-tête</header>
+  <nav class="main-nav">
+    <ul>
+      <li><a href="">Nav 1</a></li>
+      <li><a href="">Nav 2</a></li>
+      <li><a href="">Nav 3</a></li>
+    </ul>
+  </nav>
+  <article class="content">
+    <h1>L'article principal</h1>
+    <p>
+       Dans cette disposition, on affiche les zones dans le même
+       ordre que dans le document pour les écrans dont la largeur
+       est inférieure à 500 pixels. On passe à une disposition sur
+       deux colonnes ou trois colonnes en redéfinissant la grille
+       et le placement des objets sur la grille.
+    </p>
+  </article>
+  <aside class="side">Barre latérale</aside>
+  <div class="ad">Publicité</div>
+  <footer class="main-footer">Le pied de page</footer>
+</div>
+
+ +

On initialise la grille avec nos 12 colonnes :

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

Là encore, nous allons adapter la disposition en fonction de la taille de la zone d'affichage mais ici, nous utiliserons les colonnes nommées. Pour chaque type d'affichage, nous allons utiliser 12 colonnes et faire varier le nombre de pistes sur lequel s'étalent les objets à afficher.

+ +

Commençons par le mobile : on souhaite gérer les écrans les plus étroits par défaut. Ici aussi, on respecte l'ordre des éléments indiqués par le code source du document et tous les objets s'étalent tout au long de la grille.

+ +
.wrapper > * {
+  grid-column: col-start / span 12;
+}
+
+ +

Pour la prochaine taille, on veut obtenir une disposition sur deux colonnes. Ici, l'en-tête et la barre de navigation occuperont toute une ligne horizontale, il n'est donc pas nécessaire d'indiquer de positionnement pour eux. La barre latérale commence sur la première colonne intitulée col-start et s'étend sur 3 colonnes et commence à partir de la troisième ligne (les deux premières étant occupées par l'en-tête et la barre de navigation).

+ +

Le panneau dédié à la publicité est affiché sous la barre latérale et commence à partir de la quatrième ligne. On a ensuite le contenu et le pied de page qui commencent à partir de la quatrième colonne et s'étendent sur 9 pistes pour occuper le reste de la grille.

+ +
@media (min-width: 500px) {
+  .side {
+    grid-column: col-start / span 3;
+    grid-row: 3;
+  }
+  .ad {
+    grid-column: col-start / span 3;
+    grid-row: 4;
+  }
+  .content, .main-footer {
+    grid-column: col-start 4 / span 9;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

Voyons alors la disposition sur trois colonnes. Pour ce plan, l'en-tête s'étale aussi sur toute la largeur de la grille, la barre de navigation devient verticale, à côté on a le contenu puis la barre latérale. Le pied de page s'étale, lui aussi, sur toute la largeur du conteneur.

+ +
@media (min-width: 700px) {
+  .main-nav {
+    grid-column: col-start / span 2;
+    grid-row: 2 / 4;
+  }
+  .content {
+    grid-column: col-start 3 / span 8;
+    grid-row: 2 / 4;
+  }
+  .side {
+    grid-column: col-start 11 / span 2;
+    grid-row: 2;
+  }
+  .ad {
+    grid-column: col-start 11 / span 2;
+    grid-row: 3;
+  }
+  .main-footer {
+    grid-column: col-start / span 12;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
+
+ +

{{EmbedLiveSample('layout_3', '800', '430')}}

+
+ +

On peut à nouveau profiter de l'inspecteur de grille pour voir comment se compose effectivement notre disposition :

+ +

Showing the layout with grid tracks highlighted by the grid inspector.

+ +

On notera qu'il n'a pas été nécessaire de redéfinir explicitement la position de chaque élément pour chaque résolution. On a pu hériter des emplacements des résolutions précédentes. On gagne donc à travailler en considérant les résolutions mobiles en premier lieu. On tire également parti du placement automatique géré par la grille avec l'ordre, logique, des éléments du documents. Dans le dernier exemple, nous allons voir comment le placement automatique sur la grille peut aider à positionner des objets..

+ +

Une liste produit utilisant le placement automatique

+ +

De nombreuses dispositions sont essentiellement composée de cartes ou tuiles : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de requêtes de média. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.

+ +

Le document utilisé contient une liste d'objets non ordonnée. Pour chaque produit, on a un titre, un texte dont la taille n'est pas fixe et un lien pour effectuer une action.

+ +
+
<ul class="listing">
+  <li>
+    <h2>Produit n°1</h2>
+    <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+    <div class="cta"><a href="">Faire quelque chose !</a></div>
+  </li>
+   <li>
+     <h2>Produit n°2</h2>
+     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+     <div class="cta"><a href="">Faire quelque chose !</a></div>
+   </li>
+   <li class="wide">
+     <h2>Produit n°3</h2>
+     <div class="body"><p>Le descriptif du produit sera écrit ici.</p>
+     <p>Ce produit possède un descriptif beaucoup plus long.</p>
+     <p>Vraiment plus long</p>
+     <p>Peut-être faudrait-il le gérer différemment ?</p></div>
+     <div class="cta"><a href="">Faire quelque chose !</a></div>
+    </li>
+    <li>
+     <h2>Produit n°4</h2>
+     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+     <div class="cta"><a href="">Faire quelque chose !</a></div>
+    </li>
+     <li>
+     <h2>Produit n°5</h2>
+     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+      <div class="cta"><a href="">Faire quelque chose !</a></div>
+    </li>
+</ul>
+
+ + + +

Nous allons créer une grille avec un nombre de colonnes adaptable et chacune des colonnes sera flexible. On indique qu'une colonne doit avoir une largeur minimale de 200 pixels et que l'espace restant doit être réparti équitablement (toutes les colonnes auront donc la même largeur). Pour obtenir ce résultat, on utilise la fonction minmax() avec la notation repeat pour la propriété grid-template-columns qui permet de dimensionner les pistes.

+ +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+
+ +

Dès qu'on ajoute cette règle, les objets s'organisent sur la grille. Si on chance la taille de la fenêtre, le nombre de colonne s'adaptera, sans qu'il soit nécessaire d'ajouter des requêtes de média ou de définir la grille.

+ +

On peut ensuite améliorer chacune des boîtes en utilisant les boîtes flexibles. Pour les éléments de la liste ({{HTMLElement("li")}}), on utilise display: flex et flex-direction avec la valeur column. On ajoute une marge automatique pour la classe .cta afin que cette barre soit placée en bas de la boîte.

+ +
.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+
+ +

Voici un exemple où, d'après moi, l'utilisation des boîtes flexibles est pertinente par rapport à une autre grille : on ne fait qu'aligner ou organiser des objets sur un seul axe, ce qui est très bien géré avec une boîte flexible.

+ +

{{EmbedLiveSample('layout_4', '800', '900')}}

+
+ +

Le résultat est plutôt abouti mais on a parfois des cartes qui ont beaucoup plus de contenu. Si on veut que celles-ci soient plus large (pour éviter qu'elles soient trop hautes), on peut les étaler sur deux pistes. Pour cela, on a utilisé la classe wide sur l'objet avec plus de contenu et on ajoute une règle {{cssxref("grid-column-end")}} avec la valeur span 2. Désormais, lorsque la grille devra placer un élément de ce type, elle lui affectera deux colonnes. Cela signifie aussi que pour certaines tailles d'affichage, on aura un espace dans la grille lorsqu'il n'y aura pas suffisamment d'espace pour placer un objet sur deux colonnes :

+ +

The layout has gaps as there is not space to layout a two track item.

+ +

Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}: dense sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (tab order) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille.

+ +
+ + +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+.listing .wide {
+  grid-column-end: span 2;
+}
+
+ +

{{EmbedLiveSample('layout_5', '800', '900')}}

+ +

Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML.

+
+ +

Aller plus loin

+ +

La meilleure façon d'apprendre à utiliser les grilles CSS est de continuer à construire des exemples comme ceux que nous avons vus ici. Prenez un cas d'utilisation que vous auriez construit avec un framework ou avec un autre mode de disposition et voyez si vous pouvez le construire à l'aide d'une grille. N'oubliez pas de trouver des exemples de disposition encore impossibles à construire avec les méthodes actuelles : prenez différentes sources d'inspiration comme les magazines et affiches. Le modèle de grille offre un nouvel éventail de possibilités et il serait dommage de rester sur nos acquis.

+ +
    +
  • Vous pouvez consulter le Layout Labs de Jen Simmons (en anglais), elle a créé différentes disposition en se basant sur une variété d'exemples.
    • +
  • Pour d'autres exemples, vous pouvez vous référer à Grid by Example qui contient des exemples pour des grilles plus petites, des fragments d'interface utilisateur ou des dispositions pour des pages entières.
    • +
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/d\303\251finir_des_zones_sur_une_grille/index.html" "b/files/fr/web/css/css_grid_layout/d\303\251finir_des_zones_sur_une_grille/index.html" new file mode 100644 index 0000000000..be9c0122a7 --- /dev/null +++ "b/files/fr/web/css/css_grid_layout/d\303\251finir_des_zones_sur_une_grille/index.html" @@ -0,0 +1,482 @@ +--- +title: Définir des zones sur une grille +slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

+ +

Dans le guide précédent, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des zones de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !

+ +

Donner un nom à une zone de grille

+ +

On a déjà utilisé la propriété {{cssxref("grid-area")}} précédemment. C'est cette propriété qui utilise les numéros des lignes comme valeur pour positionner une zone de grille :

+ +
.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+
+ +

Ici, on définit les quatre lignes qui entourent la zone en question :

+ +

The Grid Area defined by lines

+ +

On peut également définir une zone en lui donnant un nom puis en définissant l'emplacement de cette zone grâce à la propriété {{cssxref("grid-template-areas")}}. Vous pouvez choisir les noms de vos zones, on peut par exemple créer une disposition avec quatre zones :

+ +
    +
  • Un en-tête (header)
    • +
  • Un pied de page (footer)
    • +
  • Une barre latérale (sidebar)
    • +
  • Le contenu principale (content)
    • +
+ +

An image showing a simple two column layout with header and footer

+ +

Avec {{cssxref("grid-area")}}, on affecte un nom à chacune de ces zones. Pour le moment, aucune disposition n'a été créée mais on a des noms qu'on pourra utiliser dans notre disposition :

+ +
+
.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+
+ +

Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de placer les objets grâce aux numéros de ligne, on définit la disposition dans le conteneur de la grille :

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+
+ + + +
<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+</div>
+ +

{{EmbedLiveSample('Grid_Area_1', '300', '330')}}

+
+ +

Grâce à cette méthode, il n'est pas nécessaire de gérer chacun des éléments individuellement. Tout est organisé au travers du conteneur. La disposition est décrite grâce à la propriété {{cssxref("grid-template-areas")}}.

+ +

Laisser une cellule vide

+ +

Dans l'exemple précédent, toute la grille est occupée… On peut également utiliser cette méthode pour laisser des cellules vides. Pour cela, il faut utiliser un point à la place d'un nom de zone. Aussi, si on veut que le pied de page soit uniquement affiché sous le contenu, il faudra avoir trois cellules vides sous la barre latérale.

+ +
.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+
+ + + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      ".  .  .  ft   ft   ft   ft   ft   ft";
+}
+
+ +
<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+</div>
+ +

{{EmbedLiveSample('Laisser_une_cellule_vide', '300', '330')}}

+ +

Si on veut que la disposition soit bien représentée, on peut utiliser plusieurs points. Tant que ceux-ci ne sont pas séparés par un espace, ils compteront pour une seule cellule. Dans le cas d'une disposition complexe, cela permet d'avoir des lignes et colonnes clairement alignées, y compris dans la règle CSS.

+ +

Occuper plusieurs cellules

+ +

Dans notre exemple, chacune des zones occupe plusieurs cellules car on a répété le nom de la zone avec des espaces entre (on peut ajouter plus d'espaces si besoin, afin d'avoir une disposition lisible, c'est ce qu'on a fait précédemment pour que hd et ft soient alignés avec main).

+ +

La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité). On peut toutefois agrandir des lignes horizontales aussi simplement que des colonnes. Par exemple, on pourrait avoir la barre latérale qui descend jusqu'en bas en remplaçant les points par sd.

+ +
.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+
+ + + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "sd sd sd  ft  ft   ft   ft   ft   ft";
+}
+
+ + + +

{{EmbedLiveSample('Occuper_plusieurs_cellules', '300', '330')}}

+ +

La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.

+ +

Redéfinir une grille à avec des media queries

+ +

Notre disposition fait désormais partie de notre feuille de style CSS. On peut donc l'adapter très facilement pour différentes résolutions. On peut redéfinir la position des objets sur la grille ou la grille elle-même, ou les deux simultanément.

+ +

Pour ce faire, on définit les noms des zones en dehors de toute media query afin de pouvoir y accéder quel que soit l'endroit où la zone sera placée.

+ +

Pour la disposition vue précédemment, on définit ici une disposition par défaut sur une seule colonne pour les affichages étroits. On a donc une seule piste sur laquelle s'empilent les objets :

+ + + +
.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+
+.wrapper {
+  display: grid;
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "hd"
+    "main"
+    "sd"
+    "ft";
+}
+
+ +

On peut ensuite redéfinir la disposition à l'intérieur des différentes media queries utilisées pour avoir une disposition sur deux colonnes, voire trois lorsque l'espace le permet. On notera que pour la disposition la plus large, on a une grille organisée sur 9 colonnes/pistes et on redéfinit l'emplacement des objets avec grid-template-areas.

+ +
@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: repeat(9, 1fr);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "sd sd sd  ft  ft   ft   ft   ft   ft";
+  }
+}
+@media (min-width: 700px) {
+  .wrapper {
+    grid-template-areas:
+      "hd hd hd   hd   hd   hd   hd   hd hd"
+      "sd sd main main main main main ft ft";
+  }
+}
+
+ + + +

{{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}

+ +

Utiliser grid-template-areas pour des éléments d'interface utilisateur

+ +

La plupart des exemples illustrent une utilisation de la grille pour la disposition principale de la page. Toutefois, une grille peut également être utile pour les petits éléments. {{cssxref("grid-template-areas")}} est assez pratique car elle permet de voir facilement à quoi ressemblera l'élément.

+ +

Dans l'exemple qui suit, on crée un objet « media » qui servira de composant pour afficher un media (une image par exemple) d'un côté et un texte de l'autre. On pourra ainsi voir l'effet obtenu en changeant la disposition avec l'image à droite ou à gauche.

+ +

Images showing an example media object design

+ +

Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec 1fr et celle pour le texte reçoit 3fr. Si on souhaitait utiliser une largeur fixe pour l'image, on aurait pu utiliser des pixels pour définir la taille de la colonne et utiliser 1fr pour la zone du texte. Cette colonne de 1fr aurait alors occupé le reste de l'espace.

+ +

Pour la zone dédiée à l'image, on crée une zone de grille intitulée img et pour le texte, on crée une seconde zone intitulée content. Ensuite, on utilise ces noms pour créer l'organisation via la propriété grid-template-areas.

+ +
+
* {box-sizing: border-box;}
+
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+}
+.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+
+.media .image {
+  grid-area: img;
+  background-color: #ffd8a8;
+}
+
+.media .text {
+  grid-area: content;
+  padding: 10px;
+}
+
+ +
<div class="media">
+  <div class="image"></div>
+  <div class="text">
+    Dans cet exemple, on peut utiliser
+    grid-template-areas pour échanger les
+    places du texte et du media.
+  </div>
+</div>
+ +

{{EmbedLiveSample('Media_1', '300', '200')}}

+
+ +

Afficher l'image de l'autre côté

+ +

Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une grille pour laquelle la piste qui mesure 1fr est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.

+ +
+
* {box-sizing: border-box;}
+
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+}
+.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+
+.media.flipped {
+  grid-template-columns: 3fr 1fr;
+  grid-template-areas: "content img";
+}
+
+.media .image {
+  grid-area: img;
+  background-color: #ffd8a8;
+}
+
+.media .text {
+  grid-area: content;
+  padding: 10px;
+}
+
+ +
<div class="media flipped">
+  <div class="image"></div>
+  <div class="text">
+    Dans cet exemple, on peut utiliser
+    grid-template-areas pour échanger les
+    places du texte et du media.
+  </div>
+</div>
+ +

{{EmbedLiveSample('Media_2', '300', '200') }}

+
+ +

Les propriétés raccourcies pour les grilles CSS

+ +

Nous avons vu différentes façons de placer des objets sur une grille et plusieurs des propriétés utilisées pour définir une grille. Voyons maintenant les propriétés raccourcies qui sont disponibles pour les grilles CSS et qui permettent de rendre le code un peu plus concis.

+ +

Attention, ces propriétés peuvent parfois devenir complexes à lire, que ce soit pour les autres développeurs qui liraient votre code voire pour vous-même d'ici quelques semaines. Cependant, elles font partie de la spécification et vous pourrez les rencontrer dans des exemples ou dans d'autres bases de code.

+ +

Avant d'utiliser une propriété raccourcie, il est préférable de se rappeler qu'une propriété raccourcie permet d'en définir plusieurs grâce à une seule règle mais aussi qu'une propriété raccourcie réinitialise les propriétés avec leurs valeurs initiales lorsqu'elles ne sont pas déclarées via la propriété raccourcie. Aussi, si vous utilisez une propriété raccourcie, sachez qu'elle peut réinitialiser une propriété que vous auriez utilisé autre part.

+ +

Les deux propriétés raccourcies pour les grilles sont grid-template et grid.

+ +

grid-template

+ +

La propriété {{cssxref("grid-template")}} permet de définir les propriétés suivantes :

+ +
    +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
+ +

Cette propriété est appelée propriété raccourcie « explicite » car elle permet de paramétrer les aspects d'une grille définie explicitement. Elle n'a pas d'impact sur les propriétés qui créeraient des lignes ou colonnes implicites.

+ +

Le fragment de code suivant crée une disposition identique à celle que nous avons vu plus haut dans cet article.

+ +
.wrapper {
+    display: grid;
+    grid-template:
+      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+      "sd sd sd main main main main main main" minmax(100px, auto)
+      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+
+ +

La première valeur correspond à celle de grid-template-areas mais on déclare également les tailles de chaque ligne à la fin de chaque ligne (avec minmax(100px, auto)).

+ +

Après la valeur de grid-template-areas, on a un barre oblique (/) puis une liste de pistes qui définit les colonnes explicitement.

+ +

grid

+ +

La propriété {{cssxref("grid")}} va un cran plus loin et définit également les propriétés utilisées par la grille implicite. Elle permet de paramétrer :

+ +
    +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid-auto-flow")}}
    • +
+ +

Cette propriété réinitialise également la propriété {{cssxref("grid-gap")}} avec la valeur 0 mais, en revanche, elle ne permet pas de définir des espaces.

+ +

On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :

+ +
.wrapper {
+    display: grid;
+    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+    "sd sd sd main main main main main main" minmax(100px, auto)
+    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+
+ +

Dans les articles suivants, nous verrons les fonctionnalités offertes par cette propriété raccourcie, notamment pour le placement automatique et pour la propriété grid-auto-flow.

+ +

Après ces quelques guides, vous devriez désormais être en mesure de créer des grilles et de placer les éléments sur des lignes ou grâce à des zones nommées. Prenez le temps de construire certains motifs « classiques » à l'aide de grille pour mieux apprendre en manipulant. Au fur et à mesure, vous aurez des questions et arriverez sur des scénarios que nous n'avons pas encore évoqués. Dans la suite de ces articles, nous nous intéresserons plus en détails aux autres éléments de la spécification afin de pouvoir créer des dispositions plus complexes.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..b097f662db --- /dev/null +++ b/files/fr/web/css/css_grid_layout/index.html @@ -0,0 +1,193 @@ +--- +title: Grilles CSS (CSS Grid) +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS + - CSS Grids + - Grilles CSS + - Reference +translation_of: Web/CSS/CSS_Grid_Layout +--- +
{{CSSRef}}
+ +

Le module CSS Grid layout (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML.

+ +

Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.

+ +

Un exemple simple

+ +

Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales.

+ + + +

HTML

+ +
<div class="wrapper">
+  <div class="one">Un</div>
+  <div class="two">Deux</div>
+  <div class="three">Trois</div>
+  <div class="four">Quatre</div>
+  <div class="five">Cinq</div>
+  <div class="six">Six</div>
+</div>
+ +

CSS

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+
+ +

{{EmbedLiveSample("Un_exemple_simple", "100%", "440")}}

+ +

Référence

+ +

Propriétés CSS

+ +
+
    +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
  • {{cssxref("grid-template")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid-auto-flow")}}
    • +
  • {{cssxref("grid")}}
    • +
  • {{cssxref("grid-row-start")}}
    • +
  • {{cssxref("grid-column-start")}}
    • +
  • {{cssxref("grid-row-end")}}
    • +
  • {{cssxref("grid-column-end")}}
    • +
  • {{cssxref("grid-row")}}
    • +
  • {{cssxref("grid-column")}}
    • +
  • {{cssxref("grid-area")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

Fonctions CSS

+ +
+
    +
  • {{cssxref("repeat", "repeat()")}}
    • +
  • {{cssxref("minmax", "minmax()")}}
    • +
  • {{cssxref("fit-content", "fit-content()")}}
    • +
+
+ +

Types de donnée CSS

+ +

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

+ +

Termes définis dans le glossaire

+ +
+ +
+ +

Guides

+ +
+ +
+ +

Ressources externes

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Grid 2')}}{{Spec2("CSS Grid 2")}}Ajout des « sous-grilles » (subgrids).
{{SpecName('CSS3 Grid')}}{{Spec2('CSS3 Grid')}}Définition initiale.
diff --git a/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html b/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html new file mode 100644 index 0000000000..c6395dbee9 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html @@ -0,0 +1,625 @@ +--- +title: Les concepts de base des grilles CSS +slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

+ +

Le module CSS Grid Layout ajoute à CSS une grille à deux dimensions. Les grilles peuvent être utilisées pour agencer des pages entières ou de petits éléments d'interface. Cet article introduit CSS Grid Layout, et la terminologie de la spécification CSS Grid Layout Level 1. Les fonctionnalités évoquées seront expliquées plus en détail dans le reste du guide.

+ +

Qu'est-ce qu'une grille ?

+ +

Une grille est un ensemble de lignes horizontales et verticales qui se croisent – les premières définissant les rangées, et les secondes les colonnes. Les éléments sont placés sur la grille en fonction de ces rangées et colonnes. Les fonctionnalités sont les suivantes :

+ +

Pistes à taille fixe ou variable

+ +

On peut créer une grille avec des pistes à taille fixes en utilisant une unité comme le pixel. Pour les pistes à taille variable on peut utiliser le pourcentage ou la nouvelle unité fr créée à cet effet.

+ +

Placement des éléments

+ +

Pour placer les éléments sur la grille, on peut utiliser le numéro ou le nom d'une ligne, ou cibler une zone particulière. La grille contient aussi un algorithme pour placer les éléments qui n'ont pas été placés explicitement.

+ +

Création de pistes supplémentaires pour du contenu

+ +

Lorsqu'une grille explicite n'est pas définie, la spécification prend en charge le contenu défini en dehors d'une grille en ajoutant des colonnes et des rangées. Cela comprend des fonctionnalités telles qu'« ajouter autant de colonnes que possible dans le conteneur ».

+ +

Contrôle de l'alignement

+ +

On peut contrôler l'alignement des éléments dans une zone de la grille, ainsi que celui de l'ensemble de la grille.

+ +

Contrôle des contenus qui se chevauchent

+ +

Il peut arriver que l'on place plusieurs éléments dans une même cellule, ou que des zones se chevauchent. La superposition peut être contrôlée à l'aide de la propriété {{cssxref("z-index")}}.

+ +

La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que flexbox. Le point de départ est le conteneur.

+ +

Le conteneur

+ +

À partir du moment où on crée un conteneur en déclarant la propriété display: grid ou display: inline-grid sur un élément, tous les enfants directs de cet élément deviennet des éléments de grille.

+ +

Cet exemple montre une div avec une classe .wrapper, avec cinq éléments enfants.

+ +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +

On transforme .wrapper en conteneur.

+ +
.wrapper {
+  display: grid;
+}
+
+ + + +

{{ EmbedLiveSample('Le_conteneur', '200', '330') }}

+ +

Tous les enfants directs sont maintenant des éléments de grille. On ne voit pas la différence dans un navigateur, car la grille n'a qu'une seule colonne. Vous trouverez sans doute utile de travailler avec Firefox, qui propose un inspecteur de grille dans les outils de développement. En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur grid. Un clic dessus permet d'afficher la grille correspondante dans le navigateur.

+ +

Using the Grid Highlighter in DevTools to view a grid

+ +

Cet outil vous permettra de mieux comprendre le fonctionnement de CSS Grid Layout.

+ +

Pour que notre exemple ressemble vraiment à une grille nous devons ajouter des colonnes.

+ +

Les pistes

+ +

Les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une piste est l'espace entre deux lignes d'une grille. L'image ci-dessous colore une piste de la grille – correspondant à la première rangée de la grille.

+ +

+ +

On peut ajouter la propriété grid-template-columns à notre exemple précédent, pour définir la taille des colonnes.

+ +

Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque élément sera disposé dans l'une des cellules de la grille.

+ +
+
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+ + + +

{{ EmbedLiveSample('grid_first', '610', '140') }}

+
+ +

L'unité fr

+ +

Les pistes peuvent être définies à l'aide de n'importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, fr, représente une fraction de l'espace disponible dans le conteneur de la grille. Le code suivant crée trois colonnes égales qui se redimensionnent en fonction de l'espace disponible.

+ +
+
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ + + +

{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}

+
+ +

L'exemple suivant crée une grille avec une colonne de 2fr, et deux colonnes de 1fr. L'espace disponible est divisé en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d'une fraction.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+ +

Dans ce dernier exemple nous utilisons à la fois des dimensions absolues et des relatives. La première colonne faisant 500px, cette valeur est soustraite de l'espace disponible. L'espace restant est divisé en trois et alloué proportionnellement aux deux colonnes spécifiées avec l'unité relative fr.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+
+ +

Utiliser la notation repeat() pour définir les pistes

+ +

Pour les grilles comprenant de nombreuses pistes on peut utiliser la notation repeat() pour répéter toute ou une partie des pistes définies. Par exemple la définition de grille :

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

peut également s'écrire :

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

Dans l'exemple suivant on crée une grille avec une première colonne de 20px de large, puis une section répétant 6 fois une piste de 1fr, et enfin on termine par une colonne de 20px de large.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+
+ +

Cette notation accepte une liste de pistes, on peut donc l'utiliser pour répéter un motif. Dans l'exemple qui suit la grille aura 10 colonnes : une colonne de 1fr suivie d'une colonne de 2fr, ceci répété 5 fois.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+
+ +

Grille implicite et grille explicite

+ +

Dans ces exemples nous avons défini nos colonnes à l'aide de la propriété {{cssxref("grid-template-columns")}}, et nous avons laissé la grille créer les rangées. Ces rangées font partie de la grille implicite.La grille explicite est constituée des pistes définies par les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Si un élément est placé en dehors de la grille ainsi définie, ou que la quantité de contenu nécessite d'étendre la grille, alors la grille ajoute implicitement des colonnes et rangées. Les dimensions de ces pistes auront par défaut la valeur auto, c'est-à dire qu'elles s'ajusteront à leur contenu.

+ +

On peut définir une taille pour les pistes de la grille implicite grâce aux propriéts {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.

+ +

Dans l'exemple ci-après nous utilisons grid-auto-rows pour que les rangées de la grille implicite fassent 200 pixels de haut.

+ +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+
+ + + +

{{ EmbedLiveSample('Grille_implicite_et_grille_explicite', '230', '420') }}

+ +

Dimensionner une piste avec minmax

+ +

Que l'on crée une grille explicite, ou que l'on définisse la taille des pistes créées implicitement, il peut être utile d'assigner une taille minimum, qui s'agrandit pour s'adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu'elles aillent jusqu'à 300 pixels de haut si le contenu le nécessite.

+ +

La fonction {{cssxref("minmax", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons minmax() comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de auto, ce qui signifie que la taille s'adaptera à la hauteur du contenu.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ + + +
<div class="wrapper">
+   <div>Un</div>
+   <div>Deux
+     <p>Davantage de contenu.</p>
+     <p>On dépasse les 100 pixels.</p>
+   </div>
+   <div>Trois</div>
+   <div>Quatre</div>
+   <div>Cinq</div>
+</div>
+
+ +

{{ EmbedLiveSample('Dimensionner_une_piste_avec_minmax', '240', '470') }}

+ +

Lignes de grille

+ +

Il faut noter que l'on définit les pistes d'une grille, et pas les lignes qui en résultent. La grille génère des lignes numérotées que l'on utilise pour positionner les éléments. Dans notre grille de trois colonnes et deux rangées, nous avons quatre lignes de colonnes.

+ +

Grid Lines

+ +

Les lignes sont numérotées selon le sens de lecture du document. Dans un langage qui se lit de gauche à droite, la ligne 1 est située à gauche, dans un langage qui se lit de droite à gauche elle est située à droite. Les lignes peuvent aussi être nommées, comme nous le verrons plus loin dans ces pages.

+ +

Positionnement des éléments sur les lignes

+ +

Nous explorerons le placement sur les lignes plus en détail dans un prochain article, l'exemple qui suit montre comment l'utiliser de façon simple.

+ +

Lorsque nous plaçons un élément nous ciblons une ligne plutôt qu'une piste. Nous plaçons ici les deux premiers éléments en utilisant les propriétés {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. En allant de gauche à droite, le premier élément est placé sur la ligne de colonne 1, et va jusqu'à la ligne de colonne 4, qui dans ce cas est la dernière. Il est placé sur la ligne de rangée 1, et va jusqu'à la ligne 3, s'étendant ainsi sur deux rangées.

+ +

Le second élément commence sur la ligne de colonne 1 et s'étend sur une seule piste. C'est la largeur par défaut, donc il n'est pas nécessaire de spécifier la ligne de fin. Il s'étend aussi sur deux rangées de la ligne 3 à la ligne 5. Les autres éléments se placeront dans les espaces vides de la grille.

+ +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+  <div class="box5">Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('Positionnement_des_éléments_sur_les_lignes', '230', '420') }}

+ +

Pensez à utiliser l'Inspecteur de grille dans les outils de développement pour voir comment les éléments se placent sur les lignes d'une grille items.

+ +

Les cellules

+ +

Une cellule est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l'avons vu lorsqu'une grille est définie sur un élément ses enfants viennent se positionner chacun dans l'une des cellules de la grille. Dans l'image ci-dessous la première cellule est colorée.

+ +

The first cell of the grid highlighted

+ +

Les zones

+ +

Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une zone. Les zones doivent être rectangulaires - on ne peut pas créer de forme en L par exemple. La zone colorée ci-dessous s'étend sur deux rangées et deux colonnes.

+ +

A grid area

+ +

Les gouttières

+ +

Les gouttières entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}, ou de la propriété raccourcie {{cssxref("grid-gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 10px;
+  grid-row-gap: 1em;
+}
+
+ +
+

Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.

+ +

Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec grid-.

+
+ +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ + + +

{{ EmbedLiveSample('Les_gouttières') }}

+ +

L'espace utilisé par les gouttières sera pris en compte avant l'assignation de la place restante aux pistes définies avec l'unité fr. La taille des gouttières est calculée comme celle des pistes, mais on ne peut pas placer d'élément dans une gouttière. Au niveau du positionnement des éléments sur les lignes, la gouttière se comporte comme une ligne épaisse.

+ +

Grilles imbriquées

+ +

Un élément placé dans une grille peut aussi être le conteneur d'une autre grille. Dans l'exemple suivant nous retrouvons la grille de trois colonnes créée plus haut, avec deux éléments explicitement positionnés. Le premier élément contient lui-même des éléments. Comme ils ne sont pas des enfants directs de la grille principale, ils se positionnent normalement dans le flux.

+ +
+
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Deux</div>
+  <div class="box box3">Trois</div>
+  <div class="box box4">Quatre</div>
+  <div class="box box5">Cinq</div>
+</div>
+
+ +

Nested grid in flow

+ +

En définissant la propriété display:grid sur l'élément box1, il devient lui-même une grille et ses enfants se positionnent sur cette grille.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ + +
+ +

{{ EmbedLiveSample('nesting', '600', '340') }}

+ +

Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("grid-gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.

+ +

Sous-grille

+ +

Dans le brouillon de travaille pour la spécification de niveau 2 pour CSS Grid, il existe une fonctionnalité nommée sous-grille qui permet de créer des grilles imbriquées qui utilisent la définition de la grille parent. Ceci n'est implémenté dans aucun navigateur pour le moment, et la spécification peut encore changer. Pour l'utiliser telle qu'elle est définie actuellement il faudrait modifier l'exemple suivant et remplacer display: grid par display: subgrid, et supprimer la définition des pistes. La piste imbriquée utiliserait les pistes de la grille parent pour positionner ses éléments.

+ +

Selon la version actuelle de la spécifiction, il faudrait éditer l'exemple de grille imbriquée précédent et remplacer grid-template-columns: repeat(3, 1fr) en grid-template-columns: subgrid. La grille imbriquée utilisera alors la grille parente pour inscrire ses éléments dans le document.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+ +

Superposer les éléments avec z-index

+ +

Plusieurs éléments peuvent être placés dans la même cellule. Si nous retournons à notre exemple avec les items positionnés par numéros de ligne, nous pouvons modifier cela pour que deux items se chevauchent.

+ +
+
<div class="wrapper">
+  <div class="box box1">Un</div>
+  <div class="box box2">Deux</div>
+  <div class="box box3">Trois</div>
+  <div class="box box4">Quatre</div>
+  <div class="box box5">Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+
+ + +
+ +

{{ EmbedLiveSample('l_ex', '230', '420') }}

+ +

L'élément box2 est maintenant superposé avec box1, et comme il arrive après dans le code source il s'affiche par-dessus.

+ +

Contrôler l’ordre de superposition

+ +

On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété z-index. Si nous donnons à box2 un z-index inférieur à celui de box1, l'élément box2 s'affichera sous box1 dans la pile.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+
+ + + +

{{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}

+ +

La suite

+ +

Dans cet article nous avons parcouru rapidement la spécification CSS Grid Layout. Essayez de jouer avec les exemples, avant de passer aux parties suivantes de ce guide pour commencer à vraiment plonger dans le détail de la CSS Grid Layout.

+ +

{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilit\303\251/index.html" "b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilit\303\251/index.html" new file mode 100644 index 0000000000..6e2751382d --- /dev/null +++ "b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilit\303\251/index.html" @@ -0,0 +1,124 @@ +--- +title: Les grilles CSS et l'accessibilité +slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité +tags: + - Accessibilité + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}

+ +

Pour celles et ceux qui étaient présents aux premières lueurs du Web, les grilles CSS peuvent rappeler l'âge sombre où les tableaux HTML étaient utilisés pour la mise en forme des pages et où les cellules étaient utilisées pour diviser le contenu. Cette approche avait quelques avantages par rapport au positionnement CSS apparu après : on pouvait tirer parti de l'alignement et des colonnes créées dans un tableau. Il y a toutefois un inconvénient majeur : la mise en forme est fortement couplée à la structure du document, entraînant certains problèmes d'accessibilité. On pouvait par exemple découper le contenu dans le tableau afin d'obtenir la mise en forme souhaitée mais la structure de la page n'avait plus aucun sens lorsqu'elle était lue par un lecteur d'écran.

+ +

Aux débuts de CSS, on évoquait souvent CSS comme un outil pour séparer distinctement la mise en forme d'une part et le contenu du document d'autre part. L'objectif ultime était alors de pouvoir créer un document sémantique et structuré correctement puis appliquer une feuille de style CSS afin de créer la disposition voulue. Des sites tels que CSS Zen Garden montrent comment obtenir différents styles grâce à CSS à partir d'un même document HTML.

+ +

Les grilles CSS n'ont pas les mêmes problèmes que les tableaux : la structure de la grille est bien définie dans la feuille de style et pas dans le document. Si nécessaire, on peut ajouter un élément sans rôle sémantique. En théorie, une grille CSS nous aide à obtenir cette séparation conceptuelle entre la forme (le code CSS) et le sens (le document HTML) mais est-il possible d'aller trop loin avec cette idée ? Est-ce que les grilles CSS peuvent causer des problèmes d'accessibilité ?

+ +

Réordonner le contenu dans une grille CSS

+ +

Au fur et à mesure de ces articles, nous avons vu que les grilles CSS nous permettent de réordonner le contenu d'une page de différentes façons. On peut utiliser la propriété {{cssxref("order")}} afin de modifier la façon dont les éléments sont placés automatiquement sur la grille. On peut aussi utiliser grid-auto-flow: dense pour que les éléments ne suivent pas l'ordre du DOM afin de réduire les espaces laissés. On peut aussi positionner les éléments sur des lignes ou sur des zones définies, quel que soit leur emplacement dans la structure du document source.

+ +

La spécification contient une section qui aborde ce ré-ordonnancement et l'accessibilité. En introduction, on peut lire ce qui est attendu de la part des navigateurs lorsque le contenu est réordonné visuellement avec une grille CSS.

+ +
+

La disposition en grille fournit une grande flexibilité aux auteurs pour replacer le contenu du document. Toutefois, cette flexibilité ne doit pas être utilisée pour pallier à un ordre incorrect du document source. Les propriétés des grilles relatives à l'ordre et au placement n'ont pas d'effet quant aux médias non-visuels (tels que la parole). De la même façon, le ré-ordonnancement visuel des éléments sur la grille n'a pas d'effet sur l'ordre de parcours séquentiel par défaut du document (notamment utilisé pour la navigation au clavier ou le parcours des liens, cf. tabindex).

+
+ +

Si vous réordonnez les éléments du document grâce à une disposition sur une grille, cela ne changera pas l'ordre du contenu lu par un lecteur d'écran ou manipulé par un autre agent utilisateur. Cela ne modifiera pas non plus l'ordre des éléments lorsque ceux-ci sont parcourus au clavier. Une personne utilisant le clavier pourrait ainsi passer d'un coup de la partie haute de la grille à la partie basse si les liens ont été réordonnés.

+ +

La spécification prévient les auteurs (c'est-à-dire les développeurs web) et leur indique de ne pas appliquer ce ré-ordonnancement.

+ +
+

Les auteurs doivent utiliser les propriétés d'ordre et de placement uniquement pour des raisons visuelles et non pour réordonner logiquement le contenu. Les feuilles de style qui utilisent ces fonctionnalités afin de réordonner les éléments sur le plan logique ne sont pas considérées comme des feuilles de style conformes.

+
+ +

Quelles sont les implications pratiques lorsqu'on conçoit une disposition avec une grille ?

+ +

Un ré-ordonnancement visuel et non logique

+ +

La modification d'ordre appliquée par la grille (ou les boîtes flexibles) est uniquement visuelle. C'est toujours le document sous-jacent qui contrôle l'ordre utilisé par les agents utilisateur non-visuels. Voyons comment cela s'applique pour un exemple simple.

+ +

Dans cet exemple, on utilise une grille pour organiser un ensemble de boîtes qui contiennent des liens. On utilise les propriétés pour placer les éléments sur des lignes : la première boîte est placée sur la deuxième ligne. Visuellement, cette boîte apparaît désormais comme le quatrième élément de la liste. Mais si on utilise la touche tabulation pour naviguer au clavier parmi les liens, c'est toujours ce lien qui est en premier.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+ +
<div class="wrapper">
+  <div class="box box1"><a href="">Un</a></div>
+  <div class="box box2"><a href="">Deux</a></div>
+  <div class="box box3"><a href="">Trois</a></div>
+  <div class="box box4"><a href="">Quatre</a></div>
+  <div class="box box5"><a href="">Cinq</a></div>
+</div>
+
+ +

{{EmbedLiveSample('accessibility_1', '500', '330')}}

+
+ +

Pour ce scénario, la spécification indique que, si la boîte 1 doit logiquement être placée ici, il faut alors modifier le document source plutôt que de réordonner les éléments grâce à la grille.

+ +

Comment prendre en compte l'accessibilité avec une disposition en grille ?

+ +

On voit à partir de la spécification qu'il faut maintenir l'ordre logique du contenu. Quelle approche choisir pendant le développement afin de s'assurer de respecter l'accessibilité pour les utilisateurs et que ceux-ci puissent interagir correctement avec la page, quels que soient les outils utilisés ?

+ +
+
Démarrer avec un document structuré et accessible
+
Une disposition en grille ne doit pas nécessiter de changement dans la structure du document pour obtenir la disposition souhaitée. Aussi, pour commencer, le document qui forme la page doit être bien structuré et accessible. Comme indiqué dans la spécification, cette structure de base doit également fournir une bonne structure pour les petits écrans. Si un utilisateur fait défiler le site sur un appareil mobile, les éléments qu'il doit voir en premier sont généralement ceux qui sont au début du document dans la source.
+
Créer une grille adaptative correcte
+
Grâce à cette structure de base claire, on peut complexifier la disposition. Il est probable qu'on veuille ajouter des requêtes de média afin de créer des colonnes supplémentaires et gérer différentes tailles d'écran et différents appareils. Une grille peut s'avérer très utile pour déplacer les éléments qui étaient moins prioritaires sur mobile afin de construire la disposition d'un écran plus large. Une bonne stratégie consiste à tester chaque disposition, simplement en utilisant la navigation avec la touche tabulation : est-ce que cet ordre est pertinent ? est-ce qu'on ne passe pas d'un coup du haut en bas de la page ?
+
Revenir à la source
+
Si, pendant cette phase de conception, vous avez besoin de replacer un élément avec la grille, analysez s'il est nécessaire de replacer cet élément dans l'ordre logique du document. Les grilles CSS ont cela de pratique qu'elles permettent de déplacer un élément dans le document source sans qu'il soit nécessaire de modifier profondément les règles de style. C'est un atout considérable par rapport aux dispositions construites avec {{cssxref("float")}} où la structure et l'ordre du document jouaient un rôle fondamental. Cela demande toutefois de garder à l'esprit qu'il faut revenir à la source pour mettre à jour et maintenir l'ordre logique.
+
+ +

Les grilles et le risque d'aplatir le document à outrance

+ +

On peut rencontrer un autre problème avec les grilles CSS (et, dans une moindre mesure, avec les boîtes flexibles) : vouloir aplatir la structure du document. Comme nous avons pu le voir, pour qu'un objet appartienne à la grille, il faut que ce soit un fils direct du conteneur de la grille. Ainsi, si on place un élément {{HTMLElement("ul")}} dans une grille, c'est cet ul qui devient un objet de la grille, les éléments {{HTMLElement("li")}} qui en dépendent n'en sont pas.

+ +

Si la valeur subgrid est implémentée pour la propriété {{cssxref("display")}}, on pourra alors indiquer que ces fils participent à la grille en tant que sous-grille. Actuellement, la seule solution à notre disposition est d'utiliser display: contents afin que la boîte générée par l'élément ul disparaisse de la structure graphique. Pour plus d'informations à ce sujet, vous pouvez consulter l'article sur les liens entre les grilles et les autres méthodes de disposition et notamment la section sur display: contents.

+ +

Étant donné que la prise en charge de display: contents pour les différents navigateurs est actuellement limitée et que les sous-grilles n'existent pas encore, on peut être tenté d'aplatir la structure du document lorsqu'on utilise les grilles CSS pour créer la disposition d'un document. Par exemple, pour une liste, identifiée sémantiquement comme telle avec ul, on pourrait plutôt utiliser des éléments {{HTMLElement("div")}} qui seraient des éléments directement situés sous le conteneur qui a display: grid. Mieux vaut donc être conscient de cette tentation et construire un document sans détricoter la structure. En commençant par créer un document structuré, on se rend plus facilement compte de la sémantique perdue si on retire des éléments pour une simple question visuelle.

+ +

Approfondir la question

+ +

Il n'existe pas encore beaucoup de contenu relatif à l'accessibilité et au modèle de grille CSS. La plupart des problèmes rencontrés s'approchent de ceux qu'on rencontre avec les boîtes flexibles (qui permettent également de réordonner le contenu avec des propriétés comme {{cssxref("flex-direction")}} et {{cssxref("order")}}).

+ +

Le concept selon lequel l'ordre d'affichage des éléments doit suivre l'ordre des éléments dans le document est décrit dans WCAG Techniques for Success Criteria – Technique C27 (en anglais).

+ +

Pour construire votre réflexion sur ce sujet, je vous invite à lire Flexbox & the Keyboard Navigation Disconnect écrit par Léonie Watson. La vidéo de la présentation de Léonie à ffconf est aussi utile pour mieux comprendre comment les lecteurs d'écran utilisent la représentation visuelle des objets en CSS. Adrian Roselli a également publié un article sur l'ordre de la navigation au clavier dans les différents navigateurs bien que cet article ait été rédigé avant l'implémentation des grilles CSS dans Firefox.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_am\303\251lioration_progressive/index.html" "b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_am\303\251lioration_progressive/index.html" new file mode 100644 index 0000000000..8a5122de2f --- /dev/null +++ "b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_am\303\251lioration_progressive/index.html" @@ -0,0 +1,420 @@ +--- +title: Les grilles CSS et l'amélioration progressive +slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}

+ +

Au printemps 2017, on voit pour la première fois une spécification majeure être disponible presque simultanément dans différents navigateurs : les grilles CSS (CSS Grid). Les grilles CSS sont disponibles dans les versions récentes de Firefox, Chrome, Opera, Safari et Edge. Malgré cela, si ces navigateurs récents permettront à la plupart d'entre nous de profiter de ces nouvelles fonctionnalités, il existe d'anciens navigateurs ou d'autres navigateurs qui ne prennent pas en charge ces fonctionnalité. Dans ce guide, nous allons parcourir différentes stratégies pour gérer cette prise en charge.

+ +

Les navigateurs qui prennent en charge les grilles CSS

+ +

En dehors d'Internet Explorer, les propriétés et valeurs relatives aux grilles CSS ne sont pas préfixées dans Safari, Chrome, Opera, Edge et dans Firefox. Toutes les propriétés et valeurs que nous avons vues dans ce guide fonctionnent de façon interopérable entre ces navigateurs. Cela signifie que si vous écrivez des règles CSS pour paramétrer une grille, le document doit avoir le même rendu dans Firefox, Opera et dans Chrome. Les grilles CSS ne sont plus une spécification expérimentale, elles peuvent donc être utilisées en production.

+ +

La situation pour Internet Explorer et Edge

+ +

La première implémentation des grilles CSS a eu lieu avec Internet Explorer 10. La première version de la spécification ne contenait alors pas toutes les propriétés et valeurs décrites dans la spécification actuelle. Il existe également des différences importantes entre ce qui est disponible dans IE10 et la spécification actuelle, même si les propriétés et les valeurs se ressemblent à première vue. Cette implémentation initiale est également celle qui est en place dans Edge jusqu'à la version 15.

+ +

La version implémentée pour IE/Edge (≤15) est préfixée avec -ms et les propriétés ont les noms suivants :

+ +
    +
  • {{cssxref("grid-template-columns")}} est appelée -ms-grid-columns
    • +
  • {{cssxref("grid-template-rows")}} est appelée -ms-grid-rows
    • +
  • {{cssxref("grid-row-start")}} est appelée -ms-grid-row
    • +
  • {{cssxref("grid-column-start")}} est appelée -ms-grid-column
    • +
  • {{cssxref("align-self")}} est appelée -ms-grid-row-align
    • +
  • {{cssxref("justify-self")}} est appelée -ms-grid-column-align
    • +
+ +

La version implémentée dans Internet Explorer dispose de propriétés supplémentaires qui ne font pas partie de la nouvelle spécification : -ms-grid-column-span et -ms-grid-row-span. La version implémentée dans IE ne profite pas du placement automatique ou des zones nommées. On peut implémenter certaines grilles simples pour IE10 et jusqu'à Edge 15, grâce à ces propriétés préfixées par -ms. Ces propriétés étant préfixées, elles ne seront pas reconnues (et n'auront aucun effet) pour les navigateurs qui implémentent la spécification actuelle.

+ +

L'utilisation d'autoprefixer pour la prise en charge de la grille

+ +

L'outil autoprefixer a été mis à jour afin de prendre en charge les versions préfixées par -ms- lorsqu'on utilise les nouvelles propriétés. Par défaut, les préfixes liés à la grille sont désactivés mais vous pouvez les activer avec l'option grid: autoplace.

+ +
autoprefixer({ grid: 'autoplace' })
+ +

Les préfixes relatifs aux grilles sont désactivés par défaut car certaines propriétés ne peuvent pas être préfixées

+ +

Puis-je utiliser les grilles CSS sans danger ?

+ +

Comme pour les autres technologies front-end, la décision d'utiliser les grilles CSS se résume souvent au parc de navigateurs utilisés par le public de votre site ou votre application. S'ils ont tendance à utiliser des version à jour de Firefox, Chrome, Opera et Safari, il serait logique de commencer à utiliser les grilles CSS dès que la nouvelle version des navigateurs sera disponible. En revanche, si le marché visé repose sur d'anciens navigateurs, ce n'est peut-être pas le bon choix. Toutefois, je suggèrerai de ne pas prendre les mêmes hypothèses que pour la diffusion des autres spécifications par le passé : le travail d'implémentation et d'homogénéisation réalisés par les différents distributeurs de navigateur pour les fonctionnalités des grilles CSS est sans précédent.

+ +

Commencer à utiliser les grilles CSS en production

+ +

On notera qu'il n'est pas nécessaire d'avoir une rupture brutale pour utiliser les grilles CSS. On peut commencer par améliorer quelques éléments avec une grille et conserver l'ancienne méthode d'affichage pour les navigateurs historiques. Surcharger ces méthodes historiques avec les grilles fonctionne très bien étant donné la façon dont les grilles interagissent avec ces autres méthodes.

+ +

Effectuer la transition depuis une disposition flottante

+ +

Jusqu'à présent, pour créer une disposition sur plusieurs colonnes, on a utilisé des dispositions flottantes. Si vous avez un objet qui flotte et que celui-ci est également un objet d'une grille CSS : dans un navigateur qui prend en charge les grilles CSS, le flottement ne sera plus appliqué sur l'objet. En fait, la grille prend le pas sur le flottement. Dans l'exemple qui suit, on a simplement un objet média. Pour un navigateur historique, on utilise {{cssxref("float")}}, cependant, on a également défini un conteneur de grille dans lequel on pourra utiliser les propriétés d'alignement disponibles pour les navigateurs qui implémentent les grilles CSS.

+ +

Le mode {{cssxref("float")}} ne s'applique plus sur l'objet et on peut utiliser la propriété {{cssxref("align-self")}} afin d'aligner le contenu vers la fin du conteneur.

+ +
+
* {box-sizing: border-box;}
+img {
+  max-width: 100%;
+  display: block;
+}
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+.media::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.media .image {
+  float: left;
+  width: 150px;
+  margin-right: 20px;
+}
+.media .text {
+  padding: 10px;
+  align-self: end;
+}
+
+ +
<div class="media">
+  <div class="image">
+    <img src="http://placehold.it/150x150" alt="placeholder">
+  </div>
+  <div class="text">
+    Voici un exemple avec un média. On utilise le flottement
+    pour les anciens navigateurs et une grille pour les
+    nouveaux.
+  </div>
+</div>
+
+ +

{{EmbedLiveSample('enhancement_1', '500', '180')}}

+
+ +

Dans l'image qui suit, on voit à gauche ce qu'on obtient dans un navigateur qui ne prend pas en charge les grilles CSS et à droite le résultat obtenu pour un navigateur qui permet de les utiliser.

+ +

A simple example of overriding a floated layout using grid.

+ +

Utiliser les requêtes de fonctionnalité (feature queries)

+ +

L'exemple que nous venons de voir est très simple et on peut résoudre le problème sans avoir à écrire de code qui gênerait les navigateurs historiques, le code historique ne pose pas non plus de problème pour les navigateurs qui prennent en charge les grilles CSS. Dans la réalité, on fait parfois face à des cas plus complexes.

+ +

Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du flottement. On a défini une largeur ({{cssxref("width")}}) sur ces cartes afin de pouvoir appliquer le flottement {{cssxref("float")}}. Pour créer des espaces entre les cartes, on utilise une marge ({{cssxref("margin")}}) sur les objets puis une marge négative sur le conteneur.

+ +
+ + +
.wrapper ul {
+  overflow: hidden;
+  margin: 0 -10px;
+  padding: 0;
+  list-style: none;
+}
+.wrapper li {
+  float: left;
+  width: calc(33.333333% - 20px);
+  margin: 0 10px 20px 10px;
+}
+
+ +
<div class="wrapper">
+  <ul>
+    <li class="card">
+      <h2>Un</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Deux</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Trois</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Quatre</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Cinq</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Six</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+  </ul>
+</div>
+
+ +

{{EmbedLiveSample('enhancement_2', '550', '400')}}

+
+ +

Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée.

+ +

A floated cards layout demonstrating the problem caused by uneven content height.

+ +

Pour gérer les anciens navigateurs dans une certaine mesure, on peut indiquer une hauteur minimale pour les boîtes avec {{cssxref("min-height")}} et espérer que les éditeurs n'ajouteront pas trop de contenu dans chaque boîte…

+ +

Voyons comment améliorer cette disposition avec une grille : on transforme l'élément {{HTMLElement("ul")}} en un conteneur de grille avec trois pistes en colonne. Malheureusement, la largeur qu'on avait affectée aux éléments de la liste s'applique toujours et désormais, chaque élément de la liste occupe uniquement un tiers de la piste correspondante.

+ +

After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width.

+ +

Si on réinitialise la largeur avec auto, on n'aura plus le résultat souhaité dans les anciens navigateurs. Il faut donc trouver un moyen de définir la largeur pour les anciens navigateurs et de supprimer la largeur quand le navigateur prend en charge les grilles CSS. Grâce aux requêtes de fonctionnalité CSS, on peut le faire directement en CSS.

+ +

Les requêtes de fonctionnalité ressemblent beaucoup aux requêtes de média qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.

+ +
@supports (display: grid) {
+  .wrapper {
+    // ajouter les règles qu'on souhaite
+    // pour les navigateurs qui prennent
+    // en charge les grilles
+  }
+}
+
+ +

La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante.

+ +

On utilise donc @supports pour vérifier la prise en charge de display: grid;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec auto pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("grid-gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également  désormais lorsqu'une carte possède plus de contenu qu'une autre.

+ +
+ + +
.wrapper ul {
+    overflow: hidden;
+    margin: 0 -10px;
+    padding: 0;
+    list-style: none;
+}
+.wrapper li {
+    float: left;
+    width: calc(33.333333% - 20px);
+    margin: 0 10px 20px 10px;
+}
+@supports (display: grid) {
+  .wrapper ul {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+    margin: 0;
+  }
+  .wrapper li {
+    width: auto;
+    min-height: auto;
+    margin: 0;
+  }
+}
+
+ +
<div class="wrapper">
+  <ul>
+    <li class="card">
+      <h2>Un</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Deux</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Trois</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Quatre</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Cinq</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Six</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+  </ul>
+</div>
+
+ +

{{EmbedLiveSample('enhancement_3', '550', '480')}}

+
+ +

Surcharger les autres valeurs pour display

+ +

Étant donné ces problèmes pour créer des grilles d'objets avec du flottement, il est probable que nous aurions choisi un autre méthode initialement, par exemple display: inline-block.

+ +

Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger display: inline-block. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par inline-block, ils deviendront des objets de la grille et inline-block ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété vertical-align sur les éléments lorsqu'on utilise le mode inline-block, cette propriété n'étant pas appliquée aux éléments d'une grille, elle est ignorée lorsque l'élément devient un objet de la grille.

+ +
+ + +
.wrapper ul {
+  margin: 0 -10px;
+  padding: 0;
+  list-style: none;
+}
+
+.wrapper li {
+  display: inline-block;
+  vertical-align: top;
+  width: calc(33.333333% - 20px);
+  margin: 0 10px 20px 10px;
+}
+@supports (display: grid) {
+  .wrapper ul {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+    margin: 0;
+  }
+  .wrapper li {
+    width: auto;
+    margin: 0;
+  }
+}
+
+ +
<div class="wrapper">
+  <ul>
+    <li class="card">
+      <h2>Un</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Deux</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Trois</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Quatre</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Cinq</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Six</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+  </ul>
+</div>
+
+ +

{{EmbedLiveSample('enhancement_4', '500', '480')}}

+
+ +

Ici aussi, il faut reparamétrer la largeur de l'élément puis améliorer les autres propriétés. Dans cet exemple également on a utilisé grid-gap plutôt que des marges et des marges négatives pour créer les « gouttières ».

+ +

Comment la spécification gère-t-elle cette surcharge ?

+ +

La spécification sur les grilles CSS détaille comment on peu surcharger le comportement de certaines propriétés lorsqu'un élément devient un objet d'une grille. Les sections principales sur ce sujet sont :

+ + + +

Ce comportement est détaillé dans la spécification et on peut donc l'utiliser pour surcharger les règles utilisées pour les navigateurs qui ne prennent pas en charge les grilles CSS. Ce que nous avons appliqué n'est pas une bidouille, on tire simplement parti de l'interaction entre les différents modes de disposition, tel que décrit dans la spécification.

+ +

Les autres valeurs de display

+ +

Lorsqu'un élément possède un parent pour lequel display: grid, cet élément devient un bloc (cf. la specification). C'est pour cela que, pour l'élément qui utilisait inline-block, display: inline-block ne s'appliquait plus.

+ +

Si la disposition historique utilise display: table, un élément avec display: table-cell génèrera des boîtes anonymes. Aussi, si on utilise display: table-cell sans élément parent avec display-table, un tableau implicite sera créé autour des cellules adjacentes (comme si on a avait enveloppé le tout dans un div ou autre pour lequel on aurait défini display: table). Si on a un objet pour lequel display: table-cell et que, dans une requête de fonctionnalité, on utilise display: grid pour l'élément parent, il n'y aura plus de création de boîtes anonymes. Cela signifie qu'on peut surcharger display: table sans avoir ces boîtes anonymes supplémentaires.

+ +

Les éléments flottants

+ +

Comme nous l'avons déjà vu, {{cssxref("float")}}, ainsi que {{cssxref("clear")}} n'ont aucun effet sur un objet de grille. Il n'est donc pas nécessaire d'utiliser explicitement float: none sur les éléments.

+ +

L'alignement vertical

+ +

La propriété d'alignement {{cssxref("vertical-align")}} n'a aucun effet sur un objet d'une grille. Pour les dispositions qui utilisent display: inline-block ou display: table, la propriété vertical-align était utilisée pour réaliser des alignements basiques. Avec une disposition en grille, on peut utiliser les propriétés d'alignement des boîtes sur la grille, plus puissantes.

+ +

La disposition sur plusieurs colonnes

+ +

Il est aussi possible de partir d'une disposition sur plusieurs colonnes car les propriétés column-* ne s'appliquent pas sur un conteneur de grille.

+ +

Approfondir la question

+ + + +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_\303\251criture/index.html" "b/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_\303\251criture/index.html" new file mode 100644 index 0000000000..cbc0501498 --- /dev/null +++ "b/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_\303\251criture/index.html" @@ -0,0 +1,452 @@ +--- +title: 'Les grilles CSS, les valeurs logiques et les modes d''écriture' +slug: >- + Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guides + - Intermédiaire +translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}

+ +

Dans les articles précédents, nous avons évoqué un aspect important de la disposition en grille : la prise en charge des différents modes d'écriture. Dans ce guide, nous nous intéresserons plus particulièrement à cette fonctionnalité ainsi qu'aux autres méthodes modernes de disposition. Cela sera également l'occasion d'en apprendre plus sur les modes d'écritures et la notion de propriété logique/physique.

+ +

Les propriétés logiques, les propriétés physiques et les valeurs

+ +

CSS possède de nombreux mots-clés qui permettent de positionner physiquement les éléments : left, right, top, bottom… Si on positionne un élément de façon absolue, on utilisera ces mots-clés physiques comme valeurs pour indiquer le décalage de l'élément. Dans le fragment de code suivant, l'élément est décalé de 20 pixels depuis le haut du conteneur et de 30 pixels depuis le bord gauche du conteneur.

+ +
.container {
+  position: relative;
+}
+.item {
+  position: absolute;
+  top: 20px;
+  left: 30px;
+}
+
+ +
<div class="container">
+  <div class="item">Item</div>
+</div>
+
+ +

On rencontre également ces mots-clés physiques avec text-align: right afin d'aligner le texte à droite. Il existe aussi des propriétés physiques en CSS. On ajoute des marges, du remplissage, des bordures grâces à cs propriétés physiques comme {{cssxref("margin-left")}}, {{cssxref("padding-left")}}, etc.

+ +

On qualifie ces propriétés de physiques car elles concernent l'écran qu'on regarde : la gauche sera toujours la gauche, quelle que soit la direction du texte.

+ +

Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise text-align avec left et on ajoute dir="rtl" sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec text-align value: left, l'alignement reste à gauche.

+ +

A simple example of text direction.

+ +

Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.

+ +

Les propriétés et valeurs logiques

+ +

Les propriétés et les valeurs logiques n'émettent pas d'hypothèse quant à la direction du texte. C'est pour cette raison, qu'avec les grilles CSS, on utilise le mot-clé start lorsqu'on souhaite aligner quelque chose au début du conteneur. Quand on travaille en français ou en anglais, start correspondra à la gauche mais ce n'est pas nécessairement toujours le cas, start ne correspond pas à une position physique.

+ +

L'axe de bloc et l'axe en ligne

+ +

Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (block axis en anglais) et l'axe en ligne (inline axis). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes logiques sont très utiles et on comprend mieux leurs rôles sur la grille.

+ +

An image showing the default direction of the Block and Inline Axes.

+ +

Les modes d'écriture CSS

+ +

Nous allons ici aborder une autre spécification que nous allons utiliser dans nos exemples : la spécification CSS sur les modes d'écriture (CSS Writing Modes). Cette spécification régit comment les différents modes d'écriture peuvent être utilisés en CSS, pas seulement pour prendre en charge différentes langues mais aussi pour créer des effets artistiques. Nous allons utiliser la propriété {{cssxref("writing-mode")}} afin de modifier le mode d'écriture appliqué à la grille pour observer comment fonctionnent les valeurs logiques. Si vous souhaitez approfondir ces notions autour des modes d'écriture, vous pouvez consulter l'article CSS Writing Modes (en anglais) écrit par Jen Simmons.

+ +

writing-mode

+ +

Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou de gauche à droite, la propriété writing-mode nous permet d'afficher du texte dans plusieurs directions. La propriété {{cssxref("writing-mode")}} peut prendre les valeurs suivantes :

+ +
    +
  • horizontal-tb
    • +
  • vertical-rl
    • +
  • vertical-lr
    • +
  • sideways-rl
    • +
  • sideways-lr
    • +
+ +

Sur le Web, c'est la valeur horizontal-tb qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut horizontal-tb et le second utilise la valeur vertical-rl. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (inline) est donc l'axe vertical.

+ +
+ + +
<div class="wrapper">
+  <p style="writing-mode: horizontal-tb">Mon mode d'écriture est celui par défaut <code>horizontal-tb</code></p>
+  <p style="writing-mode: vertical-rl">Moi je suis écrit avec <code>vertical-rl</code></p>
+</div>
+
+ +

{{EmbedLiveSample('writing_1', '500', '420')}}

+
+ +

La gestion des modes d'écriture avec une grille

+ +

Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.

+ +

Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche  en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+  <div class="item5">Objet 5</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_2', '500', '330')}}

+
+ +

Si on ajoute writing-mode: vertical-lr au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement.

+ +
+ + +
.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+  <div class="item5">Objet 5</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_3', '500', '330')}}

+
+ +

A image showing the direction of Block and Inline when writing-mode is vertical-lr

+ +

L'utilisation de valeurs logiques pour l'alignement

+ +

Dans les exemples précédents, on a vu comment les axes de bloc et en ligne pouvaient changer de direction, nous allons voir maintenant comment tirer partir des valeurs logiques des propriétés d'alignement.

+ +

Dans le prochain exemple, on aligne des objets dans une grille pour laquelle writing-mode: vertical-lr. Les valeurs start et end fonctionnent de la même façon qu'avec le mode d'écriture par défaut mais, parce qu'elles sont logiques, on voit que la grille est bien renversée.

+ +
+ + +
.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-gap: 10px;
+}
+
+.item1 {
+  grid-column: 1 / 4;
+  align-self: start;
+}
+
+.item2 {
+  grid-column: 1 / 3;
+  grid-row: 2 / 4;
+  align-self: start;
+}
+
+.item3 {
+  grid-column: 3;
+  grid-row: 2 / 4;
+  align-self: end;
+  justify-self: end;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_4', '500', '330')}}

+
+ +

Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de vertical-lr à vertical-rl pour changer de mode d'écriture.

+ +

Le placement automatique et les modes d'écriture

+ +

On a vu dans l'exemple précédent que lorsqu'on changeait de mode d'écriture, cela changeait également la direction selon laquelle les éléments étaient placés sur la grille. Par défaut, les éléments sont placés en progressant sur l'axe en ligne, jusqu'à la fin de la ligne, une nouvelle ligne est ensuite créée si besoin mais cette ligne ne progresse pas nécessairement de gauche à droite.

+ +

Le placement sur les lignes et les modes d'écriture

+ +

Il faut garder à l'esprit que lorsqu'on place des objets sur les lignes, la ligne 1 sera toujours la ligne de départ, quel que soit le mode d'écriture et la ligne -1 sera toujours la ligne de fin.

+ +

Dans l'exemple suivant, on a une grille avec la direction ltr et on positionne trois objets en utilisant le placement sur les lignes.

+ +
    +
  • L'objet 1 commence à la colonne 1 et occupe une piste
    • +
  • L'objet 2 commence à la colonne -1 et occupe -3 pistes
    • +
  • L'objet 3 commence à la colonne 1 et s'étend jusqu'à la troisième colonne.
    • +
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+  grid-column: 1 ;
+}
+.item2 {
+  grid-column: -1 / -3;
+}
+.item3 {
+  grid-column: 1 / 3;
+  grid-row: 2;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_5', '500', '330')}}

+
+ +

Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur rtl pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.

+ +
+ + +
.wrapper {
+  direction: rtl;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+  grid-column: 1 ;
+}
+.item2 {
+  grid-column: -1 / -3;
+}
+.item3 {
+  grid-column: 1 / 3;
+  grid-row: 2;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_6', '500', '330')}}

+
+ +

On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.

+ +

L'étrange ordre des valeurs pour grid-area

+ +

La propriété {{cssxref("grid-area")}} permet d'indiquer les quatre lignes qui définissent une zone. Lorsqu'on apprend à utiliser cette propriété, on se surprend à voir que les quatre valeurs ne suivent pas le même ordre que celui utilisé par les propriétés raccourcies pour les marges (pour celles-ci, les valeurs suivent le sens horaire : haut, droit, bas, gauche).

+ +

Pour les valeurs de grid-area, l'ordre est le suivant :

+ +
    +
  • grid-row-start
    • +
  • grid-column-start
    • +
  • grid-row-end
    • +
  • grid-column-end
    • +
+ +

Si on transpose ces valeurs à un système d'écriture de gauche à droite, cela correspond aux valeurs physiques suivantes :

+ +
    +
  • top
    • +
  • left
    • +
  • bottom
    • +
  • right
    • +
+ +

Ce qui correspond… au sens anti-horaire ! L'ordre est l'inverse de celui utilisé pour les marges et le remplissage. Pour comprendre, mieux vaut voir la propriété grid-area comme une propriété logique qui fonctionne selon les axes de bloc et en ligne : on commence donc avec les deux lignes de départ puis les deux lignes d'arrivée. Cet ordre est plus « logique » !

+ +

Utiliser des modes d'écriture hybrides et les grilles CSS

+ +

Les modes d'écritures permettent d'afficher les documents en respectant les règles d'affichage de la langue utilisé. On peut également les utiliser afin de créer des effets stylistiques. Dans l'exemple ci-après, on a une grille avec du texte et des liens qui seront affichés verticalement, à côté du texte.

+ +
+
.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: 1fr auto;
+  font: 1em Helvetica, Arial, sans-serif;
+}
+.wrapper nav {
+  writing-mode: vertical-lr;
+}
+.wrapper ul {
+  list-style: none;
+  margin: 0;
+  padding: 1em;
+  display: flex;
+  justify-content: space-between;
+}
+.wrapper a {
+  text-decoration: none;
+}
+
+ +
<div class="wrapper">
+  <div class="content">
+    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
+    <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
+  </div>
+  <nav>
+    <ul>
+      <li><a href="">Lien 1</a></li>
+      <li><a href="">Lien 2</a></li>
+      <li><a href="">Lien 3</a></li>
+    </ul>
+  </nav>
+</div>
+
+ +

{{EmbedLiveSample('writing_7', '500', '330')}}

+
+ +

Les valeurs physiques et les grilles CSS

+ +

On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur l'alignement des boîtes et les grilles, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.

+ +

Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode ltr à un mode rtl.

+ +

Utiliser les propriétés logiques partout

+ +

Les nouvelles méthodes de disposition, comme les grilles, permettent d'employer les valeurs logiques afin de placer les éléments. Cependant, dès qu'on combine ces valeurs avec des propriétés physiques, il faut maintenir ces dernières lorsque le mode d'écriture change.

+ +

La spécification sur les propriétés logiques en CSS vise à résoudre ce problème. Nous pourrons peut-être utiliser demain des équivalents logiques pour chacune des propriétés physiques telles que {{cssxref("margin-left")}} et {{cssxref("margin-right")}}. Firefox a déjà implémenté ces propriétés logiques et vous pouvez les y tester. En utilisant les grilles et en manipulant l'axe de bloc et l'axe de ligne, vous saurez également comment fonctionnent ces propriétés logiques à venir.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/mod\303\250le_de_grille_et_autres_mod\303\250les_de_disposition/index.html" "b/files/fr/web/css/css_grid_layout/mod\303\250le_de_grille_et_autres_mod\303\250les_de_disposition/index.html" new file mode 100644 index 0000000000..9f31864e55 --- /dev/null +++ "b/files/fr/web/css/css_grid_layout/mod\303\250le_de_grille_et_autres_mod\303\250les_de_disposition/index.html" @@ -0,0 +1,588 @@ +--- +title: Le modèle de grille et les autres modèles de disposition +slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition +tags: + - CSS + - CSS Grids + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

+ +

Le mode de disposition en grille a été conçu afin de pouvoir fonctionner avec les autres composantes de CSS pour construire un système complet de disposition. Dans ce guide, nous expliquerons comment intégrer une grille CSS parmi d'autres techniques que vous pourriez déjà utiliser.

+ +

Les grilles et les boîtes flexibles (flexbox)

+ +

La différence fondamentale, entre les grilles et les boîtes flexibles CSS, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.

+ +

Disposition sur une dimension ou sur deux dimensions

+ +

Voyons un exemple simple pour illustrer la différence entre une disposition sur un seul axe et une disposition sur deux axes.

+ +

Dans le premier exemple, on utilise un boîte flexible pour organiser un ensemble de boîte. Le conteneur contient 5 objets fils et on utilise des propriétés afin qu'ils puissent être agrandis/rétrécis avec une base (flex-basis) de 150 pixels.

+ +

On utilise aussi la propriété {{cssxref("flex-wrap")}} avec la valeur wrap, afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver flex-basis.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  width: 500px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper > div {
+  flex: 1 1 150px;
+}
+
+
+ +

{{EmbedLiveSample('onedtwod', '500', '230')}}

+ +

On peut voir ici que deux objets sont passés sur une nouvelle ligne. Ces objets partagent l'espace disponible sur cette nouvelle ligne et ne s'alignent pas par rapport aux objets de la ligne au-dessus. En effet, lorsque des éléments flexibles passent sur une nouvelle ligne (ou colonne), celle-ci forme un nouveau conteneur et l'espace de ce conteneur est distribué entre les objets.

+ +

On se demande alors comment faire pour aligner ces éléments… C'est là qu'intervient la disposition en deux dimensions, pour contrôler l'alignement des lignes et des colonnes : voici la grille.

+ +

La même disposition avec une grille CSS

+ +

Dans cet exemple, on crée la même disposition en utilisant la grille CSS. Ici, on a trois pistes 1fr. Il n'est pas nécessaire de paramétrer quoi que ce soit sur les objets, ils se disposeront eux-mêmes dans chaque cellule formée par la grille. On peut alors voir que les objets restent dans une grille stricte, avec les lignes et les colonnes qui sont alignées. Avec cinq éléments, on a donc un espace restant à la fin de la deuxième ligne.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

{{EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170')}}

+
+ +

Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :

+ +
    +
  • Ai-je uniquement besoin de contrôler la disposition selon des colonnes ou selon des lignes ? Si oui, mieux vaudra utiliser des boîtes flexibles.
    • +
  • Ai-je besoin de contrôler la disposition selon des colonnes et selon des lignes ? Si oui, mieux vaudra utiliser une grille CSS.
    • +
+ +

Organiser l'espace ou organiser le contenu ?

+ +

En plus de la distinction sur le nombre de dimensions, on peut prendre un autre angle de vue pour choisir entre les boîtes flexibles et les grilles. Les boîtes flexibles permettent de répartir l'espace de façon équitable autour des éléments d'un conteneur. C'est la taille du contenu qui détermine l'espace occupé par chacun des éléments. Si les objets passent sur une nouvelle ligne, leur espacement sera calculé en fonction de leurs tailles et de l'espace disponible sur cette ligne.

+ +

En revanche, les grilles organisent le contenu dans l'espace. Lorsqu'on utilise les grilles CSS, on crée un « plan » et on place les éléments sur ce plan (ou on indique un placement automatique, strict, sur cette grille). Il est possible de créer des pistes (tracks) qui réagissent à la taille du contenu mais cela modifierait alors l'ensemble de la piste.

+ +

Si vous utilisez les boîtes flexibles et souhaitez bloquer certains des aspects autour de la flexibilité, vous aurez probablement besoin d'une grille CSS. Par exemple, si vous définissez un objet flexible avec un pourcentage en largeur pour aligner l'objet avec les éléments du dessus, une grille pourrait être plus adaptée.

+ +

L'alignement des boîtes

+ +

Une des fonctionnalités les plus attendues pour les boîtes flexibles était celle qui permettait enfin de contrôler l'alignement correctement. On pouvait simplement centrer une boîte sur une page. Les éléments flexibles pouvaient être étirés en hauteur dans leurs conteneurs et on pouvait donc obtenir des colonnes avec des hauteurs égales. Il était désormais possible d'éviter des contournements pour obtenir ce résultat.

+ +

Les propriétés d'alignement ont été ajoutées à la spécification pour les boîtes flexibles dans une nouvelle spécification intitulée Box Alignment Level 3. Cela signifie qu'elles peuvent être utilisées dans d'autres modules, y compris dans les grilles CSS. À l'avenir, elles pourront éventuellement s'appliquer aux autres méthodes de disposition.

+ +

Dans un autre article de cette série, nous verrons comment utiliser l'alignement des boîtes dans une disposition en grille. Pour le moment, voici un exemple simple qui permet de comparer les boîtes flexibles et les grilles.

+ +

Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui dispose de trois objets. La propriété {{cssxref("min-height")}} est définie et paramètre la hauteur du conteneur flexible. {{cssxref("align-items")}} vaut flex-end pour le conteneur flexible et les objets s'empileront donc jusqu'à l'extrémité du conteneur flexible. On utilise également la propriété {{cssxref("align-self")}} sur box1 afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à box2 afin que box1 soit alignée avec le début du conteneur flexible.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+
+ +

{{EmbedLiveSample('Box_alignment', '300', '230')}}

+ +

L'alignement sur les grilles CSS

+ +

Dans cet exemple, on utilise une grille pour créer la même disposition. Cette fois on utilise les propriétés d'alignement des boîtes. On aligne donc par rapport à start et end plutôt que par rapport à flex-start et flex-end. Dans le cas d'une disposition en grille, on aligne les éléments à l'intérieur de leur zone de grille. Dans ce cas, il s'agit d'une seule cellule mais on pourrait très bien construire une zone composée de plusieurs cellules.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+
+ +

{{EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310')}}

+ +

L'unité fr et flex-basis

+ +

On a vu avant l'unité fr qui permet d'affecter aux pistes de la grille une portion de l'espace disponible dans le conteneur. L'unité fr, lorsqu'elle est combinée avec la fonction {{cssxref("minmax()", "minmax()")}} permet d'obtenir un comportement proche des propriétés flex utilisées pour les boîtes flexibles, tout en permettant de créer une disposition sur deux dimensions.

+ +

Si on revient sur l'exemple illustrant la différence entre une disposition à une dimension et une disposition à deux dimensions. On voit qu'il y a une différence sur la façon dont les deux dispositions fonctionnent en mode responsive (lorsque les dimensions de la zone d'affichage varient). Avec la disposition flexible, si on redimensionne la disposition ajustera le nombre d'éléments sur chaque ligne en fonction de l'espace disponible. S'il y a beaucoup d'espace, les cinq éléments pourront tenir sur une seule ligne et si l'espace est réduit, on pourra avoir jusqu'à un seul élément par ligne.

+ +

En revanche, avec la grille, on a toujours trois pistes qui forment trois colonnes. Les pistes s'élargiront ou se rétrécieront mais il y en aura toujours trois car c'est le nombre de pistes déclaré à la définition de la grille.

+ +

Des pistes qui se remplissent automatiquement

+ +

On peut créer un effet semblable aux boîtes flexibles tout en gardant l'arrangement en lignes et colonnes grâce à la notation repeat et aux propriétés auto-fill et auto-fit.

+ +

Dans l'exemple qui suit, on utilise le mot-clé auto-fill à la place d'un entier dans la fonction repeat et on définit la taille d'une piste à 200 pixels. Cela signifie que la grille créera autant de pistes de 200 pixels en colonnes qu'il est possible d'en placer dans le conteneur.

+ + + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+
+ +

{{EmbedLiveSample('Auto-filling_grid_tracks', '500', '170')}}

+ +

Avoir un nombre de pistes flexible

+ +

L'exemple précédent ne se comporte pas comme celui avec les boîtes flexibles. Dans l'exemple avec les boîtes flexibles, les objets qui sont plus larges que la base de 200 pixels avant de passer à la ligne. On peut obtenir le même effet sur une grille en combinant le mot-clé auto-fill et la fonction {{cssxref("minmax()", "minmax()")}}.

+ +

Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec minmax. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de 1fr. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum 1fr afin de répartir l'espace restant entre les objets.

+ + + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+ +

{{EmbedLiveSample('A_flexible_number_of_tracks', '500', '170')}}

+ +

On peut désormais créer une grille qui dispose d'un nombre flexible de pistes, elles-mêmes flexibles tout en ayant des éléments qui sont disposés sur la grille par rapport à des lignes et à des colonnes.

+ +

Les grilles et les éléments positionnés de façon absolue

+ +

La grille peut interagir avec les éléments positionnés de façon absolue. Cela peut s'avérer utile si on souhaite positionner un élément dans une grille ou dans une zone donnée de la grille. La spécification définit le comportement lorsqu'une grille est un bloc englobant et que la grille est le parent d'un élément positionné de façon absolue.

+ +

Avoir une grille comme bloc englobant

+ +

Pour qu'une grille soit un bloc englobant, il faut utiliser la propriété position avec la valeur relative (comme on ferait pour un bloc classique). Une fois que c'est fait, si on utilise position: absolute sur un objet de la grille, son bloc englobant sera la grille. Si l'élément a une position donnée sur la grille, le conteneur sera la zone de la grille sur laquelle il est placé.

+ +

Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième élément est positionné en absolu et est placé sur la grille. La grille, le conteneur, a position: relative et devient donc le contexte de positionnement pour cet objet.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">
+    Ce bloc est positionné de façon absolue. Dans cet exemple
+    la grille est le bloc englobant et les valeurs de décalage
+    pour la position sont calculées depuis les bords extérieurs
+    de la zone dans laquelle a été placé l'élément.
+  </div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+  position: relative;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+
+ +

{{EmbedLiveSample('A_grid_container_as_containing_block', '500', '330')}}

+ +

On peut voir que l'élément prend la zone de la grille entre les lignes 2 et 4, après la ligne 1. Ensuite, il est décalé dans cette zone grâce aux propriétés top et left. Toutefois, il a été retiré du flux, comme d'habitude pour les éléments positionnés en absolu et les règles de placement automatique placent des objets dans la même zone. L'objet n'entraîne pas non plus la création d'une ligne supplémentaire sur la ligne 3.

+ +

Si on retire position: absolute des règles sur .box3, on peut voir le résultat qu'on aurait obtenu sans ce positionnement absolu.

+ +

Utiliser une grille comme parent

+ +

Si l'élément positionné de façon absolue est contenue dans une grille mais que celle-ci ne crée pas de nouveau contexte de positionnement, l'élément sera retiré du flux comme dans l'exemple précédent. Les contextes de positionnement sont créés comme avec les autres méthodes de disposition. Dans l'exemple, si on retire position: relative dans le code précédent, le contexte de positionnement est fourni par la zone d'affichage (le viewport) :

+ +

Image of grid container as parent

+ +

Là encore, l'élément ne participe plus à la disposition de la grille pour le dimensionnement ou pour le placement des autres éléments.

+ +

Utiliser une zone de grille comme parent

+ +

Si l'élément positionné de façon absolu est imbriqué dans une zone de la grille, on peut créer un contexte de positionnement pour cette zone. Dans l'exemple qui suit, on utilise la même grille qu'avant sauf que l'élément est imbriqué dans la zone .box3 de la grille.

+ +

On indique que .box3 a une position relative puis on positionne l'élément avec des propriétés de décalage. Dans ce cas, le contexte de positionnement est la zone de la grille.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois
+    <div class="abspos">
+      Ce bloc est positionné de façon absolue. Dans cet exemple
+      la zone de la grille est le bloc englobant et le positionnement
+      est calculé à partir des bords de la zone de la grille.
+    </div>
+  </div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+
+ +

{{EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420')}}

+ +

Utiliser une grille et display: contents

+ +

Une autre combinaison notable, en termes de disposition, peut être l'utilisation de display: contents avec les grilles CSS. La valeur contents de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite comme suit dans la spécification Display :

+ +
+

L'élément même ne génère aucune boîte mais ses éléments fils, ainsi que les pseudo-éléments, génèrent des boîtes normales. Afin de générer les boîtes et la disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document.

+
+ +

Si on utilise display: contents sur un élément, la boîte qu'il aurait normalement créé disparaîtra et les boîtes des éléments qui sont ses enfants apparaîtront comme si elles avaient grimpé d'un niveau. Cela signifie que les éléments fils d'un élément d'une grille peuvent, à leur tour, devenir des éléments de cette grille. Un peu perdu-e ? Voici un exemple. Dans le code qui suit, on a une grille dont le premier élément s'étend sur les trois pistes. Cet élément contient trois éléments imbriqués. Ces derniers n'étant pas des enfants directs de la grille, ils ne s'inscrivent pas dans la disposition en grille et sont affichés avec la disposition classique.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Deux</div>
+  <div class="box box3">Trois</div>
+  <div class="box box4">Quatre</div>
+  <div class="box box5">Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+
+ +

{{EmbedLiveSample('Display_Contents_Before', '400', '420')}}

+
+ +

Si on ajoute display: contents aux règles qui ciblent box1, la boîte de cet élément disparaîtra et ses sous-éléments deviendront alors des éléments de la grille qui se placeront selon les règles de placement automatiques pour la grille.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Deux</div>
+  <div class="box box3">Trois</div>
+  <div class="box box4">Quatre</div>
+  <div class="box box5">Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+
+ +

{{EmbedLiveSample('Display_Contents_After', '400', '330')}}

+
+ +

Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (subgrids) lorsqu'elles seront implémentées. Vous pouvez également utiliser display: contents de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles.

+ +

Comme on a pu le voir dans cet article, la disposition avec les grilles CSS n'est qu'un outil parmi d'autres. Il ne faut pas hésiter à combiner différentes méthodes de disposition afin d'obtenir les résultats souhaités.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html b/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html new file mode 100644 index 0000000000..980b03ea62 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html @@ -0,0 +1,569 @@ +--- +title: Le placement automatique sur une grille CSS +slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

+ +

En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains des objets ne sont pas placés sur la grille (voire aucun). Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +

{{EmbedLiveSample('placement_1', '500', '230')}}

+
+ +

Définir des règles pour le placement automatique

+ +

Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets occuperont chacun une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec grid-template-rows, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, implicites, seront créées.

+ +

Dimensionner les lignes de la grille implicite

+ +

Par défaut, les lignes implicites créées automatiquement ont une taille automatique. Autrement dit, elles seront dimensionnées pour contenir les éléments qu'elles doivent placer sans que ceux-ci dépassent.

+ +

Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété grid-auto-rows. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+ +

{{EmbedLiveSample('placement_2', '500', '330')}}

+
+ +

On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de {{cssxref("grid-auto-rows")}} afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre
+    <br>Cette cellule
+    <br>a du contenu
+    <br>supplémentaire
+    <br>et max vaut auto
+    <br>afin que la ligne
+    <br>se développe.
+  </div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ +

{{EmbedLiveSample('placement_3', '500', '330')}}

+
+ +

On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de 200px. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.

+ +
+ + +
<div class="wrapper">
+   <div>Un</div>
+   <div>Deux</div>
+   <div>Trois</div>
+   <div>Quatre</div>
+   <div>Cinq</div>
+   <div>Six</div>
+   <div>Sept</div>
+   <div>Huit</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px 200px;
+}
+
+ +

{{EmbedLiveSample('placement_4', '500', '330')}}

+
+ +

Utiliser le placement automatique pour les colonnes

+ +

On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété {{cssxref("grid-auto-flow")}} avec la valeur column. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec {{cssxref("grid-template-rows")}}. Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec {{cssxref("grid-auto-columns")}}, cette dernière fonctionne de façon analogue à {{cssxref("grid-auto-rows")}}.

+ +

Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés.

+ +
+
.wrapper {
+  display: grid;
+  grid-template-rows: repeat(3, 200px);
+  grid-gap: 10px;
+  grid-auto-flow: column;
+  grid-auto-columns: 300px 100px;
+}
+
+ + + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+  <div>Six</div>
+  <div>Sept</div>
+  <div>Huit</div>
+</div>
+
+ +

{{EmbedLiveSample('placement_5', '500', '640')}}

+
+ +

L'ordre des éléments placés automatiquement

+ +

Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille : il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement l'algorithme de placement des objets sur la grille, mais voyons ici les quelques règles simples qu'il faut principalement retenir.

+ +

Modification de l'ordre du document

+ +

Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section  “order modified document order”. Cela signifie que si on utilise uniquement la propriété order, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source.

+ +

Les éléments avec des propriétés de placement

+ +

La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On put voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+  <div>Six</div>
+  <div>Sept</div>
+  <div>Huit</div>
+  <div>Neuf</div>
+  <div>Dix</div>
+  <div>Onze</div>
+  <div>Douze</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+
+ +

{{EmbedLiveSample('placement_6', '500', '450')}}

+
+ +

Gérer les éléments qui s'étalent sur plusieurs pistes

+ +

On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 4 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés {{cssxref("grid-column-end")}} et {{cssxref("grid-row-end")}} avec la valeur span 2. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin.

+ +

On peut voir coment cela laisse des espaces dans la grille car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+  <div>Six</div>
+  <div>Sept</div>
+  <div>Huit</div>
+  <div>Neuf</div>
+  <div>Dix</div>
+  <div>Onze</div>
+  <div>Douze</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+
+ +

{{EmbedLiveSample('placement_7', '500', '770')}}

+
+ +

Combler les espaces

+ +

En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire. Toutefois on veut parfois obtenir une disposition plus dense, sans vide entre les différents éléments.

+ +

Pour cela, sur le conteneur, on ajoute la propriété {{cssxref("grid-auto-flow")}} avec la valeur dense. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec column. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété : grid-auto-flow: column dense.

+ +

Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés quitte à ne pas respecter l'ordre du DOM. En revanche, l'ordre de la navigation au clavier (tab order) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans un article sur l'accessibilité.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+  <div>Six</div>
+  <div>Sept</div>
+  <div>Huit</div>
+  <div>Neuf</div>
+  <div>Dix</div>
+  <div>Onze</div>
+  <div>Douze</div>
+</div>
+
+ +
.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+}
+
+ +

{{EmbedLiveSample('placement_8', '500', '730')}}

+
+ +

Les éléments anonymes de la grille

+ +

Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille : le premier est un élément anonyme car il n'est placé dans aucun élément, il sera alors placé automatiquement. Les deux éléments suivants sont placés dans des div et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement.

+ +
<div class="grid">
+  Je suis une chaîne de caractères et je serai placé
+  automatiquement.
+  <div>Un élément de la grille</div>
+  <div>Un élément de la grille</div>
+</div>
+
+ +

Les éléments anonymes sont toujours placés automatiquement car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique.

+ +

Les cas d'utilisation pour le placement automatique

+ +

Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe landscape l'élément s'étend sur deux colonnes). On utilise ensuite grid-auto-flow: dense afin de créer une grille dense.

+ +
+
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+  list-style: none;
+  margin: 1em auto;
+  padding: 0;
+  max-width: 800px;
+}
+.wrapper li {
+  border: 1px solid #ccc;
+}
+.wrapper li.landscape {
+  grid-column-end: span 2;
+}
+.wrapper li img {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+ +
<ul class="wrapper">
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+</ul>
+
+ +

{{EmbedLiveSample('placement_9', '500', '1300')}}

+
+ +

Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément dt démarre sur la première ligne et que l'élément  dd sur la  ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme.

+ +
+ + +
<div class="wrapper">
+  <dl>
+    <dt>Mammals</dt>
+    <dd>Cat</dd>
+    <dd>Dog</dd>
+    <dd>Mouse</dd>
+    <dt>Fish</dt>
+    <dd>Guppy</dd>
+    <dt>Birds</dt>
+    <dd>Pied Wagtail</dd>
+    <dd>Owl</dd>
+  <dl>
+</div>
+
+ +
dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  max-width: 300px;
+  margin: 1em;
+  line-height: 1.4;
+}
+dt {
+  grid-column: 1;
+  font-weight: bold;
+}
+dd {
+  grid-column: 2;
+}
+
+ +

{{EmbedLiveSample('placement_10', '500', '230')}}

+ +
+

Note : Voir cet article de SitePoint à propos de la disposition en briques pour d'autres cas d'utilisation.

+
+
+ +

Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?

+ +

Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour « placer tous les éléments automatiquement après la prochaine ligne intitulée n » (pour que certaines lignes soient sautées). Cette question est décrite sur le dépôt GitHub du CSSWG, n'hésitez pas à ajouter vos exemples de scénarios.

+ +

Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les issues existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/placer_les_\303\251l\303\251ments_sur_les_lignes_d_une_grille_css/index.html" "b/files/fr/web/css/css_grid_layout/placer_les_\303\251l\303\251ments_sur_les_lignes_d_une_grille_css/index.html" new file mode 100644 index 0000000000..5984342f18 --- /dev/null +++ "b/files/fr/web/css/css_grid_layout/placer_les_\303\251l\303\251ments_sur_les_lignes_d_une_grille_css/index.html" @@ -0,0 +1,605 @@ +--- +title: Placer les éléments sur les lignes d'une grille CSS +slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guides + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

+ +

Dans l'article sur les concepts de base, nous avons vu comment positionner des éléments en utilisant des numéros de lignes. Nous allons désormais étudier cette fonctionnalité de positionnement plus en détail.

+ +

Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans un prochain guide.

+ +

Un exemple simple

+ +

Dans cet exemple simple, on a une grille avec trois pistes pour les colonnes et trois pistes pour les lignes, on a donc 4 lignes pour chaque dimension.

+ +

Dans le conteneur, on a quatre éléments fils. Si aucune autre règle de placement n'est indiquée, ces éléments seront placés automatiquement et la grille remplira les quatre premières cellules. Si vous utilisez l'outil de mise en évidence des grilles de Firefox, vous pouvez voir les colonnes et les lignes horizontales formées par la grille.

+ +

Our Grid highlighted in DevTools

+ + + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+ +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +

{{EmbedLiveSample('Un_exemple_simple', '300', '330')}}

+ +

Positionner les éléments d'une grille grâce au numéro de ligne

+ +

On peut placer les éléments d'une grille en utilisant les numéros de lignes qui définissent la zone allouée à l'élément. Si on souhaite que le premier élément commence tout à gauche et occupe une colonne, qu'il commence sur la première ligne et s'étale sur quatre lignes, on pourra utiliser les règles suivantes :

+ +
+
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 2;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+
+ +

Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans un prochain guide mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.

+ +

On peut placer chacun des éléments individuellement et on peut également choisir de laisser certaines cellules vides. Un des avantages de la grille CSS est qu'on peut créer des espaces sans avoir à utiliser des marges ou d'autres méthodes de contournement.

+ + + +
<div class="wrapper">
+   <div class="box1">Un</div>
+   <div class="box2">Deux</div>
+   <div class="box3">Trois</div>
+   <div class="box4">Quatre</div>
+</div>
+
+ +
.box2 {
+  grid-column-start: 3;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 2;
+}
+.box4 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 3;
+  grid-row-end: 4;
+}
+
+ +

{{EmbedLiveSample('Line_Number', '300', '330')}}

+
+ +
+

Les propriétés raccourcies grid-column et grid-row

+ +

On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et  {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column: 1 / 2;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 / 4;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 / 3;
+  grid-row: 1 /  2;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 / 4;
+}
+
+ +

{{EmbedLiveSample('Grid_Shorthands', '300', '330')}}

+
+ +

La taille par défaut

+ +

Dans les exemples précédents, on a défini chaque ligne et colonne de fin pour chaque élément. Mais si en pratique, on souhaite qu'un élément n'occupe qu'une seule piste, on peut omettre grid-column-end ou grid-row-end. Par défaut, les éléments occupent une seule piste. Notre exemple initial, avec les propriétés détaillées peut donc être réécrit de cette façon :

+ +
+ + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column-start: 1;
+  grid-row-start: 1;
+  grid-row-end: 4;
+}
+.box2 {
+  grid-column-start: 3;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-row-start: 1;
+}
+.box4 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 3;
+}
+
+ +

{{EmbedLiveSample('End_Lines', '300', '330')}}

+
+ +

Avec les propriétés raccourcies, on obtient le code suivant (sans aucune barre oblique ni seconde valeur pour les éléments qui n'occupent qu'une seule piste).

+ +
+ + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column: 1 ;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 ;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 ;
+  grid-row: 1 ;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 ;
+}
+
+ +

{{EmbedLiveSample('New_Shorthand', '300', '330')}}

+
+ +

La propriété grid-area

+ +

On peut aller plus loin et définir une zone pour chaque élément grâce à une seule propriété : {{cssxref("grid-area")}}. Cette propriété raccourcie permet d'utiliser les valeurs des propriétés suivantes (dans cet ordre) :

+ +
    +
  • grid-row-start
    • +
  • grid-column-start
    • +
  • grid-row-end
    • +
  • grid-column-end
    • +
+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-area: 1 / 1 / 4 / 2;
+}
+.box2 {
+  grid-area: 1 / 3 / 3 / 4;
+}
+.box3 {
+  grid-area: 1 / 2 / 2 / 3;
+}
+.box4 {
+  grid-area: 3 / 2 / 4 / 4;
+}
+
+ +

{{EmbedLiveSample('La_propriété_grid-area', '300', '330')}}

+ +

L'ordre des valeurs utilisé pour grid-area peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (margin) et le remplissage (padding). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs logiques plutôt que des propriétés et des valeurs physiques. Nous aborderons ce point dans un prochain article mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :

+ +
    +
  • block-start
    • +
  • block-end
    • +
  • inline-start
    • +
  • inline-end
    • +
+ +

On travaille ici en anglais ou en français, une langue qui s'écrit de gauche à droite. La ligne physique correspondant à la ligne logique block-start est donc la ligne en haut du conteneur, block-end correspond à la ligne en bas du conteneur, inline-start correspond à la colonne la plus à gauche (le point de départ de l'écriture pour une ligne) et inline-end correspond à la dernière colonne, celle qui est située à l'extrémité droite de la grille.

+ +

Lorsqu'on définit une zone d'une grille grâce à la propriété grid-area, on commence par définir les lignes de « début » : block-start et inline-start puis les lignes de « fin » avec block-end et inline-end. Cela peut paraître étrange quand on est habitué à manipuler des propriétés physiques qui progressent dans le sens horaire : haut, droit, bas, gauche mais cet ordre paraît plus pertinent quand on considère que les sites web peuvent être multi-directionnels selon le mode d'écriture.

+ +

Compter à rebours

+ +

On peut également compter à l'envers, à partir des lignes de fin. Pour un document écrit en français, cela correspond à la colonne la plus à droite et à la ligne la plus basse. Pour faire référence à la dernière ligne, on peut utiliser la valeur -1 et on peut compter à rebours au fur et à mesure de cette façon (ainsi, -2 fait référence à l'avant-dernière ligne). Attention, ici, la dernière ligne correspond à la dernière ligne explicite de la grille, telle qu'elle est définie par grid-template-columns et grid-template-rows. Ce comptage ne prend pas en compte les lignes ou les colonnes qui sont ajoutées implicitement dans la grille.

+ +

Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.

+ + + +
<div class="wrapper">
+   <div class="box1">Un</div>
+   <div class="box2">Deux</div>
+   <div class="box3">Trois</div>
+   <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column-start: -1;
+  grid-column-end: -2;
+  grid-row-start: -1;
+  grid-row-end: -4;
+}
+.box2 {
+  grid-column-start: -3;
+  grid-column-end: -4;
+  grid-row-start: -1;
+  grid-row-end: -3;
+}
+.box3 {
+  grid-column-start: -2;
+  grid-column-end: -3;
+  grid-row-start: -1;
+  grid-row-end: -2;
+}
+.box4 {
+  grid-column-start: -2;
+  grid-column-end: -4;
+  grid-row-start: -3;
+  grid-row-end: -4;
+}
+
+ +

{{EmbedLiveSample('Compter_à_rebours', '300', '330')}}

+ +

Étirer un élément sur la grille

+ +

Étant donné qu'on peut utiliser les numéros de lignes pour la première et la dernière, on peut facilement étirer un élément pour que celui-ci occupe toute la largeur et/ou toute la hauteur de la grille avec :

+ +
.item {
+  grid-column: 1 / -1;
+}
+
+ +

Les gouttières

+ +

La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.

+ +
+

Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.

+ +

Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec grid-.

+
+ +

Les gouttières apparaissent uniquement entre les pistes de la grille, elles n'ajoutent pas d'espace en haut, en bas, à gauche ou à droite du conteneur. Voyons comment ajouter des espaces sur l'exemple précédent grâce à ces propriétés :

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column: 1 ;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 ;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 ;
+  grid-row: 1 ;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 ;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-column-gap: 20px;
+  grid-row-gap: 1em;
+}
+
+ +

{{EmbedLiveSample('Les_gouttières', '300', '350') }}

+ +

Les propriétés raccourcies pour les gouttières

+ +

Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("grid-gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour grid-row-gap et la seconde pour grid-column-gap.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-gap: 1em 20px;
+}
+
+ +

Par rapport au positionnement sur les lignes, les gouttières agissent comme si la ligne avait gagné en largeur ou en hauteur. Tout ce qui commence sur une ligne commencera après cet espace et on ne peut placer aucun élément dans cette gouttière. Aussi, si on veut qu'une gouttière agisse comme une piste classique dans laquelle on peut placer des objets, il suffira de définir une nouvelle piste plutôt qu'une gouttière.

+ +

Utiliser le mot-clé span

+ +

On a vu comment indiquer la ligne de début et la ligne de fin avec des numéros. Il est aussi possible de définir la taille d'un élément en indiquant le numéro de la ligne de départ et le nombre de pistes sur lequel s'étale l'élément.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column: 1;
+  grid-row: 1 / span 3;
+}
+.box2 {
+  grid-column: 3;
+  grid-row: 1 / span 2;
+}
+.box3 {
+  grid-column: 2;
+  grid-row: 1;
+}
+.box4 {
+  grid-column: 2 / span 2;
+  grid-row: 3;
+}
+
+ +

{{EmbedLiveSample('Utiliser_le_mot-clé_span', '300', '330')}}

+ +

Le mot-clé span peut également être utilisé dans les valeurs des propriétés grid-row-start/grid-row-end et grid-column-start/grid-column-end. Les deux fragments de code qui suivent créeront la même zone. Dans le premier, on indique la ligne de début puis la ligne de fin en indiquant que l'élément occupe trois lignes. La zone commencera donc sur la première ligne et occupera 3 lignes, jusqu'à la ligne 4.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-row-start: 1;
+  grid-row-end: span 3;
+}
+
+ +

Dans le deuxième exemple, on indique la ligne de fin et le nombre de lignes occupées par l'élément avec span 3. Cela signifie que l'élément partira de la ligne 4 et occupera 3 lignes jusqu'à la ligne 1.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-row-start: span 3;
+  grid-row-end: 4;
+}
+
+ +

Pour vous familiariser avec le positionnement des éléments d'une grille en utilisant les lignes, vous pouvez essayer de construire certaines dispositions fréquemment utilisées en plaçant des éléments sur des grilles avec plus ou moins de pistes. Il faut garder à l'esprit que, lorsqu'on ne place pas explicitement tous les éléments, les éléments restants seront positionnés automatiquement. Cela peut tout à fait être l'objectif recherché mais si ce n'est pas le cas et que vous voyez un élément à un endroit inapproprié, vérifiez que vous lui avez affecté une position au sein de la grille.

+ +

Il faut aussi se rappeler que lorsqu'on place les éléments explicitement sur la grille, ceux-ci peuvent se chevaucher. Cela permet d'obtenir certains effets mais attention aux erreurs lorsque c'est la mauvaise ligne de début ou de fin qui est indiquée. Pour régler ce problème, on peut utiliser l'outil de mise en évidence de la grille CSS dans Firefox pour analyser une grille compliquée.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/subgrid/index.html b/files/fr/web/css/css_grid_layout/subgrid/index.html new file mode 100644 index 0000000000..10eee83ae2 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/subgrid/index.html @@ -0,0 +1,118 @@ +--- +title: Subgrid +slug: Web/CSS/CSS_Grid_Layout/Subgrid +tags: + - CSS + - Guide + - grid + - subgrid +translation_of: Web/CSS/CSS_Grid_Layout/Subgrid +--- +

{{CSSRef}}

+ +

La valeur subgrid a été ajoutée par le module de spécification CSS Grid Layout de niveau 2 pour les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Dans ce guide, nous verrons comment utiliser cette valeur ainsi que les cas d'utilisation ou patrons de conception qui peuvent en bénéficier.

+ +
+

Attention ! Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger Firefox Nightly afin de tester les exemples ci-après.

+
+ +

Une introduction à subgrid

+ +

Lorsqu'on ajoute display: grid à un conteneur, seuls les descendants directs deviennent des éléments de grille et peuvent être placés sur la grille ainsi créée. Les enfants de ces descendants seront disposés selon le flux habituel.

+ +

On peut imbriquer des grilles en utilisant display: grid sur un descendant direct du conteneur de grille mais les grilles créées seront indépendantes. On ne pourra pas récupérer le dimensionnement des pistes de la grille parente pour l'utiliser dans la grille fille. Il est donc difficile d'aligner des objets de la grille fille sur la grille parente.

+ +

Si on utilise la valeur subgrid pour grid-template-columns et/ou grid-template-rows, on pourra utiliser les pistes de la grille parente à l'intérieur plutôt que de créer des pistes indépendantes.

+ +

Ainsi, si on utilise grid-template-columns: subgrid et que la grille imbriquée s'inscrit dans trois colonnes du parent, la grille imbriquée possèdera trois pistes, dimensionnées comme celles du parent. Les gouttières (gaps) sont également héritées mais il est possible de les surcharger avec une valeur {{cssxref("gap")}} différente. Les noms des lignes peuvent être passés du parent à la grille fille et la grille fille peut aussi déclarer ses propres noms de ligne.

+ +

Les sous-grilles pour les colonnes

+ +

Dans l'exemple qui suit, on a une grille décomposée en neufs colonnes de 1fr chacune et avec quatre lignes qui mesurent au moins 100px.

+ +

On place un objet .item entre les colonnes 2 et 7 et entre les lignes 2 à 4. On indique que cet objet est lui-même une grille et on définit les pistes de colonnes comme sous-grille et on utilise des lignes normales. L'objet ainsi paramétré s'étalant sur 5 colonnes de la grille parente, cela signifie que la sous-grille possède cinq pistes pour les colonnes. On place alors un objet .subitem sur cette deuxième grille.

+ +

Les lignes horizontales de cet exemple ne sont pas une sous-grille et se comportent comme pour une grille imbriquée « classique ». La zone de la grille parente s'étend donc afin de pouvoir stocker le contenu de cette grille imbriquée.

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}

+ +

On notera que la numérotation recommence à l'intérieur de la grille imbriquée. La colonne n°1 de la sous-grille correspond donc ici à la colonne n°2 de la grille parente. Autrement dit, les numéros des colonnes et des lignes de la grille parente ne sont pas héritées via la sous-grille. Cela permet une disposition modulaire et indépendante de la position quant à la grille parente.

+ +

Les sous-grilles pour les lignes

+ +

Dans l'exemple ci-après, on a la même disposition mais on utilise cette fois subgrid pour la propriété grid-template-rows et on définit explicitement des pistes pour les colonnes. Les colonnes se comportent donc comme pour une grille imbriquée mais les lignes de la sous-grille sont liées à celles de la grille parente.

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}

+ +

Les sous-grilles sur deux dimensions

+ +

Bien entendu, on peut définir une sous-grille pour les lignes et pour les colonnes en même temps. Cela signifie que la sous-grille sera couplée à la grille parente pour les deux axes.

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}

+ +

Absence de grille implicite pour une sous-grille

+ +

S'il vous faut placer automatiquement des objets et que vous ne connaissez pas leur quantité, faites attention à l'utilisation des sous-grilles : celles-ci empêcheront la création de lignes supplémentaires pour afficher le contenu.

+ +

Pour mieux illustrer ce point, voyons le prochain exemple (on utilise le même parent et la même sous-grille qu'avant) où on essaie d'afficher 12 éléments automatiquement dans une grille qui contient uniquement 10 cellules. La sous-grille étant couplée sur les deux axes (lignes et colonnes), il n'y a aucune place restante pour les deux éléments restants et ils sont donc placés sur la dernière piste de la grille, comme indiqué dans la spécification.

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}

+ +

Si on retire la valeur sur grid-template-rows, on permet alors la création de pistes implicites. Ainsi, même si on n'aura pas l'alignement avec les pistes de la grille parente, on pourra avoir autant de lignes que nécessaire pour afficher l'ensemble du contenu.

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}

+ +

Utilisation des gouttières et des sous-grilles

+ +

Si vous utilisez {{cssxref("gap")}}, {{cssxref("column-gap")}} ou {{cssxref("row-gap")}} sur la grille parente, celles-ci seront héritées par la sous-grille et vous aurez donc le même espacement entre les pistes dans la sous-grille et dans la grille parente. Dans certains cas, on peut cependant vouloir d'avoir des espacements différents ou aucun espacement. Pourcela, on pourra utiliser les propriétés gap-* sur le conteneur de grille de la sous-grille.

+ +

Dans l'exempel qui suit, la grille parente définit des gouttières de 20 pixels pour les lignes et les colonnes et pour la sous-grille, on fixe la propriété row-gap à 0.

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}

+ +

Si on inspecte le résultat avec l'inspecteur de grille de Firefox, on pourra voir que l'espace auparavant occupé par la gouttière est partagé entre les cellules et permet d'agrandir la zone pour le contenu.

+ +

The smaller item displays in the gap as row-gap is set to 0 on the subgrid.

+ +

Les lignes nommées

+ +

Lorsqu'on utilise les grilles CSS, on peut fournir des noms aux lignes et positionner des objets sur la grille par rapport à ces noms plutôt qu'en utilisant les numéros de lignes. Les noms des lignes de la grille parente sont passés à la sous-grille et on peut donc placer des objets relativement à ces noms. Dans l'exempel qui suit, on a des lignes intitulées col-start et col-end sur la grille parente et on utilise ces noms pour placer un objet à l'intérieur de la sous-grille.

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}

+ +

Il est aussi possible d'utiliser de nouveaux noms dans la sous-grille. Pour cela, on ajoutera une liste de noms entre crochets après le mot-clé subgrid. Si on disposait de 4 lignes sur la sous-grille, on pourrait alors écrire grid-template-columns: subgrid [line1] [line2] [line3] [line4].

+ +

Les noms indiquées sur la sous-grille sont ajoutés à ceux déjà portés par la grille parente et on peut donc utiliser les uns ou les autres. Dans l'exemple suivant, on illustre ce point en positionnant un objet en utilisant deux noms : l'un provenant de la grille parente et l'autre provenant de la grille fille.

+ +

{{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}

+ +

Utilisation des sous-grilles

+ +

Exception faite qu'il faille veiller au contenu qui ne pourrait pas être affiché dans une sous-grille, cette dernière se comporte généralement comme une grille imbriquée. La différence principale réside dans le dimensionnement des pistes qui peut provenir de la grille parente. Toutefois (et comme avec une simple grille imbriquée), la taille du contenu placé sur la sous-grille peut modifier le dimensionnement des pistes (lorsqu'on utilise un dimensionnement qui s'adapte au contenu). Ainsi, les pistes dimensionnées automatiquement s'agrandiront pour contenir les objets de la grille parente et aussi ceux de la sous-grille.

+ +

Une telle ressemblance entre subgrid et les grilles imbriquées peut faciliter le passage d'une méthode à l'autre. Ainsi, si on réalise qu'il faut une grille implicite sur les lignes, il suffit de retirer subgrid pour la propriété grid-template-rows (et éventuellement fournir une valeur à grid-auto-rows afin de contrôler le dimensionnement implicite).

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Grid 2")}}{{Spec2("CSS Grid 2")}}Définition initiale des sous-grilles (subgrids).
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nomm\303\251es_sur_une_grille/index.html" "b/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nomm\303\251es_sur_une_grille/index.html" new file mode 100644 index 0000000000..d8d7e5cf83 --- /dev/null +++ "b/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nomm\303\251es_sur_une_grille/index.html" @@ -0,0 +1,431 @@ +--- +title: Utiliser des lignes nommées sur une grille +slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

+ +

Dans les articles précédents, on a vu comment placer des objets sur les lignes définies par les pistes de la grilles. On a également vu comment placer des objets sur des zones nommées. Dans ce guide, nous allons combiner ces deux concepts et apprendre à placer les objets sur des lignes avec des noms. Le nommage des lignes peut s'avérer très utile mais un aspect encore plus intéressant consiste à combiner les noms et les tailles de pistes. Cela sera plus clair lorsque nous aurons vu les différents exemples.

+ +

Nommer des lignes lorsqu'on définit une grille

+ +

Lorsqu'on définit une grille avec grid-template-rows et grid-template-columns, on peut donner des noms aux lignes (toutes ou seulement quelques unes). Pour illustrer ce point, nous allons reprendre la disposition utilisée dans l'article sur le placement sur les lignes. Cette fois, nous allons utiliser des lignes avec des noms.

+ +
+ + +

Lorsqu'on définit la grille, on nomme les lignes entre crochets. Ces noms peuvent être n'importe quelle valeur. Ici, on définit un nom pour le début et la fin du conteneur, pour les lignes et pour les colonnes. On définit les blocs du centres (ici content-start et content-end), à la fois pour les lignes et pour les colonnes. Il n'est pas nécessaire de nommer toutes les lignes de la grille, on peut très bien uniquement nommer celles qui sont importantes.

+ +
.wrapper {
+ display: grid;
+ grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+
+ +

Une fois que les lignes sont nommées, on peut utiliser ce nom plutôt que le numéro de ligne afin de placer les éléments.

+ +
.box1 {
+  grid-column-start: main-start;
+  grid-row-start: main-start;
+  grid-row-end: main-end;
+}
+.box2 {
+  grid-column-start: content-end;
+  grid-row-start: main-start;
+  grid-row-end: content-end;
+}
+.box3 {
+  grid-column-start: content-start;
+  grid-row-start: main-start;
+}
+.box4 {
+  grid-column-start: content-start;
+  grid-column-end: main-end;
+  grid-row-start: content-end;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +

{{EmbedLiveSample('example_named_lines', '500', '330')}}

+
+ +

Tout le reste continue de fonctionner de la même façon. Vous pouvez aussi utiliser des noms et des numéros. Le nommage des lignes est utile lorsqu'on souhaite créer une disposition responsive où on redéfinit la grille plutôt que d'avoir à redéfinir la position du contenu en changeant les numéros de lignes dans les media queries.

+ +

Donner plusieurs noms à une ligne

+ +

On peut donner plusieurs noms à une ligne (par exemple une ligne qui décrirait la fin de la barre latérale et le début du contenu principal). Pour cela, à l'intérieur des crochets, on déclare les différents noms, séparés par un espace : [sidebar-end main-start]. On peut ensuite désigner la ligne par l'un de ces noms.

+ +

Définir des zones de grilles implicites à l'aide de lignes nommées

+ +

Plus haut, nous avons vu qu'il était possible de donner n'importe quel nom à une ligne. D'un point de vue technique, ce nom est un identifiant personnalisé (ou custom ident), c'est-à-dire un nom défini par l'auteur de la feuille de style. Pour être plus précis, ce nom ne doit pas reprendre les mots-clés qui apparaissent dans la spécification et ne doit pas être source de confusion (on évitera ainsi d'utiliser span). Les identifiants ne sont pas mis entre quotes.

+ +

Bien qu'on puisse choisir n'importe quel nom (avec les contraintes qu'on vient d'énoncer), si on utilise les suffixes -start et -end pour désigner les lignes qui entourent une zone (comme dans l'exemple ci-avant), la grille créera automatiquement une zone nommée avec le nom utilisé devant ces suffixes. Si on reprend l'exemple précédent où on utilise content-start et content-end pour les lignes et pour les colonnes, cela signifie qu'on a, implicitement, une zone de grille intitulée content qu'on peut également manipuler

+ +
+ + +

On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer un objet dans la zone intitulée content.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+.thing {
+  grid-area: content;
+}
+
+ +
<div class="wrapper">
+  <div class="thing">
+    Je suis dans une zone nommée content.
+  </div>
+</div>
+
+ +

{{EmbedLiveSample('implicit_areas_from_lines', '500', '330')}}

+
+ +

Il n'est pas nécessaire de définir l'emplacement de cette zone avec grid-template-areas car les lignes suffisent à créer la zone et à la placer.

+ +

Définir des lignes implicites à l'aide de zones nommées

+ +

Nous avons vu comment des lignes nommées permettaient de créer des zones nommées. Cela fonctionne également dans l'autre sens. Les zones nommées créent aussi des lignes nommées qui peuvent ensuite être utilisées pour placer les objets. Si on reprend l'exemple utilisé dans le guide sur les zones nommées, on peut utiliser les lignes créées implicitement pour voir comment cela fonctionne.

+ +

Dans cet exemple, on ajoute un élément div supplémentaire et on lui ajoute la classe overlay. On déclare des zones nommées à l'aide de grid-area puis on indique la disposition via la propriété grid-template-areas. Les noms utilisés pour les zones sont :

+ +
    +
  • hd
    • +
  • ft
    • +
  • main
    • +
  • sd
    • +
+ +

Cela crée implicitement les lignes et colonnes suivantes :

+ +
    +
  • hd-start
    • +
  • hd-end
    • +
  • sd-start
    • +
  • sd-end
    • +
  • main-start
    • +
  • main-end
    • +
  • ft-start
    • +
  • ft-end
    • +
+ +

Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines lignes peuvent avoir deux noms (par exemple, sd-end et main-start font référence à la même ligne verticale).

+ +

An image showing the implicit line names created by our grid areas.

+ +

On peut positionner overlay grâce à ces lignes implicites, de la même façon qu'on aurait positionner un objet avec des lignes créées explicitement :

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+.wrapper > div.overlay {
+  z-index: 10;
+  grid-column: main-start / main-end;
+  grid-row: hd-start / ft-end;
+  border: 4px solid rgb(92,148,13);
+  background-color: rgba(92,148,13,.4);
+  color: rgb(92,148,13);
+  font-size: 150%;
+}
+
+ +
<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+  <div class="overlay">Masque</div>
+</div>
+
+ +

{{EmbedLiveSample('implicit_lines_from_area', '500', '330')}}

+
+ +

Grâce à tout ça, on voit qu'on peut créer des lignes à partir de zones nommées et créer des zones à partir de lignes nommées. Aussi, mieux vaut prendre le temps de réfléchir aux noms utilisés lorsqu'on définit un grille. En effet, plus les noms utilisés seront clairs, plus la maintenance et le travail d'équipe seront simplifiés.

+ +

Utiliser plusieurs lignes avec le même nom : repeat()

+ +

Si vous souhaitez que chaque ligne ait un nom différent, il faudra alors définir la piste de façon détaillée et non utiliser la syntaxe avec repeat() car il faut préciser le nom de la ligne entre crochets lorsqu'on définit les pistes. Si vous utilisez la syntaxe avec repeat(), vous obtiendrez plusieurs lignes avec le même nom… ce qui peut également être utile.

+ +

Dans l'exemple qui suit, nous allons créer une grille avec douze colonnes de même largeur. Avant de définir la taille d'une piste pour la colonne (1fr), on définit un nom : [col-start]. Cela signifie qu'on aura une grille avec 12 colonnes, toutes intitulées col-start et qui mesureront chacune 1fr de large.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+ +

Une fois la grille créée, on peut y placer les objets. On a alors plusieurs lignes avec le nom col-start et si on place un objet après la ligne col-start, la grille utilisera la première ligne intitulée col-start (dans notre cas, c'est la ligne la plus à gauche). Pour indiquer une autre ligne, on utilisera le nom, suivi du numéro de cette ligne. Ainsi, pour placer un objet à partir de la première ligne jusqu'à la cinquième, on pourra utiliser :

+ +
.item1 {
+  grid-column: col-start / col-start 5
+}
+
+ +

On peut également utiliser le mot-clé span. Avec la règle suivante, le deuxième objet sera placé à partir de la septième ligne et occupera 3 lignes :

+ +
.item2 {
+  grid-column: col-start 7 / span 3;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Je vais de col-start 1 à col-start 5</div>
+  <div class="item2">Je vais de col-start 7 et je m'étends sur 3 lignes</div>
+</div>
+ +

{{EmbedLiveSample('multiple_lines_same_name', '500', '330')}}

+
+ +

Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes :

+ +

The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.

+ +

La syntaxe repeat() permet également d'utiliser une liste de plusieurs pistes et pas uniquement une seule piste. Dans la règle qui suit, on crée une grille composée de huit pistes qui commence par une colonne plus étroite (1fr), intitulée col1-start, et qui est suivie par une colonne plus large (3fr), intitulée col2-start.

+ +
.wrapper {
+  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
+}
+
+ +

Si on utilise repeat() et qu'on place deux lignes l'une à la suite de l'autre, ces lignes seront fusionnées et on aura le même résultat que si on avait donné plusieurs noms à un même ligne. La règle suivante permet de créer quatre pistes dont la largeur est 1fr, chacune avec un début et une fin.

+ +
.wrapper {
+  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
+}
+
+ +

Si on écrivait la même définition sans utiliser repeat(), on aurait la forme suivante :

+ +
.wrapper {
+  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
+}
+
+ +

Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé span pour indiquer le nombre de lignes à occuper mais aussi pour indiquer le nombre de lignes à occuper qui ont un nom donné.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
+}
+.item1 {
+  grid-column: col1-start / col2-start 2
+}
+.item2 {
+  grid-row: 2;
+  grid-column: col1-start 2 / span 2 col1-start;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Je suis placé à partir de la première col1-start et jusqu'à la deuxième col2-start.</div>
+  <div class="item2">Je suis placé à partir de la deuxième col1-start et je m'étend sur deux lignes nommées col1-start</div>
+</div>
+
+ +

{{EmbedLiveSample('span_line_number', '500', '330')}}

+
+ +

Avec ces trois derniers articles, nous avons vu de nombreuses façons qui permettaient de placer des objets sur une grille. Cela peut sembler un peu trop inutilement compliqué mais il faut garder à l'esprit que toutes ne sont pas obligatoirement nécessaires. Dans la pratique, utiliser des zones nommés pour des dispositions simples permet d'avoir une représentation visuelle simple et de déplacer les différents objets facilement sur la grille.

+ +

Si on travaille avec une disposition sur plusieurs colonnes (comme celles utilisées dans ces derniers exemples), les lignes nommées feront parfaitement l'affaire. Si vous prenez par exemple des frameworks tels que Foundation ou Bootstrap, ceux-ci fonctionnent sur une grille avec 12 colonnes. Le framework importe ensuite le code nécessaire aux différents calculs afin de s'assurer que l'ensemble des colonnes fasse 100%. En utilisant une grille CSS, le seule code nécessaire pour obtenir un tel framework se résume à :

+ +
+
.wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+
+ +

On peut alors utiliser ce modèle pour mettre en forme notre page. Par exemple, on peut créer une disposition avec trois colonnes, un en-tête et un pied de page avec les règles suivantes :

+ + + +
<div class="wrapper">
+  <header class="main-header">Je suis l'en-tête</header>
+   <aside class="side1">Je suis la barre latérale 1</aside>
+   <article class="content">Je suis l'article</article>
+   <aside class="side2">Je suis la barre latérale 2</aside>
+   <footer class="main-footer">Je suis le pied de page</footer>
+</div>
+
+ +

Pour placer ces éléments, on utilise la grille de la façon suivante :

+ +
.main-header,
+.main-footer  {
+  grid-column: col-start / span 12;
+}
+.side1 {
+  grid-column: col-start / span 3;
+  grid-row: 2;
+}
+.content {
+  grid-column: col-start 4 / span 6;
+  grid-row: 2;
+}
+.side2 {
+  grid-column: col-start 10 / span 3;
+  grid-row: 2;
+}
+
+ +

{{EmbedLiveSample('three_column', '500', '330')}}

+ +

Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne :

+ +

The layout with the grid highlighted.

+
+ +

Et voilà tout ce dont on a besoin. Aucun calcul compliqué, la grille a automatiquement retiré la gouttière de 10 pixels avant d'affecter l'espace aux pistes qui mesurent 1fr. Lorsque vous construirez vos propres disposition, vous serez plus à l'aise avec la syntaxe et utiliserez les techniques qui sont les plus pertinentes pour vos projets. Essayez de construire cetaines dispositions classiques avec des différentes méthodes, vous deviendrez plus efficaces pour manipuler les grilles CSS. Dans le prochain guide, nous verrons comment la grille peut placer des objets automatiquement, sans même avoir besoin d'utiliser les propriétés de placement !

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_images/index.html b/files/fr/web/css/css_images/index.html new file mode 100644 index 0000000000..1bc5acf7c8 --- /dev/null +++ b/files/fr/web/css/css_images/index.html @@ -0,0 +1,106 @@ +--- +title: CSS Images +slug: Web/CSS/CSS_Images +tags: + - Aperçu + - CSS + - CSS Images + - Reference +translation_of: Web/CSS/CSS_Images +--- +
{{CSSRef}}
+ +

CSS Images est un module CSS qui définit les types d'images qui peuvent être utilisés (le type {{cssxref("<image>")}}, les URLs qu'elles contiennent, les dégradés et autres types d'images), comment les redimensionner et comment elles, ainsi que le contenu remplacé, interagissent avec les différents modèles de mise en page.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{CSSxRef("image-orientation")}}
    • +
  • {{CSSxRef("image-rendering")}}
    • +
  • {{CSSxRef("image-resolution")}}
    • +
  • {{CSSxRef("object-fit")}}
    • +
  • {{CSSxRef("object-position")}}
    • +
+
+ +

Fonctions

+ +
+
    +
  • {{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")}}
    • +
  • {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}
    • +
  • {{CSSxRef("url", "url()")}}
    • +
  • {{CSSxRef("element", "element()")}}
    • +
  • {{CSSxRef("_image", "image()")}}
    • +
  • {{CSSxRef("cross-fade", "cross-fade()")}}
    • +
+
+ +

Types de données

+ +
+
    +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
+
+ +

Guides

+ +
+
Utilisation de dégradés CSS
+
Présente un type spécifique d'images CSS, les dégradés, et comment les créer et les utiliser.
+
Les sprites CSS
+
Décrit la technique classique consistant à regrouper plusieurs images en un seul document pour économiser des requêtes de téléchargement et rendre une page disponible plus rapidement.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}}Ajout de {{CSSxRef("image-resolution")}},{{CSSxRef("conic-gradient")}} et {{CSSxRef("_image", "image()")}}.
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}Ajout de {{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}} et {{CSSxRef("object-position")}}
{{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}}{{Spec2("Compat")}}Standardisation de la version préfixée avec -webkit pour les valeurs de fonctions de dégradé
{{SpecName("CSS3 Values", "#urls", "<url>")}}{{Spec2("CSS3 Values")}} 
{{Specname("CSS2.1", "syndata.html#uri", "<uri>")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#url", "<url>")}}{{Spec2("CSS1")}}Définition intiale.
diff --git a/files/fr/web/css/css_images/sprites_css/index.html b/files/fr/web/css/css_images/sprites_css/index.html new file mode 100644 index 0000000000..a141a8a11e --- /dev/null +++ b/files/fr/web/css/css_images/sprites_css/index.html @@ -0,0 +1,51 @@ +--- +title: Les sprites CSS +slug: Web/CSS/CSS_Images/Sprites_CSS +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +--- +
{{CSSRef}}
+ +

Les sprites sont utilisées dans de nombreuses applications web où de multiples images sont utilisées. Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toute dans le même fichier, ainsi, le nombre de requêtes HTTP diminue. On utilise alors background-position pour choisir l'image qu'on souhaite utiliser.

+ +
+

Note : Avec HTTP/2, il peut être plus judicieux d'utiliser de nombreuses « petites » requêtes.

+
+ +

Implémentation

+ +

Supposons qu'une image est affichée pour chaque élement de la classe toolbtn :

+ +
.toolbtn {
+  background: url('myfile.png');
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}
+ +

Une position peut être ajoutée avec les valeurs x et y après {{cssxref("url()")}} pour décaler l'image de fond ({{cssxref("background")}}). Cela fonctionne aussi avec {{cssxref("background-position")}}. Par exemple :

+ +
#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}
+ +

L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe toolbtn).

+ +

De la même manière, vous pouvez faire un effet de transition au survol :

+ +
#btn:hover {
+  background-position: <pixels shifted right>px <pixels shifted down>px;
+}
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_lists/compteurs_css/index.html b/files/fr/web/css/css_lists/compteurs_css/index.html new file mode 100644 index 0000000000..7ca83181c4 --- /dev/null +++ b/files/fr/web/css/css_lists/compteurs_css/index.html @@ -0,0 +1,148 @@ +--- +title: Compteurs CSS +slug: Web/CSS/CSS_Lists/Compteurs_CSS +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +
{{CSSRef}}
+ +

Les compteurs CSS sont des variables dont les valeurs sont incrémentées par les règles CSS et qui permettent de savoir combien de fois elles sont utilisées. Cela permet par exemple d'adapter la mise en forme du contenu en fonction de son emplacement dans le document.

+ +

La valeur d'un compteur peut être manipulée grâce aux propriétés {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} et on peut les afficher sur la page grâce aux fonctions counter() et counters() dans la propriété {{cssxref("content")}}.

+ +

Utiliser les compteurs

+ +

Manipuler la valeur d'un compteur

+ +

Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être none, inherit ou initial.

+ +

Afficher un compteur

+ +

Pour ajouter un compteur au contenu d'un élément, il faut utiliser la fonction {{cssxref("counter")}} ou {{cssxref("counters")}} dans une propriété {{cssxref("content")}}.

+ +

La fonction counter() prend deux formes : counter(nom) ou counter(nom, style). Le texte ainsi généré est celui du compteur le plus proche avec ce nom. Le contenu est mis en forme avec le style indiqué (par défaut, c'est decimal).

+ +

La fonction counters() prend également deux formes : counters(nom, chaine) ou counters(nom, chaine style). Le texte généré aura la valeur de l'ensemble des compteurs présents dans la portée du pseudo-élément (du plus loin au plus proche), séparés par la chaîne de caractères passée en argument. Les compteurs sont mis en forme avec le style indiqué (par défaut, c'est decimal).

+ +

Exemple simple

+ +

Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section <la valeur du compteur> : ».

+ +
+

Note : La fonction {{cssxref("counter()")}} et la fonction {{cssxref("counters()")}} peuvent toutes les deux prendre un dernier argument qui correspond au style de liste utilisé (par défaut, c'est decimal).

+
+ +

CSS

+ +
body {
+  counter-reset: section;                    /* On initialise le compteur à 0 */
+}
+
+h3::before {
+  counter-increment: section;                /* On incrémente le compteur section */
+  content: "Section " counter(section) " : "; /* On affiche le compteur */
+}
+
+ +

HTML

+ +
<h3>Introduction</h3>
+<h3>Corps</h3>
+<h3>Conclusion</h3>
+ +

Résultat

+ +

{{EmbedLiveSample("Utiliser_les_compteurs", 300, 150)}}

+ +

Imbriquer des compteurs

+ +

Un compteur CSS est particulièrement utile lorsqu'il s'agit de gérer les listes générées dynamiquement. En utilisant la fonction {{cssxref("counters","counters()")}}, on peut insérer une chaîne de caractères entre les différents niveaux des compteurs imbriqués.

+ +

CSS

+ +
ol {
+  counter-reset: section;                /* On crée une nouvelle instance du
+                                            compteur section avec chaque ol */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* On incrémente uniquement cette
+                                            instance du compteur */
+  content: counters(section,".") " ";    /* On ajoute la valeur de toutes les
+                                            instances séparées par ".". */
+                                         /* Si on doit supporter < IE8 il faudra
+                                            faire attention à ce qu'il n'y ait
+                                            aucun blanc après ',' */
+}
+
+ +

HTML

+ +
<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item               <!-- 2     -->
+    <ol>
+      <li>item</li>      <!-- 2.1   -->
+      <li>item</li>      <!-- 2.2   -->
+      <li>item           <!-- 2.3   -->
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+          <li>item</li>  <!-- 2.3.3 -->
+        </ol>
+      </li>
+      <li>item</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>item</li>          <!-- 3     -->
+  <li>item</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item</li>          <!-- 2     -->
+</ol>
+ +

Résultat

+ +

{{EmbedLiveSample("Imbriquer_des_compteurs", 250, 350)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}Aucune modification.
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Voir aussi

+ +
    +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-set")}}
    • +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
diff --git "a/files/fr/web/css/css_lists/indentation_homog\303\250ne_des_listes/index.html" "b/files/fr/web/css/css_lists/indentation_homog\303\250ne_des_listes/index.html" new file mode 100644 index 0000000000..52a1cfbc33 --- /dev/null +++ "b/files/fr/web/css/css_lists/indentation_homog\303\250ne_des_listes/index.html" @@ -0,0 +1,105 @@ +--- +title: Indentation homogène des listes +slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +--- +
{{CSSRef}}
+ +

La modification la plus fréquemment apportée sur une liste concerne la distance d'indentation (autrement dit, la distance de laquelle les éléments sont décalés vers la droite). Ce point peut être source de frustration car les navigateurs se comportent différemment à ce sujet. Ainsi, si on déclare une liste sans marge à gauche, elles sont déplacées Internet Explorer mais restent obstinément à la même place dans les navigateurs Gecko.

+ +

Pour comprendre pourquoi cela se produit ainsi, et surtout afin d'éviter ces problèmes, nous allons devoir examiner en détail la construction des listes.

+ +

Construire une liste

+ +

Commençons par une simple liste minimale. L'élément de la liste ne possède aucune puce (le marqueur devant l'élément). Pour le moment, il ne fait pas partie d'une liste.

+ +

+ +

La bordure pointillée rouge représente la limite extérieure de la zone de contenu de l'élément de la liste. Pour le moment, cet élément ne possède ni remplissage (padding) ni bordure. Si on ajoute deux autres éléments à la liste, on obtient alors ce résultat :

+ +

+ +

À présent, nous allons placer ces éléments dans un élément parent. Pour cet exemple, nous utiliserons une liste non-ordonnée avec {{HTMLElement("ul")}}. Selon le modèle de boîtes CSS, les boîtes des éléments de la liste s'inscrivent dans la boîte de contenu de l'élément parent. Cette dernière n'a, pour l'instant, aucune marge ni aucun remplissage (padding). On obtient donc ce résultat :

+ +

+ +

Ici, la bordure pointillée bleue révèle les limites de la zone de contenu de l'élément ul. Puisqu'il n'a pas de remplissage (padding), cette limite épouse étroitement celles des trois éléments de la liste.

+ +

On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'une liste non ordonnée, nous ajoutons les traditionnelles puces en forme de disques pleins, comme ceci :

+ +

+ +

Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément ul, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments li. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque li.

+ +

C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément li, dès lors que la propriété {{cssxref("list-style-position")}} vaut outside. Si cette valeur est changée en inside, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments li, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci.

+ +

Obtenir une double indentation

+ +

Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles :

+ +
ul, li {
+  margin-left: 0;
+  padding-left: 0;
+}
+ +

Si nous plaçons cette liste en l'état dans un document, elle n'aura aucune indentation apparente, et nos marqueurs courront le risque d'être rejetés au-delà de la limite gauche de la fenêtre du navigateur.

+ +

Afin d'éviter ça et d'imposer une indentation, le navigateur pourra implémenter l'une des trois approches suivantes :

+ +
    +
  1. Doter chaque élément li d'une marge gauche ;
    2. +
  2. Doter chaque élément ul d'une marge gauche ;
    3. +
  3. Doter chaque élément ul d'un padding gauche quelconque.
    4. +
+ +

Telles que les choses se sont faites, aucun navigateur ne semble avoir choisi la première solution. Internet Explorer pour Windows et Macintosh, ainsi qu'Opera, ont adopté la seconde solution. La troisième a été choisie par Gecko et donc par tous les navigateurs embarquant celui-ci.

+ +

Observons de plus près ces deux dernières approches. Dans Internet Explorer et Opera, les listes sont indentées en fixant une marge gauche de 40 pixels pour l'élément ul. Si nous appliquons une couleur d'arrière-plan, à celui-ci en conservant les bordures des éléments de la liste et de cet élément ul, nous obtenons le résultat qui suit :

+ +

+ +

De son côté, Gecko applique un padding gauche de 40 pixels à cet élément ul. Avec les mêmes styles que dans le cas précédent, notre exemple s'affichera dans un navigateur basé sur Gecko de la façon suivante :

+ +


+

+ +

Comme nous pouvons le voir, les marqueurs restent attachés aux éléments li, où qu'ils soient. La différence réside uniquement dans la manière dont l'élément ul est mis en forme. Nous ne pouvons voir cette différence que si nous essayons de donner un arrière-plan ou des bordures à cet élément ul

+ +

Obtenir un rendu homogène

+ +

Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier à la fois la marge gauche et le padding gauche de l'élément ul. L'élément li peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez :

+ +
ul {
+  margin-left: 0;
+  padding-left: 40px;
+}
+ +

Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors :

+ +
ul {
+  margin-left: 40px;
+  padding-left: 0;
+}
+ +

Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à 1.25em si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un padding et une marge nuls :

+ +
ul {
+  margin-left: 0;
+  padding-left: 0;
+}
+ +

Souvenez-vous, cependant, qu'en faisant ainsi, vos puces se tiendront en dehors de votre liste et de son élément parent. Si ce parent est l'élément body, il y a de fortes chances qu'elles se retrouvent complètement en dehors de la fenêtre d'affichage du navigateur et qu'elles ne soient donc invisibles.

+ +

Conclusion

+ +

Au bout du compte, on voit qu'aucun des navigateurs mentionnés dans cet article n'a tort ou raison sur ce point. Ces navigateurs utilisent différents styles par défaut et c'est là que réside le seul problème. En veillant à mettre en forme à la fois la marge gauche et le padding gauche des listes, on peut obtenir un rendu bien plus homogène de l'indentation sur les différents navigateurs.

+ +

Recommandations

+ +
    +
  • Lorsque vous modifiez l'indentation des listes, veillez à indiquer à la fois le padding et la marge.
    • +
diff --git a/files/fr/web/css/css_lists/index.html b/files/fr/web/css/css_lists/index.html new file mode 100644 index 0000000000..781d7cb961 --- /dev/null +++ b/files/fr/web/css/css_lists/index.html @@ -0,0 +1,57 @@ +--- +title: CSS Lists +slug: Web/CSS/CSS_Lists +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Lists_and_Counters +--- +
{{CSSRef}}
+ +

CSS Lists (listes CSS) est un module CSS qui définit la façon dont les listes sont mises en forme, comment des styles peuvent être appliqués aux marqueurs.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("list-style-image")}}
    • +
  • {{cssxref("list-style-type")}}
    • +
  • {{cssxref("list-style-position")}}
    • +
  • {{cssxref("list-style")}}
    • +
+
+ +

Guides

+ +
+
Indentation homogène des listes
+
Explique comment obtenir une indentation homogène dans les différents navigateurs.
+
Utiliser les compteurs CSS
+
Explique comment utiliser les propriétés CSS relatives aux compteurs pour numéroter les listes.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Lists')}}{{Spec2('CSS3 Lists')}}
{{SpecName('CSS2.1', 'generate.html')}}{{Spec2('CSS2.1')}}Définition initiale.
diff --git a/files/fr/web/css/css_logical_properties/concepts_de_base/index.html b/files/fr/web/css/css_logical_properties/concepts_de_base/index.html new file mode 100644 index 0000000000..4129c926c7 --- /dev/null +++ b/files/fr/web/css/css_logical_properties/concepts_de_base/index.html @@ -0,0 +1,75 @@ +--- +title: Concepts de base des propriétés et valeurs logiques +slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base +tags: + - CSS + - Guide + - Propriété logique +translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts +--- +
{{CSSRef}}
+ +

La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.

+ +

Quel intérêt pour les propriétés logiques ?

+ +

Historiquement, CSS permettait de dimensionner des objets selon les dimensions physiques de l'écran. On pouvait alors décrire des boîtes avec une certaine largeur ({{CSSxRef("width")}}) et une certaine hauteur ({{CSSxRef("height")}}), positionner les éléments à partir du haut (top) et de la gauche (left), faire flotter les objets, créer des bordures, des marges, du remplissage (padding) en haut, à droite, en bas et à gauche (resp. top, right, bottom, left, etc.). La spécification sur les propriétés et valeurs logiques définit des correspondances entres ces valeurs physiques et des valeurs logiques, relatives au flux : start et end plutôt que left et right ou top et bottom.

+ +

Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : justify-self: start aligne l'élément au début de l'axe en ligne et align-self: start aligne l'élément au début de l'axe de bloc.

+ +

A grid in a horizontal writing mode

+ +

Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur vertical-rl, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.

+ +

A grid in vertical writing mode.

+ +

Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que width, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.

+ +

A grid layout in vertical writing mode

+ +

Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété writing-mode pour la passer de vertical-rl à horizontal-tb sur le sélecteur .box afin d'observer la façon dont les différentes propriétés modifient la disposition.

+ +

{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}

+ +

Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.

+ +

Axe de bloc et axe en ligne

+ +

Lorsqu'on travaille avec les propriétés et les valeurs logiques, il y a deux concepts majeurs : l'axe de bloc et l'axe en ligne qui sont les deux dimensions de l'espace. Comme nous l'avons vu avant, les nouvelles méthodes de disposition CSS (comme les boîtes flexibles et les grilles CSS) utilisent les concepts de block et inline plutôt que right et left/top et bottom pour l'alignement des objets.

+ +

La dimension en ligne (inline) correspond à l'axe selon lequel les lignes de texte sont écrites pour ce mode d'écriture. Ainsi, pour un document français, le texte sera écrit horizontalement de gauche à droite et pour un document arabe écrit de droite à gauche, la dimension en ligne est l'axe horizontal. Si on utilise un mode d'écriture vertical (le japonais par exempl), la dimension en ligne sera verticale car les lignes de texte de ce mode sont écrites verticalement.

+ +

La dimension de bloc correspond à l'axe orthogonal et généralement à la direction selon laquelle les blocs de texte (les paragraphes) sont agencés. En français ou en arabe, cet axe est vertical, pour les modes d'écritures écrits verticalement, cet axe est horizontal.

+ +

Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :

+ +

diagram showing the inline axis running horizontally, block axis vertically.

+ +

Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :

+ +

Diagram showing the block axis running horizontally the inline axis vertically.

+ +

Prise en charge des navigateurs

+ +

Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages de référence pour ces propriétés sur MDN, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).

+ +

On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.

+ +
+

Note : Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom margin pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'issue GitHub n°1282.

+
+ +

Tester la compatibilité des navigateurs

+ +

Il est possible de tester la prise en charge des propriétés et valeurs logiques en utilisant une requête de fonctionnalité (@supports). Ainsi, on pourrait définit une propriété {{CSSxRef("width")}}, tester si {{CSSxRef("inline-size")}} est prise en charge et, le cas échéant, définir width avec auto et inline-size avec la valeur initialement utilisée pour width.

+ +

{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_logical_properties/dimensionnement/index.html b/files/fr/web/css/css_logical_properties/dimensionnement/index.html new file mode 100644 index 0000000000..f6ffe024e6 --- /dev/null +++ b/files/fr/web/css/css_logical_properties/dimensionnement/index.html @@ -0,0 +1,89 @@ +--- +title: Propriétés logiques pour le dimensionnement +slug: Web/CSS/CSS_Logical_Properties/Dimensionnement +tags: + - CSS + - Guide + - Propriété logique +translation_of: Web/CSS/CSS_Logical_Properties/Sizing +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.

+ +

Lorsqu'on définit la taille d'un objet, la spécification sur les propriétés et les valeurs logiques permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs logiques, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs physiques en combinaison avec ces propriétés et ces valeurs logiques.

+ +

Correspondances pour les dimensions

+ +

Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (horizontal-tb) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique {{CSSxRef("width")}} serait équivalente à la propriété logique {{CSSxRef("inline-size")}}.

+ +

Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriété logiquePropriété physique
{{CSSxRef("inline-size")}}{{CSSxRef("width")}}
{{CSSxRef("block-size")}}{{CSSxRef("height")}}
{{CSSxRef("min-inline-size")}}{{CSSxRef("min-width")}}
{{CSSxRef("min-block-size")}}{{CSSxRef("min-height")}}
{{CSSxRef("max-inline-size")}}{{CSSxRef("max-width")}}
{{CSSxRef("max-block-size")}}{{CSSxRef("max-height")}}
+ +

Exemple pour width et height

+ +

Les propriétés logiques correspondant à {{CSSxRef("width")}} et {{CSSxRef("height")}} sont : {{CSSxRef("inline-size")}} pour la taille sur la dimension en ligne et {{CSSxRef("block-size")}}, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer width par inline-size et height par block-size et on obtiendra le même résultat.

+ +

Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec horizontal-tb. En modifiant cette valeur pour la passer à vertical-rl, on verra que le premier exemple, qui utilise width et height, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise inline-size et block-size, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}

+ +

Exemple pour min-width et min-height

+ +

Il existe également des propriétés logiques correspondantes pour {{CSSxRef("min-width")}} et {{CSSxRef("min-height")}} : {{CSSxRef("min-inline-size")}} et {{CSSxRef("min-block-size")}}. Celles-ci fonctionnent de la même façon que inline-size et block-size mais paramètrent une taille minimale plutôt qu'une taille fixe.

+ +

Dans l'exemple suivant, vous pouvez passer le mode d'écriture en vertical-rl et observer l'effet obtenu. Là encore, on utilise la propriété physique (min-height) sur le premier exemple et la propriété logique (min-block-size) sur le second.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}

+ +

Exemple pour max-width et max-height

+ +

Enfin, on peut utiliser {{CSSxRef("max-inline-size")}} et {{CSSxRef("max-block-size")}} afin de remplacer les propriétés physiques {{CSSxRef("max-width")}} et {{CSSxRef("max-height")}}. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}

+ +

Mots-clés logiques pour resize

+ +

La propriété {{CSSxRef("resize")}} définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques horizontal et vertical. La propriété resize peut désormais s'utiliser également avec des valeurs logiques : resize: inline permettra de redimensionner un objet sur l'axe en ligne et resize: block permettra de le redimensionner sur l'axe en bloc.

+ +

La valeur both peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

+ +
+

Attention ! À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour resize.

+
diff --git a/files/fr/web/css/css_logical_properties/index.html b/files/fr/web/css/css_logical_properties/index.html new file mode 100644 index 0000000000..bf77e064c1 --- /dev/null +++ b/files/fr/web/css/css_logical_properties/index.html @@ -0,0 +1,174 @@ +--- +title: CSS Logical Properties +slug: Web/CSS/CSS_Logical_Properties +tags: + - Aperçu + - CSS + - CSS Logical Properties + - Propriété logique + - Reference +translation_of: Web/CSS/CSS_Logical_Properties +--- +
{{CSSRef}}
+ +

CSS Logical Properties (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : block et inline, perpendiculaires, qui dépendent du sens de l'orientation du document.

+ +

Ce module définit également les propriétés logiques et les valeurs pour les propriétés précédemment définies avec CSS 2.1. Les propriétés logiques sont des propriétés dont l'orientation est relative au mode d'écriture du document et possèdent des propriétés physiques équivalentes.

+ +

Dimension de bloc ou de ligne

+ +

Les propriétés et valeurs logiques utilisent les termes abstraits bloc (block) ou ligne (inline) afin de décrire leur direction. La signification physique de ces termes dépend du mode d'écriture.

+ +
+
Dimension de bloc
+
C'est la dimension perpendiculaire au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension verticale lorsque le texte est écrit dans un mode horizontal et de la dimension horizontale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe vertical).
+
Dimension en ligne
+
C'est la dimension parallèle au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension horizontale lorsque le texte est écrit dans un mode horizontal et de la dimension verticale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe horizontal).
+
+ +

Référence

+ +

Propriétés relatives au dimensionnement

+ +
+
    +
  • {{CSSxRef("block-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inline-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("max-block-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("max-inline-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("min-block-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("min-inline-size")}} {{Experimental_Inline}}
    • +
+
+ +

Propriétés relatives aux marges, bordures et remplissages

+ +
+
    +
  • {{CSSxRef("border-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-color")}} (mot-clé logical {{Experimental_Inline}})
    • +
  • {{CSSxRef("border-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-style")}} (mot-clé logical {{Experimental_Inline}})
    • +
  • {{CSSxRef("border-width")}} (mot-clé logical {{Experimental_Inline}})
    • +
  • {{CSSxRef("margin")}} (mot-clé logical {{Experimental_Inline}})
    • +
  • {{CSSxRef("margin-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding")}} (mot-clé logical {{Experimental_Inline}})
    • +
  • {{CSSxRef("padding-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}
    • +
+
+ +

Propriétés relatives aux flottements et au positionnement

+ +
+
    +
  • {{CSSxRef("clear")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
    • +
  • {{CSSxRef("float")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
    • +
  • {{CSSxRef("inset")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}
    • +
+
+ +

Autres propriétés

+ +
+
    +
  • {{CSSxRef("caption-side")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
    • +
  • {{CSSxRef("overflow-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("overflow-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés block {{Experimental_Inline}} et inline {{Experimental_Inline}})
    • +
  • {{CSSxRef("text-align")}} (mots-clés end {{Experimental_Inline}} et start {{Experimental_Inline}})
    • +
+
+ +

Propriétés dépréciées

+ +
+
    +
  • {{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})
    • +
  • {{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})
    • +
  • {{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})
    • +
  • {{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})
    • +
+
+ +

Guides

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

Compatibilité générale

+ +

De façon générale :

+ +
    +
  • Firefox prend en charge les propriétés logiques lorsqu'il existe une correspondance directe avec les propriétés physiques.
    • +
  • Idem pour Chrome à partir de la version 69.
    • +
  • Edge ne prend actuellement (décembre 2018) pas en charge ces propriétés.
    • +
  • Firefox 66 introduit la prise en charge de deux valeurs raccourcies qui sont également derrière un flag pour Chrome.
    • +
+ +

Pour des informations précises sur chaque propriété, se référer au tableau de compatibilité des pages des propriétés.

diff --git "a/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_flottements_positionnement/index.html" "b/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_flottements_positionnement/index.html" new file mode 100644 index 0000000000..3a99d5bbad --- /dev/null +++ "b/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_flottements_positionnement/index.html" @@ -0,0 +1,143 @@ +--- +title: Propriétés logiques pour les flottements et le positionnement +slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement +tags: + - CSS + - Guide + - Propriété logique +translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +--- +
{{CSSRef}}
+ +

La spécification sur les propriétés et valeurs logiques définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une disposition positionnée. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.

+ +

Correspondance entre les propriétés et les valeurs

+ +

Le tableau ci-après définit les propriétés et les valeurs que nous verrons dans ce guide et la correspondance avec les propriétés et valeurs physiques si on utilisait un mode d'écriture horizontal allant de gauche à droite.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriété ou valeur logiquePropriété ou valeur physique
{{cssxref("float")}}: inline-start{{cssxref("float")}}: left
{{cssxref("float")}}: inline-end{{cssxref("float")}}: right
{{cssxref("clear")}}: inline-start{{cssxref("clear")}}: left
{{cssxref("clear")}}: inline-end{{cssxref("clear")}}: right
{{cssxref("inset-inline-start")}}{{cssxref("left")}}
{{cssxref("inset-inline-end")}}{{cssxref("right")}}
{{cssxref("inset-block-start")}}{{cssxref("top")}}
{{cssxref("inset-block-end")}}{{cssxref("bottom")}}
{{cssxref("text-align")}}: start{{cssxref("text-align")}}: left
{{cssxref("text-align")}}: end{{cssxref("text-align")}}: right
+ +

En plus de ces correspondances, certaines propriétés logiques raccourcies ont été ajoutées. Pour celles-ci, qui ciblent les extrêmités des axes en ligne ou de bloc, il n'y a pas de correspondance avec des propriétés physiques existantes à l'exception de {{cssxref("inset")}}.

+ + + + + + + + + + + + + + + + + + + + + + +
Propriété logiqueObjectif
{{cssxref("inset-inline")}}Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe en ligne.
{{cssxref("inset-block")}}Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe de bloc.
{{cssxref("inset")}}Cette propriété définit les valeurs des quatre décalages.
+ +

Exemple d'un flottement et d'un dégagement

+ +

Les valeurs physiques utilisées avec les propriétés {{cssxref("float")}} et {{cssxref("clear")}} sont left, right et both. Les valeurs logiques définies par la spécification sont inline-start et inline-end et qui peuvent correspondre à left et right selon le mode d'écriture.

+ +

Dans l'exemple ci-après, on a deux boîtes : la première flotte avec float: left et la deuxième avec float: inline-start. Si on modifie la propriété writing-mode pour la passer en vertical-rl ou si on modifie direction en rtl, on pourra voir que la première boîte flotte toujours à gauche tandis que la boîte ciblée avec inline-start suit la direction et le mode d'écriture.

+ +

{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}

+ +

Exemple des propriétés inset pour les dispositions positionnées

+ +

Le positionnement permet généralement de position un élément de façon relative à son bloc englobant. La plupart du temps, on décale l'objet relativement à la position qu'il aurait occupé sur le flux normal. Par le passé, on utilisait les propriétés physiques {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}}.

+ +

Ces propriétés s'utilisent avec une longueur ou avec une pourcentage relatif aux dimensions de l'écran de l'utilisateur.

+ +

De nouvelles propriétés ont été définies dans la spécifications des propriétés logiques et permettent de positionner un élément relativement au flux du texte, quel que soit le mode d'écriture. Ces propriétés logiques sont :

+ +
    +
  • {{cssxref("inset-block-start")}}
    • +
  • {{cssxref("inset-block-end")}}
    • +
  • {{cssxref("inset-inline-start")}}
    • +
  • {{cssxref("inset-inline-end")}}.
    • +
+ +

Dans l'exemple qui suit, on utilise les propriétés inset-block-start et inset-inline-end afin de positionner la boîte bleue de façon absolue dans la zone définie par la bordure grise pointillée et qui a position: relative. En modifiant la propriété writing-mode afin d'utiliser la valeur vertical-rl ou en ajoutant direction: rtl, on pourra voir comment la boîte relative reste dans la direction du texte.

+ +

{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}

+ +

Nouvelles propriétés raccourcies

+ +

Cette spécification définit également de nouvelles propriétés logiques qui permettent de définir deux voire quatre valeurs avec une seule déclaration. Pour ces propriétés raccourcies, il n'existe pas d'équivalence avec des propriétés physiques.

+ +
    +
  • {{cssxref("inset")}} — elle permet de définir les quatre décalages avec une correspondance physique.
    • +
  • {{cssxref("inset-inline")}} — elle permet de définir les décalages sur l'axe en ligne
    • +
  • {{cssxref("inset-block")}} — elle permet de définir les décalage sur l'axe de bloc
    • +
+ +
+

Note : Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.

+
+ +

Exemple de valeurs logiques pour text-align

+ +

La propriété {{cssxref("text-align")}} peut s'utiliser avec quatre valeurs logiques qui sont relatives à la direction du texte. Plutôt que d'utiliser left et right, on pourra utiliser start et end. Dans l'exemple suivant, on définit text-align: right pour le premier bloc et text-align: end pour le second.

+ +

Si on modifie la valeur de direction pour la passer à rtl, on verra que le premier bloc restera aligné à droite tandis que le texte du second s'alignera sur la fin logique.

+ +

{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}

+ +

Le comportement d'ensemble est plus cohérent lorsqu'on utilise des alignements de boîtes logiques (start et end) plutôt que des alignements basés sur les directions physiques.

diff --git "a/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_marges_bordures_remplissages/index.html" "b/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_marges_bordures_remplissages/index.html" new file mode 100644 index 0000000000..8b4da0bce6 --- /dev/null +++ "b/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_marges_bordures_remplissages/index.html" @@ -0,0 +1,297 @@ +--- +title: 'Propriétés logiques pour les marges, les bordures et les remplissages' +slug: >- + Web/CSS/CSS_Logical_Properties/Propriétés_logiques_marges_bordures_remplissages +tags: + - CSS + - Guide + - Propriété logique +translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +--- +

{{CSSRef}}

+ +

La spécification sur les propriétés et valeurs logiques définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (padding) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.

+ +

Si vous avez consulté la page principale sur les propriétés et valeurs logiques, vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.

+ +

Correspondances pour les marges, les bordures et les remplissages (padding)

+ +

La spécification détaille les correspondances entre les valeurs logiques et les valeurs physiques. Dans le tableau qui suit,on liste les correspondances lorsque le mode d'écriture utilisé est horizontal-tb et où la direction du texte va de gauche à droite. L'axe en ligne est donc horizontal, dirigé de gauche à droite et {{cssxref("margin-inline-start")}} est équivalent à {{cssxref("margin-left")}}.

+ +

Si on avait utilisé un mode d'écriture horizontal-tb orienté de droite à gauche, {{cssxref("margin-inline-start")}} aurait correspondu à {{cssxref("margin-right")}}. Pour un mode d'écriture vertical, elle aurait correspondu à {{cssxref("margin-top")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriété logiquePropriété physique
{{cssxref("border-block-end")}}{{cssxref("border-bottom")}}
{{cssxref("border-block-end-color")}}{{cssxref("border-bottom-color")}}
{{cssxref("border-block-end-style")}}{{cssxref("border-bottom-style")}}
{{cssxref("border-block-end-width")}}{{cssxref("border-bottom-width")}}
{{cssxref("border-block-start")}}{{cssxref("border-top")}}
{{cssxref("border-block-start-color")}}{{cssxref("border-top-color")}}
{{cssxref("border-block-start-style")}}{{cssxref("border-top-style")}}
{{cssxref("border-block-start-width")}}{{cssxref("border-top-width")}}
{{cssxref("border-inline-end")}}{{cssxref("border-right")}}
{{cssxref("border-inline-end-color")}}{{cssxref("border-right-color")}}
{{cssxref("border-inline-end-style")}}{{cssxref("border-right-style")}}
{{cssxref("border-inline-end-width")}}{{cssxref("border-right-width")}}
{{cssxref("border-inline-start")}}{{cssxref("border-left")}}
{{cssxref("border-inline-start-color")}}{{cssxref("border-left-color")}}
{{cssxref("border-inline-start-style")}}{{cssxref("border-left-style")}}
{{cssxref("border-inline-start-width")}}{{cssxref("border-left-width")}}
{{cssxref("border-start-start-radius")}}{{cssxref("border-top-left-radius")}}
{{cssxref("border-start-end-radius")}}{{cssxref("border-bottom-left-radius")}}
{{cssxref("border-end-start-radius")}}{{cssxref("border-top-right-radius")}}
{{cssxref("border-end-end-radius")}}{{cssxref("border-bottom-right-radius")}}
{{cssxref("margin-block-end")}}{{cssxref("margin-bottom")}}
{{cssxref("margin-block-start")}}{{cssxref("margin-top")}}
{{cssxref("margin-inline-end")}}{{cssxref("margin-right")}}
{{cssxref("margin-inline-start")}}{{cssxref("margin-left")}}
{{cssxref("padding-block-end")}}{{cssxref("padding-bottom")}}
{{cssxref("padding-block-start")}}{{cssxref("padding-top")}}
{{cssxref("padding-inline-end")}}{{cssxref("padding-right")}}
{{cssxref("padding-inline-start")}}{{cssxref("padding-left")}}
+ +

De nouvelles propriétés raccourcies sont également apparues et permettent de manipuler les deux extrêmités d'un même axe. Ces propriétés raccourcies n'ont pas de propriété physique équivalente.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéObjectif
{{cssxref("border-block")}}Définit {{cssxref("border-color")}}, {{cssxref("border-style")}} et {{cssxref("border-width")}} pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-color")}}Définit border-color pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-style")}}Définit border-style pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-width")}}Définit border-width pour les deux bordures sur l'axe de bloc.
{{cssxref("border-inline")}}Définit border-color, -style et -width pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-color")}}Définit border-color pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-style")}}Définit border-style pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-width")}}Définit border-width pour les deux bordures sur l'axe en ligne.
{{cssxref("margin-block")}}Défnit les deux marges sur l'axe de bloc.
{{cssxref("margin-inline")}}Défnit les deux marges sur l'axe en ligne.
{{cssxref("padding-block")}}Définit le remplissage (padding) sur l'axe de bloc.
{{cssxref("padding-inline")}}Définit le remplissage (padding) sur l'axe en ligne.
+ +

Exemples de marges

+ +

Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge.

+ +

Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure.

+ +

Une boîte utilise les propriétés physiques et la seconde les propriétés logiques. Vous pouvez modifier la valeur de la propriété {{cssxref("direction")}} (la changer en rtl par exemple) : la première boîte conservera les mêmes marges tandis que la seconde verra ses marges en ligne échangées.

+ +

Vous pouvez également modifier la propriété writing-mode pour la passer de horizontal-tb à vertical-rl. Là aussi, vous pourrez voir les marges rester les mêmes pour la première boîte et passer d'un côté à l'autre pour la seconde.

+ +

{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}

+ +

Propriétés raccourcies pour les marges

+ +

Avec les propriétés logiques, on peut définir les deux côtés en ligne et les deux côtés en bloc à l'aide d'une propriété et on a donc de nouvelles propriétés raccourcies : {{cssxref("margin-inline")}} et {{cssxref("margin-block")}}. Ces deux propriétés s'utilisent avec deux valeurs : la première sera appliquée au côté du début pour l'axe et la deuxième au côté de fin. Si une seule valeur est utilisée, elle sera appliquée aux deux côtés.

+ +

Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une marge de 5 pixels sur le côté haut de la boîte et une marge de 10 pixels sur le bas de la boîte.

+ +
.box {
+  margin-block: 5px 10px;
+}
+ +
+

Note : Ces propriétés raccourcies, margin-inline et margin-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

+
+ +

Exemples pour le remplissage

+ +

Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique.

+ +

Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture horizontal-tb, les deux boîtes auront la même apparence.

+ +

En modifiant la propriété direction avec la valeur rtl, les boîtes seront affichées de droite à gauche. Le remplissage de la première boîte restera à la même place et celui de la deuxième boîte changera de côté.

+ +

Vous pouvez aussi modifier la valeur de la propriété writing-mode pour la passer de horizontal-tb à vertical-rl. Là encore, rien ne change pour la première boîte mais pour la seconde, les remplissages se trouvent échangés.

+ +

{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}

+ +

Propriétés raccourcies pour le remplissage

+ +

À l'instar des marges, deux propriétés raccourcies ont été ajoutées {{cssxref("padding-inline")}} et {{cssxref("padding-block")}}. Elles permettent, respectivement, de définir le remplissage pour les deux côtés sur l'axe en ligne et sur l'axe en bloc.

+ +

Avec un mode d'écriture horizontal, cette déclaration CSS appliquera un remplissage de 5px sur le haut de la boîte et un remplissage de 10 pixels en bas de la boîte :

+ +
.box {
+  padding-block: 5px 10px;
+}
+ +
+

Note : Ces propriétés raccourcies, padding-inline et padding-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

+
+ +

Exemples pour les bordures

+ +

Les propriétés relatives aux bordures fournissent une grande quantité de propriétés tant logiques que physiques (pour la couleur, la largeur, le style, pour chaque côté, pour les propriétés raccourcies). De la même façon qu'on a des équivalences avec les propriétés physiques pour les marges et les remplissages, on a également des propriétés logiques pour les bordures.

+ +

L'exemple ci-après utilise certaines propriétés détaillées et propriétés raccourcies. Comme précédemment, vous pouvez modifier les valeurs des propriétés direction et writing-mode pour observer les impacts.

+ +

{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}

+ +

Propriétés raccourcies pour les bordures

+ +

Il y a des propriétés raccourcies avec deux valeurs pour paramétrer la largeur, le style et la couleur de la bordure pour les côtés sur l'axe en ligne ou pour les côtés sur l'axe de bloc. Le fragment de code qui suit, si on l'utilise avec un mode d'écriture horizontal, fournira une bordure verte de 2 pixels sur un trait plein en haut et en bas de la boîte et une bordure pointillée violette de 4 pixels sur les côtés gauche et droit.

+ +
.box {
+  border-block: 2px solid green;
+  border-inline-width: 4px;
+  border-inline-style: dotted;
+  border-inline-color: rebeccapurple;
+}
+ +
+

Note : Ces propriétés raccourcies, border-inline et border-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

+
+ +

Propriétés pour les courbures des bordures relatives au flux

+ +

La spécification a également ajouté des propriétés relatives au flux pour les propriétés détaillées associées à {{cssxref("border-radius")}}. Ces propriétés n'ont pas encore (décembre 2018) été implémentées par les différents navigateurs. L'exemple qui suit, avec un mode d'écriture horizontal, fournira une bordure en haut à droite avec un rayon de courbure de 1em, une bordure en bas à droite sans rayon de courbure, une bordure en bas à gauche avec un rayon de courbure de 20 pixels et une bordure courbée avec un rayon de 40 pixels pour le coin supérieur gauche.

+ +
.box {
+  border-end-start-radius: 1em;
+  border-end-end-radius: 0;
+  border-start-end-radius: 20px;
+  border-start-start-radius: 40px;
+}
+ +

Utiliser les valeurs logiques avec les propriétés raccourcies classiques

+ +

La spécification définit une suggestion qui pourrait être utilisée afin de manipuler les propriétés raccourcies (margin par exemple) avec des valeurs logiques. Toutefois, le consensus n'a pas encore été atteint sur la résolution de ce point et est discuté au travers de cette issue.

+ +

À l'heure actuelle (décembre 2018), les propriétés raccourcies margin, padding et border ne fonctionent qu'avec les valeurs physiques. Aussi, si respecter le flux du document est primordial et que vous devez utiliser les valeurs logiques, vous devrez recourir aux propriétés détaillées afin d'utiliser les valeurs logiques.

diff --git a/files/fr/web/css/css_masks/index.html b/files/fr/web/css/css_masks/index.html new file mode 100644 index 0000000000..ea2a9afeb5 --- /dev/null +++ b/files/fr/web/css/css_masks/index.html @@ -0,0 +1,66 @@ +--- +title: CSS Masks +slug: Web/CSS/CSS_Masks +tags: + - Aperçu + - CSS + - CSS Masking + - Reference +translation_of: Web/CSS/CSS_Masking +--- +
{{CSSRef}}
+ +

CSS Masking (ou « masques CSS ») est un module CSS qui définit les moyens, dont les masques et le clipping, pour dissimuler des parties d'éléments visuels, partiellement ou en totalité.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("clip")}} {{deprecated_inline}}
    • +
  • {{cssxref("clip-path")}}
    • +
  • {{cssxref("clip-rule")}}
    • +
  • {{cssxref("mask")}}
    • +
  • {{cssxref("mask-border")}}
    • +
  • {{cssxref("mask-border-mode")}}
    • +
  • {{cssxref("mask-border-outset")}}
    • +
  • {{cssxref("mask-border-repeat")}}
    • +
  • {{cssxref("mask-border-slice")}}
    • +
  • {{cssxref("mask-border-source")}}
    • +
  • {{cssxref("mask-border-width")}}
    • +
  • {{cssxref("mask-clip")}}
    • +
  • {{cssxref("mask-composite")}}
    • +
  • {{cssxref("mask-image")}}
    • +
  • {{cssxref("mask-mode")}}
    • +
  • {{cssxref("mask-origin")}}
    • +
  • {{cssxref("mask-position")}}
    • +
  • {{cssxref("mask-repeat")}}
    • +
  • {{cssxref("mask-size")}}
    • +
  • {{cssxref("mask-type")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks")}}{{Spec2("CSS Masks")}} 
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Définition initiale.
diff --git a/files/fr/web/css/css_miscellaneous/index.html b/files/fr/web/css/css_miscellaneous/index.html new file mode 100644 index 0000000000..45e4685f89 --- /dev/null +++ b/files/fr/web/css/css_miscellaneous/index.html @@ -0,0 +1,31 @@ +--- +title: CSS Miscellaneous +slug: Web/CSS/CSS_Miscellaneous +tags: + - Aperçu + - CSS + - Reference +translation_of: Web/CSS/CSS_Miscellaneous +--- +
{{CSSRef}}
+ +

Cette page regroupe des propriétés CSS qui sont hautement expérimentales ou qui ne rentrent dans aucune autre catégorie.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("all")}}
    • +
  • {{cssxref("text-rendering")}}
    • +
+
+ +

Spécifications

+ +

Ces propriétés n'ont pour la plupart pas de lien entre elles, consultez leur pages respectives pour connaître leurs spécifications.

+ +

Compatibilité des navigateurs

+ +

Ces propriétés n'ont pour la plupart pas de lien entre elles, consultez leurs pages respectives pour connaître leur disponibilité dans les navigateurs.

diff --git a/files/fr/web/css/css_namespaces/index.html b/files/fr/web/css/css_namespaces/index.html new file mode 100644 index 0000000000..84e14d0937 --- /dev/null +++ b/files/fr/web/css/css_namespaces/index.html @@ -0,0 +1,50 @@ +--- +title: CSS Namespaces +slug: Web/CSS/CSS_Namespaces +tags: + - Aperçu + - CSS + - CSS Namespaces + - Reference +translation_of: Web/CSS/CSS_Namespaces +--- +
{{CSSRef}}
+ +

CSS Namespaces (ou « espaces de noms CSS ») est un module CSS qui permet aux auteurs de spécifier des espaces de noms XML en CSS.

+ +

Référence

+ +

Règles @

+ +
+
    +
  • {{cssxref("@namespace")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Namespaces")}}{{Spec2("CSS3 Namespaces")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

@namespace

+ + + +

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

diff --git a/files/fr/web/css/css_overflow/index.html b/files/fr/web/css/css_overflow/index.html new file mode 100644 index 0000000000..9f5697820a --- /dev/null +++ b/files/fr/web/css/css_overflow/index.html @@ -0,0 +1,82 @@ +--- +title: CSS Overflow +slug: Web/CSS/CSS_Overflow +tags: + - CSS + - CSS Overflow + - Reference +translation_of: Web/CSS/CSS_Overflow +--- +

{{CSSRef}}
+ Le module de spécification CSS Overflow décrit les fonctionnalités CSS relatives au dépassement et au défilement du contenu pour les médias visuels. En CSS, le dépassement se produit lorsque le contenu d'une boîte s'étend au-delà des bords de la boîte.

+ +

Dépassement au dessin (ink overflow) et dépassement défilable (scrollable overflow)

+ +

Il existe deux types de dépassement en CSS. Le premier, intitulé en anglais ink overflow (qu'on pourrait traduire par « dépassement pour le dessin ») indique le dépassement des effets visuels qui ne modifient pas la disposition ou le dimensionnement (ex. les ombres des boîtes, les bordures des images, les décorations du texte, les caractères avec un jambage qui dépasse, etc.).

+ +

Le second type de dépassement, scrollable overflow (ou dépassement défilable) se produit lorsque du contenu se situe hors de la boîte et qu'il est nécessaire de fournir un mécanisme pour faire défiler le contenu afin de pouvoir le consulter. Les propriétés de ce module de spécification décrivent ce qui se passe lorsque le contenu dépasse d'une boîte. 

+ +

Exemple

+ +

L'exempel interactif suivant illustre comment la modification de la valeur de la propriété overflow change la façon dont est géré le dépassement pour une boîte avec une hauteur fixe.

+ +
{{EmbedInteractiveExample("pages/css/overflow.html")}}
+ + + +

Référence

+ +

Propriétés CSS

+ +
+
    +
  • {{CSSxRef("overflow")}}
    • +
  • {{CSSxRef("overflow-block")}}
    • +
  • {{CSSxRef("overflow-inline")}}
    • +
  • {{CSSxRef("overflow-x")}}
    • +
  • {{CSSxRef("overflow-y")}}
    • +
  • {{CSSxRef("text-overflow")}}
    • +
  • {{CSSxRef("block-overflow")}} {{experimental_inline}}
    • +
  • {{CSSxRef("line-clamp")}} {{experimental_inline}}
    • +
  • {{CSSxRef("max-lines")}} {{experimental_inline}}
    • +
  • {{CSSxRef("continue")}} {{experimental_inline}}
    • +
+
+ +

Propriétés spécifiques

+ +
+
    +
  • {{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Overflow')}}Modification de la syntaxe afin de permettre d'utilise un ou deux mots-clés (plutôt qu'un seul auparavant).
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Voir aussi

+ +
    +
  • Les propriétés qui permettent de mettre en forme les barres de défilement/ascenceurs : {{CSSxRef("scrollbar-width")}} et {{CSSxRef("scrollbar-color")}}
    • +
diff --git a/files/fr/web/css/css_pages/index.html b/files/fr/web/css/css_pages/index.html new file mode 100644 index 0000000000..1d191006f2 --- /dev/null +++ b/files/fr/web/css/css_pages/index.html @@ -0,0 +1,73 @@ +--- +title: CSS Pages +slug: Web/CSS/CSS_Pages +tags: + - Aperçu + - CSS + - CSS Paged Media + - Reference +translation_of: Web/CSS/CSS_Pages +--- +
{{CSSRef}}
+ +

Les média paginés CSS (ou CSS Paged Media en anglais) est un module CSS qui définit la façon dont sont gérés les sauts de page ainsi que les veuves et orphelines.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("page-break-after")}}
    • +
  • {{cssxref("page-break-before")}}
    • +
  • {{cssxref("page-break-inside")}}
    • +
+
+ +

Règles @

+ +
+
    +
  • {{cssxref('@page')}}
    • +
+
+ +

Pseudo-classes

+ +
+
    +
  • {{cssxref(':blank')}}
    • +
  • {{cssxref(':first')}}
    • +
  • {{cssxref(':left')}}
    • +
  • {{cssxref(':right')}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media')}}{{Spec2('CSS3 Paged Media')}} 
{{SpecName('CSS3 Fragmentation')}}{{Spec2('CSS3 Fragmentation')}} 
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}} 
diff --git a/files/fr/web/css/css_positioning/index.html b/files/fr/web/css/css_positioning/index.html new file mode 100644 index 0000000000..518a4abaeb --- /dev/null +++ b/files/fr/web/css/css_positioning/index.html @@ -0,0 +1,61 @@ +--- +title: CSS Positioned Layout +slug: Web/CSS/CSS_Positioning +tags: + - Aperçu + - CSS + - CSS Positioned Layout + - Reference +translation_of: Web/CSS/CSS_Positioning +--- +
{{CSSRef}}
+ +

CSS Positioned Layout (ou module CSS de disposition positionnée) est un module CSS qui définit comment positionner des éléments sur une page.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("bottom")}}
    • +
  • {{cssxref("clear")}}
    • +
  • {{cssxref("float")}}
    • +
  • {{cssxref("left")}}
    • +
  • {{cssxref("position")}}
    • +
  • {{cssxref("right")}}
    • +
  • {{cssxref("top")}}
    • +
  • {{cssxref("z-index")}}
    • +
+
+ +

Guides

+ +
+
Comprendre z-index en CSS
+
Présente la notion de contexte d'empilement et explique comment fonctionne le tri sur z avec plusieurs exemples.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Positioning')}}{{Spec2('CSS3 Positioning') }} 
{{SpecName('CSS2.1', 'visuren.html')}}{{Spec2('CSS2.1')}} 
diff --git a/files/fr/web/css/css_properties_reference/index.html b/files/fr/web/css/css_properties_reference/index.html new file mode 100644 index 0000000000..7c0812f001 --- /dev/null +++ b/files/fr/web/css/css_properties_reference/index.html @@ -0,0 +1,315 @@ +--- +title: Référence des propriétés CSS +slug: Web/CSS/CSS_Properties_Reference +tags: + - CSS +translation_of: Web/CSS/CSS_Properties_Reference +--- +
{{CSSRef}}
+ +

Référence des propriétés CSS usuelles

+ +

Voici ci-dessous une liste simple des propriétés CSS les plus fréquemment utilisées avec leur équivalent en notation DOM,  habituellement utilisée avec JavaScript :

+ +
Note :  Cette liste n'est pas exhaustive. Pour davantage de propriétés CSS, voir la référence CSS et les extensions CSS spécifiques à Mozilla.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSSJavaScript
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
floatcssFloat
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
stroke-dasharraystrokeDasharray
stroke-dashoffsetstrokeDashoffset
stroke-widthstrokeWidth
text-aligntextAlign
text-decorationtextDecoration
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexzIndex
+ +

 

diff --git a/files/fr/web/css/css_questions_frequentes/index.html b/files/fr/web/css/css_questions_frequentes/index.html new file mode 100644 index 0000000000..0d62552798 --- /dev/null +++ b/files/fr/web/css/css_questions_frequentes/index.html @@ -0,0 +1,246 @@ +--- +title: Questions fréquentes en CSS +slug: Web/CSS/CSS_questions_frequentes +tags: + - CSS + - Débutant + - Exemple + - Guide +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?

+ +

Pour afficher un document, les navigateurs utilisent le DOCTYPE - contraction de l'anglais document type, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un DOCTYPE correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.

+ +

Les navigateurs modernes ont deux modes de rendu :

+ +
    +
  • Mode Quirk: aussi appelé mode de rétro-compatibilité. Il permet aux pages existantes d'être affichées telles que leurs auteurs l'ont voulu, en suivant les règles de rendu non-standards utilisées par les navigateurs anciens. Les documents avec un DOCTYPE incomplet, incorrect ou manquant, ou avec une déclaration DOCTYPE en utilisation avant 2001 seront affichées en mode Quirks.
    • +
  • Mode Standard: le navigateur tente de suivre strictement les standards du W3C. Idéalement, les nouvelles pages HTML doivent être conçues pour des navigateurs conformes aux normes. Par conséquent, les pages avec un DOCTYPE moderne seront affichées en mode Standard.
    • +
+ +

Les navigateurs basés sur Gecko ont un troisième mode Presque Standard qui comporte quelques quirks mineurs.

+ +

Voici une liste des DOCTYPE les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :

+ +
<!DOCTYPE html> /* Ceci est le doctype HTML5. Étant donné que chaque
+                   navigateur moderne utilise un parseur HTML5, c'est le
+                   doctype recommandé. */
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"https://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"https://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+ +

Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?

+ +

Pour être appliqué, une feuille CSS doit être définie avec un type MIME text/css. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée.

+ +

Quelle est la différence entre id et class ?

+ +

Les éléments HTML peuvent posséder un attribut de type id et / ou class. L'attribut id assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut class assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en id et / ou en class.

+ +

Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut id. Ces caractéristiques de style ne seront appliquées que sur cet id particulier.

+ +

Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut class.

+ +

Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type label et form ou pour décorer des éléments qui doivent être sémantiquement uniques.

+ +

Voire Les sélecteurs CSS.

+ +

Comment revenir à la valeur par défaut d'un propriété ?

+ +

Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut.

+ +

Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur initial. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.

+ +

Comment créer un style dérivant d'un autre ?

+ +

CSS ne permet de faire dériver un style d'un autre. Voire l'article d'Eric Meyer à propos de la position du groupe de travail. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.

+ +

Comment  assigner de multiples classes à un élément?

+ +

Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut class en séparant chaque classe d'un espace.

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut class n'est pas pris en compte.

+ +

Pourquoi mes règles ne fonctionnent-elles pas correctement ?

+ +

Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie Règles de style CSS de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous.

+ +

Hiérarchie des éléments HTML

+ +

La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS.

+ +
.news {
+  color: black;
+}
+
+.corpName {
+  font-weight: bold;
+  color: red;
+}
+
+ +
<!-- Le texte de l'annonce est en noir
+     mais le nom de l'entreprise est
+     en rouge gras -->
+<div class="news"> (Reuters)
+   <span class="corpName">General Electric</span>
+  (GE.NYS) announced on Thursday...
+</div>
+
+ +

Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente.

+ +

L'ordre et la redéfinition des règles

+ +

Pour les feuilles de style CSS, l'ordre est important. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée.

+ +
#stockTicker {
+  font-weight: bold;
+}
+.stockSymbol {
+  color: red;
+}
+/*  D'autres règles             */
+/*  D'autres règles             */
+/*  D'autres règles             */
+.stockSymbol {
+  font-weight: normal;
+}
+
+ +

 

+ +
<!-- La plupart du texte est en gras sauf "GE",
+     qui est en rouge et sans graisse -->
+<div id="stockTicker"> NYS: <span class="stockSymbol">GE</span> +1.0 ... </div>
+
+
+ +

Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur.

+ +

Utiliser les propriétés raccourcies

+ +

Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite.

+ +
#stockTicker {
+  font-size: 12px;
+  font-family: Verdana;
+  font-weight: bold;
+}
+
+.stockSymbol {
+  font: 14px Arial;
+  color: red;
+}
+
+ +
<div id="stockTicker">
+  NYS:
+  <span class="stockSymbol">
+    GE
+  </span>
+  +1.0 ...
+</div>
+ +

Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car l'ordre des règles est important.

+ +
#stockTicker {
+  font-weight: bold;
+  font: 12px Verdana;
+  /* font-weight vaut maintenant normal */
+}
+
+ +

Utiliser le sélecteur *

+ +

Le sélecteur * fait référence à n'importe quel élément et doit donc être utilisé avec soin.

+ +
body * {
+  font-weight: normal;
+}
+
+#stockTicker {
+  font: 12px Verdana;
+}
+
+.corpName {
+  font-weight: bold;
+}
+
+.stockUp {
+  color: red;
+}
+
+ +
<div id="section">
+  NYS:
+  <span class="corpName">
+    <span class="stockUp">
+      GE
+    </span>
+  </span>
+  +1.0 ...
+</div>
+ +

Dans cet exemple, le sélecteur body * cible tous les éléments à l'intérieur de body, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe .stockUp. Ainsi, la règle font-weight: bold; appliquée sur la classe .corpName est surchargée par la règle font-weight: normal; qui est appliquée à tous les éléments contenus dans body.

+ +

Le sélecteur * doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur.

+ +

La spécificité en CSS

+ +

Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la spécificité. Les styles inline (ceux déclarés via l'attribut HTML style) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom.

+ +
div {
+  color: black;
+}
+
+#orange {
+  color: orange;
+}
+
+.green {
+  color: green;
+}
+
+ +
<div id="orange" class="green" style="color: red;">
+  Voici quelque chose qui sera rouge.
+</div>
+ +

Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire le chapitre de la spécification CSS 2.1 ou le chapitre correspondant de la section Apprendre.

+ +

Quid des propriétés -moz-*, -ms-*, -webkit-*, -o-* et -khtml-* ?

+ +

Ces propriétés, appelées propriétés préfixées, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté.

+ +

Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue.

+ +

Pour plus d'informations sur les extensions CSS de Mozilla, vous pouvez consulter la page associée.

+ +

Quel est l'impact de z-index sur le positionnement des éléments ?

+ +

La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.

+ +

Un élément pour lequel z-index est plus grand qu'un autre sera toujours empilé « devant ».

+ +

La propriété z-index ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut absolute, relative ou fixed).

diff --git a/files/fr/web/css/css_ruby/index.html b/files/fr/web/css/css_ruby/index.html new file mode 100644 index 0000000000..cc9c44a3bb --- /dev/null +++ b/files/fr/web/css/css_ruby/index.html @@ -0,0 +1,44 @@ +--- +title: CSS Ruby +slug: Web/CSS/CSS_Ruby +tags: + - Aperçu + - CSS + - CSS Ruby + - Reference + - Ruby +translation_of: Web/CSS/CSS_Ruby +--- +
{{CSSRef}}
+ +

CSS Ruby Layout est un module CSS qui fournit des propriétés de contrôle pour le rendu et la mise en forme des annotations Ruby utilisées dans les documents d'Asie orientale afin d'indiquer la prononciation ou d'annoter le texte de base.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("ruby-align")}}
    • +
  • {{cssxref("ruby-position")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Ruby')}}{{Spec2('CSS3 Ruby')}}Définition initiale.
diff --git "a/files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" "b/files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" new file mode 100644 index 0000000000..f5d6f97ca4 --- /dev/null +++ "b/files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" @@ -0,0 +1,46 @@ +--- +title: Compatibilité des navigateurs et CSS Scroll Snap +slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs +tags: + - CSS + - CSS Scroll Snap + - Compatibilité + - Guide +translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat +--- +
{{CSSRef}}
+ +

Firefox implémentait initialement une première version de la spécification Scroll Snap appelée alors Scroll Snap Points. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.

+ +

Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?

+ +

Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par Scroll Snap Points, vous devriez mettre à jour votre code afin d'utiliser la nouvelle spécification. Ainsi, votre code fonctionnera dans l'ensemble des navigateurs qui implémente la spécification à jour, y compris Firefox. Si vous n'effectuez pas ces changements, les accroches de défilement ne fonctionneront plus à partir de Firefox 68.

+ +

Voici les principaux points d'attention :

+ +
    +
  • Les propriétés {{CSSxRef("scroll-snap-type-x")}} et {{CSSxRef("scroll-snap-type-y")}} ont été abandonnées
    • +
  • La propriété {{CSSxRef("scroll-snap-type")}} n'est plus une propriété raccourcie et l'ancienne syntaxe courte (ex. scroll-snap-type: mandatory) cessera de fonctionner
    • +
+ +

Comment utiliser l'ancienne implémentation comme méthode de recours ?

+ +

Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.

+ +

Dans ce premier exemple, on utilise l'ancienne version de la spécification et la nouvelle afin de pouvoir utiliser les positions d'accroche quel que soit le navigateur tant que celui-ci prend en charge les accroches au défilement.

+ +

L'exemple contient les propriétés {{CSSxRef("scroll-snap-points-y")}} et {{CSSxRef("scroll-snap-destination")}}, dépréciées, afin que les accroches fonctionnent dans Firefox. On ajoute également la propriété {{CSSxRef("scroll-snap-type")}} à deux reprises, une fois avec la valeur y (nouvelle version de la spécification) et une seconde fois pour Firefox qui prend en charge cette propriété mais pas la valeur y.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}

+ +

Si vous testez cet exemple attentivement, vous pourrez voir qu'il fonctionne dans plus de navigateurs, y compris ceux qui couvrent cette période intermédiaire. Les anciennes propriétés de la spécification sont documentées sur MDN sous la section Scroll Snap Points.

+ +

Faut-il utiliser les deux spécifications ?

+ +

Les points d'accroche au défilement font partie de ces fonctionnalités CSS sympathiques où l'absence de prise en charge signifie uniquement qu'on ne récupère la fonctionnalité avancée mais que le reste du site ou de l'application continue de fonctionner. Aussi, vous pouvez tout à fait choisir de traiter Firefox comme un navigateur qui ne prend pas en charge cette fonctionnalité et éviter la complexité associée à la gestion des deux configurations. Une fois que la nouvelle spécification sera implémentée, les utilisateurs en bénificieront au fur et à mesure.

+ +

Si vous souhaitez tester la prise en charge grâce aux requêtes de fonctionnalité, nous vous recommandons de tester {{CSSxRef("scroll-snap-align")}} car cette propriété n'existait pas dans la première spécification. Toutefois, ces propriétés ne devraient causer aucun problème aux navigateurs qui ne les prennent pas en charge car ils les ignoreront simplement.

+ +

Pourquoi existent deux versions ?

+ +

Enfin, on peut se demander pourquoi une telle situation existe aujourd'hui. Ce n'est que la réalité du développement de CSS : les nouvelles fonctionnalités ne peuvent pas exister en pure théorie et en absence d'implémentation de la part des navigateurs. Lors de la phase d'implémentation, les navigateurs peuvent découvrir des problèmes qui n'apparaissent que dans des situations bien concrètes. Dans de tels cas, il faut alors mettre à jour la spécification et on peut alors avoir différentes versions de la spécification et différents navigateurs qui se mettent à jour au fur et à mesure.

diff --git a/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html b/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html new file mode 100644 index 0000000000..3ec397cfde --- /dev/null +++ b/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html @@ -0,0 +1,70 @@ +--- +title: Concepts de bases pour CSS Scroll Snap +slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base +tags: + - CSS + - CSS Scroll Snap + - Guide +translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts +--- +
{{CSSRef}}
+ +

Le module de spécification CSS Scroll Snap fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).

+ +

Principes fondamentaux

+ +

Les propriétés principales définies par la spécification Scroll Snap sont {{CSSxRef("scroll-snap-type")}} et {{CSSxRef("scroll-snap-align")}}. La propriété scroll-snap-type s'utilise sur le conteneur de défilement (scroll container) et établit le type et la direction du défilement.

+ +

La propriété scroll-snap-align doit être utilisée sur les éléments fils afin de définir la position de défilement sur laquelle ils s'accrocheront. L'exemple qui suit illustre des positions d'accroche sur l'axe vertical et scroll-snap-align est utilisée sur l'élément {{HTMLElement("section")}} afin de définir le point où devrait s'arrêter le défilement.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}

+ +

Utiliser scroll-snap-type

+ +

La propriété {{CSSxRef("scroll-snap-type")}} doit connaître la direction selon laquelle s'effectue le défilement et l'accroche. Cette direction peut s'exprimer avec des valeurs physiques : x ou y ou avec des valeurs logiques : block ou inline. On peut également utiliser le mot-clé both afin d'avoir un défilement et des accroches selon les deux axes.

+ +

Cette propriété s'utilise également avec les mots-clés mandatory ou proximity. Le mot-clé mandatory indique au navigateur que le contenu doit s'accrocher à un point donné, quelle que soit la position du défilement. Le mot-clé proximity indique que le contenu peut s'accrocher sur un point mais que ce n'est pas obligatoire.

+ +

La valeur mandatory permettra d'obtenir une expérience cohérente au sens où l'utilisateur saura que le navigateur accrochera le contenu à chaque point. Cela signifie qu'on peut être certain que quelque chose sera en haut de l'écran à la fin du défilement. Toutefois, cela peut entraîner des problèmes lorsqu'un portion du contenu est trop grande et qu'on obtient un scénario où il est impossible de défiler afin de voir une portion donnée du contenu. Ainsi, on utilisera mandatory dans des situations maîtrisées où la taille du contenu sur un écran est connue.

+ +

La valeur proximity déclenchera une accroche lorsque la position du défilement est proche du point d'accroche. C'est le navigateur qui décidera de la distance seuil exacte pour laquelle déclencher l'accroche ou non. Dans l'exemple qui suit, vous pouvez passer de mandatory à proximity afin d'observer l'effet obtenu.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}

+ +

Utiliser scroll-snap-align

+ +

La propriété {{CSSxRef("scroll-snap-align")}} peut être utilisée avec les valeurs start, end ou center. Ces valeurs indiquent l'emplacement où le contenu doit s'accrocher sur le conteneur de défilement. Vous pouvez modifier la valeur scroll-snap-align dans l'exemple interactif qui suit pour voir le résultat obtenu.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}

+ +

Ajuster la position de défilement avec un remplissage

+ +

Si on ne souhaite pas que le contenu s'accroche exactement sur le bord du conteneur de défilement, on pourra utiliser la propriété {{CSSxRef("scroll-padding")}} (ou les propriétés détaillées équivalentes) afin de définir un remplissage (padding) pour décaler la position du contenu.

+ +

Dans l'exemple qui suit, on paramètre scroll-padding à 40 pixels. Lorsqu'on accroche au début de la deuxième et de la troisième section, le défilement s'arrête à 40 pixels du début de la section. Vous pouvez adapter la valeur de scroll-padding afin de voir l'impact sur le décalage obtenu.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}

+ +

Cette propriété s'avère particulièrement utile lorsqu'on a un élément fixe (une barre de navigation par exemple) qui pourrait être chevauchée par du contenu qui défile. En utilisant scroll-padding, on peut réserver un espace pour cet élément fixe. Dans l'exemple suivant, on peut voir le titre <h1> qui reste à l'écran et le contenu qui défile en dessous de ce titre. Sans le remplissage, le titre aurait été chevauché par une partie du contenu lors de l'accroche.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}

+ +

Ajouter des marges sur les éléments fils du défilement

+ +

Une autre méthode permettant d'obtenir un espace entre le bord du conteneur et les éléments fils est d'utiliser la propriété {{CSSxRef("scroll-margin")}} sur l'élément fils. scroll-margin définit principalement le décalage par rapport à la boîte définie. Vous pouvez manipuler cette propriété dans l'exemple interactif suivant :

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}

+ +

La propriété scroll-snap-stop

+ +

La propriété {{CSSxRef("scroll-snap-stop")}} indique au navigateur qu'il devrait arrêter le défilement pour chaque point d'accroche. Pour nos exemples précédents, cela signifie qu'on s'arrêtera nécessairement au début de chaque section. Cette propriété dispose de moins d'implémentations dans les navigateurs.

+ +

Cela peut être utile pour s'assurer que les utilisateurs consultent chaque section sans louper du contenu par inadvertence. En revanche, cela peut rendre le défilement plus lent et ralentir considérablement un utilisateur qui chercherait une section donnée.

+ +
+

Note : La propriété scroll-snap-stop est actuellement mise en question dans la version Candidate Recommendation de la spécification et pourrait être retirée.

+
+ +

Compatibilité des navigateurs

+ +

Les pages de chaque propriété détaillent la compatibilité des différents navigateurs. On notera qu'avant Firefox 68, une ancienne version de la spécification était implémentée. Vous pouvez poursuivre avec le guide suivant pour en savoir plus sur l'écriture de code compatible entre les différents navigateurs qui implémentent différentes versions de la spécification.

diff --git a/files/fr/web/css/css_scroll_snap/index.html b/files/fr/web/css/css_scroll_snap/index.html new file mode 100644 index 0000000000..6e79f674df --- /dev/null +++ b/files/fr/web/css/css_scroll_snap/index.html @@ -0,0 +1,84 @@ +--- +title: CSS Scroll Snap +slug: Web/CSS/CSS_Scroll_Snap +tags: + - CSS + - CSS Scroll Snap + - Reference + - Vue d'ensemble +translation_of: Web/CSS/CSS_Scroll_Snap +--- +
{{CSSRef}}
+ +

CSS Scroll Snap est un module de spécification CSS qui introduit les positions d'accroche lors du défilement. Cela permet de garantir la position sur laquelle on arrive après avoir fait défiler du contenu.

+ +
+

Note : La version précédente ce module, Scroll Snap Points, est dépréciée et est désormais remplacée par CSS Scroll Snap.

+
+ +

Référence

+ +

Propriétés CSS applicables aux conteneurs

+ +
    +
  • {{cssxref("scroll-snap-type")}}
    • +
  • {{cssxref("scroll-snap-stop")}}
    • +
  • {{cssxref("scroll-padding")}}
    • +
  • {{cssxref("scroll-padding-top")}}
    • +
  • {{cssxref("scroll-padding-right")}}
    • +
  • {{cssxref("scroll-padding-bottom")}}
    • +
  • {{cssxref("scroll-padding-left")}}
    • +
  • {{cssxref("scroll-padding-inline")}}
    • +
  • {{cssxref("scroll-padding-inline-start")}}
    • +
  • {{cssxref("scroll-padding-inline-end")}}
    • +
  • {{cssxref("scroll-padding-block")}}
    • +
  • {{cssxref("scroll-padding-block-start")}}
    • +
  • {{cssxref("scroll-padding-block-end")}}
    • +
+ +

Propriétés CSS applicables aux éléments enfants

+ +
    +
  • {{cssxref("scroll-snap-align")}}
    • +
  • {{cssxref("scroll-margin")}}
    • +
  • {{cssxref("scroll-margin-top")}}
    • +
  • {{cssxref("scroll-margin-right")}}
    • +
  • {{cssxref("scroll-margin-bottom")}}
    • +
  • {{cssxref("scroll-margin-left")}}
    • +
  • {{cssxref("scroll-margin-inline")}}
    • +
  • {{cssxref("scroll-margin-inline-start")}}
    • +
  • {{cssxref("scroll-margin-inline-end")}}
    • +
  • {{cssxref("scroll-margin-block")}}
    • +
  • {{cssxref("scroll-margin-block-start")}}
    • +
  • {{cssxref("scroll-margin-block-end")}}
    • +
+ +

Guides

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

Les informations de compatibilité sont présentes sur chacune des pages des propriétés. Voir le guide sur la compatibilité des navigateurs afin de comprendre comment les différentes versions de la spécification sont implémentées.

diff --git a/files/fr/web/css/css_scroll_snap_points/index.html b/files/fr/web/css/css_scroll_snap_points/index.html new file mode 100644 index 0000000000..8d728f0b0c --- /dev/null +++ b/files/fr/web/css/css_scroll_snap_points/index.html @@ -0,0 +1,51 @@ +--- +title: CSS Scroll Snap Points +slug: Web/CSS/CSS_Scroll_Snap_Points +tags: + - Aperçu + - CSS + - CSS Scroll Snap Points + - Déprécié + - Reference +translation_of: Web/CSS/CSS_Scroll_Snap_Points +--- +
{{CSSRef}}{{deprecated_header}}
+ +

CSS Scroll Snap Points (ou points d'accroche CSS) est un module CSS qui introduit les positions d'accroche. Il définit les propriétés qui gèrent les « points d'accroche » utilisés lors du défilement des éléments.

+ +
+

Note : C'est désormais le module de spécification CSS Scroll Snap qui définit ces fonctionnalités.

+
+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("scroll-snap-coordinate")}}
    • +
  • {{cssxref("scroll-snap-destination")}}
    • +
  • {{cssxref("scroll-snap-points-x")}}
    • +
  • {{cssxref("scroll-snap-points-y")}}
    • +
  • {{cssxref("scroll-snap-type")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
diff --git a/files/fr/web/css/css_scrollbars/index.html b/files/fr/web/css/css_scrollbars/index.html new file mode 100644 index 0000000000..ea3116d1e6 --- /dev/null +++ b/files/fr/web/css/css_scrollbars/index.html @@ -0,0 +1,93 @@ +--- +title: CSS Scrollbars +slug: Web/CSS/CSS_Scrollbars +tags: + - Aperçu + - CSS + - css scrollbars +translation_of: Web/CSS/CSS_Scrollbars +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

Le module de spécification CSS Scrollbars standardise la mise en forme des barres de défilement (scrollbar) notamment introduite en 2000 avec Windows IE 5.5.

+ +

Exemples

+ +

Dans l'exemple qui suit, on crée une barre de défilement fine avec une piste verte et un curseur violet.

+ +

CSS

+ +
+
.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-color: rebeccapurple green;
+  scrollbar-width: thin;
+}
+ +

HTML

+ +
<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+
+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("scrollbar-width")}}
    • +
  • {{cssxref("scrollbar-color")}}
    • +
+
+ +

Accessibilité

+ +

Lors du paramétrage des barres de défilement, on s'assurera que le contraste avec les éléments alentour est suffisant et que la surface d'interaction est suffisamment grande pour les personnes qui utilisent une interface tactile.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Scrollbars')}}{{Spec2('CSS Scrollbars')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

scrollbar-width

+ +
{{Compat("css.properties.scrollbar-width")}}
+ +

scrollbar-color

+ +
{{Compat("css.properties.scrollbar-color")}}
+ +

Voir aussi

+ +
    +
  • {{CSSxRef("::-webkit-scrollbar")}}
    • +
  • {{CSSxRef("-ms-overflow-style")}}
    • +
diff --git "a/files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" "b/files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" new file mode 100644 index 0000000000..bf8d674cf3 --- /dev/null +++ "b/files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" @@ -0,0 +1,125 @@ +--- +title: Aperçu des formes CSS +slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS +tags: + - Aperçu + - CSS + - CSS Shapes + - Formes CSS +translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes +--- +
{{CSSRef}}
+ +

La spécification CSS Shapes Level 1 définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.

+ +

Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.

+ +

Il existe différentes façons de créer des formes CSS et nous verrons, dans ces guides, leur fonctionnement et les cas d'utilisation.

+ +

Que définit la spécification ?

+ +

La spécification définit trois nouvelles propriétés :

+ +
    +
  • {{cssxref("shape-outside")}} qui permet de définir des formes simples
    • +
  • {{cssxref("shape-image-threshold")}} qui permet d'indiquer un seuil d'opacité. Si une image est utilisée afin de définir une forme, seuls les fragments de l'image qui sont d'une opacité supérieure ou égale à ce seuil seront utilisés afin de créer la forme. Les autres fragments de l'image sont ignorés.
    • +
  • {{cssxref("shape-margin")}} définit une marge autour d'une forme
    • +
+ +

Définir des formes simples

+ +

La propriété shape-outside permet de définir une forme. Cette propriété peut prendre différentes valeurs dont chacune définit une forme différente. Ces valeurs sont définies par le type de donnée {{cssxref("<basic-shape>")}}. Prenons un exemple simple pour commencer.

+ +

Dans l'exemple qui suit, on a une image qui flotte à gauche. Ensuite, on lui applique shape-outside avec la valeur circle(50%). Grâce à cette règle, le contenu épouse alors une forme circulaire plutôt que le rectangle qui était formé par la boîte de l'image.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

+ +

À l'heure actuelle, la spécification indique qu'un élément doit flotter si on veut lui appliquer <basic-shape>. De cette façon, l'amélioration progressive est rapidement obtenue car si le navigateur ne prend pas en charge les formes CSS, l'utilisateur verra le contenu épouser une forme rectangulaire (comme auparavant). Si le navigateur prend en charge les formes, la disposition visuelle sera améliorée.

+ +

Formes simples (Basic Shapes)

+ +

La valeur circle(50%) est une exemple de forme simple. La spécification fournit quatre valeur de types <basic-shape> :

+ +
    +
  • inset()
    • +
  • circle()
    • +
  • ellipse()
    • +
  • polygon()
    • +
+ +

Avec la valeur inset(), le texte environnant continue d'épouser une forme rectangulaire mais on peut décaler ce rectangle afin de rapprocher le texte de l'objet flottant par exemple.

+ +

Nous avons vu le fonctionnement de circle() dans l'exemple précédent : cette notation fonctionnelle permet de créer une forme circulaire. ellipse() est assez proche et permet de créer une ellipse (qu'on peut voir comme un cercle aplati). Si aucune de ces formes ne vous convient, vous pouvez utiliser polygon() afin de créer un polygone correspondant à une forme complexe.

+ +

Dans le guide sur les formes simples, nous verrons comment créer et exploiter ces formes.

+ +

Boîtes de référence

+ +

Les formes sont créées sur une boîte donnée. Aussi, on peut créer une boîte par rapport à chacune des boîtes du modèle de boîte et utiliser les valeurs :

+ +
    +
  • border-box
    • +
  • padding-box
    • +
  • content-box
    • +
  • margin-box
    • +
+ +

Dans l'exemple qui suit, vous pouvez modifier la valeur border-box afin d'utiliser une autre valeur et observer comment se déplace la forme par rapport à la boîte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}

+ +

Pour en savoir plus, voir le guide sur les formes et les boîtes.

+ +

Générer une forme à partir d'une image

+ +

Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha :  le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que  l'image  soit visible).

+ +

Attention, les images utilisées ainsi doivent être compatibles avec les règles CORS. Se n'est pass le cas, shape-outside se comportera comme si elle avait reçu la valeur none et il n'y aura alors aucune forme.

+ +

Dans l'exemple qui suit, on utilise une image avec une zone complètement transparente et on utilise une image comme valeur d'URL pour shape-outside. La forme ainsi créée utilise la zone opaque de l'image : la forme de la montgolfière.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}

+ +

shape-image-threshold

+ +

La propriété shape-image-threshold permet d'ajuster le seuil de transparence utilisé pour créer une forme à partir d'une image. Si la valeur de shape-image-threshold est 0.0 (la valeur initiale), ce seront les parties totalement transparentes de l'image qui créeront la forme. Si la valeur 1.0, toutes les zones de l'image (y compris celles totalement opaques) seront utilisées pour la forme. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes pour définir la forme.

+ +

Dans l'exemple suivant, on utilise une image qui est un dégradé et qui permet de définir la forme. Vous pouvez modifier la valeur du seuil afin de faire évoluer la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}

+ +

Dans l'article Créer des formes à partir d'images, nous verrons plus en détails le fonctionnement de ces propriétés.

+ +

La propriété shape-margin

+ +

La propriété {{cssxref("shape-margin")}} ajoute une marge à shape-outside. Cela permet d'écarter le contenu de la forme.

+ +

Dans l'exemple qui suit, on a une forme simple sur laquelle on ajoute shape-margin. Vous pouvez modifier la valeur de cette propriété afin de rapprocher ou d'éloigner le texte de la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}

+ +

Utiliser du contenu généré comme objet flottant

+ +

Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS.

+ +

Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élément avec une hauteur et une largeur de 150 pixels. On peut alors ensuite utiliser les formes simples, les boîtes de référence ou le canal alpha d'une image afin de créer une forme qu'épouserait le texte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}

+ +

Relations avec clip-path

+ +

Les valeurs utilisées pour les formes simples et pour les boîtes de référence sont les mêmes que celles utilisées pour la propriété {{cssxref("clip-path")}}. Ainsi, si on souhaite créer une forme à partir d'une image et rogner une partie de cette image, on pourra utiliser les mêmes valeurs.

+ +

Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec  shape-outside: ellipse(40% 50%); puis utilisé clip-path: ellipse(40% 50%); afin de rogner l'image pour suivre la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}

+ +

Outils de développement pour les formes CSS

+ +

Avec la prise en charge des formes CSS, Firefox sort également une nouvelle fonctionnalités dans les outils de développement : l'éditeur de chemin pour les formes (Shape Path Editor). Cet outil permet d'inspecter les formes présentes sur la page et de modifier leurs valeurs à la volée. Si votre polygone n'a pas l'aspect escompté, vous pouvez le modifier via l'éditeur puis recopier la nouvelle valeur dans votre fichier CSS.

+ +

L'éditeur de chemin pour les formes sera activé par défaut avec Firefox 60 pour les formes générées grâce à clip-path. Vous pouvez également l'utiliser afin d'éditer les formes générées grâce à shape-outside à condition d'avoir activé la préférence layout.css.shape-outside.enabled.

+ +

Les futures fonctionnalités

+ +

Dans sa version initiale, le module de spécification pour les formes contenait une propriété shape-inside afin de créer des formes à l'intérieur d'un élément. Cette propriété, ainsi que la possibilité de créer des formes sur des éléments non-flottants, a été repoussée à la spécification de niveau 2. La propriété shape-inside était initialement décrite dans la spécification de niveau 1 et vous pouvez donc trouver certains tutoriels qui détaillent ces deux propriétés.

diff --git "a/files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" "b/files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" new file mode 100644 index 0000000000..5ed5b06bfa --- /dev/null +++ "b/files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" @@ -0,0 +1,75 @@ +--- +title: Créer des formes à partir des boîtes +slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes +tags: + - Boîtes + - CSS + - CSS Shapes + - Formes CSS + - Guide +translation_of: Web/CSS/CSS_Shapes/From_box_values +--- +
{{CSSRef}}
+ +

Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.

+ +

Les valeurs de boîte qui sont autorisées pour les formes sont :

+ +
    +
  • content-box
    • +
  • padding-box
    • +
  • border-box
    • +
  • margin-box
    • +
+ +

Les valeurs border-radius sont également prises en charge et on peut donc avoir une forme qui possède une bordure arrondie.

+ +

Le modèle de boîte CSS

+ +

Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (content), du remplissage (padding), une bordure (border) ainsi qu'une marge (margin).

+ +

The Box Model consists of the margin, border, padding and content boxes.

+ +

En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.

+ +

margin-box

+ +

La valeur margin-box correspond à la forme de la boîte de marge et suit le bord extérieur de la marge en prenant en compte les coins arrondis de la forme si {{cssxref("border-radius")}} a été utilisé sur l'élément.

+ +

Dans l'exemple suivant, on a un élément circulaire mauve qui est un élément {{htmlelement("div")}} avec une hauteur, une largeur et une couleur d'arrière-plan. La propriété border-radius a été utilisée afin de créer le cercle avec border-radius: 50%. L'élément ayant une marge, on peut voir le contenu évoluer autour de cette forme circulaire en prenant la marge en compte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}

+ +

border-box

+ +

La valeur border-box correspond à la forme définie par le bord extérieur de la bordure. La forme épouse la bordure et les éventuels arrondis qui lui sont appliqués. Un élément possède toujours une bordure même si {{cssxref("border")}} n'a pas explicitement été utilisé. Si c'est le cas, border-box sera équivalent à padding-box et la forme suivra le bord extérieur de la boîte de remplissage.

+ +

Avec l'exemple qui suit, on peut voir que le texte suit désormais les lignes créées par la bordure. Vous pouvez modifier la taille de cette bordure pour voir le déplacement du contenu autour.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}

+ +

padding-box

+ +

La valeur padding-box correspond à la forme définie par le bord extérieur de la boîte de remplissage (padding). La forme suit les règles d'arrondies appliquées à la bordure. Si aucun remplissage n'est appliqué, padding-box sera équivalent à content-box.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}

+ +

content-box

+ +

La valeur content-box correspond à la forme définie par le bord extérieur de la boîte de contenu. Chaque coin possède un rayon de courbure qui est le maximum entre 0 et border-radius − border-width − padding. Cela signifie qu'il est impossible d'avoir une valeur négative pour cette boîte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}

+ +
+

Note : Pour en savoir plus sur le modèle de boîte CSS, voir cet article.

+
+ +

Quand utiliser les valeurs de boîte

+ +

Les valeurs correspondant aux boîtes permettent de créer des formes simplement. Toutefois, cela ne fonctionne que pour des formes simples, définies en partie avec la propriété border-radius. Les exemples ci-avant montrent un tel cas d'utilisation (on crée une forme circulaire grâce à cette propriété).

+ +

Malgré cela, il est possible de créer des effets intéressants en n'utilisant que cette technique. Pour ce dernier exemple, on a deux éléments qui flottent à droite et à gauche et on leur affecte une valeur border-radius de 100% dans la direction la plus proche du texte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}

+ +

Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de type <basic-shape> (les formes simples) ou définir une forme à partir d'une image, tel que nous le verrons dans les autres guides de cette section.

diff --git a/files/fr/web/css/css_shapes/formes_simples/index.html b/files/fr/web/css/css_shapes/formes_simples/index.html new file mode 100644 index 0000000000..e1c594bce0 --- /dev/null +++ b/files/fr/web/css/css_shapes/formes_simples/index.html @@ -0,0 +1,149 @@ +--- +title: Formes simples +slug: Web/CSS/CSS_Shapes/Formes_simples +tags: + - CSS + - CSS Shapes + - Guide +translation_of: Web/CSS/CSS_Shapes/Basic_Shapes +--- +
{{CSSRef}}
+ +

Les formes CSS peuvent être définies grâce au type {{cssxref("<basic-shape>")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.

+ +

Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :

+ +
    +
  • Le type de donnée <basic-shape>
    • +
  • La boîte de référence
    • +
+ +

Le type <basic-shape>

+ +

Le type de donnée <basic-shape> fournit les valeurs que nous utiliserons ici pour toutes les formes simples. Ce type utilise une notation fonctionnelle : le type de forme souhaité est suivi de parenthèses au sein desquelles on ajoute différentes valeurs pour décrire la forme finale.

+ +

Les arguments de ces fonctions varient selon la forme qu'on veut créer et nous allons voir ces arguments dans les exemples ci-après.

+ +

La boîte de référence

+ +

La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte dans le guide sur la création de formes à partir des boîtes où nous avons directement utilisé la boîte de référence afin de créer une forme.

+ +

L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec shape-outside: circle(50%), l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du modèle de boîtes.

+ +

+ +

La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .

+ +
.shape {
+  shape-outside: circle(50%) margin-box;
+}
+
+ +

On peut changer ce paramètre si la forme utilise une autre boîte du modèle de boîte. Par exemple, si on souhaite utilise la boîte de bordure, on pourra écrire :

+ +
.shape {
+  shape-outside: circle(50%) border-box;
+}
+
+ +

On notera que la boîte margin-box pourra rogner la forme et que les formes créées relativement aux autres formes et qui dépassent la boîte de marge seront rognées pour être inscrites dans la boîte de marge. Nous verrons ce comportement dans les exemples suivants.

+ +

Pour une description des boîtes et de leurs relations avec les formes CSS, voir Comprendre les liens entre les boîtes de référence et les formes CSS.

+ +

inset()

+ +

Le type inset() définit un rectangle. Cela peut sembler peu utile car c'est déjà la forme d'une boîte normale. Toutefois, avec inset(), on peut inclure des décalages et déplacer la forme autour de la boîte de référence.

+ +

inset() prend comme arguments quatre valeurs pour les quatres côtés : haut, droit, bas, gauche puis une dernière pour border-radius. Le fragment de code CSS suivant permet de créér une forme rectangulaire décalée depuis la boîte de référence (20 pixels du haut et du bas, 10 pixels de la gauche et de la droite) et pour laquelle border-radius vaut 10 pixels.

+ +
.shape {
+  float: left;
+  shape-outside: inset(20px 10px 20px 10px round 10px);
+}
+
+ +

Utilisant les mêmes règles vues pour la version raccourcie de la marge (cf. {{cssxref("margin")}}), on peut indiquer plusieurs décalages de façon synthétique :

+ +
    +
  • Lorsqu'une seule valeur est fournie, elle est utilisée pour tous les côtés.
    • +
  • Lorsque deux valeurs sont fournies, la première correspond aux décalages haut et bas et la deuxième correspond aux décalages gauche et droit
    • +
  • Lorsque trois valeurs sont fournies, la première correspond au décalage haut, la deuxième aux décalages droit et gauche et la dernière au décalage bas.
    • +
  • Avec quatre valeurs, les décalages suivent l'ordre trigonométrique : haut, droit, bas, gauche.
    • +
+ +

Ainsi, la règle écrite ci-avant peut-être formulée :

+ +
.shape {
+  float: left;
+  shape-outside: inset(20px 10px round 10px);
+}
+ +

Dans l'exemple qui suit, on a une forme inset() qu'on décale au-delà de l'élément flottant. Vous pouvez éditer l'exemple afin d'observer l'effet des différentes valeurs de décalages.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}

+ +

Vous pouvez également ajouter une valeur pour la boîte de référence. Dans l'exemple suivant, vous pouvez modifier margin-box afin d'utiliser border-box, padding-box ou content-box pour observer la façon dont la boîte de référence modifie l'origine des coordonnées utilisées pour les décalages.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}

+ +

circle()

+ +

La valeur circle() peut être utilisée pour shape-outside et prend jusqu'à deux argument. Le premier de ces arguments correspond à shape-radius.

+ +

La fonction circle() et la fonction ellipse(), pour shape-outside, peuvent utiliser cet argument <shape-radius>. Ce dernier peut être une longueur ou un pourcentage mais également l'un des mots-clés closest-side ou farthest-side.

+ +

Le mot-clé closest-side utilise la longueur depuis le centre de la forme jusqu'au côté le plus proche de la boîte de référence. Pour les cercles, c'est le côté le plus proche dans n'importe quelle dimension. Pour les ellipses, c'est le côté le plus proche selon l'axe du rayon de l'ellipse.

+ +

Le mot-clé farthest-side utilise la longueur depuis le centre de la forme jusqu'au côté le plus éloigné de la boîte de référence. Pour les cercles, c'est le côté le plus éloigné, quelle que soit la dimension. Pour les ellipses, c'est le côté le plus éloigné selon l'axe du rayon.

+ +

Le deuxième argument est une position dont la valeur par défaut est center. Toutefois, n'importe quelle position valide peut être utilisée afin d'indiquer le centre du cercle.

+ +

Pour résumer, le cercle accepte un rayon qui peut être une longueur, un pourcentage ou le mot-clé closest-side ou farthest-side, optionnellement suivi par le mot-clé at suivi par une position.

+ +

Dans l'exemple qui suit, on crée un cercle sur un objet de 100 pixels de large avec une marge de 20 pixels. On a donc une largeur totale de la boîte de référence de 140 pixels. On indique une valeur de 50% pour shape-radius, ce qui crée donc un cercle de 70 pixels de rayon avec une position fixée à 30%.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}

+ +

Dans cet exemple, vous pouvez augmenter ou réduire le rayon pour adapter la taille du cercle ou déplacer le cercle via la position. Vous pouvez aussi modifier la boîte de référence.

+ +

Ajoutons un autre exemple, en utilisant les mots-clés top left pour indiquer la position, on peut créer une forme en quart de cercle pour le coin supérieur gauche de la page. L'exemple qui suit illustre comment créer un quart de cercle avec du texte qui est écrit autour.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}

+ +

Limitation à la boîte de marge

+ +

Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.

+ +
img {
+  float: left;
+  shape-outside: circle(50% at 60%);
+}
+
+ +

The circle shape is clipped by the margin box

+ +

ellipse()

+ +

Une ellipse peut être vue comme un cercle aplati. De ce point de vu ellipse() fonctionne de façon analogue à circle() mais il est nécessaire d'indiquer deux rayons : un rayon horizontal x et un rayon vertical y (dans cet ordre).

+ +

Ces rayons peuvent être suivis par une position qui permet, comme avec circle(), de déplacer le centre de l'ellipse. Dans l'exemple qui suit, on dessine une ellipse avec un rayon horizontal de 40%, un rayon vertical de 50% et une position à gauche. Cela signifie que le centre de l'ellipse sera situé sur le bord gauche et on aura donc une demi-ellipse autour de laquelle s'écoulera le texte. N'hésitez pas à modifier ces valeurs pour voir l'impact sur l'exemple.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}

+ +

Les mots-clés closest-side et farthest-side permettent de créer rapidmeent une ellipse en fonction de la taille de la boîte de référence de l'élément flottant.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}

+ +

polygon()

+ +

La forme simple qui permet de créer une grande variété de formes est polygon(). Cette forme prend comme arguments trois ou plusieurs paires de valeurs qui correspondent aux coordonnées dessinées dans la boîte de référence. Attention, les coordonnées doivent au moins former un triangle.

+ +

Dans l'exemple qui suit, on crée une forme avec polygon() pour que le texte s'écoule autour. N'hésitez pas à modifier les valeurs pour visualiser les impacts.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}

+ +

L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.

+ +

The polygon basic shape, highlighted with the Shapes Inspector.

+ +

Une autre ressource qui peut s'avérer utile sur ces sujets est Clippy : cet outil permet de créer des formes pour clip-path. Or, les formes utilisées pour clip-path sont les mêmes que pour les formes simples.

diff --git "a/files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" "b/files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" new file mode 100644 index 0000000000..e85db873c1 --- /dev/null +++ "b/files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" @@ -0,0 +1,64 @@ +--- +title: Générer des formes avec des images +slug: Web/CSS/CSS_Shapes/Générer_formes_images +tags: + - CSS + - Formes CSS + - Guide +translation_of: Web/CSS/CSS_Shapes/Shapes_From_Images +--- +
{{CSSRef}}
+ +

Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.

+ +

Générer une forme simple avec une image

+ +

Pour utiliser une image afin de créer une forme, il est nécessaire que cette image dispose d'un canal alpha, c'est-à-dire une zone qui n'est pas complètement opaque. La propriété {{cssxref("shape-image-threshold")}} est utilisée afin de fournir un seuil d'opacité. Les pixels qui sont plus opaques que cette valeur seront alors utilisés pour calculer la zone de la forme.

+ +

Dans l'exemple suivant, on utilise un image avec une étoile rouge complètement opaque entourée d'une zone complètement transparente. On fournit le chemin de l'image à {{cssxref("shape-outside")}} et le contenu environnant épouse alors la forme de l'image.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}

+ +

On peut utiliser {{cssxref("shape-margin")}} afin d'écarter le texte de la forme avec une certaine marge.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}

+ +

Origines et compatibilité CORS

+ +

Attention, les images utilisées pour créer les formes doivent être compatibles pour le CORS. Une image hébergée sur le même domaine que le site devrait fonctionner. En revanche, si les images sont hébergées sur un domaine différent (celui d'un CDN par exemple), il faudra s'assurer que les bons en-têtes HTTP sont fournis afin de construire des images. À cause de ce prérequis, si vous testez un site en local avec vos fichiers, les formes CSS à partir d'images ne fonctionneront pas si vous ne mettez pas en place de serveur web local.

+ +

Ai-je à faire à un problème de CORS ?

+ +

Les outils de développement aident à déterminer si le problème vient du CORS. Dans Chrome, les problèmes CORS seront écrits dans la console. Dans Firefox, si vous inspectez la propriété en question, vous verrez une alerte indiquant que l'image ne peut pas être chargée. Dans ce cas, il est probable que l'image ne puisse être utilisée comme forme à cause du CORS.

+ +

Utiliser un seuil

+ +

La propriété {{cssxref("shape-image-threshold")}} permet de créer des formes à partir d'une image en utilisant des zones qui ne sont pas totalement transparentes. Si shape-image-threshold vaut 0.0 (qui correspond à la valeur initiale), ce ne sont que les zones totalement transparentes qui seront utilisées pour fabriquer la forme. Si la valeur 1.0 est utilisée, le seuil correspondra aux zones totalement opaques et toute l'image seront alors utilisée. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes afin de construire la forme.

+ +

Dans l'exemple qui suit, on utilise une image semblable à celle du premier exemple. Toutefois, pour cette image, l'arrière-plan de l'étoile n'est pas totalement transparent : il a une opacité de 20% (créée avec un éditeur graphique). Si on utilise shape-image-threshold avec la valeur 0.3, on aura donc la forme de l'étoile mais si on utilise une valeur inférieure à 0.2, on aura une forme rectangulaire.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}

+ +

Utiliser des images avec du contenu généré

+ +

Dans l'exemple ci-avant, on utilise une image pour {{cssxref("shape-outside")}} et on utilise également cette image dans le document. La plupart des exemples et démos utilisent ce procéder car cela aide à illustrer la forme suivie par le texte environnant. Cependant, il faut comprendre que la propriété shape-outside ne repose pas sur l'image utilisée dans le document et qu'il n'est pas nécessaire d'afficher une image dans le document afin de construire une forme à partir d'une image.

+ +

Il est nécessaire d'avoir un contenu flottant pour créer une forme mais ce contenu peut tout à fait être généré grâce à la feuille de style. Dans l'exemple qui suit, on utilise un contenu généré qui est placé dans une disposition flottante, avec une image d'étoile pour créer la forme mais cette image n'est pas affichée sur la page.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}

+ +

Créer des formes avec un dégradé

+ +

En CSS, un dégradé est une image. On peut donc utiliser un dégradé afin de générer une forme.

+ +

Dans le prochain exemple, on utilise un contenu généré flottant dont l'image d'arrière-plan est un dégradé linéaire. On utilise la même valeur pour {{cssxref("shape-outside")}}. Le dégradé linéaire évolue du mauve vers le transparent. En modifiant la valeur de {{cssxref("shape-image-threshold")}}, on peut donc sélectionner le niveau de transparence nécessaire à la création de la forme. N'hésitez pas à modifier la valeur du seuil dans l'exemple suivant afin de voir le déplacement du contour en fonction du niveau de dégradé.

+ +

Vous pouvez également essayer de complètement retirer l'image d'arrière-plan afin d'utiliser uniquement le dégradé afin de créer la forme et ne pas l'afficher sur l'image.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}

+ +

Dans l'exemple qui suit, on utilise un dégradé radial avec une ellipse et on utilise les zones transparentes du dégradé afin de créer la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}

+ +

Vous pouvez éditer ces exemples interactifs afin de voir l'évolution de la forme en fonction des modifications.

diff --git a/files/fr/web/css/css_shapes/index.html b/files/fr/web/css/css_shapes/index.html new file mode 100644 index 0000000000..485385aa10 --- /dev/null +++ b/files/fr/web/css/css_shapes/index.html @@ -0,0 +1,80 @@ +--- +title: CSS Shapes +slug: Web/CSS/CSS_Shapes +tags: + - Aperçu + - CSS + - CSS Shapes + - Reference +translation_of: Web/CSS/CSS_Shapes +--- +
{{CSSRef}}
+ +

CSS Shapes est un module de spécification CSS qui décrit les formes géométriques. Selon le niveau 1 de cette spécification, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.

+ +

Exemple simple

+ +

Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété shape-outside qui lui est appliquée vaut circle(50%). Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("shape-image-threshold")}}
    • +
  • {{cssxref("shape-margin")}}
    • +
  • {{cssxref("shape-outside")}}
    • +
+
+ +

Types de donnée

+ +
+
    +
  • {{cssxref("<basic-shape>")}}
    • +
+
+ +

Guides

+ + + +

Ressources externes

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Shapes")}}{{Spec2("CSS Shapes")}}Définition initiale.
diff --git a/files/fr/web/css/css_table/index.html b/files/fr/web/css/css_table/index.html new file mode 100644 index 0000000000..928231d528 --- /dev/null +++ b/files/fr/web/css/css_table/index.html @@ -0,0 +1,46 @@ +--- +title: CSS Table +slug: Web/CSS/CSS_Table +tags: + - Aperçu + - CSS + - Reference +translation_of: Web/CSS/CSS_Table +--- +
{{CSSRef}}
+ +

CSS Table (ou module des tableaux CSS) est un module CSS qui définit comment disposer les données de tableaux.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-spacing")}}
    • +
  • {{cssxref("caption-side")}}
    • +
  • {{cssxref("empty-cells")}}
    • +
  • {{cssxref("table-layout")}}
    • +
  • {{cssxref("vertical-align")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS2.1", "tables.html")}}{{Spec2("CSS2.1")}}Définition initiale.
diff --git a/files/fr/web/css/css_text/index.html b/files/fr/web/css/css_text/index.html new file mode 100644 index 0000000000..91ca768d97 --- /dev/null +++ b/files/fr/web/css/css_text/index.html @@ -0,0 +1,71 @@ +--- +title: CSS Text +slug: Web/CSS/CSS_Text +tags: + - Aperçu + - CSS + - CSS Text + - Reference +translation_of: Web/CSS/CSS_Text +--- +
{{CSSRef}}
+ +

CSS Text (ou module texte de CSS) est un module CSS qui définit comment effectuer des manipulations de texte, comme les coupures de mots, la justification et l'alignement, la gestion des espaces et les transformations de texte.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("hanging-punctuation")}}
    • +
  • {{cssxref("hyphens")}}
    • +
  • {{cssxref("letter-spacing")}}
    • +
  • {{cssxref("line-break")}}
    • +
  • {{cssxref("overflow-wrap")}}
    • +
  • {{cssxref("tab-size")}}
    • +
  • {{cssxref("text-align")}}
    • +
  • {{cssxref("text-align-last")}}
    • +
  • {{cssxref("text-indent")}}
    • +
  • {{cssxref("text-justify")}}
    • +
  • {{cssxref("text-size-adjust")}}
    • +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("white-space")}}
    • +
  • {{cssxref("word-break")}}
    • +
  • {{cssxref("word-spacing")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}Actualise certaines propriétés pour être indépendant de la direction du texte.
{{SpecName('CSS3 Text')}}{{Spec2('CSS3 Text')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
diff --git a/files/fr/web/css/css_text_decoration/index.html b/files/fr/web/css/css_text_decoration/index.html new file mode 100644 index 0000000000..885c8cdd54 --- /dev/null +++ b/files/fr/web/css/css_text_decoration/index.html @@ -0,0 +1,66 @@ +--- +title: CSS Text Decoration +slug: Web/CSS/CSS_Text_Decoration +tags: + - Aperçu + - CSS + - Reference +translation_of: Web/CSS/CSS_Text_Decoration +--- +
{{CSSRef}}
+ +

CSS Text Decoration (ou module des décorations textuelles CSS) est un module CSS qui définit les caractéristiques relatives à la décoration du texte, comme le soulignage, les ombres et les marques d'emphase.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("letter-spacing")}}
    • +
  • {{cssxref("text-align")}}
    • +
  • {{cssxref("text-decoration")}}
    • +
  • {{cssxref("text-decoration-color")}}
    • +
  • {{cssxref("text-decoration-line")}}
    • +
  • {{cssxref("text-decoration-style")}}
    • +
  • {{cssxref("text-emphasis")}}
    • +
  • {{cssxref("text-emphasis-color")}}
    • +
  • {{cssxref("text-emphasis-position")}}
    • +
  • {{cssxref("text-emphasis-style")}}
    • +
  • {{cssxref("text-indent")}}
    • +
  • {{cssxref("text-rendering")}}
    • +
  • {{cssxref("text-shadow")}}
    • +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("white-space")}}
    • +
  • {{cssxref("word-spacing")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text Decoration')}}{{Spec2('CSS3 Text Decoration')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
diff --git a/files/fr/web/css/css_transforms/index.html b/files/fr/web/css/css_transforms/index.html new file mode 100644 index 0000000000..66190eedac --- /dev/null +++ b/files/fr/web/css/css_transforms/index.html @@ -0,0 +1,62 @@ +--- +title: CSS Transforms +slug: Web/CSS/CSS_Transforms +tags: + - Aperçu + - CSS + - CSS Transforms + - Reference +translation_of: Web/CSS/CSS_Transforms +--- +
{{CSSRef}}
+ +

Le module CSS Transforms (ou module des transformations CSS) est un module de la spécification CSS qui définit comment les éléments mis en forme avec CSS peuvent être transformés dans un espace à deux ou à trois dimensions.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("backface-visibility")}}
    • +
  • {{cssxref("perspective")}}
    • +
  • {{cssxref("perspective-origin")}}
    • +
  • {{cssxref("rotate")}}
    • +
  • {{cssxref("scale")}}
    • +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("transform-box")}}
    • +
  • {{cssxref("transform-origin")}}
    • +
  • {{cssxref("transform-style")}}
    • +
  • {{cssxref("translate")}}
    • +
+
+ +

Types de donnée

+ +

{{cssxref("<transform-function>")}}

+ +

Guides

+ +
+
Utiliser les transformations CSS
+
Un tutoriel pas-à-pas pour manipuler des transformations sur des éléments mis en forme avec CSS.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transforms')}}{{Spec2('CSS3 Transforms')}}Définition initiale.
diff --git a/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html b/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html new file mode 100644 index 0000000000..c33a7e3ac9 --- /dev/null +++ b/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html @@ -0,0 +1,83 @@ +--- +title: Utilisation des transformations CSS +slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS +tags: + - 3D + - Avancé + - CSS + - Guide + - Mise à l'échelle + - Scale + - Transformations CSS + - perspective + - rotation +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +
{{CSSRef}}
+ +

En modifiant l'espace des coordonnées, les transformations CSS permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.

+ +
+

Attention ! Seuls les éléments positionnés selon le modèle de boîtes peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec display: block est positionné selon le modèle de boîtes.

+
+ +

Propriétés des transformations CSS

+ +

Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin")}}.

+ +
+
{{cssxref("transform-origin")}}
+
Spécifie la position de l'origine. Par défaut, celle-ci est au centre de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.
+
{{cssxref("transform")}}
+
Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requis par l'opération de composition. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche.
+
+ +

Exemples

+ +

Voici une version originale du logo MDN :

+ +

MDN Logo

+ +

Rotation

+ +

Ici, on le tourne de 90 degrés depuis le coin inférieur gauche :

+ +
<img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

{{EmbedLiveSample('Rotation','auto',240)}}

+ +

Distorsion et translation

+ +

Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses :

+ +
<img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

{{EmbedLiveSample('Distorsion_et_translation')}}

+ +

Propriétés CSS spécifiques à la 3D

+ +

Réaliser des transformations CSS dans l'espace est un petit peu plus complexe. Il faut d'abord définir l'espace 3D en lui donnant une perspective, puis il faut configurer le comportement des éléments 2D dans cet espace.

+ +

Définir une perspective

+ +

Le premier élément à définir est la perspective. La perspective est ce qui donne l'impression de troisième dimension. Plus les éléments sont loin de l'observateur, plus ils seront petits.

+ +

{{page("/fr/docs/Web/CSS/perspective", "Trois cubes", 0, 0, 3)}}

+ +

Le deuxième élément à définir est la position de l'observateur grâce à la propriété {{ cssxref("perspective-origin") }}. Par défaut, la perspective est centrée sur l'observateur.

+ +

{{page("/fr/docs/Web/CSS/perspective-origin", "Cubes avec des valeurs communes pour perspective-origin", 0, 0, 3)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_transitions/index.html b/files/fr/web/css/css_transitions/index.html new file mode 100644 index 0000000000..5135e7a632 --- /dev/null +++ b/files/fr/web/css/css_transitions/index.html @@ -0,0 +1,59 @@ +--- +title: Transitions CSS +slug: Web/CSS/CSS_Transitions +tags: + - Aperçu + - CSS + - CSS Transitions + - Reference +translation_of: Web/CSS/CSS_Transitions +--- +
{{CSSRef}}
+ +

Les transitions CSS permettent de créer des transitions harmonieuses entre les valeurs des propriétés CSS concernées. Elles permettent aussi de définir leur évolution (accélération/décélération), via les fonctions de minutage.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("transition")}}
    • +
  • {{cssxref("transition-delay")}}
    • +
  • {{cssxref("transition-duration")}}
    • +
  • {{cssxref("transition-property")}}
    • +
  • {{cssxref("transition-timing-function")}}
    • +
+
+ +

Guides

+ +
+
Utiliser les transitions CSS
+
Cet article est un tutoriel expliquant, étape par étape, comment créer une transition CSS. Il décrit chaque propriété CSS utilisée dans le cadre de ces transitions et comment elles interagissent.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('CSS3 Transitions')}}{{Spec2('CSS3 Transitions')}}Définition initiale.
+ +

Voir aussi

+ +
    +
  • Apparentées aux transitions CSS, les animations CSS peuvent déclencher des animations indépendamment du changement des valeurs spécifiées.
    • +
diff --git a/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html b/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html new file mode 100644 index 0000000000..bbcdcb51e2 --- /dev/null +++ b/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html @@ -0,0 +1,1094 @@ +--- +title: Utiliser les transitions CSS +slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS +tags: + - Avancé + - CSS + - Guide + - Transitions +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +
{{CSSref}}
+ +

Les transitions CSS permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l'étaler sur une certaine période. Ainsi, si on souhaite passer un élément de blanc à noir, on pourra utiliser les transitions CSS afin que cette modification soit effectuée progressivement, selon une courbe d'accélération donnée.

+ +

Les animations qui utilisent des transitions entre deux états sont souvent appelées transitions implicites car l'état initial et l'état final sont définis implicitement par le navigateur.

+ +

A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

+ +

Les transitions CSS vous permettent de choisir :

+ +
    +
  • les propriétés à animer en les listant explicitement
    • +
  • le début de l'animation
    • +
  • la durée de l'animation
    • +
  • la façon dont la transition s'exécutera
    • +
+ +

Quelles sont les propriétés CSS qui peuvent être animées ?

+ +

On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et la liste des propriétés concernées est limitée.

+ +

Note : La gestion de la valeur auto représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec auto.

+ +

Note : Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via .appendChild() ou en modiant display: none;. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer window.setTimeout() pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.

+ +

Les propriétés CSS relatives aux transitions

+ +

Les transitions CSS sont généralement contrôlées grâce à la propriété raccourcie {{cssxref("transition")}}. Les différents composants d'une transition CSS peuvent être décrits dans le détail grâce aux propriétés détaillées suivantes :

+ +
+

Note : Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.

+
+ +
+
{{cssxref("transition-property")}}
+
Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées.
+
{{cssxref("transition-duration")}}
+
Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacuune des propriétés. +
+
+

transition-duration: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_0_5s", 275, 150)}}
+
+ +
+

transition-duration: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_1s",275,150)}}
+
+ +
+

transition-duration: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_2s",275,150)}}
+
+ +
+

transition-duration: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_4s",275,150)}}
+
+
+
+
{{cssxref("transition-timing-function")}}
+
Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des fonctions de temporisation. +
+
+

transition-timing-function: ease

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_ease",275,150)}}
+
+ +
+

transition-timing-function: linear

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_linear",275,150)}}
+
+ +
+

transition-timing-function: step-end

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepend",275,150)}}
+
+ +
+

transition-timing-function: steps(4, end)

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_step4end",275,150)}}
+
+
+
+
{{cssxref("transition-delay")}}
+
Cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition. +
+
+

transition-delay: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_0_5s",275,150)}}
+
+ +
+

transition-delay: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_1s",275,150)}}
+
+ +
+

transition-delay: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_2s",275,150)}}
+
+ +
+

transition-delay: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_4s",275,150)}}
+
+
+
+
+ +

La syntaxe de la propriété raccourcie {{cssxref("transition")}} est :

+ +
div {
+  transition: <property> <duration> <timing-function> <delay>;
+}
+ +

Exemples

+ +

Un exemple simple

+ +

Avec cette feuille de style, on opère une transition CSS sur la taille de police de quatre secondes après deux secondes écoulées lorsque l'utilisateur passe la souris sur l'élément :

+ +
#delay {
+  font-size: 14px;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+}
+
+#delay:hover {
+  font-size: 36px;
+}
+ +

Appliquer une transition sur plusieurs propriétés

+ +

CSS

+ +
.box {
+  border-style: solid;
+  border-width: 1px;
+  display: block;
+  width: 100px;
+  height: 100px;
+  background-color: #0000FF;
+  transition: width 2s, height 2s, background-color 2s, transform 2s;
+}
+
+.box:hover {
+  background-color: #FFCCCC;
+  width: 200px;
+  height: 200px;
+  transform: rotate(180deg);
+}
+
+ +

HTML

+ +
<p>Cette boîte utilisera des transitions pour width, height, background-color, transform.
+   Survolez cette boîte pour voir l'effet.</p>
+<div class="box"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Appliquer_une_transition_sur_plusieurs_propriétés', 600, 300)}}

+ +

Le rôle de la taille des listes de valeurs

+ +

Si la liste des valeurs pour une propriété est plus courte qu'une autre, les valeurs de la liste la plus courte seront répétées pour que la longueur réelle corresponde. Ainsi :

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+
+ +

Sera équivalent à :

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}
+ +

De même, si la liste est trop longue par rapport à {{cssxref("transition-property")}}, elle sera tronquée. Ainsi,

+ +
div {
+ transition-property: opacity, left;
+ transition-duration: 3s, 5s, 2s, 1s;
+}
+ +

Sera équivalent à :

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}
+ +

Utiliser les transitions pour accentuer les éléments pour un menu

+ +

On utilise parfois CSS pour mettre en avant les éléments d'un menu lorsque l'utilisateur les survole avec sa souris. On peut facilement utiliser les transitions CSS pour améliorer l'effet obtenu.

+ +

Tout d'abord, on définit le menu en HTML :

+ +
<nav>
+  <a href="#">Accueil</a>
+  <a href="#">À propos</a>
+  <a href="#">Contact</a>
+  <a href="#">Liens</a>
+</nav>
+
+ +

On construit le CSS pour définir l'apparence du menu :

+ +
a {
+  color: #fff;
+  background-color: #333;
+  transition: all 1s ease-out;
+}
+
+a:hover,
+a:focus {
+  color: #333;
+  background-color: #fff;
+}
+ + + +

Ainsi, lorsque la souris survole l'élément, la couleur du texte et de l'arrière-plan change.

+ +

{{EmbedLiveSample("Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu","300","300")}}

+ +

Exemples avec JavaScript

+ +

Utiliser les transitions CSS pour lisser les transformations avec JavaScript

+ +

Les transitions permettent de lisser les opérations effectuées avec JavaScript. Par exemple :

+ +
<p>Click anywhere to move the ball</p>
+<div id="foo"></div>
+
+ +

Avec JavaScript on peut ajouter un effet de mouvement sur la balle :

+ +
var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
+    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
+},false);
+
+ +

Avec CSS, il suffit d'ajouter une transition à l'élément et chaque modification sera appliquée de façon régulière :

+ +
p {
+  padding-left: 60px;
+}
+
+#foo {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  background: #c00;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 1s;
+}
+
+ +

{{JSFiddleEmbed("https://jsfiddle.net/9h261pzo/291/")}}

+ +

Détecter le début et la fin d'une transition

+ +

L'évènement {{event("transitionend")}} est déclenché lorsqu'une transition est terminée. C'est un objet {{domxref("TransitionEvent")}} qui possède deux propriétés supplémentaires qu'un {{domxref("Event")}} :

+ +
+
propertyName
+
Une chaîne de caractères qui indique le nom de la propriété CSS pour laquelle la transition est terminée.
+
elapsedTime
+
Un nombre flottant qui indique le nombre de secondes durant lesquelles la transition s'est déroulée. Cette valeur n'est pas modifiée par la valeur de {{cssxref("transition-delay")}}.
+
+ +

Comme pour les différents évènements, on pourra utiliser {{domxref("eventtarget.addEventListener()")}}) pour « écouter » cet événement :

+ +
el.addEventListener("transitionend", updateTransition, true);
+
+ +

Pour détecter le début d'une transition, on pourra utiliser l'évènement {{event("transitionrun")}} qui est déclenché avant tout retardement et l'évènement {{event("transitionstart")}} qui est déclenché après tout retardement :

+ +
el.addEventListener("transitionrun", signalStart, true);
+el.addEventListener("transitionstart", signalStart, true);
+ +
Note : L'événement transitionend n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}: none ou si la valeur de la propriété est modifiée.
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '', '')}}{{Spec2('CSS3 Transitions')}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_variables/index.html b/files/fr/web/css/css_variables/index.html new file mode 100644 index 0000000000..7d439c68e8 --- /dev/null +++ b/files/fr/web/css/css_variables/index.html @@ -0,0 +1,42 @@ +--- +title: CSS Custom Properties for Cascading Variables +slug: Web/CSS/CSS_Variables +tags: + - Aperçu + - CSS + - CSS Variables + - Reference +translation_of: Web/CSS/CSS_Variables +--- +
{{CSSRef}}
+ +

CSS Custom Properties for Cascading Variables ou « module des propriétés personnalisées pour les variables CSS » est un module de la spécification CSS qui permet de créer des propriétés personnalisées afin de les utiliser à plusieurs endroits, sans avoir à répéter de valeurs.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("--*")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Variables")}}{{Spec2("CSS3 Variables")}}Définition initiale.
diff --git a/files/fr/web/css/css_writing_modes/index.html b/files/fr/web/css/css_writing_modes/index.html new file mode 100644 index 0000000000..7671959e67 --- /dev/null +++ b/files/fr/web/css/css_writing_modes/index.html @@ -0,0 +1,57 @@ +--- +title: CSS Writing Modes +slug: Web/CSS/CSS_Writing_Modes +tags: + - Aperçu + - CSS + - CSS Writing Modes + - Reference +translation_of: Web/CSS/CSS_Writing_Modes +--- +
{{CSSRef}}
+ +

CSS Writing Modes (ou modes d'écriture CSS) est un module qui définit différents modes d'écriture internationaux comme l'écriture de gauche à droite (e.g. utilisée par les langues latines et indiennes), de droite à gauche (e.g. utilisée par l'hébreu ou l'arabe), bidirectionnelle (utilisée quand il y a à la fois des écritures de gauche à droite et de droite à gauche sont ) et verticale (e.g. utilisée par certains écrits asiatiques).

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("glyph-orientation-horizontal")}}
    • +
  • {{cssxref("text-combine-upright")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
  • {{cssxref("unicode-bidi")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Writing Modes')}}{{Spec2('CSS3 Writing Modes')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
diff --git a/files/fr/web/css/cssom_view/index.html b/files/fr/web/css/cssom_view/index.html new file mode 100644 index 0000000000..933d8f1245 --- /dev/null +++ b/files/fr/web/css/cssom_view/index.html @@ -0,0 +1,56 @@ +--- +title: CSSOM View +slug: Web/CSS/CSSOM_View +tags: + - Aperçu + - CSS + - CSSOM + - CSSOM View + - Reference +translation_of: Web/CSS/CSSOM_View +--- +
{{CSSRef}}
+ +

CSSOM View (ou Vue CSSOM) est un module de la spécification CSS qui définit comment manipuler la vue d'un document et notamment le comportement lors du défilement (scrolling).

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("scroll-behavior")}}
    • +
+
+ +

Guide

+ +
+
Les systèmes de coordonnées
+
Un guide à propos des différents systèmes de coordonnées permettant de définir une position dans un contexte d'affichage : que ce soit un écran, une zone d'affichage, un appareil mobile ou bien une position sur une feuille de papier lors de l'impression.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSSOM View')}}{{Spec2('CSSOM View')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-behavior")}}

diff --git "a/files/fr/web/css/cssom_view/syst\303\250mes_de_coordonn\303\251es/index.html" "b/files/fr/web/css/cssom_view/syst\303\250mes_de_coordonn\303\251es/index.html" new file mode 100644 index 0000000000..543167b1b6 --- /dev/null +++ "b/files/fr/web/css/cssom_view/syst\303\250mes_de_coordonn\303\251es/index.html" @@ -0,0 +1,183 @@ +--- +title: Systèmes de coordonnées +slug: Web/CSS/CSSOM_View/Systèmes_de_coordonnées +tags: + - CSS + - CSSOM + - Coordonnées + - Guide +translation_of: Web/CSS/CSSOM_View/Coordinate_systems +--- +
{{cssref}}
+ +

Lorsqu'on définit l'emplacement d'un pixel dans un contexte graphique, on indique les coordonnées de ce point par rapport à un point fixe du contexte qu'on appelle l'origine. La position du pixel est donc indiquée comme le décalage de ce pixel par rapport à l'origine, sur les deux axes du plan.

+ +

Ce guide décrit les systèmes de coordonnées standard utilisés par le modèle objet de CSS. Les différences entre ces systèmes résident principalement dans l'emplacement de l'origine.

+ +

Dimensions

+ +

Pour les systèmes de coordonnées utilisés sur le Web, on prend comme convention qu'un décalage horizontal est appelé coordonnée en X (une valeur négative indique une position à gauche de l'origine et une valeur positive indique une position à droite de l'origine) et qu'un décalage vertical est appelé coordonnée en Y (une valeur négative indique une position au dessus de l'origine et une valeur positive indique une position en dessous de l'origine).

+ +

L'origine par défaut, dans les contextes relatifs au Web, est située dans le coin supérieur gauche avec les valeurs verticales positives se situant sous l'origine. Ceci est donc différent des représentations mathématiques généralement utilisées où l'origine se situe en bas à gauche et où les valeurs positives en Y sont situées au dessus de l'origine.

+ +

Lorsqu'on dessine des graphiques en trois dimensions ou lorsqu'on utilise une troisième dimension pour empiler des objets de l'avant vers l'arrière, on utilise la coordonnée en Z. Celle-ci correspond à la distance entre le spectateur et l'objet. Elle est positive si l'objet est plus éloigné du spectateur que l'origine et négative s'il est plus proche.

+ +
+

Note : Il est en fait possible de modifier les définitions et les orientations de ces systèmes de coordonnées grâce à des propriétés CSS telles que {{cssxref("transform")}}. Toutefois, nous évoquerons uniquement le système de coordonnées standard.

+
+ +

Les systèmes de coordonnées CSSOM standard

+ +

Il existe quatre systèmes de coordonnées standard utilisé par le modèle objet de CSS.

+ +

Offset

+ +

Les coordonnées indiquées selon ce modèle se situent relativement au coin supérieur gauche de l'élément qu'on examine ou qui a déclenché un évènement.

+ +

Ainsi, lorsqu'un {{domxref("MouseEvent", "évènement de souris", "", 1)}} se produit, la position de la souris telle qu'indiquée par les {{domxref("MouseEvent.offsetX", "offsetX")}} et {{domxref("MouseEvent.offsetY", "offsetY")}} est relative au coin supérieur gauche de l'élément sur lequel l'évènement a été produit. L'origine de ce système est décalée vers l'intérieure de la boîte de l'élément selon les distances fournies pour {{cssxref("padding-left")}} et {{cssxref("padding-top")}}.

+ +

Client

+ +

Ce système de coordonnées utilise le coin supérieur gauche de la zone d'affichage (viewport) ou du contexte de navigation comme origine.

+ +

Sur un ordinateur de bureau, par exemple, les propriétés {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}} indiquent la position du curseur de la souris au moment où l'évènement se produit et relativement au coin supérieur gauche de la fenêtre du navigateur. Le coin supérieur gauche de la zone d'affichage fournie par la fenêtre est toujours situé en (0, 0), quel que soit le contenu du document et peu importe le défilement ayant eu lieu. Autrement dit, le défilement du document modifiera les coordonnées d'un élément donné du document.

+ +

Page

+ +

Ce système de coordonnées fournit la position d'un pixel par rapport au coin supérieur gauche de tout le {{domxref("Document")}} sur lequel le pixel est situé. Cela signifie qu'un point donné sur un élément conservera les mêmes coordonnées sur la page (sauf si l'élément est déplacé avec un changement de position ou à cause de l'ajout d'autres éléments sur la page ou à cause d'un redimensionnement d'un autre élément par exemple).

+ +

Les propriétés pour les évènements de la souris {{domxref("MouseEvent.pageX", "pageX")}} et {{domxref("MouseEvent.pageY", "pageY")}} fournissent la position de la souris au moment de l'évènement, relativement au coin supérieur gauche du document.

+ +

Écran

+ +

Pour le système de coordonnées lié à l'écran, l'origine est situé dans le coin supérieur gauche de l'écran. Cela signifie que la position d'un point donné évoluera si l'utilisateur déplace la fenêtre du navigateur ou s'il change de résolution (voire s'il ajoute des écrans).

+ +

Les propriétés {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}} fournissent les coordonnées de la souris lors de l'évènement, relativement à l'origine de l'écran.

+ +

Exemples

+ +

Dans cet exemple simple, nous allons créé un ensemble de boîtes imbriquées. Lorsque la souris entrera sur la surface de ces boîtes, se déplacera ou quittera la surface correspondante, l'évènement déclenché est géré afin de mettre à jour les messages informatifs au sein de la boîte pour afficher les différentes coordonnées du pointeur selon les quatre systèmes de coordonnées.

+ +

JavaScript

+ +

Décomposons ce script en deux parties. Dans la première, le code permet d'afficher les coordonnées à l'écran. Ce code sera appelé par le gestionnaire d'évènements pour les différents évènements liés à la souris et qui nous intéressent ici.

+ +

Afficher les coordonnées

+ +

Comme nous le verrons après avec le code HTML, la boîte interne (celle sur laquelle on écoute les évènements) contient plusieurs paragraphes : un pour chacun des systèmes de coordonnées.

+ +
let inner = document.querySelector(".inner");
+let log = document.querySelector(".log");
+
+function setCoords(e, type) {
+  let idX = type + "X";
+  let idY = type + "Y";
+
+  document.getElementById(idX).innerText = e[idX];
+  document.getElementById(idY).innerText = e[idY];
+}
+
+ +

Dans inner On récupère une référence à l'élément {{HTMLElement("div")}} situé dans la boîte intérieure et qui contient les paragraphes qui serviront à afficher les informations liées aux coordonnées.

+ +

La fonction setCoords() prend en charge deux arguments : l'évènement {{domxref("MouseEvent")}} ainsi que le nom de l'origine utilisée pour obtenir les coordonnées. Les variables idX et idY sont des chaînes de caractères correspondant aux noms des propriétés à utiliser dans le système de coordonnées. Par exemple, si type vaut "page", alors idX vaudra "pageX" et idY vaudra "pageY".

+ +

Gérer les évènements liés à la souris

+ +

setCoords() est appelé par le gestionnaire d'évènements update() qui est lui même utilisé sur les différents évènements :

+ +
function update(e) {
+  setCoords(e, "offset");
+  setCoords(e, "client");
+  setCoords(e, "page");
+  setCoords(e, "screen");
+}
+
+inner.addEventListener("mouseenter", update, false);
+inner.addEventListener("mousemove", update, false);
+inner.addEventListener("mouseleave", update, false);
+ +

Le gestionnaire d'évènement update() appelle setCoords() pour chacun des systèmes de coordonnées et lui repasse en argument l'évènement qui s'est produit.

+ +

Les trois dernières lignes correspondent à l'enregistrement du gestionnaire d'évènements sur la boîte intérieure grâce aux appels de {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour chaque type d'évènement : {{event("mouseenter")}}, {{event("mousemove")}} et {{event("mouseleave")}}.

+ +

HTML

+ +

Voici le code HTML utilisé pour l'exemple. On notera qu'à l'intérieur de l'élément <div> avec l'identifiant "log", on dispose d'un paragraphe pour chaque système de coordonnées. Un élément {{domxref("span")}} est utilisé pour chaque paragraphe afin de recevoir et d'afficher les coordonnées dans le système concerné.

+ +
<div class="outer">
+  <div class="inner">
+    <div class="log">
+      <p>
+        Système de coordonnées Offset : <span id="offsetX">0</span>,
+        <span id="offsetY">0</span>
+      </p>
+      <p>
+        Système de coordonnées Client : <span id="clientX">0</span>,
+        <span id="clientY">0</span>
+      </p>
+      <p>
+        Système de coordonnées Page : <span id="pageX">0</span>,
+        <span id="pageY">0</span>
+      </p>
+      <p>
+        Système de coordonnées Écran : <span id="screenX">0</span>,
+        <span id="screenY">0</span>
+      </p>
+    </div>
+  </div>
+</div>
+ +
+

CSS

+ + +

Le code CSS est uniquement utilisé à des fins stylistiques. La classe "outer" est utilisée pour la boîte englobante qu'on rend volontairement trop large pour la fenêtre de MDN afin de pouvoir scroller horizontalement. La boîte "inner" est celle sur laquelle on suit les évènements.

+ +
.outer {
+  width: 1000px;
+  height: 200px;
+  background-color: red;
+}
+
+.inner {
+  position: relative;
+  width: 500px;
+  height: 150px;
+  top: 25px;
+  left: 100px;
+  background-color: blue;
+  color: white;
+  cursor: crosshair;
+  user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+
+.log {
+  position: relative;
+  width: 100%;
+  text-align: center;
+}
+
+ +

Résultat

+ +

Voici ci-après le résultat obtenu avec ces éléments. Vous pouvez voir comment les coordonnées en X et en Y évoluent lorsque vous déplacez la souris à l'intérieur ou en dehors de la boîte bleue selon les différents systèmes de coordonnées. On peut également voir que le défilement horizontal n'a pas d'impact sur la valeur pageX.

+ +

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

+ +

Voir aussi

+ +
    +
  • Utiliser les transformations CSS : comment modifier un système de coordonnées
    • +
  • Les coordonnées relatives aux évènements de la souris : +
      +
    • {{domxref("MouseEvent.offsetX")}} et {{domxref("MouseEvent.offsetY")}}
      • +
    • {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}}
      • +
    • {{domxref("MouseEvent.pageX")}} et {{domxref("MouseEvent.pageY")}}
      • +
    • {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}}
      • +
    +
    • +
diff --git a/files/fr/web/css/cursor/index.html b/files/fr/web/css/cursor/index.html new file mode 100644 index 0000000000..0d83725ddc --- /dev/null +++ b/files/fr/web/css/cursor/index.html @@ -0,0 +1,334 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}
+ +

La propriété CSS cursor définit la forme du curseur (s'il y en a un) lorsque le pointeur est au-dessus de l'élément.

+ +
{{EmbedInteractiveExample("pages/css/cursor.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+cursor: pointer;
+cursor: auto;
+
+/* Une valeur d'URL avec un mot-clé par défaut */
+cursor: url(hand.cur), pointer;
+
+/* Une valeur d'URL avec des coordonnées et un mot-clé par défaut */
+cursor: url(cursor1.png) 4 12, auto;
+cursor: url(cursor2.png) 2 2, pointer;
+
+/* Valeurs globales */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+
+ +

La propriété cursor peut être définie grâce à zéro ou plusieurs valeurs <uri> séparées par des virgules et suivi par un unique mot-clé obligatoire. Chaque <uri> doit pointer vers un fichier image. Le navigateur essaiera de télécharger la première image indiquée et passera à la suivante s'il ne peut pas. Si aucune image ne fonctionne, il utilisera le mot-clé final.

+ +

Chaque <uri> peut éventuellement être suivi par un couple de nombres séparés par un espace qui représente les coordonnées (abscisse puis ordonnée) <x><y> Ces coordonnées permettent de paramétrer le point d'action (hotspot) du curseur par rapport au coin en haut à gauche de l'image.

+ +

Par exemple, on peut indiquer deux images grâce à deux valeurs <uri> et fournir des coordonnées <x><y> pour la deuxième. Si aucune des images n'a pu être chargée, on recourt au mot-clé progress :

+ +
cursor: url(one.svg), url(two.svg) 5 5, progress;
+ +

Valeurs

+ +
+
<uri>
+
Une url(…) ou une liste séparées de telles valeurs qui pointent vers un fichier image. On peut utiliser différentes {{cssxref("<uri>")}} en cas de recours si certains types d'images ne sont pas pris en charge. Il est obligatoire qu'une valeur non-URL soit présente à la fin de cette liste.
+
<x> <y> {{experimental_inline}}
+
Des coordonnées en abscisses et en ordonnées sans unité, inférieures à 32.
+
Valeurs utilisant un mot-clé
+
+

Vous pouvez déplacer votre souris au-dessus de chaque ligne pour tester.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CatégorieValeur CSSRenduDescription
GénéralautoLe navigateur détermine le curseur à afficher en fonction du contexte (par exemple, l'effet sera équivalent à text lors du survol du texte).
defaultdefault.gifLe curseur par défaut de la plateforme (qui est généralement une flèche).
noneAucun curseur n'est affiché.
Liens & étatscontext-menucontext-menu.pngUn menu contextuel est disponible sous le curseur. Seul
+ IE 10 et les versions supérieures ont implémenté cette valeur sur Windows : {{Bug("258960")}}.
helphelp.gifLe pointeur indique qu'une aide est disponible.
pointerpointer.gifLe curseur est un pointeur qui indique un lien ; généralement c'est une main.
progressprogress.gifLe programme est occupé en arrière-plan mais l'utilisateur peut toujours interagir avec l'interface (à la différence de wait).
waitwait.gifLe programme est occupé, empêchant toute interaction.
Sélectioncellcell.gifLe pointeur indique que la  ou les cellules du tableau peuvent être sélectionnées.
crosshaircrosshair.gifUn curseur en forme de croix, généralement utilisé pour indiquer une sélection sur une image.
texttext.gifLe pointeur indique que le texte peut être sélectionné.
vertical-textvertical-text.gifLe pointeur indique que du texte vertical peut être sélectionné.
Glisser/déposeraliasalias.gifLe pointeur indique qu'un alias ou qu'un raccourci sera créé.
copycopy.gifLe pointeur indique que quelque chose devra être copié.
movemove.gifL'objet survolé devra être déplacé.
no-dropno-drop.gifLe curseur indique qu'on ne peut pas déposer d'élément à cet endroit.
+ {{bug("275173")}} pour Windows et Mac OS X, « no-drop a le même effet que not-allowed ».
grabgrab.gif +

Le pointeur indique que le contenu peut être accroché/attrapé ou est accroché/attrapé pour être glissé et déposé quelque part.

+
grabbinggrabbing.gif
not-allowednot-allowed.gifLe curseur indique que quelque chose ne peut pas être fait.
Redimensionnement & défilementall-scrollall-scroll.gifLe curseur indique qu'on peut faire défiler le contenu dans n'importe quelle direction.
+ {{bug("275174")}} pour Windows, « all-scroll a le même effet que move".
col-resizecol-resize.gifL'élément ou la colonne peut être redimensionné horizontalement.
row-resizerow-resize.gifL'élément ou la ligne peut être redimensionné verticalement.
n-resizeExample of a resize towards the top cursor +

Un bord peut être déplacé. Par exemple, le curseur se-resize peut être utilisé lorsqu'on redimensionne une boîte à partir de son coin sud-est.

+ +

Dans certains environnements, un curseur bidirectionnel équivalent est affiché (ex. n-resize et s-resize sont synonymes de ns-resize).

+
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gifLe pointeur indique un redimensionnement bidirectionnel.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
Zoomzoom-inzoom-in.gif +

Le pointeur indique qu'on peut zoomer/dézoomer sur le contenu.

+
zoom-outzoom-out.gif
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Notes d'utilisation

+ +

Bien que la spécification ne définisse aucune limite de taille pour les curseurs, chaque navigateur/agent utilisateur pourra imposer la sienne. Les images de curseur utilisées qui dépassent les limites prises en charge seront généralement ignorées.

+ +

Pour plus d'informations, voir le tableau de compatibilité ci-après.

+ +

Exemples

+ +

CSS

+ +
.toto {
+  cursor: crosshair;
+}
+
+/* On utilise la valeur préfixée   */
+/* si "zoom-in" n'est pas prise en */
+/* charge */
+.truc {
+  cursor: -webkit-zoom-in;
+  cursor: zoom-in;
+}
+
+ +

HTML

+ +
<p class="toto">
+  On dirait qu'on pourrait sélectionner une zone.
+</p>
+
+<p class="truc">
+  Et là on peut zoomer.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}Ajout de plusieurs mots-clés et de la syntaxe de positionnement pour url().
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.cursor")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/custom-ident/index.html b/files/fr/web/css/custom-ident/index.html new file mode 100644 index 0000000000..64c288514d --- /dev/null +++ b/files/fr/web/css/custom-ident/index.html @@ -0,0 +1,128 @@ +--- +title: +slug: Web/CSS/custom-ident +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/custom-ident +--- +
{{CSSRef}}
+ +

Le type de données CSS <custom-ident> permet de représenter des chaînes de caractères arbitraires définies par l'utilisateur et qui sont utilisées comme identifiants. Ce type de données est sensible à la casse et pour chaque contexte d'utilisation, plusieurs valeurs sont exclues afin d'éviter des ambiguïtés et des erreurs.

+ +

Syntaxe

+ +

La syntaxe est proche de celle utilisée pour les identifiants CSS. Une valeur <custom-ident> est sensible à la casse et est une séquence de caractères dont les caractères peuvent être :

+ +
    +
  • n'importe quel caractère alphanumérique (A à Z ou a à z),
    • +
  • n'importe quel chiffre (0 à 9),
    • +
  • un tiret (-)
    • +
  • un tiret bas (underscore) (_),
    • +
  • un caractère échappé via une barre oblique inversée (\),
    • +
  • un caractère Unicode (une barre oblique inversée suivie d'un à six chiffres hexadécimaux représentant le point de code Unicode).
    • +
+ +

Le premier caractère de l'identifiant ne doit pas être un chiffre, un tiret suivi d'un chiffre ou un tiret suivi d'un autre tiret. Une valeur <custom-ident> ne doit pas être encadrée entre quotes ou entre doubles quotes car ce serait alors une valeur {{cssxref("<string>")}}.

+ +

On notera que id1, Id1, iD1 et ID1 sont des identifiants différents car leurs casses sont différentes. En revanche, il existe plusieurs façons d'échapper un même caractère et toto\? et toto\3F représentent donc le même identifiant.

+ +

Liste des valeurs interdites

+ +

Afin d'éviter des ambiguïtés dangereuses, chaque propriété qui utilise <custom-ident> définit également une liste de valeurs interdites :

+ +
+
{{cssxref("animation-name")}}
+
Interdit d'utiliser les valeurs CSS globales unset, initial et inherit ainsi que la valeur none.
+
{{cssxref("counter-reset")}}
+
{{cssxref("counter-increment")}}
+
Interdit d'utiliser les valeurs CSS globales unset, initial et inherit ainsi que la valeur none.
+
{{cssxref("@counter-style")}}
+
{{cssxref("list-style-type")}}
+
Interdit d'utiliser les valeurs CSS globales unset, initial et inherit ainsi que les valeurs none, inline, outside et d'autres valeurs prédéfinies, implémentées par les différents navigateurs : disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, cambodian, cjk-earthly-branch, cjk-heavenly-stem, cjk-ideographic, devanagari, ethiopic-numeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiragana-iroha, japanese-formal, japanese-informal, kannada, katakana, katakana-iroha, khmer, korean-hangul-formal, korean-hanja-formal, korean-hanja-informal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-formal, simp-chinese-informal, tamil, telugu, thai, tibetan, trad-chinese-formal, trad-chinese-informal, upper-armenian, disclosure-open et disclosure-close.
+
{{cssxref("grid-row-start")}}
+ {{cssxref("grid-row-end")}}
+ {{cssxref("grid-column-start")}}
+ {{cssxref("grid-column-end")}}
+
Interdisent la valeur span.
+
{{cssxref("will-change")}}
+
Interdit d'utiliser les valeurs CSS globales unset, initial et inherit ainsi que les valeurs will-change, auto, scroll-position et contents.
+
+ +

Exemples

+ +

Voici des identifiants valides

+ +
nono79            Un mélange de caractères alphanumériques.
+ground-level      Un mélange de caractères alphanumériques avec un tiret.
+-test             Un tiret suivi d'un mélange de caractères alphanumériques.
+_internal         Un tiret bas suivi d'un mélange de caractères alphanumériques.
+\22 toto          Un caractère Unicode suivi par une série de caractères alphanumériques.
+bili\.bob         Le point est bien échappé.
+
+ +

Voici des identifiants invalides :

+ +
34rem             Il ne doit pas démarrer par un chiffre.
+-12rad            Il ne doit pas démarrer par un tiret suivi d'un chiffre.
+bili.bob          Il ne doit contenir que des caractères alphanumériques. _ et - n'ont pas besoin d'être échappés.
+--toto            Il ne doit pas démarrer avec deux tirets.
+'bilibob'         Ce n'est pas une valeur <user-ident> mais une {{cssxref("<string>")}}.
+"bilibob"         Ce n'est pas une valeur <user-ident> mais une {{cssxref("<string>")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<custom-ident> for will-change')}}{{Spec2('CSS Will Change')}}Définition des valeurs exclues pour {{cssxref("will-change")}}.
{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<custom-ident> for list-style-type')}}{{Spec2('CSS3 Counter Styles')}}Utilisation de <custom-ident> à la place d'une liste finie de mots-clés. Définition des valeurs exclues pour {{cssxref("list-style-type")}} et {{cssxref("@counter-style")}}.
{{SpecName('CSS3 Lists', '#counter-properties', '<custom-ident> for counter-*')}}{{Spec2('CSS3 Lists')}}<identifier> est renommé en <custom-ident>. Son utilisation est ajoutée pour la propriété counter-set.
{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<custom-ident> for animation-name')}}{{Spec2('CSS3 Animations')}}Définition des valeurs exclues pour {{cssxref("animation-name")}}.
{{SpecName('CSS3 Values', '#identifier-value', '<custom-ident>')}}{{Spec2('CSS3 Values')}}<identifier> est renommé en <custom-ident>. Devient un pseudo-type et est lié aux différents cas d'utilisation pour la définition des valeurs exclues.
{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<identifier>')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

Ce type de données n'est pas un type de données « réel » mais un type artificiel permettant de simplifier la description des valeurs permises. Il n'y a donc pas de données de compatibilité stricto sensu.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/dimension/index.html b/files/fr/web/css/dimension/index.html new file mode 100644 index 0000000000..8c6f397e97 --- /dev/null +++ b/files/fr/web/css/dimension/index.html @@ -0,0 +1,76 @@ +--- +title: +slug: Web/CSS/dimension +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/dimension +--- +
{{CSSRef}}
+ +

Le type de donnée <dimension> représente une valeur de type {{CSSxRef("<number>")}} directement suivie d'une unité : par exemple 10px.

+ +

CSS utilise des dimensions pour définir des distances (type {{CSSxRef("<length>")}}), des durées (type {{CSSxRef("<time>")}}), des fréquences (type {{CSSxRef("<frequency>")}}), des résolutions (type {{CSSxRef("<resolution>")}}) ainsi que d'autres quantités.

+ +

Syntaxe

+ +

La syntaxe d'une valeur de type <dimension> est un nombre (valeur de type {{CSSxRef("<number>")}}) immédiatement suivi d'une unité représentée par son identifiant. Les identifiants utilisés pour les unités sont insensibles à la casse.

+ +

Exemples

+ +

Dimensions valides

+ +
12px      12 pixels
+1rem      1 rem
+1.2pt     1.2 points
+2200ms    2200 millisecondes
+200hz     200 Hertz
+200Hz     200 Hertz (les unités sont insensibles à la casse)
+
+ +

Dimensions invalides

+ +
12 px       L'unité doit immédiatement être indiquée après le nombre
+12"px"      Les unités sont des identifiants et ne doivent pas être entourées de quotes
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Values", "#dimensions", "<dimension>")}}{{Spec2("CSS4 Values")}}Adds cap, ic, lh, rlh, vi, vb
{{SpecName("CSS3 Values", "#dimensions", "<dimension>")}}{{Spec2("CSS3 Values")}}Adds ch, rem, vw, vw, vmin, vmax, Q
{{SpecName("CSS2.1", "syndata.html#numbers", "<dimension>")}}{{Spec2("CSS2.1")}}Defined under Numbers and Length
{{SpecName("CSS1", "", "<dimension>")}}{{Spec2("CSS1")}}Initial definition under "length units"
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.dimension")}}

diff --git a/files/fr/web/css/direction/index.html b/files/fr/web/css/direction/index.html new file mode 100644 index 0000000000..dd91c43510 --- /dev/null +++ b/files/fr/web/css/direction/index.html @@ -0,0 +1,108 @@ +--- +title: direction +slug: Web/CSS/direction +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/direction +--- +
{{CSSRef}}
+ +

La propriété direction doit être paramétrée afin de correspondre à la direction du texte: rtl (Right To Left pour droite à gauche) pour les textes en hébreu ou en arabe et ltr (Left To Right pour gauche à droite) pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant l'attribut dir en HTML) plutôt qu'avec une feuille de style CSS.

+ +
{{EmbedInteractiveExample("pages/css/direction.html")}}
+ + + +

La propriété définit la direction principale du texte des éléments de type bloc et celle des éléments incorporés créés par la propriété {{cssxref("unicode-bidi")}}. Elle définit également l'alignement par défaut du texte et des éléments de type bloc, ainsi que le sens de progression des cellules dans une ligne de tableau.

+ +

Contrairement à l'attribut HTML dir, la propriété direction n'est pas héritée pour les cellules depuis les colonnes d'un tableau car l'héritage CSS suit l'arborescence du document et les cellules sont à l'intérieur des lignes et non à l'intérieur des colonnes.

+ +

Les propriétés direction et {{cssxref("unicode-bidi")}} sont les deux seuls propriétés qui ne sont pas affectés par la propriété raccourcie {{cssxref("all")}}.

+ +

Syntaxe

+ +
direction: ltr;
+direction: rtl;
+
+/* Valeurs globales */
+direction: inherit;
+direction: initial;
+direction: unset;
+
+ +

Valeurs

+ +
+
ltr
+
La valeur par défaut qui correspond à une disposition de la gauche vers la droite pour le texte et les autres éléments.
+
rtl
+
Le texte et les autres éléments vont de la droite vers la gauche.
+
+ +

Afin que la propriété direction ait un effet sur les éléments en ligne, il faut que la valeur de la propriété {{cssxref("unicode-bidi")}} soit embed ou override.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
blockquote {
+  direction: rtl;
+}
+
+ +

HTML

+ +
<blockquote>
+  Du reste, depuis son bain dans la mare aux larmes,
+  tout était changé : la salle, la table de verre, et
+  la petite porte avaient complétement disparu.
+</blockquote>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}{{Spec2('CSS3 Writing Modes')}}Aucune modification.
{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.direction")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("unicode-bidi")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/fr/web/css/display-box/index.html b/files/fr/web/css/display-box/index.html new file mode 100644 index 0000000000..532fa82e11 --- /dev/null +++ b/files/fr/web/css/display-box/index.html @@ -0,0 +1,108 @@ +--- +title: +slug: Web/CSS/display-box +tags: + - CSS + - Reference + - Type de donnée +translation_of: Web/CSS/display-box +--- +
{{CSSRef}}
+ +

Ces mots-clés définissent si un élément génère des boîtes d'affichage ou aucune.

+ +

Syntaxe

+ +
+
contents {{Experimental_Inline}}
+
L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur contents affecte les éléments « inhabituels » tels que les éléments remplacés. Voir Appendix B: Effects of display: contents on Unusual Elements pour plus de détails.
+
+ À l'heure actuelle, en raison d'un bug, les éléments ciblés par une règle avec display: contents sont retirés de l'arbre d'accessibilité et ne sont donc pas parcourus par les lecteurs d'écran.
+
none
+
Désactive l'affichage d'un élément afin que celui-ci n'ait aucun effet sur la disposition du document (le document est affiché comme si l'élément n'existait pas). Tous les éléments descendants voient également leur affichage désactivé.
+ Si on souhaite que l'élément ne soit pas affiché mais occupe néanmoins un espace, il faudra utiliser la propriété {{CSSxRef("visibility")}}.
+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

display: none

+ +

CSS

+ +
p.secret {
+  display: none;
+}
+ +

HTML

+ +
<p>Texte visible</p>
+<p class="secret">Texte invisible</p>
+ +

Résultat

+ +

{{EmbedLiveSample("display_none", "100%", 60)}}

+ +

display: contents

+ +

Dans cet exemple, l'élément {{htmlelement("div")}} externe a une bordure rouge sur 2 pixels et mesure 300 pixels de large. Toutefois, cet élément est ciblé avec display: contents et l'élément <div> ne sera pas affiché tel quel : la bordure et la largeur ne s'appliqueront pas et l'élément fils sera affiché comme si le parent n'avait pas existé.

+ +

CSS

+ +
.outer {
+  border: 2px solid red;
+  width: 300px;
+  display: contents;
+}
+
+.outer > div {
+  border: 1px solid green;
+}
+
+ +

HTML

+ +
<div class="outer">
+  <div>Inner div.</div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Display_contents", 300, 60)}}

+ +

Accessibilité

+ +

Via leur implémentation, la plupart des navigation retireront un élément de l'arbre d'accessibilité si celui-ci reçoit display: contents. Cet élément (ainsi que ses descendants pour certains navigateurs) ne sera plus annoncé par les outils de lecture d'écran. Ce comportement est incorrect selon la spécification CSSWG.

+ + + +

Compatibilité des navigateurs

+ + + +

Prise en charge contents

+ +

{{Compat("css.properties.display.contents", 10)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/display-inside/index.html b/files/fr/web/css/display-inside/index.html new file mode 100644 index 0000000000..2091265318 --- /dev/null +++ b/files/fr/web/css/display-inside/index.html @@ -0,0 +1,120 @@ +--- +title: display-inside +slug: Web/CSS/display-inside +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/display-inside +--- +
{{CSSRef}}
+ +

Ces mots-clés définissent le type d'affichage ({{CSSxRef("display")}}) pour l'intérieur de l'élément. Ce type servira à la disposition du contenu de l'élément (si ce contenu n'est pas un élément remplacé). Ces mots-clés sont des valeurs de la propriété display et peuvent, historiquement être utilisé seul, ou plus récemment (cf. la spécification de niveau 3), être utilisé en combinaison avec un mot-clé {{CSSxRef("<display-outside>")}}.

+ +

Syntaxe

+ +

Une valeur <display-inside> est définie avec l'un des mots-clés suivants :

+ +
+
flow {{Experimental_Inline}}
+
L'élément organise son contenu en utilisant la disposition en flux (disposition bloc/en ligne ou « block and inline layout » en anglais). +

Si le type d'affichage extérieur est inline ou run-in et que l'élément participe à un contexte de formatage bloc ou en ligne, il génèrera une boîte en ligne. Sinon, il génèrera un conteneur de bloc.

+ +

Selon la valeur d'autres propriétés (telles que {{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau contexte de formatage de bloc (BFC) pour son contenu ou intègre son contenu dans le contexte parent.

+
+
flow-root {{Experimental_Inline}}
+
L'élément génère un bloc qui établit un nouveau contexte de formatage de bloc, définissant ainsi une nouvelle racine pour le formatage.
+
table
+
L'élément se comporte comme un élément HTML {{HTMLElement("table")}}. Il définit une boîte de bloc.
+
flex
+
L'élément se comporte comme un élément de bloc et dispose son contenu selon le modèle des boîtes flexibles.
+
grid
+
L'élément se comporte comme un élément de bloc et dispose son contenu selon le modèle des grilles.
+
ruby {{Experimental_Inline}}
+
L'élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de formatage ruby. Il se comporte comme un élément HTML {{HTMLElement("ruby")}}.
+
+ +
+

Note : Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que <display-inside> lorsque c'est cohérent. Ainsi, avec display: flex ou display: grid, la valeur utilisée de <display-outside> sera nécessairement block. On a ainsi le résultat attendu car on doit avoir display: grid avec un conteneur qui soit un bloc.

+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

Dans l'exemple qui suit, la boîte parente est ciblée avec display: flow-root et crée donc un nouveau contexte de formatage de bloc qui contient l'élément flottant.

+ +

CSS

+ +
.box {
+  background-color: rgb(224, 206, 247);
+  border: 5px solid rebeccapurple;
+  display: flow-root;
+}
+
+.float {
+  float: left;
+  width: 200px;
+  height: 150px;
+  background-color: white;
+  border:1px solid black;
+  padding: 10px;
+}
+ +

HTML

+ +
<div class="box">
+  <div class="float">I am a floated box!</div>
+  <p>I am content inside the container.</p>
+</div>
+
+ +

Résultat

+ +

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

+ +

Compatibilité des navigateurs

+ + + +

Prise en charge des valeurs multiples

+ +

{{Compat("css.properties.display.multi-keyword_values", 10)}}

+ +

Prise en charge de flow-root

+ +

{{Compat("css.properties.display.flow-root", 10)}}

+ +

Prise en charge des tableaux

+ +

{{Compat("css.properties.display.table_values", 10)}}

+ +

Prise en charge des grilles

+ +

{{Compat("css.properties.display.grid", 10)}}

+ +

Prise en charge des boîtes flexibles

+ +

{{Compat("css.properties.display.flex", 10)}}

+ +

Prise en charge des annotations ruby

+ +

{{Compat("css.properties.display.ruby_values", 10)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/display-internal/index.html b/files/fr/web/css/display-internal/index.html new file mode 100644 index 0000000000..ba42feb612 --- /dev/null +++ b/files/fr/web/css/display-internal/index.html @@ -0,0 +1,73 @@ +--- +title: +slug: Web/CSS/display-internal +tags: + - CSS + - Reference + - Type de donnée +translation_of: Web/CSS/display-internal +--- +
{{CSSRef}}
+ +

Certains modes de disposition tels que table et ruby possèdent une structure interne complexe avec différents roles pour les éléments enfants et descendants. Cette page décrit ces valeurs « internes » pour display et qui s'appliquent dans un mode donné.

+ +

Syntaxe

+ +

Sauf mention contraire, le type d'affichage intérieur et extérieur sont définis simultanément par le mot-clé indiqué.

+ +
+
table-row-group
+
Ces éléments se comportent comme des éléments HTML {{HTMLElement("tbody")}}.
+
table-header-group
+
Ces éléments se comportent comme des éléments HTML {{HTMLElement("thead")}}.
+
table-footer-group
+
Ces éléments se comportent comme des éléments HTML {{HTMLElement("tfoot")}}.
+
table-row
+
Ces éléments se comportent comme des éléments HTML {{HTMLElement("tr")}}.
+
table-cell
+
Ces éléments se comportent comme des éléments HTML {{HTMLElement("td")}}.
+
table-column-group
+
Ces éléments se comportent comme des éléments HTML {{HTMLElement("colgroup")}}.
+
table-column
+
Ces éléments se comportent comme des éléments HTML {{HTMLElement("col")}}.
+
table-caption
+
Ces éléments se comportent comme des éléments HTML {{HTMLElement("caption")}}.
+
ruby-base {{Experimental_Inline}}
+
Ces éléments se comportent comme des éléments HTML {{HTMLElement("rb")}}.
+
ruby-text {{Experimental_Inline}}
+
Ces éléments se comportent comme des éléments HTML {{HTMLElement("rt")}}.
+
ruby-base-container {{Experimental_Inline}}
+
Ces éléments se comportent comme des éléments HTML {{HTMLElement("rbc")}} générés comme des boîtes anonymes.
+
ruby-text-container {{Experimental_Inline}}
+
Ces éléments se comportent comme des éléments HTML {{HTMLElement("rtc")}}.
+
+ +

Compatibilité des navigateurs

+ + + +

Prise en charge pour les valeurs liées à table

+ +

table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row et table-row-group

+ +

{{Compat("css.properties.display.table_values", 10)}}

+ +

Prise en charge pour les valeurs ruby

+ +

ruby, ruby-base, ruby-base-container, ruby-text et ruby-text-container

+ +

{{Compat("css.properties.display.ruby_values", 10)}}

+ +

Voir aussi

+ +
    +
  • {{CSSxRef("display")}} +
      +
    • {{CSSxRef("<display-outside>")}}
      • +
    • {{CSSxRef("<display-inside>")}}
      • +
    • {{CSSxRef("<display-listitem>")}}
      • +
    • {{CSSxRef("<display-box>")}}
      • +
    • {{CSSxRef("<display-legacy>")}}
      • +
    +
    • +
diff --git a/files/fr/web/css/display-legacy/index.html b/files/fr/web/css/display-legacy/index.html new file mode 100644 index 0000000000..1bd84ba254 --- /dev/null +++ b/files/fr/web/css/display-legacy/index.html @@ -0,0 +1,104 @@ +--- +title: +slug: Web/CSS/display-legacy +tags: + - CSS + - Reference + - Type de donnée +translation_of: Web/CSS/display-legacy +--- +
{{CSSRef}}
+ +

CSS 2 utilisant une syntaxe avec un seul mot-clé comme valeur pour la propriété display, il fallait plusieurs mots-clés pour les différentes variantes bloc/en ligne d'un même mode. Cette page décrit ces valeurs.

+ +

Syntaxe

+ +
+
inline-block
+
L'élément s'inscrit dans le contenu environnant comme une boîte en ligne et organise son propre contenu en bloc.
+
+ Ce mot-clé est équivalent à la combinaison inline flow-root.
+
inline-table
+
La valeur inline-table n'a pas de correspondance directe en HTML. Un tel élément se comporte comme un élément HTML {{HTMLElement("table")}} avec une boîte en ligne et pas de bloc. À l'intérieur de la boîte de tableau, on aura un contexte de bloc.
+
+ Ce mot-clé est équivalent à la combinaison inline table.
+
inline-flex
+
L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des boîtes flexibles.
+
+ Ce mot-clé est équivalent à la combinaison inline flex.
+
inline-grid
+
L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des grilles CSS.
+
+ Ce mot-clé est équivalent à la combinaison inline grid.
+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique inline-flex.

+ +
+

CSS

+ +
.container {
+  display: inline-flex;
+}
+
+ +

HTML

+ +
<div class="container">
+  <div>Élément flexible</div>
+  <div>Élément flexible</div>
+</div>
+
+Pas d'élément flexible
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", 300, 150)}}

+
+ +

Avec la nouvelle syntaxe, on peut décrire le conteneur avec deux valeurs : la première pour le mode d'affichage extérieure (inline) et la seconde pour le mode d'affichage intérieur (flex).

+ +
.container {
+  display: inline flex;
+}
+ +

Compatibilité des navigateurs

+ + + +

Prise en charge de inline-block

+ +

{{Compat("css.properties.display.inline-block", 10)}}

+ +

Prise en charge de inline-table

+ +

{{Compat("css.properties.display.inline-table", 10)}}

+ +

Prise en charge de inline-flex

+ +

{{Compat("css.properties.display.inline-flex", 10)}}

+ +

Prise en charge de inline-grid

+ +

{{Compat("css.properties.display.inline-grid", 10)}}

+ +

Voir aussi

+ +
    +
  • {{CSSxRef("display")}} +
      +
    • {{CSSxRef("<display-outside>")}}
      • +
    • {{CSSxRef("<display-inside>")}}
      • +
    • {{CSSxRef("<display-listitem>")}}
      • +
    • {{CSSxRef("<display-internal>")}}
      • +
    • {{CSSxRef("<display-box>")}}
      • +
    +
    • +
diff --git a/files/fr/web/css/display-listitem/index.html b/files/fr/web/css/display-listitem/index.html new file mode 100644 index 0000000000..d5fcffc88f --- /dev/null +++ b/files/fr/web/css/display-listitem/index.html @@ -0,0 +1,64 @@ +--- +title: +slug: Web/CSS/display-listitem +tags: + - CSS + - Reference + - Type de donnée +translation_of: Web/CSS/display-listitem +--- +
{{CSSRef}}
+ +

Le mot-clé list-item permet à un élément de générer un pseudo-élément ::marker  dont le contenu  est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément.

+ +

Syntaxe

+ +

Une valeur list-item indiquera à l'élément de se comporter comme un élément d'une liste. Cette valeur peut être utilisée avec les propriétés {{CSSxRef("list-style-type")}} et {{CSSxRef("list-style-position")}}.

+ +
+

Note : Pour les navigateurs qui prennent en charge la syntaxe avec deux valeurs, si aucune valeur pour le mode intérieur n'est indiquée, sa valeur par défaut sera flow. Si aucune valeur n'est fournie pour le mode extérieur, la boîte principale aura un mode extérieur block.

+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

CSS

+ +
.fausse-liste {
+  display: list-item;
+  list-style-position: inside;
+}
+ +

HTML

+ +
<div class="fausse-liste">Je vais m'afficher comme un élément de liste</div>
+
+ +

Résultat

+ +

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

+ +

Compatibilité des navigateurs

+ + + +

Prise en charge de list-item

+ +

{{Compat("css.properties.display.list-item", 10)}}

+ +

Voir aussi

+ +
    +
  • {{CSSxRef("display")}} +
      +
    • {{CSSxRef("<display-outside>")}}
      • +
    • {{CSSxRef("<display-inside>")}}
      • +
    • {{CSSxRef("<display-internal>")}}
      • +
    • {{CSSxRef("<display-box>")}}
      • +
    • {{CSSxRef("<display-legacy>")}}
      • +
    +
    • +
diff --git a/files/fr/web/css/display-outside/index.html b/files/fr/web/css/display-outside/index.html new file mode 100644 index 0000000000..b646dfdd70 --- /dev/null +++ b/files/fr/web/css/display-outside/index.html @@ -0,0 +1,88 @@ +--- +title: display-outside +slug: Web/CSS/display-outside +tags: + - CSS + - Reference + - Type de donnée +translation_of: Web/CSS/display-outside +--- +
{{CSSRef}}
+ +

Les mots-clés de type <display-outside> définissent le mode de disposition extérieure de l'élément. Autrement dit, ces mots-clés précisent le rôle de l'élément dans le flux. Ces valeurs peuvent être utilisées pour la propriété display. La syntaxe historique (avant CSS 3) prendra une seule valeur et la nouvelle syntaxe combinera cette valeur avec une valeur {{CSSxRef("<display-inside>")}}.

+ +

Syntaxe

+ +

Une valeur <display-outside> peut être l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
block
+
L'élément génère une boîte de bloc ce qui ajoute des passages à la ligne avant et après l'élément dans le flux normal.
+
inline
+
L'élément génère une ou plusieurs boîtes en lignes qui n'ajoutent pas de passages à la ligne avant ou après. Dans un flux normal, le prochain élément sera sur la même ligne si l'espace le permet.
+
run-in {{Experimental_Inline}}
+
L'élément génère une boîte « run-in ». Si le voisin adjacent à l'élément est une boîte de bloc, la boîte run-in devient la première boîte en ligne qui suit cette boîte de bloc.
+
+ Les éléments run-in se comportent comme des éléments de bloc ou en ligne selon les éléments environnants. Autrement dit, si la boîte run-in contient une boîte de bloc, l'élément se comportera comme un bloc. Si la boîte de bloc suit une boîte run-in, la boîte run-in deviendra la première boîte en ligne de la boîte de bloc. Si une boîte en ligne succède à l'élément, la boîte run-in deviendra une boîte de bloc.
+
+ +
+

Note : Browsers that support the two value syntax, on finding the outer value only, such as when display: block or display: inline is specified, will set the inner value to flow. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.

+ +

Note : Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut flow pour le mode intérieur si display: block ou display: inline.  On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne).

+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+
+ +

Exemples

+ +

Dans l'exemple suivant, les éléments {{HTMLElement("span")}}, normalement affichés comme des éléments en ligne, sont paramétrés avec display: block et passent à la ligne en étendant leur conteneur selon l'axe en ligne.

+ +

 

+ +

CSS

+ +
span {
+  display: block;
+  border: 1px solid rebeccapurple;
+}
+ +

 

+ +

HTML

+ +
<span>span 1</span>
+<span>span 2</span>
+ +

Résultat

+ +

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

+ +

Compatibilité des navigateurs

+ + + +

Prise en charge run-in

+ +

{{Compat("css.properties.display.run-in", 10)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/display/index.html b/files/fr/web/css/display/index.html new file mode 100644 index 0000000000..bf24d05e9a --- /dev/null +++ b/files/fr/web/css/display/index.html @@ -0,0 +1,237 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - Propriété + - Reference + - display +translation_of: Web/CSS/display +--- +
{{CSSRef}}
+ +

La propriété display définit le type d'affichage utilisée pour le rendu d'un élément (de bloc ou en ligne) et la disposition utilisée pour ses éléments fils : grille ou boîtes flexibles.

+ +

Le type d'affichage donné par display possède deux composantes : le type d'affichage extérieur qui définit comment la boîte participe au flux et le type d'affichage intérieur qui définit l'organisation des éléments enfants.

+ +

Certaines valeurs de display sont définies dans des spécifications séparées. Pour plus d'informations, voir la section Spécifications ci-après.

+ +

Syntaxe

+ +
/* Valeurs de type <display-outside> */
+display: block;
+display: inline;
+display: run-in;
+
+/* Valeurs de type <display-inside> */
+display: flow;
+display: flow-root;
+display: table;
+display: flex;
+display: grid;
+display: ruby;
+
+/* Combinaison de valeurs */
+/* <display-outside> et <display-inside> */
+display: block flow;
+display: inline table;
+display: flex run-in;
+
+/* Valeurs de type <display-listitem> */
+display: list-item;
+display: list-item block;
+display: list-item inline;
+display: list-item flow;
+display: list-item flow-root;
+display: list-item block flow;
+display: list-item block flow-root;
+display: flow list-item block;
+
+/* Valeurs de type <display-internal> */
+display: table-row-group;
+display: table-header-group;
+display: table-footer-group;
+display: table-row;
+display: table-cell;
+display: table-column-group;
+display: table-column;
+display: table-caption;
+display: ruby-base;
+display: ruby-text;
+display: ruby-base-container;
+display: ruby-text-container;
+
+/* Valeurs de type <display-box> */
+display: contents;
+display: none;
+
+/* Valeurs de type <display-legacy> */
+display: inline-block;
+display: inline-table;
+display: inline-flex;
+display: inline-grid;
+
+/* Valeurs globales */
+display: inherit;
+display: initial;
+display: unset;
+
+ +

La propriété display est définie à l'aide de mots-clés. Ces valeurs sont rangées selon six catégories.

+ +
+
{{CSSxRef("<display-outside>")}}
+
Ces mots-clés définissent le type d'affichage extérieur de l'élément. Autrement dit, ils définissent comment l'élément participe au flux.
+
{{CSSxRef("<display-inside>")}}
+
Ces mots-clés définissent le type d'affichage intérieur de l'élément qui définit le contexte de formatage qui organisera le contenu de l'élément (si celui-ci n'est pas un élément remplacé).
+
{{CSSxRef("<display-listitem>")}}
+
L'élément génère une boîte de bloc pour le contenu et une boîte en ligne séparée pour l'élément de liste.
+
{{CSSxRef("<display-internal>")}}
+
Certains modes de dispositions, tels que table et ruby possèdent une structure interne complexe avec différents rôles possibles pour les éléments descendants. Cette section définit ces rôles internes qui s'appliquent uniquement pour un mode de disposition donné.
+
{{CSSxRef("<display-box>")}}
+
Ces valeurs définissent si un élément génère une boîte ou non.
+
{{CSSxRef("<display-legacy>")}}
+
CSS 2 utilise une syntaxe avec un seul mot-clé pour la propriété display et il faut donc des mots-clés distincts pour les variantes bloc/en ligne d'un même mode de disposition.
+
+ +

Valeurs historiques de display

+ +

La spécification de niveau 3 permet d'utiliser deux valeurs pour définir la propriété display afin de définir explicitement le type d'affichage intérieur et le type d'affichage extérieur. Toutefois, cette syntaxe sur deux valeurs n'est pas encore prise en charge de façon homogène par les navigateurs.

+ +

Les méthodes d'affichage historiques permettent d'obtenir les mêmes résultats avec un seul mot-clé. Ces valeurs devraient être privilégiées tant que la prise en charge de la syntaxe sur deux valeurs n'est pas mieux prise en charge. Ainsi, il est possible d'utiliseur deux valeur afin de définir un conteneur flexible en ligne :

+ +
.container {
+  display: inline flex;
+}
+ +

On pourra obtenir un comportement équivalent en écrivant cela avec une seule valeur.

+ +
.container {
+  display: inline-flex;
+}
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

En plus de l'exemple qui suit, vous pouvez voir d'autres exemples sur les sections dédiées aux différents modes de disposition :

+ + + +

HTML

+ +
<p>
+  Texte visible
+</p>
+<p class="secret">
+  Texte invisible
+</p>
+ +

CSS

+ +
p.secret {
+  display: none;
+}
+ +

Résultat

+ +

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

+ +

Accessibilité

+ +

display: none;

+ +

Utiliser la propriété display avec la valeur none sur un élément entraînera son retrait de l'arbre d'accessibilité. Cet élément ainsi que ses descendants ne seront plus annoncés par les lecteurs d'écrans.

+ +

Si vous souhaitez masquer un élément visuellement, une alternative plus accessible consiste à utiliser une combinaison de propriétés afin de le retirer de l'écran mais de le conserver lisible pour les technologies d'assistance.

+ +

display: contents;

+ +

Tout élément ciblé avec display: contents sera retiré de l'arbre d'accessibilité par la plupart des navigateurs. Ainsi, l'élément et ses descendants ne seront plus annoncés par les outils d'assistance tels que les lecteurs d'écran. Ce comportement est incorrect selon la spécification CSSWG.

+ + + +

Les tableaux

+ +

Modifier la valeur de display pour un élément de tableau afin d'utiliser la valeur block, grid ou flex modifiera sa représentation au sein de l'arbre d'accessibilité. Aussi, le tableau ne sera plus correctement annoncé par les technologies d'assistance.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}{{Spec2('CSS3 Display')}}Ajout des valeurs run-in, contents, flow, flow-root et des valeurs avec plusieurs mots-clés.
{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}{{Spec2('CSS3 Ruby')}}Ajout des valeurs ruby, ruby-base, ruby-text, ruby-base-container et ruby-text-container.
{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}{{Spec2('CSS3 Grid')}}Ajout des valeurs pour le modèle de boîtes en grille.
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}{{Spec2('CSS3 Flexbox')}}Ajout des valeurs pour le modèle de boîtes flexibles.
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}Ajout des valeurs pour le modèle de boîte pour les tableaux et de la valeur inline-block.
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}Définition initiale. Définitions des valeurs basiques : none, block, inline, et list-item.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.display",10)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/element()/index.html b/files/fr/web/css/element()/index.html new file mode 100644 index 0000000000..d4d6391db2 --- /dev/null +++ b/files/fr/web/css/element()/index.html @@ -0,0 +1,149 @@ +--- +title: element +slug: Web/CSS/element() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/element() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La fonction element() définit une valeur {{cssxref("<image>")}} générée à partir d'un élément HTML arbitraire. L'image est calculée dynamiquement : si l'élément HTML change, les propriétés CSS utilisant la valeur seront automatiquement mis à jour.

+ +

Un scénario pour lequel cette fonction est particulièrement utile : on génère une image dans un élément HTML {{HTMLElement("canvas")}} et on l'utilise comme arrière-plan.

+ +

Pour les navigateurs basés sur Gecko, on peut utiliser la méthode {{domxref("document.mozSetImageElement()")}} pour modifier l'élément utilisé comme arrière-plan pour un background CSS donné.

+ +

Syntaxe

+ +
element(id)
+ +

Paramètres

+ +
+
id
+
L'identifiant (correspondant à l'attribut {{htmlattrxref("id")}}) de l'élément HTML visé.
+
+ +

Exemples

+ +

Un premier exemple réaliste

+ +

CSS

+ +
.exemple {
+  width: 400px;
+  height: 400px;
+  background: -moz-element(#monArrierePlan) no-repeat;
+
+}
+
+.paragraphe {
+  transform-origin: 0 0;
+  transform: rotate(45deg);
+  color: white;
+}
+
+#monArrierePlan{
+  width: 1024px;
+  height: 1024px;
+  background-image: linear-gradient(to right, red, orange, yellow, white);
+}
+.cache {
+  overflow: hidden;
+  height: 0;
+}
+
+ +

HTML

+ +
<div class="exemple">
+  <p>
+    Cet élément utilise l'élément
+    #monArrierePlan comme image
+    de fond !
+  </p>
+</div>
+
+<div class="cache">
+  <div id="monArrierePlan">
+    <p class="paragraphe">
+      Et voici un texte inscrit sur
+      l'arrière-plan.
+    </p>
+  <div>
+<div>
+ +

Résultat

+ +

Pour les navigateurs qui prennent en charge element, on peut ici voir un arrière-plan généré avec un paragraphe HTML.

+ +

{{EmbedLiveSample("Un_premier_exemple_réaliste","400","400")}}

+ +

Un second exemple plus méchant

+ +

CSS

+ +
.exemple {
+  width: 400px;
+  height: 100px;
+  background: -moz-element(#monArrierePlan);
+}
+
+.cache {
+  overflow: hidden;
+  height: 0;
+}
+ +

HTML

+ +
<div class="exemple"></div>
+
+<div class="cache">
+  <button id="monArrierePlan" type="button">
+    Méchant bouton
+  </button>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Un_second_exemple_plus_méchant","400","400")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}Reporté pour CSS4
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image.element")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("document.mozSetImageElement()")}}
    • +
  • {{cssxref("_image", "image()")}}
    • +
  • {{cssxref("image-set", "image-set()")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
  • {{domxref("document.mozSetImageElement()")}}
    • +
diff --git a/files/fr/web/css/empty-cells/index.html b/files/fr/web/css/empty-cells/index.html new file mode 100644 index 0000000000..96841dab17 --- /dev/null +++ b/files/fr/web/css/empty-cells/index.html @@ -0,0 +1,118 @@ +--- +title: empty-cells +slug: Web/CSS/empty-cells +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/empty-cells +--- +
{{CSSRef}}
+ +

La propriété empty-cells définit la façon dont l'agent utilisateur doit afficher les bordures et l'arrière-plan des cellules d'un tableau ({{HTMLElement("table")}}) qui n'ont aucun contenu visible.

+ +
{{EmbedInteractiveExample("pages/css/empty-cells.html")}}
+ + + +

Cette propriété est uniquement appliquée lorsque border-collapse vaut separate.

+ +

Syntaxe

+ +
/* Valeurs avec mot-clé */
+empty-cells: show;
+empty-cells: hide;
+
+/* Valeurs globales */
+empty-cells: inherit;
+empty-cells: initial;
+empty-cells: unset;
+
+ +

Cette propriété se définit avec l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
show
+
Un mot-clé indiquant que les bordures et l'arrière-plan doivent être dessinés comme pour les cellules normales.
+
hide
+
Un mot-clé indiquant qu'aucune bordure ou arrière-plan ne doit être dessiné.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

HTML

+ +
<table class="table_1">
+    <tr>
+        <td>Jean</td>
+        <td>Biche</td>
+    </tr>
+    <tr>
+        <td>Alice</td>
+        <td></td>
+    </tr>
+</table>
+<table class="table_2">
+    <tr>
+        <td>Jean</td>
+        <td>Biche</td>
+    </tr>
+    <tr>
+        <td>Alice</td>
+        <td></td>
+    </tr>
+</table>
+
+ +

CSS

+ +
.table_1 {
+  empty-cells: show;
+}
+.table_2 {
+  empty-cells: hide;
+}
+
+td, th {
+  border: 1px solid #999;
+  padding: 0.5rem;
+}
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.empty-cells")}}

diff --git a/files/fr/web/css/env()/index.html b/files/fr/web/css/env()/index.html new file mode 100644 index 0000000000..aaf9a7792d --- /dev/null +++ b/files/fr/web/css/env()/index.html @@ -0,0 +1,150 @@ +--- +title: env() +slug: Web/CSS/env() +tags: + - CSS + - CSS Function + - CSS Variables + - Fonction + - Reference + - env() +translation_of: Web/CSS/env() +--- +
{{CSSRef}}
+ +

La fonction CSS env() peut être utilisée afin d'insérer la valeur d'une variable d'environnement dans une règle. Les variables d'environnement sont globales pour un document donné, à la différence des propriétés personnalisées. Les variables d'environnement sont définies au niveau de l'agent utilisateur et non par l'utilisateur/le concepteur.

+ +

env() peut être utilisée aux endroits où on souhaite remplacer la valeur, à la façon de la fonction var().

+ +
body {
+  padding:
+    env(safe-area-inset-top, 20px)
+    env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px)
+    env(safe-area-inset-left, 20px);
+}
+ +

La fonction env() peut être utilisée à n'importe quel endroit où une valeur peut être associée à une propriété, à n'importe quel endroit où une valeur peut être utilisée dans un descripteur d'une règle @ (ex. dans une requête média) et, de façon générale, à n'importe quel endroit où les valeurs CSS sont autorisées. Selon les évolutions de la spécification, cette fonction pourrait également être utilisées à d'autres endroits comme les sélecteurs.

+ +
+

Note : Les variables d'environnement furent initialement fournies par le navigateur iOS afin de permettre aux développeurs de placer le contenu sur une zone sûre de la zone d'affichage (viewport) et d'éviter le décrochement formé en haut de l'écran sur certains des appareils.

+
+ +

Syntaxe

+ +
/* Utilisation des quatre zones sûres */
+env(safe-area-inset-top)
+env(safe-area-inset-right)
+env(safe-area-inset-bottom)
+env(safe-area-inset-left)
+
+/* Utilisation du deuxième paramètre pour une valeur de recours */
+env(safe-area-inset-top, 20px);
+env(safe-area-inset-right, 1em);
+env(safe-area-inset-bottom, 0.5vh);
+env(safe-area-inset-left, 1.4rem);
+
+ +

Valeurs

+ +
+
safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
+
Ces mots-clés sont des variables d'environnement qui définissent un rectangle avec les décalages par rapport à chacun des côtés de la zone d'affichage (viewport) dans lequel on pourra placer du contenu sans que ce dernier puisse être rogné du fait de la forme non rectangulaire de l'affichage.
+
+ +
+

Note : À la différence des autres propriétés CSS, les identifiants provenant de l'agent utilisateur sont sensibles à la casse.

+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Examples

+ +

Dans l'exemple qui suit, on utilise le deuxième paramètre de la notation fonctionnelle env() afin de fournir une valeur de recours lorsque la variable d'environnement n'est pas disponible.

+ +

HTML

+ +
<p>
+  Si la fonction <code>env()</code> est prise en charge dans votre
+  navigateur, le texte de ce paragraphe aura 50 pixels de padding avec
+  la bordure gauche mais pas la droite / basse et haute.
+  En effet, le code CSS associé est équivalent à <code>padding: 0 0 0 50px</code>
+  car les noms des propriétés CSS associées aux agents utilisateurs sont
+  sensibles à la casse (contrairement aux autres propriétés).
+</p>
+ +

CSS

+ +
p {
+  width: 300px;
+  border: 2px solid red;
+  padding:
+    env(safe-area-inset-top, 50px)
+    env(safe-area-inset-right, 50px)
+    env(safe-area-inset-bottom, 50px)
+    env(SAFE-AREA-INSET-LEFT, 50px);
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Exemples de valeurs

+ +
/* zéro pour les agents utilisateurs rectangulaires */
+padding: env(safe-area-inset-bottom, 50px);
+
+/* 50px car les propriétés de l'agent sont sensibles à la casse */
+padding: env(Safe-area-inset-bottom, 50px);
+
+/* correspond à padding: 50px 20px car x n'est pas une variable
+   d'environnement valide */
+padding: env(x, 50px 20px);
+
+/* ignorée car '50px, 20px' n'est pas une valeur de padding correcte
+   et que x n'est pas une variable d'environnement */
+padding: env(x, 50px, 20px);
+
+ +

Pour la deuxième valeur, il est possible d'utiliser des virgules afin de fournir un ensemble composite de valeurs à la propriété. Toutefois, si la propriété en question ne permet pas de gérer plusieurs valeurs, la déclaration sera invalide.

+ +
+

Note : Les propriétés relatives à l'agent utilisateur ne sont pas réinitialisées avec la propriété {{cssxref("all")}}.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}{{Spec2("CSS3 Environment Variables")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/extensions_css_microsoft/index.html b/files/fr/web/css/extensions_css_microsoft/index.html new file mode 100644 index 0000000000..017958249c --- /dev/null +++ b/files/fr/web/css/extensions_css_microsoft/index.html @@ -0,0 +1,118 @@ +--- +title: Extensions CSS de Microsoft +slug: Web/CSS/Extensions_CSS_Microsoft +tags: + - CSS + - Non-standard + - Reference +translation_of: Web/CSS/Microsoft_Extensions +--- +
{{CSSRef}}
+ +

Les applications Microsoft, telles que Edge ou Internet Explorer, prennent en charge différentes extensions à CSS. Ces extensions sont préfixées par -ms.

+ +

Propriétés spécifiques à Microsoft (ne pas utiliser sur le Web)

+ +
+

Note : Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Microsoft et ne sont pas en voie de standardisation.

+
+ +
+
    +
  • {{CSSxRef("-ms-accelerator")}}
    • +
  • {{CSSxRef("-ms-block-progression")}}
    • +
  • {{CSSxRef("-ms-content-zoom-chaining")}}
    • +
  • {{CSSxRef("-ms-content-zooming")}}
    • +
  • {{CSSxRef("-ms-content-zoom-limit")}}
    • +
  • {{CSSxRef("-ms-content-zoom-limit-max")}}
    • +
  • {{CSSxRef("-ms-content-zoom-limit-min")}}
    • +
  • {{CSSxRef("-ms-content-zoom-snap")}}
    • +
  • {{CSSxRef("-ms-content-zoom-snap-points")}}
    • +
  • {{CSSxRef("-ms-content-zoom-snap-type")}}
    • +
  • {{CSSxRef("-ms-filter")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-flow-from")}}
    • +
  • {{CSSxRef("-ms-flow-into")}}
    • +
  • {{CSSxRef("-ms-high-contrast-adjust")}}
    • +
  • {{CSSxRef("-ms-hyphenate-limit-chars")}}
    • +
  • {{CSSxRef("-ms-hyphenate-limit-lines")}}
    • +
  • {{CSSxRef("-ms-hyphenate-limit-zone")}}
    • +
  • {{CSSxRef("-ms-ime-align")}}
    • +
  • {{CSSxRef("-ms-overflow-style")}}
    • +
  • {{CSSxRef("-ms-scrollbar-3dlight-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-arrow-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-base-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-darkshadow-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-face-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-highlight-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-shadow-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-track-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scroll-chaining")}}
    • +
  • {{CSSxRef("-ms-scroll-limit")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-x-max")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-x-min")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-y-max")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-y-min")}}
    • +
  • {{CSSxRef("-ms-scroll-rails")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-points-x")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-points-y")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-x")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-y")}}
    • +
  • {{CSSxRef("-ms-scroll-translation")}}
    • +
  • {{CSSxRef("-ms-text-autospace")}}
    • +
  • {{CSSxRef("-ms-touch-select")}}
    • +
  • {{CSSxRef("-ms-wrap-flow")}}
    • +
  • {{CSSxRef("-ms-wrap-margin")}}
    • +
  • {{CSSxRef("-ms-wrap-through")}}
    • +
  • {{CSSxRef("zoom")}}
    • +
+
+ +

Pseudo-éléments

+ +
+
    +
  • {{CSSxRef("::-ms-browse")}}
    • +
  • {{CSSxRef("::-ms-check")}}
    • +
  • {{CSSxRef("::-ms-clear")}}
    • +
  • {{CSSxRef("::-ms-expand")}}
    • +
  • {{CSSxRef("::-ms-fill")}}
    • +
  • {{CSSxRef("::-ms-fill-lower")}}
    • +
  • {{CSSxRef("::-ms-fill-upper")}}
    • +
  • {{CSSxRef("::-ms-reveal")}}
    • +
  • {{CSSxRef("::-ms-thumb")}}
    • +
  • {{CSSxRef("::-ms-ticks-after")}}
    • +
  • {{CSSxRef("::-ms-ticks-before")}}
    • +
  • {{CSSxRef("::-ms-tooltip")}}
    • +
  • {{CSSxRef("::-ms-track")}}
    • +
  • {{CSSxRef("::-ms-value")}}
    • +
+
+ +

Caractéristiques média

+ +
+
    +
  • {{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}
    • +
+
+ +

API DOM relatives à CSS

+ +
+
    +
  • {{DOMxRef("msContentZoomFactor")}}
    • +
  • {{DOMxRef("msGetPropertyEnabled")}}
    • +
  • {{DOMxRef("msGetRegionContent")}}
    • +
  • {{DOMxRef("MSRangeCollection")}}
    • +
  • {{DOMxRef("msRegionOverflow")}}
    • +
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/extensions_mozilla/index.html b/files/fr/web/css/extensions_mozilla/index.html new file mode 100644 index 0000000000..3d9acbff04 --- /dev/null +++ b/files/fr/web/css/extensions_mozilla/index.html @@ -0,0 +1,678 @@ +--- +title: Extensions CSS de Mozilla +slug: Web/CSS/Extensions_Mozilla +tags: + - CSS + - Mozilla + - Non-standard + - Reference +translation_of: Web/CSS/Mozilla_Extensions +--- +
{{CSSRef}}
+ +

Les applications Mozilla, telles que Firefox, prennent en charge un certain nombre d'extensions spécifiques à CSS : des propriétés, des valeurs, des pseudo-éléments, des pseudo-classes, des règles @ et des requêtes média. Ces extensions utilisent le préfixe -moz.

+ +

Propriétés et pseudo-classes spécifiques à Mozilla (ne pas utiliser sur le Web)

+ +
+

Note : Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Mozilla (Firefox par exemple) et ne sont pas en voie de standardisation. Certaines ne s'applique qu'aux éléments XUL.

+
+ +
+

B

+ +
    +
  • {{CSSxRef("-moz-binding")}} {{Deprecated_Inline}}
    • +
  • {{CSSxRef("-moz-border-bottom-colors")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-moz-box-align")}}
    • +
  • {{CSSxRef("-moz-box-direction")}}
    • +
  • {{CSSxRef("-moz-box-flex")}}
    • +
  • {{CSSxRef("-moz-box-ordinal-group")}}
    • +
  • {{CSSxRef("-moz-box-orient")}}
    • +
  • {{CSSxRef("-moz-box-pack")}}
    • +
+ +

C – I

+ +
    +
  • {{CSSxRef("-moz-context-properties")}}
    • +
  • {{CSSxRef("-moz-float-edge")}}
    • +
  • {{CSSxRef("-moz-force-broken-image-icon")}}
    • +
  • {{CSSxRef("-moz-image-region")}}
    • +
+ +

O

+ +
    +
  • {{CSSxRef("-moz-orient")}}
    • +
  • {{CSSxRef("-moz-osx-font-smoothing")}}
    • +
  • {{CSSxRef("-moz-outline-radius")}}
    • +
  • {{CSSxRef("-moz-outline-radius-bottomleft")}}
    • +
  • {{CSSxRef("-moz-outline-radius-bottomright")}}
    • +
  • {{CSSxRef("-moz-outline-radius-topleft")}}
    • +
  • {{CSSxRef("-moz-outline-radius-topright")}}
    • +
  • {{CSSxRef("overflow-clip-box")}}
    • +
  • {{CSSxRef("overflow-clip-box-block")}}
    • +
  • {{CSSxRef("overflow-clip-box-inline")}}
    • +
+ +

S – Z

+ +
    +
  • {{CSSxRef("-moz-stack-sizing")}}
    • +
  • {{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}
    • +
  • {{CSSxRef("-moz-user-focus")}}
    • +
  • {{CSSxRef("-moz-user-input")}}
    • +
  • {{CSSxRef("-moz-user-modify")}}
    • +
  • {{CSSxRef("-moz-window-dragging")}}
    • +
  • {{CSSxRef("-moz-window-shadow")}}
    • +
+
+ +

Anciennes propriétés spécifiques, désormais standardisées

+ +
+

Note : Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.

+
+ +
+
    +
  • +

    A

    +
    • +
  • {{CSSxRef("animation", "-moz-animation")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-delay", "-moz-animation-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-direction", "-moz-animation-direction")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-duration", "-moz-animation-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-fill-mode", "-moz-animation-fill-mode")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-iteration-count", "-moz-animation-iteration-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-name", "-moz-animation-name")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-play-state", "-moz-animation-play-state")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-timing-function","-moz-animation-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("appearance","-moz-appearance")}} {{Experimental_Inline}}
    • +
  • +

    B

    +
    • +
  • {{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}
    • +
  • {{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}
    • +
  • {{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]
    • +
  • {{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}
    • +
  • {{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end")}}]
    • +
  • {{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-color")}}]
    • +
  • {{CSSxRef("border-inline-style","-moz-border-end-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-style")}}]
    • +
  • {{CSSxRef("border-inline-width","-moz-border-end-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-width")}}]
    • +
  • {{CSSxRef("border-image","-moz-border-image")}} {{Deprecated_Inline}}
    • +
  • {{CSSxRef("border-inline-start","-moz-border-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start")}}]
    • +
  • {{CSSxRef("border-inline-start-color","-moz-border-start-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-color")}}]
    • +
  • {{CSSxRef("border-inline-start-style","-moz-border-start-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-style")}}]
    • +
  • {{CSSxRef("border-inline-start-width","-moz-border-start-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-width")}}]
    • +
  • {{CSSxRef("box-sizing", "-moz-box-sizing")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • +

    C

    +
    • +
  • {{CSSxRef("clip-path")}} {{Experimental_Inline}} [Applying to more than SVG]
    • +
  • {{CSSxRef("column-count","-moz-column-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-fill","-moz-column-fill")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-gap","-moz-column-gap")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-width","-moz-column-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-rule","-moz-column-rule")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-rule-width","-moz-column-rule-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-rule-style","-moz-column-rule-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-rule-color","-moz-column-rule-color")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("-moz-context-properties")}} {{Experimental_Inline}}
    • +
  • +

    F – M

    +
    • +
  • {{CSSxRef("filter")}} {{Experimental_Inline}} [Applying to more than SVG]
    • +
  • {{CSSxRef("font-feature-settings","-moz-font-feature-settings")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("font-language-override","-moz-font-language-override")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("hyphens","-moz-hyphens")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("margin-inline-end","-moz-margin-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-end")}}]
    • +
  • {{CSSxRef("margin-inline-start","-moz-margin-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-start")}}]
    • +
  • {{CSSxRef("mask")}} {{Experimental_Inline}} [Applying to more than SVG]
    • +
  • +

    O

    +
    • +
  • {{CSSxRef("opacity","-moz-opacity")}}{{Obsolete_Inline("1.9.1")}}
    • +
  • {{CSSxRef("outline","-moz-outline")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • {{CSSxRef("outline-color","-moz-outline-color")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • {{CSSxRef("outline-offset","-moz-outline-offset")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • {{CSSxRef("outline-style","-moz-outline-style")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • {{CSSxRef("outline-width","-moz-outline-width")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • +

    P

    +
    • +
  • {{CSSxRef("padding-inline-end","-moz-padding-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-start")}}]
    • +
  • {{CSSxRef("padding-inline-start","-moz-padding-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-end")}}]
    • +
  • {{CSSxRef("perspective", "-moz-perspective")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("perspective-origin","-moz-perspective-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("pointer-events")}} {{Experimental_Inline}} [Applying to more than SVG]
    • +
  • +

    T – U

    +
    • +
  • {{CSSxRef("tab-size","-moz-tab-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("text-align-last","-moz-text-align-last")}}{{Obsolete_Inline("53")}}
    • +
  • {{CSSxRef("text-decoration-color","-moz-text-decoration-color")}}{{Obsolete_Inline("39")}}
    • +
  • {{CSSxRef("text-decoration-line","-moz-text-decoration-line")}}{{Obsolete_Inline("39")}}
    • +
  • {{CSSxRef("text-decoration-style","-moz-text-decoration-style")}}{{Obsolete_Inline("39")}}
    • +
  • {{CSSxRef("text-size-adjust","-moz-text-size-adjust")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("transform", "-moz-transform")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transform-origin", "-moz-transform-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transform-style", "-moz-transform-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition", "-moz-transition")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition-delay", "-moz-transition-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition-duration", "-moz-transition-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition-property", "-moz-transition-property")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}
    • +
+
+ +

Valeurs

+ +

Valeurs globales

+ +
+
    +
  • {{cssxref("initial","-moz-initial")}}
    • +
+
+ +

{{Cssxref("-moz-appearance")}}

+ +
+
    +
  • button
    • +
  • button-arrow-down
    • +
  • button-arrow-next
    • +
  • button-arrow-previous
    • +
  • button-arrow-up
    • +
  • button-bevel
    • +
  • checkbox
    • +
  • checkbox-container
    • +
  • checkbox-label
    • +
  • checkmenuitem
    • +
  • dialog
    • +
  • groupbox
    • +
  • listbox
    • +
  • menuarrow
    • +
  • menucheckbox
    • +
  • menuimage
    • +
  • menuitem
    • +
  • menuitemtext
    • +
  • menulist
    • +
  • menulist-button
    • +
  • menulist-text
    • +
  • menulist-textfield
    • +
  • menupopup
    • +
  • menuradio
    • +
  • menuseparator
    • +
  • -moz-mac-unified-toolbar{{Fx_minversion_inline(3.5)}}
    • +
  • -moz-win-borderless-glass
    • +
  • -moz-win-browsertabbar-toolbox{{Fx_minversion_inline(3)}}
    • +
  • -moz-win-communications-toolbox{{Fx_minversion_inline(3)}}
    • +
  • -moz-win-glass
    • +
  • -moz-win-media-toolbox{{Fx_minversion_inline(3)}}
    • +
  • -moz-window-button-box
    • +
  • -moz-window-button-box-maximized
    • +
  • -moz-window-button-close
    • +
  • -moz-window-button-maximize
    • +
  • -moz-window-button-minimize
    • +
  • -moz-window-button-restore
    • +
  • -moz-window-titlebar
    • +
  • -moz-window-titlebar-maximized
    • +
  • progressbar
    • +
  • progresschunk
    • +
  • radio
    • +
  • radio-container
    • +
  • radio-label
    • +
  • radiomenuitem
    • +
  • resizer
    • +
  • resizerpanel
    • +
  • scale-horizontal
    • +
  • scalethumb-horizontal
    • +
  • scalethumb-vertical
    • +
  • scale-vertical
    • +
  • scrollbarbutton-down
    • +
  • scrollbarbutton-left
    • +
  • scrollbarbutton-right
    • +
  • scrollbarbutton-up
    • +
  • scrollbar-small
    • +
  • scrollbarthumb-horizontal
    • +
  • scrollbarthumb-vertical
    • +
  • scrollbartrack-horizontal
    • +
  • scrollbartrack-vertical
    • +
  • separator
    • +
  • spinner
    • +
  • spinner-downbutton
    • +
  • spinner-textfield
    • +
  • spinner-upbutton
    • +
  • statusbar
    • +
  • statusbarpanel
    • +
  • tab
    • +
  • tabpanels
    • +
  • tab-scroll-arrow-back
    • +
  • tab-scroll-arrow-forward
    • +
  • textfield
    • +
  • textfield-multiline
    • +
  • toolbar
    • +
  • toolbarbutton-dropdown
    • +
  • toolbox
    • +
  • tooltip
    • +
  • treeheadercell
    • +
  • treeheadersortarrow
    • +
  • treeitem
    • +
  • treetwisty
    • +
  • treetwistyopen
    • +
  • treeview
    • +
  • window
    • +
+
+ +

{{cssxref("background-image")}}

+ +
+
    +
  • +

    Dégradés {{Gecko_minversion_inline("1.9.2")}}

    + +
      +
    • {{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}
      • +
    • {{CSSxRef("radial-gradient","-moz-radial-gradient")}} {{Deprecated_Inline}}
      • +
    +
    • +
  • +

    Éléments {{gecko_minversion_inline("2.0")}}

    + +
      +
    • {{cssxref("-moz-element")}}
      • +
    +
    • +
  • +

    Sub-images {{gecko_minversion_inline("2.0")}}

    + +
      +
    • {{cssxref("-moz-image-rect")}}
      • +
    +
    • +
+
+ +

{{Cssxref("border-color")}}

+ +
+
    +
  • -moz-use-text-color {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; currentcolor doit être utilisée à la place.
    • +
+
+ +

{{Cssxref("border-style")}} et {{Cssxref("outline-style")}}

+ +
+
    +
  • -moz-bg-inset{{Obsolete_Inline(1.9)}}
    • +
  • -moz-bg-outset{{Obsolete_Inline(1.9)}}
    • +
  • -moz-bg-solid{{Obsolete_Inline(1.9)}}
    • +
+
+ +

Mots-clés pour {{cssxref("<color>")}}

+ +
+
    +
  • -moz-activehyperlinktext
    • +
  • -moz-hyperlinktext
    • +
  • -moz-visitedhyperlinktext
    • +
  • -moz-buttondefault
    • +
  • -moz-buttonhoverface
    • +
  • -moz-buttonhovertext
    • +
  • -moz-default-background-color{{Gecko_minversion_inline("5.0")}}
    • +
  • -moz-default-color{{Gecko_minversion_inline("5.0")}}
    • +
  • -moz-cellhighlight
    • +
  • -moz-cellhighlighttext
    • +
  • -moz-field
    • +
  • -moz-fieldtext
    • +
  • -moz-dialog
    • +
  • -moz-dialogtext
    • +
  • -moz-dragtargetzone
    • +
  • -moz-mac-accentdarkestshadow
    • +
  • -moz-mac-accentdarkshadow
    • +
  • -moz-mac-accentface
    • +
  • -moz-mac-accentlightesthighlight
    • +
  • -moz-mac-accentlightshadow
    • +
  • -moz-mac-accentregularhighlight
    • +
  • -moz-mac-accentregularshadow
    • +
  • -moz-mac-chrome-active{{Gecko_minversion_inline("1.9.1")}}
    • +
  • -moz-mac-chrome-inactive{{Gecko_minversion_inline("1.9.1")}}
    • +
  • -moz-mac-focusring
    • +
  • -moz-mac-menuselect
    • +
  • -moz-mac-menushadow
    • +
  • -moz-mac-menutextselect
    • +
  • -moz-menuhover
    • +
  • -moz-menuhovertext
    • +
  • -moz-win-communicationstext{{Fx_minversion_inline(3)}}
    • +
  • -moz-win-mediatext{{gecko_minversion_inline(1.9)}}
    • +
  • -moz-nativehyperlinktext{{Gecko_minversion_inline("1.9.1")}}
    • +
+
+ +

{{Cssxref("display")}}

+ +
+
    +
  • -moz-box {{Deprecated_Inline}}
    • +
  • -moz-inline-block {{Obsolete_Inline}}
    • +
  • -moz-inline-box {{Deprecated_Inline}}
    • +
  • -moz-inline-grid{{Obsolete_Inline(62)}}
    • +
  • -moz-inline-stack{{Obsolete_Inline(62)}}
    • +
  • -moz-inline-table {{Obsolete_Inline}}
    • +
  • -moz-grid{{Obsolete_Inline(62)}}
    • +
  • -moz-grid-group{{Obsolete_Inline(62)}}
    • +
  • -moz-grid-line{{Obsolete_Inline(62)}}
    • +
  • -moz-groupbox{{Obsolete_Inline}}
    • +
  • -moz-deck{{Obsolete_Inline(62)}}
    • +
  • -moz-popup{{Obsolete_Inline(62)}}
    • +
  • -moz-stack{{Obsolete_Inline(62)}}
    • +
  • -moz-marker{{Obsolete_Inline(62)}}
    • +
+
+ +

{{cssxref("empty-cells")}}

+ +
+
    +
  • -moz-show-background (valeur par défaut en quirks mode)
    • +
+
+ +

{{Cssxref("font")}}

+ +
+
    +
  • -moz-button
    • +
  • -moz-info
    • +
  • -moz-desktop
    • +
  • -moz-dialog (également une couleur)
    • +
  • -moz-document
    • +
  • -moz-workspace
    • +
  • -moz-window
    • +
  • -moz-list
    • +
  • -moz-pull-down-menu
    • +
  • -moz-field (également une couleur)
    • +
+
+ +

{{Cssxref("font-family")}}

+ +
+
    +
  • -moz-fixed
    • +
+
+ +

{{Cssxref("image-rendering")}}

+ +
+
    +
  • {{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}
    • +
+
+ +

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

+ +
+
    +
  • {{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}
    • +
+
+ +

{{Cssxref("list-style-type")}}

+ +
+
    +
  • -moz-arabic-indic
    • +
  • -moz-bengali
    • +
  • -moz-cjk-earthly-branch
    • +
  • -moz-cjk-heavenly-stem
    • +
  • -moz-devanagari
    • +
  • -moz-ethiopic-halehame
    • +
  • -moz-ethiopic-halehame-am
    • +
  • -moz-ethiopic-halehame-ti-er
    • +
  • -moz-ethiopic-halehame-ti-et
    • +
  • -moz-ethiopic-numeric
    • +
  • -moz-gujarati
    • +
  • -moz-gurmukhi
    • +
  • -moz-hangul
    • +
  • -moz-hangul-consonant
    • +
  • -moz-japanese-formal
    • +
  • -moz-japanese-informal
    • +
  • -moz-kannada
    • +
  • -moz-khmer
    • +
  • -moz-lao
    • +
  • -moz-malayalam
    • +
  • -moz-myanmar
    • +
  • -moz-oriya
    • +
  • -moz-persian
    • +
  • -moz-simp-chinese-formal
    • +
  • -moz-simp-chinese-informal
    • +
  • -moz-tamil
    • +
  • -moz-telugu
    • +
  • -moz-thai
    • +
  • -moz-trad-chinese-formal
    • +
  • -moz-trad-chinese-informal
    • +
  • -moz-urdu
    • +
+
+ +

{{Cssxref("overflow")}}

+ +
+
    +
  • {{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}
    • +
  • {{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}
    • +
  • {{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}
    • +
  • {{Cssxref("-moz-hidden-unscrollable")}}
    • +
+
+ +

{{Cssxref("text-align")}}

+ +
+
    +
  • -moz-center
    • +
  • -moz-left
    • +
  • -moz-right
    • +
+
+ +

{{Cssxref("text-decoration")}}

+ +
+
    +
  • -moz-anchor-decoration
    • +
+
+ +

{{Cssxref("-moz-user-select")}}

+ +
+
    +
  • -moz-all
    • +
  • -moz-none
    • +
+
+ +

{{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}

+ +
+
    +
  • -moz-min-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-fit-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-max-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-available {{Fx_minversion_inline(3)}}
    • +
+
+ +

Pseudo-éléments et pseudo-classes

+ +
+
    +
  • +

    A – D

    +
    • +
  • {{CSSxRef("::-moz-anonymous-block")}} eg@:- bug 331432
    • +
  • {{CSSxRef("::-moz-anonymous-positioned-block")}}
    • +
  • {{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-any-link")}} [Matches :link and :visited]
    • +
  • {{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef("::-moz-canvas")}}
    • +
  • {{CSSxRef("::-moz-color-swatch")}}
    • +
  • {{CSSxRef("::-moz-cell-content")}}
    • +
  • {{CSSxRef(":-moz-drag-over")}}
    • +
  • +

    F – I

    +
    • +
  • {{CSSxRef(":-moz-first-node")}}
    • +
  • {{CSSxRef("::-moz-focus-inner")}}
    • +
  • {{CSSxRef("::-moz-focus-outer")}}
    • +
  • {{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}
    • +
  • {{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}
    • +
  • {{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}
    • +
  • {{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}
    • +
  • {{CSSxRef("::-moz-inline-table")}}
    • +
  • +

    L

    +
    • +
  • {{CSSxRef(":-moz-last-node")}}
    • +
  • {{CSSxRef(":-moz-list-bullet")}}
    • +
  • {{CSSxRef(":-moz-list-number")}}
    • +
  • {{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • +

    N – R

    +
    • +
  • {{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}
    • +
  • {{CSSxRef(":-moz-only-whitespace")}}
    • +
  • {{CSSxRef("::-moz-page")}}
    • +
  • {{CSSxRef("::-moz-page-sequence")}}
    • +
  • {{CSSxRef("::-moz-pagebreak")}}
    • +
  • {{CSSxRef("::-moz-pagecontent")}}
    • +
  • {{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}
    • +
  • {{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}
    • +
  • {{CSSxRef("::-moz-progress-bar")}}
    • +
  • {{CSSxRef("::-moz-range-progress")}}
    • +
  • {{CSSxRef("::-moz-range-thumb")}}
    • +
  • {{CSSxRef("::-moz-range-track")}}
    • +
  • {{CSSxRef(":-moz-read-only")}}
    • +
  • {{CSSxRef(":-moz-read-write")}}
    • +
  • +

    S

    +
    • +
  • {{CSSxRef("::-moz-scrolled-canvas")}}
    • +
  • {{CSSxRef("::-moz-scrolled-content")}}
    • +
  • {{CSSxRef("::-moz-scrolled-page-sequence")}}
    • +
  • {{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}
    • +
  • {{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef("::-moz-svg-foreign-content")}}
    • +
  • +

    T

    +
    • +
  • {{CSSxRef("::-moz-table")}}
    • +
  • {{CSSxRef("::-moz-table-cell")}}
    • +
  • {{CSSxRef("::-moz-table-column")}}
    • +
  • {{CSSxRef("::-moz-table-column-group")}}
    • +
  • {{CSSxRef("::-moz-table-outer")}}
    • +
  • {{CSSxRef("::-moz-table-row")}}
    • +
  • {{CSSxRef("::-moz-table-row-group")}}
    • +
  • {{CSSxRef(":-moz-tree-cell")}}
    • +
  • {{CSSxRef(":-moz-tree-cell-text")}}
    • +
  • {{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-tree-checkbox")}}
    • +
  • {{CSSxRef(":-moz-tree-column")}}
    • +
  • {{CSSxRef(":-moz-tree-drop-feedback")}}
    • +
  • {{CSSxRef(":-moz-tree-image")}}
    • +
  • {{CSSxRef(":-moz-tree-indentation")}}
    • +
  • {{CSSxRef(":-moz-tree-line")}}
    • +
  • {{CSSxRef(":-moz-tree-progressmeter")}}
    • +
  • {{CSSxRef(":-moz-tree-row")}}
    • +
  • {{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-tree-separator")}}
    • +
  • {{CSSxRef(":-moz-tree-twisty")}}
    • +
  • +

    U – X

    +
    • +
  • {{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef("::-moz-viewport")}}
    • +
  • {{CSSxRef("::-moz-viewport-scroll")}}
    • +
  • {{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef("::-moz-xul-anonymous-block")}}
    • +
+
+ +

Règles @

+ +
+
    +
  • {{Cssxref("@-moz-document")}}
    • +
+
+ +

Caractéristiques

+ +
+
    +
  • {{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}
    • +
  • {{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}
    • +
  • {{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}
    • +
+
+ +

Autres

+ +
+
    +
  • {{Cssxref("-moz-alt-content")}} {{Bug("11011")}}
    • +
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/feuilles_de_style_alternatives/index.html b/files/fr/web/css/feuilles_de_style_alternatives/index.html new file mode 100644 index 0000000000..cc96a123e1 --- /dev/null +++ b/files/fr/web/css/feuilles_de_style_alternatives/index.html @@ -0,0 +1,77 @@ +--- +title: Feuilles de style alternatives +slug: Web/CSS/Feuilles_de_style_alternatives +tags: + - CSS + - NeedsCompatTable + - Reference +translation_of: Web/CSS/Alternative_style_sheets +--- +
{{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 :

+ +
    +
  • Persistante (aucun rel="alternate", aucun title="") : la feuille de style s'applique au document quoi qu'il arrive
    • +
  • Préférée (aucun rel="alternate", un attribut title="..." défini) : la feuille de style est appliquée par défaut mais est désactivée si une autre feuille de style est sélectionnée. Il ne peut y avoir qu'une seule feuille de style préférée. Si plusieurs feuilles de style sont fournies avec différentes valeurs pour l'attribut title, certaines seront ignorées.
    • +
  • Alternative (rel="stylesheet alternate", un attribut title="..." défini) : la feuille de style est désactivée par défaut mais peut être sélectionnée.
    • +
+ +

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/filter-function/blur()/index.html b/files/fr/web/css/filter-function/blur()/index.html new file mode 100644 index 0000000000..ae64a917d5 --- /dev/null +++ b/files/fr/web/css/filter-function/blur()/index.html @@ -0,0 +1,40 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur() +tags: + - CSS + - Filtre + - Fonction + - Reference +translation_of: Web/CSS/filter-function/blur() +--- +
{{CSSRef}}
+ +

La fonction CSS blur() permet d'appliquer une flou gaussien sur l'image d'entrée. Le résultat de cette fonction est une valeur {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
+ + + +

Syntaxe

+ +
blur(rayon)
+ +

Paramètres

+ +
+
rayon
+
Le rayon d'application du flou, défini par une longueur CSS ({{cssxref("<length>")}}). Cela définit l'écart-type de la fonction gaussienne appliquée (c'est-à-dire le nombre de pixels qui se mélangeront). Ainsi, plus la valeur est grande, plus le flou sera prononcé. Si on utilise la longueur nulle 0, l'image ne sera pas modifiée. La valeur utilisée par défaut lors d'une interpolation est 0.
+
+ +

Exemples

+ +
blur(0);        /* Aucun effet */
+blur(8px);      /* Un flou avec un rayon de 8px */
+blur(1.17rem);  /* Un flou avec un rayon de 1.17rem */
+ +

Voir aussi

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/fr/web/css/filter-function/brightness()/index.html b/files/fr/web/css/filter-function/brightness()/index.html new file mode 100644 index 0000000000..d06071ac24 --- /dev/null +++ b/files/fr/web/css/filter-function/brightness()/index.html @@ -0,0 +1,41 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness() +tags: + - CSS + - Filtre + - Fonction + - Reference +translation_of: Web/CSS/filter-function/brightness() +--- +
{{cssref}}
+ +

La fonction CSS brightness() applique un multiplicateur linéaire sur une image afin de la rendre plus claire ou plus sombre. Le résultat obtenu est une valeur de type {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
+ + + +

Syntaxe

+ +
brightness(multiplicateur)
+ +

Paramètres

+ +
+
multiplicateur
+
L'amplification de la clarté de l'image, indiquée sous la forme d'un nombre ({{cssxref("<number>")}}) ou d'un pourcentage ({{cssxref("<percentage>")}}). Une valeur inférieure à 100% assombrira l'image alors qu'une valeur supérieure à 100% la rendra plus claire. Une valeur de 0% permettra d'obtenir une image complètement noire et une valeur de 100% laissera l'image inchangée. La valeur par défaut utilisée lors de l'interpolation est 1.
+
+ +

Exemples

+ +
brightness(0%)   /* Complètement noir */
+brightness(0.4)  /* 40% de la clarté */
+brightness(1)    /* Aucun effet */
+brightness(200%) /* Double la clarté */
+ +

Voir aussi

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/fr/web/css/filter-function/contrast()/index.html b/files/fr/web/css/filter-function/contrast()/index.html new file mode 100644 index 0000000000..714787a110 --- /dev/null +++ b/files/fr/web/css/filter-function/contrast()/index.html @@ -0,0 +1,41 @@ +--- +title: contrast() +slug: Web/CSS/filter-function/contrast() +tags: + - CSS + - Filtre + - Fonction + - Reference +translation_of: Web/CSS/filter-function/contrast() +--- +
{{CSSRef}}
+ +

La fonction CSS contrast() permet d'ajuster le contraste d'une image. Le résultat de cette fonction est une valeur de type {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-contrast.html")}}
+ + + +

Syntaxe

+ +
contrast(multiplicateur)
+ +

Paramètres

+ +
+
multiplicateur
+
La modification de contraste à appliquer à l'image, exprimée sous la forme d'un nombre ({{cssxref("<number>")}}) ou d'un pourcentage ({{cssxref("<percentage>")}}). Une valeur inférieure à 100% réduira le contraste et une valeur supérieure à 100% accentuera le contraste. Une valeur de 0% permettra d'obtenir une image complètement grise et une valeur de 100% laissera l'image inchangée. La valeur par défaut utilisée pour les interpolations est 1.
+
+ +

Exemples

+ +
contrast(0);     /* Completely gray */
+contrast(65%);   /* 65% contrast */
+contrast(1);     /* No effect */
+contrast(200%);  /* Double contrast */
+ +

Voir aussi

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/fr/web/css/filter-function/drop-shadow()/index.html b/files/fr/web/css/filter-function/drop-shadow()/index.html new file mode 100644 index 0000000000..51b2288aac --- /dev/null +++ b/files/fr/web/css/filter-function/drop-shadow()/index.html @@ -0,0 +1,62 @@ +--- +title: drop-shadow() +slug: Web/CSS/filter-function/drop-shadow() +tags: + - CSS + - Fonction + - Reference + - Type +translation_of: Web/CSS/filter-function/drop-shadow() +--- +
{{CSSRef}}
+ +

La fonction CSS drop-shadow() permet d'appliquer une ombre portée sur une image. Le résultat obtenu par cette fonction est une valeur {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}
+ + + +

En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné dans une couleur donnée et fusionné sous l'image.

+ +
+

Note : Cette fonction s'apparente à la propriété {{cssxref("box-shadow")}}. La propriété box-shadow permet de créer une ombre rectangulaire sous la boîte entière d'un élément. En revanche, la fonction drop-shadow() permet de créer un ombre qui épouse la forme (le canal alpha) de l'image même.

+
+ +

Syntaxe

+ +
drop-shadow(décalage-x, décalage-y, rayon-flou, rayon-étalement, couleur)
+ +

La fonction drop-shadow() accepte un paramètre de type <shadow> (défini avec la propriété {{cssxref("box-shadow")}}), mais où le mot-clé inset n'est pas autorisé.

+ +

Paramètres

+ +
+
décalage-x décalage-y
+
Deux longueurs ({{cssxref("<length>")}}) qui déterminent le décalage de l'ombre sous l'image. décalage-x indique la distance horizontale (les valeurs négatives décalent l'ombre vers la gauche et les valeurs positives la décalent vers la droite). décalage-y indique la distance verticale (les valeurs négatives décalent l'ombre vers le haut et les valeurs positives vers le bas). Si les deux valeurs sont égales à 0, l'ombre est directement placée sous l'image.
+
rayon-flou {{optional_inline}}
+
Une longueur ({{cssxref("<length>")}}) qui représente le rayon du flou. Plus la valeur est élevée, plus l'ombre sera grande et floue. La valeur par défaut est 0 ce qui correspond à un contour net, sans flou. Il n'est pas possible d'utiliser des valeurs négatives
+
rayon-étalement{{optional_inline}}
+
Le rayon d'étalement de l'ombre, défini sous la forme d'une longueur ({{cssxref("<length>")}}). Les valeurs positives permettent d'avoir une ombre plus grande et plus étendue et les valeurs négatives permettent de réduire la zone d'ombre. La valeur par défaut est 0 : l'ombre a alors la même taille que l'image.
+
+
Attention ! Chrome et Safari (basés sur WebKit) ne prennent pas en charge ce paramètre. S'il est utilisé, l'effet ne sera pas applique du tout.
+
+
couleur{{optional_inline}}
+
La couleur de l'ombre, indiquée sous la forme d'une valeur {{cssxref("<color>")}}. La valeur par défaut dépend du navigateur. Pour Firefox et Internet Explorer, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée alors que les navigateurs basés sur WebKit utiliseront une ombre transparente par défaut.
+
+ +

Exemples

+ +
/* Une ombre noire avec un flou de 10px de rayon. */
+drop-shadow(16px 16px 10px black)
+
+/* Une ombre rouge avec un flou de 1rem de rayon et de .3rem d'étalement */
+/* Attention, à l'heure actuelle, ce type d'ombre n'est pas pris en charge */
+/* par l'ensemble des navigateurs */
+drop-shadow(.5rem .5rem 1rem .3rem #e23)
+ +

Voir aussi

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • La propriété CSS {{cssxref("box-shadow")}}
    • +
diff --git a/files/fr/web/css/filter-function/grayscale()/index.html b/files/fr/web/css/filter-function/grayscale()/index.html new file mode 100644 index 0000000000..f469d4e70d --- /dev/null +++ b/files/fr/web/css/filter-function/grayscale()/index.html @@ -0,0 +1,40 @@ +--- +title: grayscale() +slug: Web/CSS/filter-function/grayscale() +tags: + - CSS + - Filtre + - Fonction + - Reference +translation_of: Web/CSS/filter-function/grayscale() +--- +
{{CSSRef}}
+ +

La fonction CSS grayscale() convertit une image en niveaux de gris. Le résultat de cette fonction est une valeur {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}
+ + + +

Syntaxe

+ +
grayscale(multiplicateur)
+ +

Paramètres

+ +
+
multiplicateur
+
L'intensité de la conversion, indiquée sous la forme d'un nombre ({{cssxref("<number>")}}) ou d'un pourcentage ({{cssxref("<percentage>")}}). Avec une valeur égale à 100%, l'image obtenue sera complètement en niveaux de gris. Avec une valeur égale à 0%, l'image source restera inchangée. Les valeurs comprises entre 0% et 100% auront un effet intermédiaire (progression linéaire). Dans le cas d'une interpolation, la valeur par défaut utilisée est 0.
+
+ +

Exemples

+ +
grayscale(0)     /* Aucun effet */
+grayscale(.7)    /* Converti à 70% en niveaux de gris */
+grayscale(100%)  /* Uniquement en niveaux de gris */
+ +

Voir aussi

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/fr/web/css/filter-function/hue-rotate()/index.html b/files/fr/web/css/filter-function/hue-rotate()/index.html new file mode 100644 index 0000000000..051c35b96b --- /dev/null +++ b/files/fr/web/css/filter-function/hue-rotate()/index.html @@ -0,0 +1,43 @@ +--- +title: hue-rotate() +slug: Web/CSS/filter-function/hue-rotate() +tags: + - CSS + - Filtre + - Fonction + - Reference +translation_of: Web/CSS/filter-function/hue-rotate() +--- +
{{CSSRef}}
+ +

La fonction CSS hue-rotate() permet d'appliquer une rotation de teinte sur une image. Le résultat de cette fonction est une valeur {{cssxref("<filter-function>")}}.

+ +
{ {EmbedInteractiveExample("pages/css/function-hue-rotate.html")}}
+ + + +

Syntaxe

+ +
hue-rotate(angle)
+ +

Paramètres

+ +
+
angle
+
L'angle de rotation sur le cercle des couleurs, exprimé avec une valeur de type {{cssxref("<angle>")}}. Une valeur de 0deg laissera l'image inchangée. La valeur utilisée par défaut pour une interpolation sera 0. Bien qu'il n'y ait pas de valeur maximale, la valeur de l'angle est toujours ramenée entre 360deg et 0deg.
+
+ +

Exemples

+ +
hue-rotate(-90deg);  /* Correspond à une rotation de 270deg */
+hue-rotate(0deg);    /* Sans effet */
+hue-rotate(90deg);   /* Rotation de 90deg */
+hue-rotate(.5turn);  /* Rotation de 180deg */
+hue-rotate(405deg);  /* Correspond à une rotation de 45deg */
+
+ +

Voir aussi

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/fr/web/css/filter-function/index.html b/files/fr/web/css/filter-function/index.html new file mode 100644 index 0000000000..23761cc504 --- /dev/null +++ b/files/fr/web/css/filter-function/index.html @@ -0,0 +1,69 @@ +--- +title: +slug: Web/CSS/filter-function +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/filter-function +--- +
{{CSSRef}}
+ +

Le type de donnée <filter-function> représente un effet graphique qui peut modifier l'apparence d'une image. Il est notamment utilisé avec les propriétés {{cssxref("filter")}} et {{cssxref("backdrop-filter")}}.

+ +

Syntaxe

+ +

Une valeur de type <filter-function> se construit avec l'une des fonctions listées ci-après. Chaque fonction utilise un argument et si celui-ci est invalide, aucun filtre n'est appliqué.

+ +
+
{{cssxref("filter-function/blur", "blur()")}}
+
Ajoute un flou sur l'image.
+
{{cssxref("filter-function/brightness", "brightness()")}}
+
Rend l'image plus claire ou plus sombre.
+
{{cssxref("filter-function/contrast", "contrast()")}}
+
Augmente ou diminue le contraste de l'image.
+
{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
+
Applique une ombre portée derrière l'image.
+
{{cssxref("filter-function/grayscale", "grayscale()")}}
+
Convertit l'image en niveaux de gris.
+
{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​​​​​​​​
+
Modifie la teinte globale de l'image.
+
{{cssxref("filter-function/invert", "invert()")}}
+
Inverse les couleurs de l'image.
+
{{cssxref("filter-function/opacity", "opacity()")}}
+
Rend l'image transparente.
+
{{cssxref("filter-function/saturate", "saturate()")}}
+
Sursature ou désature l'image.
+
{{cssxref("filter-function/sepia", "sepia()")}}
+
Convertit l'image en sépia.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>')}}{{Spec2('Filters 1.0')}}Définition initiale.
+ +

Voir aussi

+ +
    +
  • Les propriétés qui utilisent ce type de donnée : +
      +
    • {{cssxref("filter")}}
      • +
    • {{cssxref("backdrop-filter")}}
      • +
    +
    • +
diff --git a/files/fr/web/css/filter-function/invert()/index.html b/files/fr/web/css/filter-function/invert()/index.html new file mode 100644 index 0000000000..25a034fdd1 --- /dev/null +++ b/files/fr/web/css/filter-function/invert()/index.html @@ -0,0 +1,40 @@ +--- +title: invert() +slug: Web/CSS/filter-function/invert() +tags: + - CSS + - Filtre + - Fonction + - Reference +translation_of: Web/CSS/filter-function/invert() +--- +
{{CSSRef}}
+ +

La fonction CSS invert() permet d'inverser les couleurs de l'image. La valeur obtenue par cette fonction est de type {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-invert.html")}}
+ + + +

Syntaxe

+ +
invert(multiplicateur)
+ +

Paramètres

+ +
+
multiplicateur
+
L'intensité de la conversion, indiquée sous la forme d'un nombre ({{cssxref("<number>")}}) ou d'un pourcentage ({{cssxref("<percentage>")}}). Avec 100%, les couleurs seront entièrement inversées (ce sera un négatif de l'image originale). Une valeur de 0% ne modifiera pas l'image. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur utilisée par défaut est 0.
+
+ +

Exemples

+ +
invert(0);     /* Aucun effet */
+invert(.6);    /* Inversion à 60% */
+invert(100%);  /* Négatif de l'image originale */
+ +

Voir aussi

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/fr/web/css/filter-function/opacity()/index.html b/files/fr/web/css/filter-function/opacity()/index.html new file mode 100644 index 0000000000..6518f7b998 --- /dev/null +++ b/files/fr/web/css/filter-function/opacity()/index.html @@ -0,0 +1,45 @@ +--- +title: opacity() +slug: Web/CSS/filter-function/opacity() +tags: + - CSS + - Filtre + - Fonction + - Reference +translation_of: Web/CSS/filter-function/opacity() +--- +
{{CSSRef}}
+ +

La fonction CSS opacity() permet de modifier la transparence de l'image. Le résultat obtenu par cette fonction est une valeur {{cssxref("<filter-function>")}}.

+ +
{ {EmbedInteractiveExample("pages/css/function-opacity.html")}}
+ + + +
+

Note : Cette fonction est proche de la propriété {{cssxref("opacity")}} mais, selon le navigateur, les filtres CSS peuvent bénéficier de l'accélération matérielle pour de meilleures performances.

+
+ +

Syntaxe

+ +
opacity(multiplicateur)
+ +

Paramètres

+ +
+
multiplicateur
+
L'intensité de l'opacité, indiquée comme un nombre ({{cssxref("<number>")}}) ou comme un pourcentage ({{cssxref("<percentage>")}}). Une  valeur de 0% entraînera une image complètement transparente. Une valeur de 100% laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera 1.
+
+ +

Exemples

+ +
opacity(0%);   /* Complètement transparente */
+opacity(50%);  /* 50% transparent */
+opacity(1);    /* Aucun effet */
+ +

Voir aussi

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • La propriété CSS {{cssxref("opacity")}}
    • +
diff --git a/files/fr/web/css/filter-function/saturate()/index.html b/files/fr/web/css/filter-function/saturate()/index.html new file mode 100644 index 0000000000..4d5e6ac851 --- /dev/null +++ b/files/fr/web/css/filter-function/saturate()/index.html @@ -0,0 +1,41 @@ +--- +title: saturate() +slug: Web/CSS/filter-function/saturate() +tags: + - CSS + - Filtre + - Fonction + - Reference +translation_of: Web/CSS/filter-function/saturate() +--- +
{{CSSRef}}
+ +

La fonction CSS saturate() permet d'accentuer ou de réduire la saturation d'une image. La valeur obtenue par cette fonction est une valeur de type {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-saturate.html")}}
+ + + +

Syntaxe

+ +
saturate(multiplicateur)
+ +

Paramètres

+ +
+
multiplicateur
+
L'intensité de la modification sous la forme d'un nombre ({{cssxref("<number>")}}) ou d'un pourcentage ({{cssxref("<percentage>")}}). Une valeur inférieure à 100% réduira la saturation et une valeur supérieure accentuera la saturation. Une valeur de 0% désaturera complètement l'image alors qu'une valeur de 100% laissera l'image inchangée. Lors d'une interpolation, la valeur par défaut est 1.
+
+ +

Exemples

+ +
saturate(0);     /* Complètement sous-saturée */
+saturate(.4);    /* Sous-saturée à 40% */
+saturate(100%);  /* Aucun effet */
+saturate(200%);  /* Saturation doublée */
+ +

Voir aussi

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/fr/web/css/filter-function/sepia()/index.html b/files/fr/web/css/filter-function/sepia()/index.html new file mode 100644 index 0000000000..b6e0b21e8d --- /dev/null +++ b/files/fr/web/css/filter-function/sepia()/index.html @@ -0,0 +1,40 @@ +--- +title: sepia() +slug: Web/CSS/filter-function/sepia() +tags: + - CSS + - Filtre + - Fonction + - Reference +translation_of: Web/CSS/filter-function/sepia() +--- +
{{cssref}}
+ +

La fonction CSS sepia() convertit une image en sépia, lui donnant un aspect plus jaune/marron, voire vielli. Le résultat obtenu est une valeur de type {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-sepia.html")}}
+ + + +

Syntaxe

+ +
sepia(multiplicateur)
+ +

Paramètres

+ +
+
multiplicateur
+
L'intensité de la conversion indiquée sous la forme d'un nombre ({{cssxref("<number>")}}) ou d'un pourcentage ({{cssxref("<percentage>")}}). Une valeur de 100% permttra d'obtenir une image complètement sépia tandis qu'une valeur de 0% laissera l'image inchangée. Les valeurs entre 0% et 100% représenteront des conversions proportionnelles. Lors d'une interpolation, la valeur par défaut sera 0.
+
+ +

Exemples

+ +
sepia(0);     /* Aucun effet */
+sepia(.65);   /* 65% de sépia */
+sepia(100%);  /* Complètement sépia */
+ +

Voir aussi

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/fr/web/css/filter-function/url/index.html b/files/fr/web/css/filter-function/url/index.html new file mode 100644 index 0000000000..958e94fff7 --- /dev/null +++ b/files/fr/web/css/filter-function/url/index.html @@ -0,0 +1,33 @@ +--- +title: url() +slug: Web/CSS/filter-function/url +tags: + - CSS + - Junk + - Reference +translation_of: Web/CSS/url() +--- +
{{CSSRef}}
+ +

La fonction url() permet d'utiliser un filtre SVG afin de modifier l'apparence d'une image.

+ +

Syntaxe

+ +
url(emplacement)
+ +

Paramètres

+ +
+
emplacement
+
L'URL ({{cssxref("<url>")}}) d'un fichier {{glossary("XML")}} qui définit un filtre SVG. On peut ajouter une ancre sur cette URL afin d'indiquer un filtre spécifique.
+
+ +

Exemple

+ +
url(ressources.svg#c1)
+ +

Voir aussi

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/fr/web/css/filter/index.html b/files/fr/web/css/filter/index.html new file mode 100644 index 0000000000..2e10b2f60c --- /dev/null +++ b/files/fr/web/css/filter/index.html @@ -0,0 +1,1165 @@ +--- +title: filter +slug: Web/CSS/filter +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/filter +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété filter permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures.

+ +

Plusieurs fonctions sont inclues dans le standard CSS et permettent d'obtenir des effets prédéfinis. Il est également possible d'utiliser un filtre SVG via une URL référençant un élément SVG filter.

+ +
{{EmbedInteractiveExample("pages/css/filter.html")}}
+ + + +

Syntaxe

+ +
/* URL vers un filtre SVG */
+filter: url("filters.svg#filter-id");
+
+/* Fonctions de filtre */
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* On applique plusieurs filtres */
+filter: contrast(175%) brightness(3%);
+
+/* On utilise aucun filtre */
+filter: none;
+
+/* Valeurs globales */
+filter: inherit;
+filter: initial;
+filter: unset;
+
+ +

Avec une fonction, on utilisera la forme suivante :

+ +
filter: <filter-function> [<filter-function>]* | none
+
+ +

En utilisant un élément SVG {{SVGElement("filter")}}, on utilisera la forme suivante :

+ +
filter: url(file.svg#filter-element-id)
+
+ +

Interpolation

+ +

Si les deux filtres possèdent chacun une liste de même longueur (sans {{cssxref("<url>")}}, chacune des fonctions est interpolée selon ses propres règles. Si les deux listes ont des longueurs différentes, les derniers filtres de la liste la plus longue sont utilisés avec leurs valeurs par défaut afin de compléter la liste la plus courte, ensuite chaque fonction est interpolée selon ses propres règles. Si un filtre vaut none, il est remplacé avec la fonction de filtre (avec ses valeurs par défaut) de l'autre liste puis l'ensemble des fonctions est interpolé selon les règles de chacune. Dans les autres cas, on utilise un interpolation discrète.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Voici un rapide exemple de filtre fonctionnel. Chaque fonction est illustrée en détail par la suite.

+ +
.mydiv { filter: grayscale(50%) }
+
+/* on applique un niveau de gris à 50% */
+/* et un flou dont le rayon vaut 10px  */
+img {
+  filter: grayscale(0.5) blur(10px);
+}
+ +

Voici un rapide exemple de filtre utilisant une ressource SVG :

+ +
.target { filter: url(#c1); }
+
+.mydiv { filter: url(commonfilters.xml#large-blur) }
+
+ +

Fonctions prédéfinies

+ +

Pour utiliser la propriété CSS filter, on utilisera none ou une ou plusieurs des fonctions listées ci-après avec, pour chacune, un argument. Si la valeur est invalide, la fonction renverra none. Sauf mention contraire, les fonctions qui acceptent des valeurs exprimées en pourcentages (34%) acceptent également des valeurs décimales (0.34).

+ +

url()

+ +

La fonction url() prend comme argument l'emplacement d'un fichier XML qui définit le filtre SVG à appliquer. L'URL peut faire référence à une ancre d'un élément spécifique.

+ +
filter: url(resources.svg#c1)
+
+ +

blur()

+ +

Cette fonction applique un flou gaussien à l'image d'entrée. La valeur du paramètre correspond au rayon de flou (l'écart-type de la gaussienne) utilisé. Plus la valeur est importante, plus le flou sera prononcé. La valeur par défaut du paramètre est 0. Selon la spécification, le paramètre est une valeur de type {{cssxref("<length>")}} mais la fonction n'accepte pas de valeurs exprimées en pourcentages.

+ +
filter: blur(5px)
+
+ + + +
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
+  </filter>
+</svg>
+ +

{{EmbedLiveSample('blur_example','100%','236px','')}}

+ +
+

Note : Voir {{cssxref("filter-function/blur", "blur()")}} pour plus d'informations.

+
+ +

brightness()

+ +

La fonction permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal 0% créera une image totalement noire et une valeur de 100% conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est 1.

+ +
filter: brightness(0.5)
+ +
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+ <filter id="brightness">
+    <feComponentTransfer>
+        <feFuncR type="linear" slope="[amount]"/>
+        <feFuncG type="linear" slope="[amount]"/>
+        <feFuncB type="linear" slope="[amount]"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+ + + +

{{EmbedLiveSample('brightness_example','100%','231px','')}}

+ +
+

Note : Voir {{cssxref("filter-function/brightness", "brightness()")}} pour plus d'informations.

+
+ +

contrast()

+ +

Cette fonction permet d'ajuster le contraste de l'image d'entrée. Une valeur de 0% créera une image entièrement grise. Une valeur de 100% conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est 1.

+ +
filter: contrast(200%)
+
+ +
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="contrast">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+ + + +

{{EmbedLiveSample('contrast_example','100%','203px','')}}

+ +
+

Note : Voir {{cssxref("filter-function/contrast", "contrast()")}} pour plus d'informations.

+
+ +

drop-shadow()

+ +

Cette fonction permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci. La fonction peut accepter une valeur de type {{cssxref("<shadow>")}} (définie dans la spécification CSS3 sur les arrière-plans), une exception : le mot-clé inset n'est pas autorisée. Cette fonction est semblable à la propriété {{cssxref("box-shadow")}} plus répandue ; seule différence : les navigateurs utilisent parfois l'accélération matérielle pour les filtres ce qui peut permettre d'obtenir de meilleurs performances. Les paramètres de l'argument <shadow> sont les suivants :

+ +
+
<offset-x> <offset-y> (nécessaire)
+
Deux valeurs {{cssxref("<length>")}} qui indiquent le décalage de l'ombre portée. <offset-x> définit la distance horizontale : des valeurs négatives décaleront l'ombre à gauche de l'élément. <offset-y> définit la distance verticale : des valeurs négatives décaleront l'ombre au-dessus de l'élément. Se référer à la page {{cssxref("<length>")}} pour les différentes unités utilisables.
+ Si les deux valeurs sont nulles, l'ombre sera exactement placée sous l'élément (et pourra servir à générer un effet de flou si <blur-radius> et/ou <spread-radius> sont utilisés).
+
<blur-radius> (optionnel)
+
Une troisième valeur de type {{cssxref("<length>")}}. Plus la valeur sera grande, plus le flou sera important (l'ombre sera plus grande et moins prononcée). Les valeurs négatives ne sont pas autorisée. La valeur par défaut est 0, le bord de l'ombre sera droit.
+
<spread-radius> (optionnel)
+
Un quatrième valeur de type {{cssxref("<length>")}}. Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est 0 (l'ombre aura la même taille que l'élément). 
+
Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.
+
<color> (optionnel)
+
Voir {{cssxref("<color>")}} pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété {{cssxref("color")}} est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile).
+
+ +
filter: drop-shadow(16px 16px 10px black)
+ +
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
+ <filter id="drop-shadow">
+    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
+    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
+    <feFlood flood-color="[color]"/>
+    <feComposite in2="offsetblur" operator="in"/>
+    <feMerge>
+      <feMergeNode/>
+      <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+  </filter>
+</svg>
+ + + +

{{EmbedLiveSample('shadow_example','100%','300px','')}}

+ +
+

Note : Voir {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} pour plus d'informations.

+
+ +

grayscale()

+ +

L'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de 100% sera complètement en niveaux de gris. 0% conservera l'image telle quelle. La valeur par défaut du paramètre est 0.

+ +
filter: grayscale(100%)
+ + + +

{{EmbedLiveSample('grayscale_example','100%','209px','')}}

+ +
+

Note : Voir {{cssxref("filter-function/grayscale", "grayscale()")}} pour plus d'informations.

+
+ +

hue-rotate()

+ +

Cette fonction applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de 0deg conservera l'image telle quelle. La valeur par défaut du paramètre est 0deg. Il n'y a pas de valeur maximale pour l'argument, si une valeur supérieure à 360deg est utilisée, ce sera la mesure de l'angle correspondante qui sera utilisée.

+ +
filter: hue-rotate(90deg)
+ + + +
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgHueRotate" >
+    <feColorMatrix type="hueRotate" values="[angle]" />
+  <filter />
+</svg>
+ +

{{EmbedLiveSample('huerotate_example','100%','221px','')}}

+ +
+

Note : Voir {{cssxref("filter-function/hue-rotate", "hue-rotate()")}} pour plus d'informations.

+
+ +

invert()

+ +

Cette fonction permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de 100% inversera complètement les couleurs (tel un négatif) et une valeur 0% conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est 0.

+ +
filter: invert(100%)
+ + + +

{{EmbedLiveSample('invert_example','100%','407px','')}}

+ +
+

Note : Voir {{cssxref("filter-function/invert", "invert()")}} pour plus d'informations.

+
+ +

opacity()

+ +

Cette fonction permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de 0% rendra l'image complètement transparente et une valeur de 100% conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est 1. Cette fonction est proche de la propriété {{cssxref("opacity")}}, toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances.

+ +
filter: opacity(50%)
+ + + +

{{EmbedLiveSample('opacity_example','100%','210px','')}}

+ +
+

Note : Voir {{cssxref("filter-function/opacity", "opacity()")}} pour plus d'informations.

+
+ +

saturate()

+ +

L'image d'entrée est saturée. La valeur de l'argument indique la force de la saturation. Une valeur de 0% fera que l'image sera totalement désaturée et une valeur de 100% conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à 100% pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est 1.

+ +
filter: saturate(200%)
+ + + +

{{EmbedLiveSample('saturate_example','100%','332px','')}}

+ +
+

Note : Voir {{cssxref("filter-function/saturate", "saturate()")}} pour plus d'informations.

+
+ +

sepia()

+ +

L'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de 0%, l'image d'entrée sera inchangée. Les valeurs comprises entre 0% et 100% appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est 0.

+ +
filter: sepia(100%)
+ + + +

{{EmbedLiveSample('sepia_example','100%','229px','')}}

+ +
+

Note : Voir {{cssxref("filter-function/sepia", "sepia()")}} pour plus d'informations.

+
+ +

Enchaîner les fonctions

+ +

On peut appliquer autant de fonction que nécessaire pour manipuler le rendu obtenu. Dans l'exemple suivant, on augmente le contraste et la luminosité de l'image :

+ +
filter: contrast(175%) brightness(103%)
+ + + +

{{EmbedLiveSample('Enchaîner_les_fonctions','100%','209px','')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}{{Spec2('Filters 1.0')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.filter")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/filter_effects/index.html b/files/fr/web/css/filter_effects/index.html new file mode 100644 index 0000000000..6c00f5d67d --- /dev/null +++ b/files/fr/web/css/filter_effects/index.html @@ -0,0 +1,65 @@ +--- +title: Filter Effects +slug: Web/CSS/Filter_Effects +tags: + - Aperçu + - CSS + - Filter Effects + - Reference +translation_of: Web/CSS/Filter_Effects +--- +
{{CSSRef}}
+ +

Filter Effects ou « module des effets de filtre » (ou plus communément « filtres CSS ») est un module de la spécification CSS qui définit une façon de traiter le rendu d'un élément avant que celui-ci soit affiché dans le document.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("backdrop-filter")}}
    • +
  • {{cssxref("filter")}}
    • +
+
+ +

Types de données

+ +
+
    +
  • {{cssxref("<filter-function>")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}{{ Spec2('Filters 1.0') }}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

backdrop-filter

+ + + +

{{Compat("css.properties.backdrop-filter")}}

+ +

filter

+ + + +

{{Compat("css.properties.filter")}}

diff --git a/files/fr/web/css/filters_effects/index.html b/files/fr/web/css/filters_effects/index.html new file mode 100644 index 0000000000..a557f7e400 --- /dev/null +++ b/files/fr/web/css/filters_effects/index.html @@ -0,0 +1,114 @@ +--- +title: Filters Effects +slug: Web/CSS/Filters_Effects +tags: + - CSS + - Reference +translation_of: Web/CSS/Filter_Effects +--- +
{{CSSRef}}
+ +

Filter Effects (ou module des effets de filtre) est un module CSS qui définit une manière de traiter le rendu des éléments avant qu'ils ne soient affichés dans le document.

+ +

Référence

+ +

Propriétés CSS

+ +
+
    +
  • {{cssxref("filter")}}
    • +
+
+ +

Fonctions CSS

+ +
+
    +
  • {{cssxref("filter", "blur()", "#blur()")}}
    • +
  • {{cssxref("filter", "brightness()", "#brightness()")}}
    • +
  • {{cssxref("filter", "contrast()", "#contrast()")}}
    • +
  • {{cssxref("filter", "drop-shadow()", "#drop-shadow()")}}
    • +
  • {{cssxref("filter", "grayscale()", "#grayscale()")}}
    • +
  • {{cssxref("filter", "hue-rotate()", "#hue-rotate()")}}
    • +
  • {{cssxref("filter", "invert()", "#invert()")}}
    • +
  • {{cssxref("filter", "opacity()", "#opacity()")}}
    • +
  • {{cssxref("filter", "saturate()", "#saturate()")}}
    • +
  • {{cssxref("filter", "sepia()", "#sepia()")}}
    • +
  • {{cssxref("filter", "url()", "#url()")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}{{Spec2('Filters 1.0')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
Support simple{{CompatChrome("18.0")}}{{property_prefix("-webkit")}}{{CompatGeckoDesktop(35)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatOpera("15.0")}}{{property_prefix("-webkit")}}{{CompatSafari("6.0")}}{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)EdgeIE MobileOpera MobileSafari Mobile
Support simle{{CompatAndroid("4.4")}}{{property_prefix("-webkit")}}{{CompatGeckoDesktop(35)}}{{CompatVersionUnknown}}{{CompatNo}}22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}} +

6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}

+
+
diff --git a/files/fr/web/css/fit-content/index.html b/files/fr/web/css/fit-content/index.html new file mode 100644 index 0000000000..25eeb21a10 --- /dev/null +++ b/files/fr/web/css/fit-content/index.html @@ -0,0 +1,110 @@ +--- +title: fit-content() +slug: Web/CSS/fit-content +tags: + - CSS + - Experimental + - Fonction + - Reference + - Web +translation_of: Web/CSS/fit-content +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La fonction CSS fit-content() permet d'obtenir une dimension restreinte à un intervalle donnée (en utilisant la formule  min(taille maximale, max(taille minimale, argument)).

+ +
/* Valeurs de type <length> */
+fit-content(200px)
+fit-content(5cm)
+fit-content(30vw)
+fit-content(100ch)
+
+/* Valeurs de type <percentage> */
+fit-content(40%)
+
+ +

Cette fonction peut être utilisée pour définir la taille d'une piste via les propriétés relatives aux grilles CSS où la taille maximale est définie par max-content et où la taille minimale est définie par auto et qui est calculée de façon similaire à auto (i.e. minmax(auto, max-content)), sauf que la taille de la piste est ramenée à argument si celui-ci est supérieur à auto.

+ +

Elle peut également être utilisée pour définir la taille d'une boîte avec {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}} où la taille maximale fait référence à la taille maximale du contenu et où la taille minimale fait référence à la taille minimale du contenu.

+ +

Syntaxe

+ +

Valeurs

+ +
+
<length>
+
Une longueur (valeur de type {{cssxref("<length>")}}) exprimée de façon absolue.
+
<percentage>
+
Un pourcentage (valeur de type {{cssxref("<percentage>")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur).
+
Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>Item as wide as the content.</div>
+  <div>
+    Item with more text in it. Because the contents of it are
+    wider than the maximum width, it is clamped at 300 pixels.
+  </div>
+  <div>Flexible item</div>
+</div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}{{Spec2("CSS3 Sizing")}}Définition de la fonction pour les dimensions de boîte avec les propriétés  {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}}.
{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}{{Spec2("CSS Grid")}}Définition initiale, la fonction peut être utilisée pour définir la taille d'une piste au sein d'une grille CSS.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-template-columns.fit-content")}}

diff --git a/files/fr/web/css/flex-basis/index.html b/files/fr/web/css/flex-basis/index.html new file mode 100644 index 0000000000..9e12dbdf85 --- /dev/null +++ b/files/fr/web/css/flex-basis/index.html @@ -0,0 +1,209 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/flex-basis +--- +
{{CSSRef}}
+ +

La propriété flex-basis détermine la base de flexibilité utilisée comme taille initiale principale pour un élément flexible. Cette propriété détermine la taille de la boîte de contenu sauf si une autre boîte est visée par {{cssxref("box-sizing")}}.

+ +
{{EmbedInteractiveExample("pages/css/flex-basis.html")}}
+ + + +
+

Note : Dans le cas où flex-basis (avec une valeur différente de auto) et width (ou height si flex-direction: column) sont définis pour un élément, c'est flex-basis qui a la priorité.

+
+ +

Syntaxe

+ +
/* On définit une largeur */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* On utilise les dimensions       */
+/* intrinsèques avec des mots-clés */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* La taille se calcule automatiquement */
+/* en fonction du contenu de l'élément  */
+flex-basis: content;
+
+/* Valeurs globales */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+
+ +

La propriété flex-basis est définie grâce au mot-clé content ou grâce à une valeur de type <'width'>.

+ +

Valeurs

+ +
+
<'width'>
+
Un longueur absolue (type {{cssxref("<length>")}} ou un pourcentage (type {{cssxref("<percentage>")}})relatif à la taille principale du conteneur flexible ou encore le mot-clé auto. Les valeurs négatives ne sont pas autorisées. La valeur par défaut est auto.
+
content
+
Le dimensionnement se fera de façon automatique selon le contenu de l'élément flexible.
+
+
Note : Cette valeur n'était pas définie par la première version de la spécification sur les boîtes flexibles. Aussi, certaines anciennes implémentations se basant sur cette version de la spécification ne prendront pas cette valeur en charge. Un effet équivalent peut être obtenu en réglant la taille principale ({{cssxref("width")}} ou {{cssxref("height")}}) avec auto.
+ +
Note : Voici un rapide historique pour cette propriété : + +
    +
  • Au début, flex-basis:auto signifiait « se référer à ma propriété width ou height »
    • +
  • Ensuite, flex-basis:auto a été modifiée pour indiquer un dimensionnement automatique et le mot-clé main-size fut introduit pour faire référence à la propriété width ou height. L'implémentation dans Gecko a été suivie avec le bug {{bug("1032922")}}.
    • +
  • Cette modification a été annulée avec le bug {{bug("1093316")}} afin qu'auto fasse à nouveau référence à la propriété height ou width. Le mot-clé content a été introduit pour déclencher un dimensionnement automatique (c'est le bug {{bug("1105111")}} qui couvre cette implémentation).
    • +
+
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<ul class="container">
+  <li class="flex flex1">1: flex-basis test</li>
+  <li class="flex flex2">2: flex-basis test</li>
+  <li class="flex flex3">3: flex-basis test</li>
+  <li class="flex flex4">4: flex-basis test</li>
+  <li class="flex flex5">5: flex-basis test</li>
+</ul>
+
+<ul class="container">
+  <li class="flex flex6">6: flex-basis test</li>
+</ul>
+
+ +

CSS

+ +
.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 18px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill';
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '860', '360')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}{{Spec2('CSS3 Flexbox')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.flex-basis")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/flex-direction/index.html b/files/fr/web/css/flex-direction/index.html new file mode 100644 index 0000000000..7c21fc1d64 --- /dev/null +++ b/files/fr/web/css/flex-direction/index.html @@ -0,0 +1,150 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/flex-direction +--- +
{{CSSRef}}
+ +

La propriété flex-direction définit la façon dont les éléments flexibles sont placés dans un conteneur flexible : elle définit l'axe principal et la direction des éléments (normale ou inversée).

+ +
{{EmbedInteractiveExample("pages/css/flex-direction.html")}}
+ + + +

On notera que les valeurs row et row-reverse sont impactées par la direction du conteneur. Si {{htmlattrxref("dir")}} vaut ltr, row représente l'axe horizontal allant de la gauche vers la droite et row-reverse représente le même axe allant de la droite vers la gauche. Si dir vaut rtl, row correspondra à l'axe horizontal orienté de la droite vers la gauche et row-reverse de la gauche vers la droite.

+ +

Pour plus d'informations, voir la page Utiliser les boîtes flexibles (flexbox) CSS.

+ +

Syntaxe

+ +
/* La direction suit une ligne */
+flex-direction: row;
+
+/* Semblable à <row> mais dans */
+/* la direction opposée        */
+flex-direction: row-reverse;
+
+/* Les lignes de texte sont */
+/* empilées                 */
+flex-direction: column;
+
+/* Semblable à <column> mais dans */
+/* la direction opposée           */
+flex-direction: column-reverse;
+
+/* Valeurs globales */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+
+ +

Valeurs

+ +
+
row
+
L'axe principal du conteneur flexible suit la direction du texte. Les points main-start et main-end vont dans la même direction que le contenu.
+
row-reverse
+
L'axe principal du conteneur flexible suit la direction du texte. Les points main-start et main-end vont dans la direction opposée au contenu.
+
column
+
L'axe principal du conteneur flexible suit l'axe de bloc (perpendiculaire à la direction du texte). Les points main-start et main-end correspondent aux points before et after de {{cssxref("writing-mode")}}.
+
column-reverse
+
Se comporte comme column mais main-start et main-end sont échangés.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<h4>Un exemple avec column-reverse</h4>
+<div id="content">
+    <div class="box" style="background-color:red;">A</div>
+    <div class="box" style="background-color:lightblue;">B</div>
+    <div class="box" style="background-color:yellow;">C</div>
+</div>
+<h4>Un exemple avec row-reverse</h4>
+<div id="content1">
+    <div class="box" style="background-color:red;">A</div>
+    <div class="box" style="background-color:lightblue;">B</div>
+    <div class="box" style="background-color:yellow;">C</div>
+</div>
+
+ +

CSS

+ +
#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}
+ +

Résultat

+ +

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

+ +

Accessibilité

+ +

Lorsqu'on utilise flex-direction avec les valeurs row-reverse ou column-reverse, on crée une déconnexion entre la présentation visuelle du contenu et l'ordre du DOM. Cela aura un impact négatif pour les utilisateurs qui naviguent à l'aide d'outils d'assistance tels que les les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct pour la lecture.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}{{Spec2('CSS3 Flexbox')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.flex-direction")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/flex-flow/index.html b/files/fr/web/css/flex-flow/index.html new file mode 100644 index 0000000000..f83f7d8f3c --- /dev/null +++ b/files/fr/web/css/flex-flow/index.html @@ -0,0 +1,98 @@ +--- +title: flex-flow +slug: Web/CSS/flex-flow +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/flex-flow +--- +
{{ CSSRef}}
+ +

La propriété CSS flex-flow est une propriété raccourcie pour les propriétés {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}}.

+ +
{{EmbedInteractiveExample("pages/css/flex-flow.html")}}
+ + + +

Pour plus d'informations, voir la page Utiliser les boîtes flexibles (flexbox) CSS.

+ +

Syntaxe

+ +
/* flex-flow: <'flex-direction'> */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: <'flex-wrap'> */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: <'flex-direction'> et <'flex-wrap'> */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* Valeurs globales */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+
+ +

Valeurs

+ +

Voir {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} pour plus d'informations sur les valeurs que peuvent prendre ces deux propriétés.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
element {
+
+  /* L'axe principal sera la direction de bloc  */
+  /* et on commencera par le bas (main-start et */
+  /* main-end inversés. Les éléments flexibles  */
+  /* passent sur une nouvelle ligne si besoin   */
+
+  flex-flow: column-reverse wrap;
+
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Flexbox','#flex-flow-property','flex-flow')}}{{Spec2('CSS3 Flexbox')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.flex-flow")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/flex-grow/index.html b/files/fr/web/css/flex-grow/index.html new file mode 100644 index 0000000000..852dc66dfa --- /dev/null +++ b/files/fr/web/css/flex-grow/index.html @@ -0,0 +1,125 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/flex-grow +--- +
{{CSSRef}}
+ +

La propriété CSS flex-grow définit le facteur d'expansion d'un élément flexible selon sa dimension principale. Elle indique la quantité d'espace restant que l'élément devrait consommer dans un conteneur flexible relativement à la taille des autres éléments du même conteneur.

+ +

La dimension principale correspond à la hauteur ou à la largeur de l'élément selon la valeur de {{cssxref("flex-direction")}}.

+ +

L'espace restant qui est réparti correspond à la taille du conteneur flexible moins la somme des tailles des éléments flexibles. Si tous les éléments voisins possèdent le même facteur d'expansion, ils recevront tous la même part d'espace.

+ +

La plupart du temps flex-grow est utilisé avec les autres propriétés flexibles {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. On pourra utiliser la propriété raccourcie {{cssxref("flex")}} afin de s'assurer que toutes les valeurs des propriétés flexibles auront été définies.

+ +
{{EmbedInteractiveExample("pages/css/flex-grow.html")}}
+ + + +

Pour plus d'informations, voir la page Utiliser les boîtes flexibles (flexbox) CSS.

+ +

Syntaxe

+ +
flex-grow: 2;
+flex-grow: 0.6;
+
+/* Valeurs globales */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+
+ +

La propriété flex-grow se définit avec une valeur de type <number>.

+ +

Valeurs

+ +
+
<number>
+
Un nombre (type {{cssxref("<number>")}} qui correspond au facteur de grossissement utilisé. Plus la valeur est élevée, plus l'élément sera étendu si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est 0.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
+
<h4>A,B,C et F ont flex-shrink:1 . D et E ont flex-grow:1 .</h4>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+  <div class="box" style="background-color:brown;">F</div>
+</div>
+
+ +

CSS

+ +
#content {
+  display: flex;
+
+  justify-content: space-around;
+  flex-flow: row wrap;
+  align-items: stretch;
+}
+
+.box {
+  flex-shrink: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '700px', '300px')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Flexbox','#flex-grow-property','flex-grow')}}{{Spec2('CSS3 Flexbox')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.flex-grow")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/flex-shrink/index.html b/files/fr/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..7d726652f0 --- /dev/null +++ b/files/fr/web/css/flex-shrink/index.html @@ -0,0 +1,121 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/flex-shrink +--- +
{{CSSRef}}
+ +

La propriété flex-shrink définit le facteur de rétrécissement d'un élément flexible. Si la taille de l'ensemble des éléments flexibles est supérieure à la taille du conteneur, les éléments seront comprimés selon leur facteur flex-shrink.

+ +

flex-shrink est généralement utilisé avec les propriétés {{cssxref("flex-grow")}} et {{cssxref("flex-basis")}}. Elle est souvent définie grâce à la propriété raccourcie {{cssxref("flex")}}.

+ +
{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}
+ + + +

Pour plus d'informations, voir la page Utiliser les boîtes flexibles (flexbox) CSS.

+ +

Syntaxe

+ +
/* Valeurs numériques */
+/* Type <number>      */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Valeurs globales */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+
+ +

La propriété flex-shrink est définie grâce à une valeur de type <number>.

+ +

Valeurs

+ +
+
<number>
+
Un nombre (type {{cssxref("<number>")}}) qui correspond au facteur de rétrécissement utilisé. Plus la valeur est élevée, plus l'élément sera compressé si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est 1.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
+
<p>A,B,C ont flex-shrink: 1. D et E ont flex-shrink: 2.</p>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+</div>
+
+ +

CSS

+ +
#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}{{Spec2('CSS3 Flexbox')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.flex-shrink")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/flex-wrap/index.html b/files/fr/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..306131015b --- /dev/null +++ b/files/fr/web/css/flex-wrap/index.html @@ -0,0 +1,158 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/flex-wrap +--- +
{{CSSRef}}
+ +

La propriété flex-wrap indique si les éléments flexibles sont contraints à être disposés sur une seule ligne ou s'ils peuvent être affichés sur plusieurs lignes avec un retour automatique. Si le retour à la ligne est autorisé, la propriété permet également de contrôler la direction dans laquelle les lignes sont empilées.

+ +
{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}
+ + + +

Pour plus d'informations, voir la page Utiliser les boîtes flexibles (flexbox) CSS.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+flex-wrap: nowrap; /* Valeur par défaut */
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Valeurs globales */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+
+ +

La propriété flex-wrap peut être défini grâce à l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
nowrap
+
Les éléments flexibles sont disposés sur une seule ligne. Cela peut entraîner un dépassement du conteneur. La ligne cross-start est équivalente à start ou à before selon la valeur de {{cssxref("flex-direction")}}. Cette valeur est la valeur par défaut.
+
wrap
+
Les éléments flexibles sont disposé sur plusieurs lignes. La ligne cross-start est équivalente à  start ou before en fonction de la valeur de flex-direction et la ligne cross-end est à l'opposée cross-start.
+
wrap-reverse
+
Se comporte comme wrap mais cross-start et cross-end sont permutées.
+
+

Syntaxe formelle

+
+
+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
+
<h4>Un exemple de flex-wrap:wrap </h4>
+<div class="contenu">
+  <div class="rouge">1</div>
+  <div class="vert">2</div>
+  <div class="bleu">3</div>
+</div>
+
+<h4>Un exemple de flex-wrap:nowrap </h4>
+<div class="contenu1">
+  <div class="rouge">1</div>
+  <div class="vert">2</div>
+  <div class="bleu">3</div>
+</div>
+
+<h4>Un exemple de flex-wrap:wrap-reverse </h4>
+<div class="contenu2">
+  <div class="rouge">1</div>
+  <div class="vert">2</div>
+  <div class="bleu">3</div>
+</div>
+
+ +

CSS

+ +
.contenu,
+.contenu1,
+.contenu2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.contenu div,
+.contenu1 div,
+.contenu2 div {
+    height: 50%;
+    width: 300px;
+}
+.rouge {
+    background: orangered;
+}
+.vert {
+    background: yellowgreen;
+}
+.bleu {
+    background: steelblue;
+}
+
+/* Styles pour les boîtes flexibles*/
+.contenu {
+    display: flex;
+    flex-wrap: wrap;
+}
+.contenu1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.contenu2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+
+
+ +

Résultat

+ +

{{EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap')}}{{Spec2('CSS3 Flexbox')}} 
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.flex-wrap")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/flex/index.html b/files/fr/web/css/flex/index.html new file mode 100644 index 0000000000..c88b0da7b0 --- /dev/null +++ b/files/fr/web/css/flex/index.html @@ -0,0 +1,299 @@ +--- +title: flex +slug: Web/CSS/flex +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

La propriété flex est une propriété raccourcie qui définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur.

+ +

Les propriétés détaillées correspondantes à cette propriété raccourcie sont {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}.

+ +

Les éléments flexibles peuvent être étirés ou réduits pour utiliser un espace proportionnel à leur coefficient de grossissement ou de rétrécissement afin de ne pas dépasser d'un conteneur.

+ +
{{EmbedInteractiveExample("pages/css/flex.html")}}
+ + + +

Pour la plupart des cas, on utilisera une des valeurs suivantes : auto, initial, none ou un nombre positif sans unité. Pour voir l'effet de ces valeurs, essayez de redimensionner les conteneurs flexibles ci-après :

+ +
+ + + + +

{{EmbedLiveSample("flex", "100%","370")}}

+ +
+

Par défaut, les éléments flexibles ne se rétrécissent pas en dessous de la taille minimale du contenu. Pour modifier ce comportement, il faudra paramétrer {{cssxref("min-width")}} ou {{cssxref("min-height")}}.

+
+ +

Voir la page Utiliser les boîtes flexibles (flexbox) CSS pour plus d'informations.

+
+ +

Syntaxe

+ +
/* Valeurs de base */
+flex: auto;
+flex: initial;
+flex: none;
+
+/* Une valeur sans unité pour flex-grow */
+/* flex-basis vaut alors 0 */
+flex: 2;
+
+/* Une valeur, largeur/hauteur: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: content;
+
+/* Deux valeurs : flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Deux valeurs : flex-grow | flex-shrink */
+/* flex-basis vaut alors 0 */
+flex: 2 2;
+
+/* Trois valeurs : flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Valeurs globales */
+flex: inherit;
+flex: initial;
+flex: unset;
+
+ +

La propriété flex peut être définie avec une, deux ou trois valeurs.

+ +
    +
  • Avec une valeur, la syntaxe doit être : + +
      +
    • un nombre sans unité ({{cssxref("<number>")}}) : celui-ci est alors interprété comme la valeur de <flex-grow>
      • +
    • ou une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <flex-basis>
      • +
    • ou le mot-clé none.
      • +
    +
    • +
  • Avec deux valeurs +
      +
    • la première doit être un nombre sans unité ({{cssxref("<number>")}}) qui correspond à la valeur de <flex-grow>.
      • +
    • la seconde valeur doit être : +
        +
      • un nombre sans unité ({{cssxref("<number>")}}) : celui-ci est alors interprété comme la valeur de <flex-shrink>
        • +
      • ou une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <flex-basis>
        • +
      +
      • +
    +
    • +
  • Avec trois valeurs +
      +
    • la première valeur doit être un nombre sans unité ({{cssxref("<number>")}}) : celui-ci est alors interprété comme la valeur de <flex-grow>
      • +
    • la deuxième valeur doit être un nombre sans unité ({{cssxref("<number>")}}) : celui-ci est alors interprété comme la valeur de <flex-shrink>
      • +
    • la troisième valeur doit être une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <flex-basis>
      • +
    +
    • +
+ +

Valeurs

+ +
+
+
auto
+
L'élément est dimensionné selon ses propriétés width et height mais peut grandir pour absorber l'espace libre disponible dans le conteneur flexible ou rétrécir à sa taille minimale pour rentrer dans le conteneur. Cette valeur est équivalente à "flex: 1 1 auto".
+
initial
+
L'élément est dimensionné selon ses propriétés width et height. Ce comportement est équivalent à la valeur par défaut (0 1 auto). Si besoin, l'élément rétrécit à sa taille minimale pour rentrer dans le conteneur mais il ne grandira pas s'il y a de l'espace disponible dans ce conteneur. Ce mot-clé est équivalent à "flex: 0 1 auto".
+
none
+
L'élément est dimensionné par rapport à ses propriétés width et height. Il n'est pas flexible : il ne peut ni rétrécir ni grandir selon l'espace du conteneur flexible. Ce mot-clé est équivalent à "flex: 0 0 auto".
+
+
+ +
+
<'flex-grow'>
+
Voir {{cssxref("flex-grow")}}. Les valeurs négatives sont interdites et la valeur par défaut est 1.
+
<'flex-shrink'>
+
Voir {{cssxref("flex-shrink")}}. Les valeurs négatives sont interdites et la valeur par défaut est 1.
+
<'flex-basis'>
+
Voir {{cssxref("flex-basis")}}. Une valeur valide pour {{cssxref("width")}} et {{cssxref("height")}}. La valeur par défaut est 0.
+
+ +
Note : Lorsqu'on utilise une ou deux valeurs sans unité dans la règle, flex-basis vaudra 0. Pour plus d'informations, voir le brouillon de spécification du module des boîtes flexibles.
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#flex-container {
+	display: flex;
+	flex-direction: row;
+}
+
+#flex-container > .flex-item {
+	flex: auto;
+}
+
+#flex-container > .raw-item {
+	width: 5rem;
+}
+
+ +

HTML

+ +
<div id="flex-container">
+    <div class="flex-item" id="flex">Boîte flexible (cliquer pour passer à la boîte « normale »)</div>
+    <div class="raw-item" id="raw">Boîte « normale » </div>
+</div>
+
+ +

JavaScript

+ +
var flex = document.getElementById("flex");
+var raw = document.getElementById("raw");
+flex.addEventListener("click", function() {
+	raw.style.display = raw.style.display == "none" ? "block" : "none";
+});
+
+ +
#flex-container {
+	width: 100%;
+	font-family: Consolas, Arial, sans-serif;
+}
+
+#flex-container > div {
+	border: 1px solid #f00;
+	padding: 1rem;
+}
+
+#flex-container > .raw-item {
+	border: 1px solid #000;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','100%','60')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.flex")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/flex_value/index.html b/files/fr/web/css/flex_value/index.html new file mode 100644 index 0000000000..736e3a9279 --- /dev/null +++ b/files/fr/web/css/flex_value/index.html @@ -0,0 +1,55 @@ +--- +title: +slug: Web/CSS/flex_value +tags: + - CSS + - Disposition + - Reference + - Type de donnée CSS + - Web +translation_of: Web/CSS/flex_value +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <flex> permet de représenter une longueur flexible à l'intérieur d'un conteneur en grille, qui est déclarée comme une dimension d'unité fr. Il est notamment utilisé pour les propriétés {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} ainsi que d'autres.

+ +

Syntaxe

+ +

Le type de donnée <flex> est défini par un nombre ({{cssxref("<number>")}} suivi de l'unité fr. L'unité fr représente une fraction de l'espace restant dans le conteneur en grille. Comme pour les autres dimensions, il n'y a pas d'espace entre la valeur et l'unité.

+ +

Exemples

+ +
1fr    /* Utilisation d'une valeur entière */
+2.5fr  /* Utilisation d'une valeur flottante */
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName("CSS Grid", "#typedef-flex", "<flex>")}}{{Spec2("CSS Grid")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.flex")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/float/index.html b/files/fr/web/css/float/index.html new file mode 100644 index 0000000000..b52d245e44 --- /dev/null +++ b/files/fr/web/css/float/index.html @@ -0,0 +1,225 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/float +--- +
{{CSSRef}}
+ +

La propriété float indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (inline) entoureront alors l'élément flottant. L'élément est retiré du flux normal de la page mais s'inscrit toujours dans le flux (contrairement au positionnement absolu).

+ +
{{EmbedInteractiveExample("pages/css/float.html")}}
+ + + +

Un élément flottant est un élément pour lequel la valeur calculée de float est différente de none.

+ +
+

float implique l'utilisation d'une disposition en bloc, cette propriété modifie donc la valeur de {{cssxref("display")}} dans certains cas :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valeur spécifiéeValeur calculée
inlineblock
inline-blockblock
inline-tabletable
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
inline-flexflex
inline-gridgrid
autreinchangée
+ +
Note : Si vous utilisez cette propriété via JavaScript, comme propriété de l'objet {{domxref("HTMLElement.style")}}, la plupart des navigateurs récents permettra d'utiliser float mais il faudra utiliser cssFloat (attention à la casse) pour les navigateurs plus anciens. Pour Internet Explorer 8 et les versions antérieures, elle était appelée styleFloat. Le terme float étant réservé en JavaScript, ce cas de figure était une exception à la règle qui définit que le nom de la propriété DOM est une version CamelCase de la propriété CSS construite avec des tirets. De même, class sera échappée en className et le for des éléments <label> sera converti en htmlFor).
+ +

Syntaxe

+ +
float: left;
+float: right;
+float: none;
+float: inline-start;
+float: inline-end;
+
+/* Valeurs globales */
+float: inherit;
+float: initial;
+float: unset;
+ +

Valeurs

+ +
+
left
+
Un mot-clé indiquant que l'élément doit flotter du côté gauche du bloc qui le contient.
+
right
+
Un mot-clé indiquant que l'élément doit flotter du côté droit du bloc qui le contient.
+
none
+
Un mot-clé indiquant que l'élément ne doit pas flotter
+
inline-start
+
Un mot-clé indiquant que l'élément doit flotter du côté du début du bloc qui le contient. Pour les scripts LTR (les langues qui s'écrivent de la gauche vers la droite), c'est le bord gauche ; pour les scripts RTL, c'est le bord droit.
+
inline-end
+
Un mot-clé indiquant que l'élément doit flotter du côté de la fin du bloc qui le contient. Pour les scripts LTR (les langues qui s'écrivent de la gauche vers la droite), c'est le bord droit ; pour les scripts RTL, c'est le bord gauche.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  border: solid red;
+  max-width: 70ex;
+}
+
+h4 {
+  float: left;
+  margin: 0;
+}
+ +

HTML

+ +
<div>
+  <h4>Coucou !</h4>
+  Voici du texte. Voici du texte. Voici du texte.
+  Voici du texte. Voici du texte. Voici du texte.
+  Voici du texte. Voici du texte. Voici du texte.
+  Voici du texte. Voici du texte. Voici du texte.
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Le positionnement des éléments flottants

+ +

Comme évoqué ci-avant, lorsqu'un élément flotte, il est retiré du flux normal du document et il est décalé vers la droite ou vers la gauche jusqu'à ce qu'il touche le bord de son conteneur ou un autre élément flottant.

+ +

Dans l'image suivante, on voit trois carrés rouges. Deux flottent à gauche et un flotte à droite. On voit que le deuxième carré à gauche est placé à droite du premier. Si on ajoutait d'autres carrés, ils s'empileraient sur la gauche jusqu'à remplir le conteneur, ensuite, on passerait sur une autre ligne.

+ +

+ +

Dégager des éléments du flottement

+ +

Dans l'illustration précédente, les éléments flottants sont verticalement plus courts que le texte sur lequel ils flottent. Cependant, si le texte n'était pas aussi long et ne dépassait pas des blocs, on pourrait avoir des effets indésirables. Par exemple, si le paragraphe ne contenait que « Lorem ipsum dolor sit amet » et était suivi d'un autre titre (semblable à « Floats Example »), le deuxième titre apparaîtrait entre les boîtes rouges. Or, la plupart du temps, on veut que le titre soit aligné tout à gauche. Pour cela, il faut dégager (clear) l'élément.

+ +

Pour cela, on pourra utiliser la propriété {{cssxref("clear")}} sur ce deuxième titre afin de s'assurer qu'il est aligné à gauche :

+ +
h2.deuxiemeTitre { clear: both; }
+
+ +

Cela dit, cette méthode fonctionne uniquement s'il n'y a pas d'autres éléments dans le même contexte de formatage de bloc pour lesquels on voudrait que l'élément apparaisse à droite. Par exemple, si l'élément H2 est entourée de barres latérales à gauche et à droite et qu'on utilise clear, le titre apparaîtra alors en bas, sous les barres, plutôt qu'entre elles.

+ +

Aussi, si on ne peut pas dégager un élément, on peut limiter le formatage en bloc au conteneur des éléments flottants. Pour reprendre l'exemple précédent, on voit que toutes les boîtes rouges sont dans un élément {{HTMLElement("p")}}. On peut alors utiliser {{cssxref("overflow")}} avec hidden ou auto afin que l'élément s'agrandisse pour les contenir, sans les faire tomber en bas :

+ +
p.avecBoitesRouges { overflow: hidden; height: auto; }
+
+ +
Note : En utilisant overflow: scroll on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons auto pour height afin d'indiquer que le conteneur doit s'agrandir si nécessaire.
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}Les valeurs inline-start et inline-end sont ajoutées.
{{SpecName('CSS3 Box', '#float', 'float')}}{{Spec2('CSS3 Box')}}Introduction de nouvelles valeurs, pas encore clairement définies.
{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}{{Spec2('CSS2.1')}}Aucune modification.
{{SpecName('CSS1', '#float', 'float')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.float")}}

+ +

Voir aussi

+ + +
diff --git a/files/fr/web/css/font-family/index.html b/files/fr/web/css/font-family/index.html new file mode 100644 index 0000000000..4b5d523a2f --- /dev/null +++ b/files/fr/web/css/font-family/index.html @@ -0,0 +1,232 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-family +--- +
{{CSSRef}}
+ +

La propriété font-family permet de définir une liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte de l'élément ciblé.

+ +
{{EmbedInteractiveExample("pages/css/font-family.html")}}
+ + + +

Les valeurs sont séparées par des virgules, indiquant chacune une police alternative. Le moteur choisira la première valeur pour laquelle la police correspondante est installée sur l'ordinateur ou qui peut être téléchargée via la règle @ {{cssxref("@font-face")}} définie.

+ +

Pour fixer font-family et d'autres propriétés liées aux polices de caractères, on pourra utiliser la propriété raccourcie {{cssxref("font")}}.

+ +

Les auteurs doivent toujours inclure une famille de police générique dans cette liste car il n'y a aucune certitude qu'une police donnée aura été installée sur l'ordinateur ni qu'elle pourra être téléchargée grâce à {{cssxref("@font-face")}}. L'utilisation d'une famille de police générique permet au navigateur d'utiliser une police acceptable en recours si besoin.

+ +
Note : La propriété font-family définit une liste de police, ordonnée par priorité, de la plus haute à la plus basse. La sélection de la police ne se fait pas pour l'ensemble du texte mais caractère par caractère. Ainsi si une police ne dispose pas du caractère à représenter, ce sera la police suivante qui sera utilisée pour représenter le caractère. Pour Internet Explorer, cela ne fonctionne pas avec la version 6 et les version antérieures.
+
+Les propriétés {{cssxref("font-style")}}, {{cssxref("font-variant")}} et {{cssxref("font-size")}} permettront d'influencer le choix en fonction du style, de la variante ou de la taille disponible parmi les polices de la liste.
+ +

Syntaxe

+ +
/* Un nom de police suivi d'un nom de famille générique */
+font-family: "Gill Sans Extrabold", sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+
+/* Un nom de famille de polices générique */
+font-family: serif;
+font-family: sans-serif;
+font-family: monospace;
+font-family: cursive;
+font-family: fantasy;
+font-family: system-ui;
+font-family: emoji;
+font-family: math;
+font-family: fangsong;
+
+/* Valeurs globales */
+font-family: inherit;
+font-family: initial;
+font-family: unset;
+
+ +

La propriété font-family permet de lister différentes familles de police, séparées par des virgules. Chaque nom de famille est une valeur <family-name> ou <generic-name>.

+ +

Dans l'exemple suivant, on liste deux familles de police, la première utilise une valeur <family-name> et la seconde utilise une valeur <generic-name> :

+ +
font-family: Gill Sans Extrabold, sans-serif;
+ +

Valeurs

+ +
+
<family-name>
+
Le nom d'une famille de polices ; par exemple « Times » ou « Helvetica » sont des noms de famille de polices. Les noms de familles qui comportent des blancs doivent être encadrées par des doubles quotes (").
+
<generic-name>
+
+

Les noms de famille génériques sont utilisés comme mécanisme de secours pour conserver l'intention de mise en forme de l'auteur lorsqu'aucune des polices indiquées n'est disponible. Les noms de famille génériques sont des mots-clés et ne doivent pas être encadrés par des doubles quotes. Un nom de famille générique devrait être utilisé comme dernier élément de la liste des noms. Les mots-clés suivants sont définis :

+ +
+
serif
+
Les caractères possèdent des empattements.
+ Voici des exemples de polices avec empattement : Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.
+
sans-serif
+
Les caractères n'ont pas d'empattement, leurs extrémités sont anguleuses.
+ Voici des exemples de polices correspondantes : "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.
+
monospace
+
Tous les caractères mesurent la même largeur, on dit que la police est à chasse fixe.
+ Les polices "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace sont à chasse fixe.
+
cursive
+
Les caractères des polices cursives possèdent des extrémités permettant de les joindre les uns aux autres, partiellement ou complètement. Cela donne un résultat semblable à l'écriture manuelle au crayon plutôt qu'à des caractères d'imprimerie.
+ Voici quelques exemples de polices cursives : "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.
+
fantasy
+
Les polices fantaisie sont des polices décoratives pour lesquelles les caractères sont représentées de façon légère.
+ Les polices suivantes sont des exemples de cette famille : Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
+
system-ui
+
Les glyphes utilisés sont ceux de l'interface utilisateur par défaut pour le système d'exploitation de la plateforme. Les variantes typographiques différant grandement d'une région à l'autre, cette famille générique est utilisée pour les polices qui ne correspondent pas aux autres familles génériques.
+
math
+
Une police utilisée pour les mise en forme relatives aux mathématiques comme les indices, les exposants, les accolades sur plusieurs lignes, etc.
+
emoji
+
Une police conçue spécifiquement pour l'affichage des emoji.
+
fangsong
+
Un style de caractères chinois particulier se situant entre le style serif Song et la forme cursive Kai. Ce style est généralement utilisé pour les documents officiels du gouvernement.
+
+
+
+ +

Validité des noms de famille

+ +

Les noms de famille de polices doivent être encadrés par des doubles ou doivent former une série d'un ou plusieurs identifiants valides. Cela signifie que les signes de ponctuation et les chiffres débutant chaque fragment doivent être échappés pour les noms de famille qui ne sont pas encadrés par des quotes.

+ +

Les déclarations suivantes sont valides :

+ +
font-family: "Gill Sans Extrabold", sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+ +

Et ces déclarations sont invalides :

+ +
font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.exempleserif {
+  font-family: Times, "Times New Roman", Georgia, serif;
+}
+
+.exemplesansserif {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.exemplemonospace {
+  font-family: "Lucida Console", Courier, monospace;
+}
+
+.exemplecursive {
+  font-family: cursive;
+}
+
+.exemplefantasy {
+  font-family: fantasy;
+}
+
+.exempleemoji {
+  font-family: emoji;
+}
+
+.exemplemath {
+  font-family: math;
+}
+
+.exemplefangsong {
+  font-family: fangsong;
+}
+
+ +

HTML

+ +
<div class="exempleserif">
+Voici un exemple de police avec empattement (serif).
+</div>
+
+<div class="exemplesansserif">
+Voici un exemple de police sans empattement (sans-serif).
+</div>
+
+<div class="exemplemonospace">
+Voici un exemple de police à chasse fixe (monospace).
+</div>
+
+<div class="exemplecursive">
+Voici un exemple de police cursive.
+</div>
+
+<div class="exemplefantasy">
+Voici un exemple de police fantaisie.
+</div>
+
+<div class="exemplemath">
+Voici un exemple de police mathématique.
+</div>
+
+<div class="exempleemoji">
+Voici un exemple de police emoji.
+</div>
+
+<div class="exemplefangsong">
+Voici un exemple de police fangsong.
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples',600,120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#generic-font-families', 'generic font families')}}{{Spec2('CSS4 Fonts')}}Ajout de nouvelles familles génériques dont : system-ui, emoji, math et fangsong.
{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}{{Spec2('CSS3 Fonts')}}Aucune modification significative.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#font-family', 'font-family')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-family")}}

diff --git a/files/fr/web/css/font-feature-settings/index.html b/files/fr/web/css/font-feature-settings/index.html new file mode 100644 index 0000000000..d9f28d7379 --- /dev/null +++ b/files/fr/web/css/font-feature-settings/index.html @@ -0,0 +1,120 @@ +--- +title: font-feature-settings +slug: Web/CSS/font-feature-settings +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-feature-settings +--- +
{{CSSRef}}
+ +

La propriété font-feature-settings permet de contrôler les fonctionnalités typographiques des polices OpenType.

+ +
{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}
+ + + +
Note : Lorsque c'est possible, les auteurs devraient utiliser la propriété raccourcie {{cssxref("font-variant")}} ou l'une des propriétés détaillées correspondantes parmi {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}} ou {{cssxref("font-variant-position")}}.
+
+Cette propriété est une fonctionnalité bas-niveau permettant de gérer des cas particuliers où il n'y a aucun moyen d'accéder à une fonctionnalité OpenType donnée. Cette propriété CSS ne devrait notamment pas être utilisée pour activer les petites majuscules.
+ +

Syntaxe

+ +
/* On utilise le réglage par défaut */
+font-feature-settings: normal;
+
+/* On définit la valeur des étiquettes OpenType */
+font-feature-settings: "smcp";
+font-feature-settings: "smcp" on;
+font-feature-settings: "swsh" 2;
+font-feature-settings: "smcp", "swsh" 2;
+
+/* Valeurs globales */
+font-feature-settings: inherit;
+font-feature-settings: initial;
+font-feature-settings: unset;
+
+ +

Valeurs

+ +
+
normal
+
Le texte est disposé en utilisant les réglages par défaut.
+
<feature-tag-value>
+
Lors du rendu du texte, l'étiquette de fonctionnalité OpenType est passée au moteur afin d'activer ou de désactiver certaines fonctionnalités de la police. L'étiquette est toujours une chaîne (type {{cssxref("<string>")}}) de 4 caractères ASCII. Si la chaîne contient plus ou moins de 4 caractères ou contient des caractères en dehors de l'intervalle U+20 - U+7E, la déclaration sera considérée comme invalide.
+ La valeur associée à l'étiquette est un entier positif. Les deux mots-clés on et off sont des synonymes respectifs des valeurs 1 et 0. Si aucune valeur n'est donnée pour une étiquette, la valeur par défaut sera 1. Pour les fonctionnalités OpenType qui ne sont pas booléennees, la valeur implique qu'un glyphe donné soit sélectionné.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
/* on utilise les glyphes alternatifs en small-cap */
+.smallcaps { font-feature-settings: "smcp" on; }
+
+/* on convertit les majuscules et minuscules en petites
+   capitales */
+.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
+
+/* on utilise les zéros barrés d'une barre oblique afin de
+   les différencier de "O" */
+.nicezero { font-feature-settings: "zero"; }
+
+/* on active les formes historiques */
+.hist { font-feature-settings: "hist"; }
+
+/* on désactive les ligatures communément utilisées */
+.noligs { font-feature-settings: "liga" 0; }
+
+/* on active les chiffres tabulaires (chasse fixe) */
+td.tabular { font-feature-settings: "tnum"; }
+
+/* on active les fractions automatiques */
+.fractions { font-feature-settings: "frac"; }
+
+/* on utilise le deuxième caractère de « swash » */
+.swash { font-feature-settings: "swsh" 2; }
+
+/* On active l'ensemble stylistique 7 */
+.fancystyle {
+  font-family: Gabriola; /* Windows 7 et Mac OS */
+  font-feature-settings: "ss07";
+}
+
+ +

Spécificat​ions

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-feature-settings")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/font-kerning/index.html b/files/fr/web/css/font-kerning/index.html new file mode 100644 index 0000000000..8f3de1baa0 --- /dev/null +++ b/files/fr/web/css/font-kerning/index.html @@ -0,0 +1,116 @@ +--- +title: font-kerning +slug: Web/CSS/font-kerning +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-kerning +--- +
{{CSSRef}}
+ +

La propriété font-kerning contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est bien crénée, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable.Exemple pour font-kerning

+ +
font-kerning: auto;
+font-kerning: normal;
+font-kerning: none;
+
+/* Valeurs globales */
+font-kerning: inherit;
+font-kerning: initial;
+font-kerning: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
auto
+
Ce mot-clé laisse au navigateur le choix d'utiliser ou non le crénage. Quand la taille de la police est petite, le crénage de la police peut avoir l'air étrange et les navigateurs le désactiveront. C'est la valeur par défaut.
+
normal
+
Ce mot-clé force l'application du crénage.
+
none
+
Ce mot-clé empêche le navigateur d'utiliser l'information de crénage stockée dans la police.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#nokern, #kern {
+  font-size: 2rem;
+  font-family: serif;
+}
+#nokern {
+  font-kerning: none;
+}
+#kern {
+  font-kerning: normal;
+}
+ +

HTML

+ +
<div id="kern"></div>
+<div id="nokern"></div>
+<textarea id="input">AV T. ij</textarea>
+ +

JavaScript

+ +
var input  = document.getElementById('input'),
+    kern   = document.getElementById('kern'),
+    nokern = document.getElementById('nokern');
+input.addEventListener('keyup', function() {
+  kern.textContent = input.value; /* On met à jour le contenu */
+  nokern.textContent = input.value;
+});
+kern.textContent = input.value; /* On initialise le contenu */
+nokern.textContent = input.value;
+
+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}}{{Spec2('CSS3 Fonts')}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-kerning")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("font-variant")}}
    • +
  • {{cssxref("font-variant-position")}}
    • +
  • {{cssxref("font-variant-east-asian")}}
    • +
  • {{cssxref("font-variant-caps")}}
    • +
  • {{cssxref("font-variant-ligatures")}}
    • +
  • {{cssxref("font-variant-numeric")}}
    • +
  • {{cssxref("font-variant-alternates")}}
    • +
  • {{cssxref("font-synthesis")}}
    • +
  • {{cssxref("letter-spacing")}}.
    • +
diff --git a/files/fr/web/css/font-language-override/index.html b/files/fr/web/css/font-language-override/index.html new file mode 100644 index 0000000000..510a83a222 --- /dev/null +++ b/files/fr/web/css/font-language-override/index.html @@ -0,0 +1,111 @@ +--- +title: font-language-override +slug: Web/CSS/font-language-override +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-language-override +--- +
{{CSSRef}}
+ +

La propriété font-language-override permet de contrôler l'utilisation des glyphes spécifiques à une langue pour une police.

+ +
/* Valeur avec un mot-clé */
+font-language-override: normal;
+
+/* <string> values */
+font-language-override: "ENG";  /* Use English glyphs */
+font-language-override: "TRK";  /* Use Turkish glyphs */
+/* Valeurs globales */
+font-language-override: initial;
+font-language-override: inherit;
+font-language-override: unset;
+
+ +

Par défaut, les navigateurs utilisent l'attribut global {{htmlattrxref("lang")}} pour déterminer la langue du texte d'un élément. Grâce à cette information, certains glyphes spéciaux, conçus pour cette langue, peuvent être utilisés. Ainsi, de nombreuses polices possèdent un caractère spécial pour la ligature fi afin que le point du i fusionne avec le caractère précédent. Cette ligature ne devrait pas être utilisée en turc, car il existe deux formes pour le i, avec et sans point : i et ı.

+ +

Quelques fois, l'auteur d'un document peut vouloir surcharger la langue. Ainsi, si la fonte ne sait pas que la langue azérie possède un i sans point, comme le turc, on pourra utiliser font-language-override pour forcer l'utilisation des glyphes turcs qui seront plus adaptés que les glyphes par défaut.

+ +

Syntaxe

+ +

Cette propriété est définie avec le mot-clé normal ou avec une chaîne de caractères (<string>).

+ +

Valeurs

+ +
+
normal
+
Ce mot-clé force l'utilisation des glyphes de la langue définie pour cette police.
+
<string>
+
Cette chaîne de caractère force le navigateur à utiliser les glyphes de la langue correspondante. Les valeurs qui peuvent être utilisées sont les valeurs du système de langue OpenType.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
p.para1 {
+  font-language-override: normal;
+}
+
+p.para2 {
+  font-language-override: "DAN";
+}
+ +

HTML

+ +
<p class="para1">Réglage par défaut.</p>
+<p class="para2">
+  Un paragraphe pour lequel  <code>font-language-override</code>
+  cible le danois
+</p>
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#propdef-font-language-override', 'font-language-override')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-language-override")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("font-variant")}}
    • +
  • {{cssxref("font-variant-position")}}
    • +
  • {{cssxref("font-variant-east-asian")}}
    • +
  • {{cssxref("font-variant-caps")}}
    • +
  • {{cssxref("font-variant-ligatures")}}
    • +
  • {{cssxref("font-variant-numeric")}}
    • +
  • {{cssxref("font-variant-alternates")}}
    • +
  • {{cssxref("font-synthesis")}}
    • +
  • {{cssxref("font-kerning")}}
    • +
diff --git a/files/fr/web/css/font-optical-sizing/index.html b/files/fr/web/css/font-optical-sizing/index.html new file mode 100644 index 0000000000..9619a3bdf1 --- /dev/null +++ b/files/fr/web/css/font-optical-sizing/index.html @@ -0,0 +1,102 @@ +--- +title: font-optical-sizing +slug: Web/CSS/font-optical-sizing +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-optical-sizing +--- +
{{CSSRef}}
+ +

La propriété CSS font-optical-sizing permet de contrôler la façon dont l'agent utilisateur rend le texte avec (ou non) différentes représentations visuelles en fonction de la taille.  Cette propriété ne fonctionne qu'avec les polices qui disposent d'un axe de variation pour la taille optique.

+ +

Par exemple, les textes de petites tailles sont généralement affichés avec des traits plus épais et des empattements (serifs) plus grands. En revanche, les textes plus grands sont souvent plus fins et utilisent plus de contrastes entre les traits fins et épais.

+ +
+

Note : L'axe de variation pour la taille optique est représenté par opsz dans {{cssxref("font-variation-settings")}}.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+font-optical-sizing: none;
+font-optical-sizing: auto; /* valeur initiale */
+
+/* Valeurs globales */
+font-optical-sizing: inherit;
+font-optical-sizing: initial;
+font-optical-sizing: unset;
+
+ +

Valeurs

+ +
+
none
+
L'agent utilisateur ne modifiera pas la forme des glyphes pour une vue optimale.
+
auto
+
L'agent utilisateur modifiera la forme des glyphes pour une vue optimale.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
@font-face {
+    src: url('AmstelvarAlpha-VF.ttf');
+    font-family:'Amstelvar';
+    font-style: normal;
+}
+
+p {
+  font-size: 36px;
+  font-family: Amstelvar;
+}
+
+.no-optical-sizing {
+  font-optical-sizing: none;
+}
+ +

HTML

+ +
<p class="optical-sizing">Ce paragraphe est dimensionné pour une meilleure
+ lecture. C'est le comportement par défaut.</p>
+
+<p class="no-optical-sizing">Ce paragraphe n'est pas adapté pour une
+ meilleure lecture. Vous devriez voir une différence avec les navigateurs
+ qui prennent en charge cette fonctionnalité.</p>
+ +
+

Note : La police utilisée dans cet exemple possède un dimensionnement optique et est disponible sous licence libre en téléchargement sur GitHub.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}}{{Spec2('CSS4 Fonts')}} 
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-optical-sizing")}}

diff --git a/files/fr/web/css/font-size-adjust/index.html b/files/fr/web/css/font-size-adjust/index.html new file mode 100644 index 0000000000..387d535277 --- /dev/null +++ b/files/fr/web/css/font-size-adjust/index.html @@ -0,0 +1,140 @@ +--- +title: font-size-adjust +slug: Web/CSS/font-size-adjust +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-size-adjust +--- +
{{CSSRef}}
+ +

La propriété font-size-adjust permet de choisir une taille de police selon la taille des caractères en minuscules plutôt que selon la taille des majuscules.

+ +
/* On utilise la taille de fonte définie */
+font-size-adjust: none;
+
+/* On utilise une fonte pour laquelle
+   les minuscules font la moitié de la
+   taille définie */
+/* Type <number> */
+font-size-adjust: 0.5;
+
+/* Valeurs globales */
+font-size-adjust: inherit;
+font-size-adjust: initial;
+font-size-adjust: unset;
+
+ +

Cela est particulièrement utile lorsque la lisibilité des fontes, notamment celles de petite taille, est déterminée par la taille des minuscules plutôt que par celle des majuscules.

+ +

La lisibilité peut devenir un problème lorsque la première police indiquée par {{cssxref("font-family")}} n'est pas disponible et que la police de remplacement possède un facteur de forme très différent (ce facteur correspond au ratio de la taille des minuscules sur la taille de la fonte).

+ +

Pour utiliser cette propriété d'une façon compatible avec les navigateurs qui ne prennent pas en charge font-size-adjust, on définira le facteur par lequel on multiplie la valeur de la propriété {{Cssxref("font-size")}}. Cela signifie généralement que la propriété doit correspondre au facteur de forme de la première fonte. Ainsi, lorsqu'une feuille de style définit :

+ +
font-size: 14px;
+font-size-adjust: 0.5;
+
+ +

On indique en fait que les minuscules de la fonte utilisée doivent mesurer 7px de haut (0.5 × 14px).

+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
La taille de la fonte est uniquement choisie grâce à la propriété {{cssxref("font-size")}}.
+
<number>
+
+

La taille de la fonte est choisie afin que les minuscules (selon la taille horizontale de la fonte) mesurent X fois {{cssxref("font-size")}}.

+ +

Le nombre indiqué (cf. le type {{cssxref("<number>")}}) devrait la plupart du temps correspondre au facteur de forme de la première fonte listée avec {{cssxref("font-family")}}. Cela permet d'obtenir le même résultat dans les différents navigateurs, qu'ils supportent font-size-adjust ou non.

+ +

0 entraînera une haute nulle pour le texte (qui sera donc caché). Pour d'anciens navigateurs, comme Firefox avant la version 40, 0 était géré comme none.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p>Exemples pour <code>font-size-adjust</code></p>
+
+<p class="times">
+  Voici la fonte Times sur 10 px,
+  difficile à lire en petit.
+</p>
+
+<p class="verdana">
+  Voici la fonte Verdana sur 10px,
+  plus lisible car sans empattement
+  (serif).
+</p>
+
+<p class="adjtimes">
+  et voilà le texte ajusté pour
+  avoir le même facteur de forme
+  qu'avec Verdana.
+</p>
+ +

CSS

+ +
.times {
+  font-family: Times, serif;
+  font-size: 10 px;
+}
+
+.verdana {
+  font-family: Verdana, sans-serif;
+  font-size: 10 px;
+}
+
+.adjtimes {
+  font-family: Times, serif;
+  font-size-adjust: 0.58;
+}
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

La propriété CSS font-size-adjust fut initialement définie avec CSS 2 mais a été abandonnée dans CSS 2.1. Elle a de nouveau été définie avec CSS 3.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-size-adjust")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/font-size/index.html b/files/fr/web/css/font-size/index.html new file mode 100644 index 0000000000..8b9a61693f --- /dev/null +++ b/files/fr/web/css/font-size/index.html @@ -0,0 +1,242 @@ +--- +title: font-size +slug: Web/CSS/font-size +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-size +--- +
{{CSSRef}}
+ +

La propriété font-size définit la taille de fonte utilisée pour le texte. La modification de cette taille peut entraîner la modification de la taille d'autres éléments car elle est utilisée pour calculer les valeurs des longueurs relatives (type {{cssxref("<length>")}}) (par exemple exprimées avec les unités em ou ex).

+ +
{{EmbedInteractiveExample("pages/css/font-size.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs dont la taille est absolue */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+
+/* Valeurs relatives */
+font-size: larger;
+font-size: smaller;
+
+/* Valeurs de longueurs */
+/* Type <length>        */
+font-size: 12px;
+font-size: 0.8em;
+
+/* Valeurs proportionnelles */
+/* Type <percentage>        */
+font-size: 80%;
+
+/* Valeurs globales */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+
+ +

La propriété font-size peut être définie de deux façons :

+ + + +

Valeurs

+ +
+
xx-small, x-small, small, medium, large, x-large, xx-large
+
Un ensemble de mots-clés désignant des valeurs absolues basées sur la taille par défaut de l'utilisateur (qui vaut medium). Le comportement est analogue à ce qu'on obtient en utilisant le code HTML <font size="1"> à <font size="7"> lorsque la taille par défaut de l'utilisateur vaut <font size="4">.
+
larger, smaller
+
La taille de la fonte est plus grande (larger) ou plus petite (smaller) que celle de l'élément parent. Le ratio d'agrandissement/réduction est le même que celui qui sépare les mots-clés présentés avant.
+
<length>
+
Une longueur positive (type {{cssxref("<length>")}} ou un pourcentage (type {{cssxref("<percentage>")}}). Lorsque les valeurs sont exprimées avec les unités em ou ex, la taille est alors relative à la taille de la fonte de l'élément parent. Ainsi, une valeur de 0.5em indiquera que la taille de fonte pour l'élément courant est la moitié de celle utilisée pour l'élément parent. Lorsque l'unité utilisée est rem, la taille est alors relative à la taille de la fonte utilisée pour l'élément racine html.
+
<percentage>
+
Les valeurs exprimées en pourcentages (type {{cssxref("<percentage>")}}) sont proportionnelles à la taille de fonte de l'élément parent.
+
+ +
+

Note : Il est généralement préférable d'utiliser des valeurs relatives à la taille par défaut choisie par l'utilisateur.

+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Les différentes approches

+ +

Plusieurs méthodes existent pour définir la taille de fonte utilisée : des mots-clés ou des valeurs numériques exprimées en pixels ou en ems. Selon les besoins, on utilisera une méthode différente.

+ +

Les mots-clés

+ +

Les mots-clés sont une méthode simple et efficace pour déterminer la taille de fonte à utiliser. En utilisant un mot-clé sur l'élément {{HTMLElement("body")}}, on peut définir des tailles relatives sur toute la page et réduire ou augmenter la taille de la fonte en conséquence.

+ +

Les pixels

+ +

L'utilisation des pixels (px) permet d'obtenir un résultat statique, absolu et indépendant du système d'exploitation et du navigateur. Cependant, cette méthode est déconseillée car elle n'est pas accessible. Ainsi, les utilisateurs ne peuvent pas adapter la taille du texte avec leurs réglages si besoin.

+ +

Les ems

+ +

On peut également définir la taille de la fonte en em. La taille d'une valeur exprimée en em est dynamique. Lorsqu'on définit la propriété font-size, un em est équivalent à la taille de fonte appliquée à l'élément parent de l'élément courant. Si cette taille n'a pas été définie pour l'élément parent, elle correspondra à la taille par défaut du navigateur (généralement 16px). Ainsi, si on définit font-size avec une valeur de 20px sur l'élément body, 1em correspondra à 20px et 2em à 40px. Ici, la valeur 2 est un facteur multiplicateur de la taille.

+ +

Pour calculer une équivalence entre em et un résultat exprimé en pixels, on peut utiliser cette formule :

+ +
em = taille visée en px / font-size du parent en pixels
+ +

Ainsi, si la taille font-size de body vaut 1em et que l'échelle par défaut du navigateur indique 1em = 16px et qu'on souhaite obtenir une font-size équivalente à 12px, on pourra utiliser la valeur 0.75em (car 12/16 = 0.75). De même, si on veut une taille analogue à 10px, on utilisera 0.625em (10/16 = 0.625).

+ +

L'unité em est très utile car elle s'adapte automatiquement à la taille de fonte choisie par l'utilisateur.

+ +

Un autre aspect important est la composition des valeurs exprimées avec cette unité. Si on prend le fragment HTML suivant :

+ +
<div>
+  <span>
+    Extérieur
+      <span>Intérieur</span>
+    Extérieur
+  </span>
+</div>
+
+ +

Et qu'on applique la feuille de style suivante :

+ +
body {
+  font-size: 62.5%;
+}
+span {
+  font-size: 1.6em;
+}
+ +

On obtiendra le résultat suivant :

+ +

{{EmbedLiveSample("Les_ems", 400, 40)}}

+ +

Si la taille par défaut du navigateur est 16px, le mot « Extérieur » sera affiché avec 16 pixels et le mot « Intérieur » sera affiché avec 25.6 pixes. En effet, la taille de font-size pour le bloc span vaut 1.6em et cette valeur est relative à la valeur de font-size pour son élément parent, elle-même relative à la valeur de font-size pour son élément parent. C'est ce qu'on appelle la composition.

+ +

Les rems

+ +

L'unité rem a été conçue pour régler les problèmes engendrés par la composition. Les valeurs exprimées en rem sont relatives à l'élément {{HTMLElement("html")}} et pas à l'élément parent. Autrement dit, cette unité permet d'exprimer une taille relative sans être impacté par la taille de l'élément parent, court-circuitant ainsi la composition.

+ +

La feuille de style qui suit ressemble fortement à celle utilisée dans l'exemple précédent, on a simplement remplacé l'unité par rem.

+ +
html {
+  font-size: 62.5%;
+}
+span {
+  font-size: 1.6rem;
+}
+
+ +

On utilisera le même fragment de HTML :

+ +
<span>
+  Extérieur
+    <span>Intérieur</span>
+  Extérieur
+</span>
+ +

{{EmbedLiveSample("Les_rems", 400, 40)}}

+ +

Dans cet exemple, si la taille par défaut du navigateur vaut 16px, tous les mots seront affichés avec une hauteur de 16px.

+ +

Exemples

+ +

Premiers exemples

+ +
/* Le paragraphe sera écrit avec une grande */
+/* fonte.                                   */
+p { font-size: xx-large }
+
+/* La taille du texte des h1 sera 2.5 fois plus */
+/* grande que le texte autour.                  */
+h1 { font-size: 250% }
+
+/* Le texte contenu dans des éléments span */
+/* mesurera 16px                           */
+span { font-size: 16px; }
+
+ +

Démonstration

+ +

CSS

+ +
.small {
+  font-size: xx-small;
+}
+.larger {
+  font-size: larger;
+}
+.point {
+  font-size: 24pt;
+}
+.percent {
+  font-size: 200%;
+}
+
+ +

HTML

+ +
<h1 class="small">Petit H1</h1>
+<h1 class="larger">H1 plus grand</h1>
+<h1 class="point">H1 de 24 points</h1>
+<h1 class="percent">H1 à 200%</h1>
+ +

Résultat

+ +

{{EmbedLiveSample('Démonstration','600','200')}}

+ +

Notes

+ +

Les unités em et ex pour la propriété {{Cssxref("font-size")}} sont relatives à la taille de la fonte de l'élément parent. Pour les autres propriétés, en utilisant ces unités, on aura une valeur relative à la taille de fonte de l'élément courant. Cela signifie que les valeurs exprimées en em ou en pourcents ont le même comportement pour {{cssxref("font-size")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS3 Fonts')}}Aucune modification.
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}{{Spec2('CSS3 Transitions')}}font-size peut désormais être animée.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}{{Spec2('CSS2.1')}}Aucune modification.
{{SpecName('CSS1', '#font-size', 'font-size')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-size")}}

diff --git a/files/fr/web/css/font-smooth/index.html b/files/fr/web/css/font-smooth/index.html new file mode 100644 index 0000000000..92571bb8b7 --- /dev/null +++ b/files/fr/web/css/font-smooth/index.html @@ -0,0 +1,73 @@ +--- +title: font-smooth +slug: Web/CSS/font-smooth +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/font-smooth +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété font-smooth permet de contrôler l'application d'algorithmes anti-crénelage (anti-aliasing) sur le rendu des fontes de caractères.

+ +

Syntaxe

+ +
/* Valeurs avec mot-clé */
+font-smooth: auto;
+font-smooth: never;
+font-smooth: always;
+
+/* Valeurs de type <length> */
+font-smooth: 2em;
+
+ +
+

Webkit implémente -webkit-font-smoothing avec d'autres valeurs, là aussi c'est une propriété non-standard qui ne devrait pas être utilisée.

+ +
    +
  • auto : c'est le navigateur qui décide la meilleure approche
    • +
  • none - l'anti-crénelage est désactivé.
    • +
  • antialiased - lisse les caractères au niveau du pixel (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair.
    • +
  • subpixel-antialiased - sur la plupart des affichages non-Retina, cela donnera le texte le plus lisse.
    • +
+
+ +
+

Firefox implémente -moz-osx-font-smoothing avec d'autres valeurs, là aussi c'est une propriété non-standard qui ne devrait pas être utilisée.

+ +
    +
  • auto - le choix est laissé au navigateur. Cela correspond généralement à grayscale.
    • +
  • grayscale - On applique un anti-crénelage par niveau de gris (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair.
    • +
+
+ +

Spécifications

+ +

Bien que mentionnée dans les premiers brouillons pour CSS3 Fonts, font-smooth a été retirée de cette spécification et ne fait plus partie du standard.

+ +

 

+ +
    +
  • Valeur initiale : auto
    • +
  • S'applique à tous les éléments et au contenu généré
    • +
  • Héritée : oui
    • +
  • Valeurs relatives : par rapport à la taille de police utilisée sur l'élément parent
    • +
  • Type de média : Visuel
    • +
  • Valeur calculée : comme la valeur définie
    • +
+ +

 

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-smooth")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/font-stretch/index.html b/files/fr/web/css/font-stretch/index.html new file mode 100644 index 0000000000..10ade6d4e5 --- /dev/null +++ b/files/fr/web/css/font-stretch/index.html @@ -0,0 +1,286 @@ +--- +title: font-stretch +slug: Web/CSS/font-stretch +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-stretch +--- +
{{CSSRef}}
+ +

La propriété font-stretch permet de choisir entre la forme normale, condensée ou étendue d'une police.

+ +
/* Valeurs avec un mot-clé */
+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;
+
+/* Valeurs en pourcentage */
+font-stretch: 50%;
+font-stretch: 100%;
+font-stretch: 200%;
+
+/* Valeurs globales */
+font-stretch: inherit;
+font-stretch: initial;
+font-stretch: unset;
+
+ +

Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes condensées) et d'autres pour lesquelles les caractères sont plus amples (fontes étendues).

+ +

font-stretch permet de choisir entre les versions condensées ou étendues d'une police. Si la police utilisée ne possède pas de fonte utilisant cet axe de variation, elle n'aura aucun effet.

+ +

Voir la section ci-après qui illustre l'effet de cette propriété sur certaines polices.

+ +

Syntaxe

+ +

Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. {{cssxref("<percentage>")}}).

+ +

Valeurs

+ +
+
normal
+
Permet de choisir une fonte normale.
+
semi-condensed, condensed, extra-condensed, ultra-condensed
+
Permet de choisir une fonte plus resserrée que la normale, ultra-condensed correspond à la forme la plus condensée.
+
semi-expanded, expanded, extra-expanded, ultra-expanded
+
Permet de choisir une fonte plus étendue que la normale, ultra-expanded correspond à la forme la plus étirée.
+
<percentage>
+
Une valeur de type {{cssxref("<percentage>")}} entre 50% et 200% qui permet de définir la largeur de la police. Les valeurs négatives ne sont pas autorisées pour cette  propriété.
+
+ +

Dans les anciennes versions de la spécification de font-stretch, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification CSS Fonts de niveau 4, cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Attention toutefois à la compatibilité car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. la section en fin d'article).

+ + + +

Correspondance entre les mots-clés et les valeurs numériques

+ +

Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mot-cléPourcentage
ultra-condensed50%
extra-condensed62.5%
condensed75%
semi-condensed87.5%
normal100%
semi-expanded112.5%
expanded125%
extra-expanded150%
ultra-expanded200%
+ +

Sélection de la fonte

+ +

La fonte sélectionnée pour une valeur font-stretch dépend des fontes prises en charge par la police. Si la police ne fournit pas de fonte qui corresponde à la valeur exacte, le navigateur utilisera une fonte condensée si la valeur est inférieure à 100% et une fonte étendue si la valeur est supérieure à 100%.

+ +

Le tableau qui suit illustre l'effet des différents pourcentage avec deux polices possédant différentes fontes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
50%62.5%75%87.5%100%112.5%125%150%200%
Helvetica Neue
League Mono Variable
+ +
    +
  • Helvetica Neue est installée par défaut sur macOS et possède une seule fonte condensée en plus de la fonte normale. On voit dans ce tableau que les valeurs de font-stretch inférieures à 100% utilisent une fonte condensée alors que les autres valeurs utilisent la fonte normale.
    • +
  • League Mono Variable est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de font-stretch selon les pourcentages choisis.
    • +
+ +

Pour les polices variables TrueType ou OpenType, c'est l'axe de variation wdth qui implémente ces largeurs variables.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Avec un mot-clé

+ +

HTML

+ +
<p class="stretch">Le texte est plus étiré.</p>
+<p class="condensed">Le texte est plus resserré.</div>
+ +

CSS

+ +
.stretch {
+  font-stretch: extra-expanded;
+}
+
+.condensed {
+  font-stretch: condensed;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Avec_un_mot-clé', '500')}}

+ +

Avec un pourcentage

+ +

Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs <percentage>.

+ +
+

HTML

+ +
<div class="container">
+  <p class="condensed">an elephantine lizard</p>
+  <p class="normal">an elephantine lizard</p>
+  <p class="expanded">an elephantine lizard</p>
+</div>
+
+ +

CSS

+ +
/*
+Cet exemple utilise la police League Mono Variable, développée par
+Tyler Finck (https://www.tylerfinck.com/) et utilisée ici selon
+la licence SIL Open Font, Version 1.1 :
+http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
+  font-family:'LeagueMonoVariable';
+  font-style: normal;
+  font-stretch: 1% 500%; /* Nécessaire pour Chrome */
+}
+
+.container {
+  border: 10px solid #f5f9fa;
+  padding: 0 1rem;
+  font: 1.5rem 'LeagueMonoVariable', sans-serif;
+}
+
+.condensed {
+  font-stretch: 50%;
+}
+
+.normal {
+  font-stretch: 100%;
+}
+
+.expanded {
+  font-stretch: 200%;
+}
+
+
+
+ +

Résultat

+ +

{{EmbedLiveSample("variable-font-demo", 1200, 250, "", "", "example-outcome-frame")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch')}}{{Spec2('CSS4 Fonts')}}Ajout des valeurs <percentage> pour les polices variables.
{{SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +
+

Note : La propriété CSS font-stretch fut d'abord définie par CSS 2, mais elle a été abandonnée avec CSS 2.1 par manque d'implémentation. Elle fut redéfinie avec CSS 3.

+
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-stretch")}}

diff --git a/files/fr/web/css/font-style/index.html b/files/fr/web/css/font-style/index.html new file mode 100644 index 0000000000..d1807d4ff1 --- /dev/null +++ b/files/fr/web/css/font-style/index.html @@ -0,0 +1,235 @@ +--- +title: font-style +slug: Web/CSS/font-style +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-style +--- +
{{CSSRef}}
+ +

La propriété font-style permet de sélectionner une fonte italique (italic) ou (oblique) parmi celles listées par {{cssxref("font-family")}}.

+ +
{{EmbedInteractiveExample("pages/css/font-style.html")}}
+ + + +

La forme italique est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme oblique quant à elle est simplement une version penchée de la forme normale. Les formes italique et oblique peuvent être synthétisées par le navigateur si elles sont absente (le moteur penche alors les glyphes de la forme normale), pour plus d'informations sur l'activation de cette synthèse, voir la propriété {{cssxref("font-synthesis")}}.

+ +

Syntaxe

+ +

La propriété font-style peut être définie avec l'un des mots-clés suivants.

+ +
font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 10deg;
+
+/* Valeurs globales */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+
+ +

La propriété font-style s'utilise avec un mot-clé parmi ceux qui suivent. Si ce mot-clé est oblique, il peut également être suivi de l' angle.

+ +

Valeurs

+ +
+
normal
+
Sélectionne une police qualifiée de normal parmi celles de {{cssxref("font-family")}}.
+
italic
+
Sélectionne une police qualifiée d'italic, s'il n'y a pas de version italique, une version oblique sera sélectionnée à la place.
+
oblique
+
Sélectionne une police qualifiée d'oblique, s'il n'y a pas de version oblique, une version italic sera sélectionnée à la place.
+
oblique <angle>
+
Sélectionne une police qualifiée d'oblique et indique l'angle à utiliser pour la pente du texte. Si plusieurs fontes sont disponible pour la police, c'est la fonte avec la pente la plus proche qui est utilisée. Si aucune police oblique n'est disponible, le navigateur synthétisera une police penchée en tournant les caractères d'une fonte normale.
+ L'angle indiqué (cf. {{cssxref("<angle>")}}) doit être compris entre -90deg et 90deg. Si aucun angle n'est indiqué, la valeur par défaut utilisée sera 14deg. Les valeurs positives correspondent à une pente où le haut des caractères penche vers la fin de la ligne et les valeurs négatives permettent d'obtenir une pente orientée vers le début de la ligne.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Variable fonts

+ +

Les polices variables permettent d'obtenir un contrôle fin sur la pente appliqué à la fonte. Pour cela, on pourra utiliser une police variable et font-style avec le mot-clé oblique suivi d'une valeur d'angle.

+ +

Pour les polices variables TrueType ou OpenType, c'est l'axe de variation "slnt" qui est utilisé afin d'implémenter les variations de pente. C'est l'axe "ital" qui est utilisé avec une valeur de 1 pour implémenter les fontes italiques. Voir {{cssxref("font-variation-settings")}}.

+ +

Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe CSS Fonts Level 4 qui permet d'utiliser font-style: oblique suivi d'un angle.

+ +
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
+ +

HTML

+ +
+
<header>
+    <input type="range" id="slant" name="slant" min="-90" max="90" />
+    <label for="slant">Slant</label>
+</header>
+<div class="container">
+    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+
+ +

CSS

+ +
/*
+AmstelvarAlpha-VF is created by David Berlow (https://github.com/TypeNetwork/Amstelvar)
+and is used here under the terms of its license:
+https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
+  font-family:'AmstelvarAlpha';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+}
+
+.container {
+  max-height: 150px;
+  overflow: scroll;
+}
+
+.sample {
+  font: 2rem 'AmstelvarAlpha', sans-serif;
+}
+
+
+ + + +

JavaScript

+ +
let slantLabel = document.querySelector('label[for="slant"]');
+let slantInput = document.querySelector('#slant');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  let slant = `oblique ${slantInput.value}deg`;
+  slantLabel.textContent = `font-style: ${slant};`;
+  sampleText.style.fontStyle = slant;
+}
+
+slantInput.addEventListener('input', update);
+
+update();
+
+
+ +

Exemples

+ +

CSS

+ +
.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}
+ +

HTML

+ +
<p class="normal">Un paragraphe normale.</p>
+<p class="italic">Un paragraphe italique.</p>
+<p class="oblique">Un paragraphe oblique.</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +
+

Note : Toutes les polices ne disposent pas nécessairement de formes pour oblique et italic, si ces formes sont absentes, le moteur simulera la forme absente à partir de celle qui est disponible. Voici un exemple du rendu d'une police qui dispose des différentes formes :

+ +

+
+ +

Accessibilité

+ +

L'utilisation de grandes portions de textes avec font-style: italic peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.

+ + + +

Spécific​ations

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS4 Fonts')}}Permet d'indiquer un angle après le mot-clé oblique
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS3 Fonts')}}Aucune modification.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}{{Spec2('CSS2.1')}}Aucune modification.
{{SpecName('CSS1', '#font-style', 'font-style')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-style")}}

diff --git a/files/fr/web/css/font-synthesis/index.html b/files/fr/web/css/font-synthesis/index.html new file mode 100644 index 0000000000..3eba97d377 --- /dev/null +++ b/files/fr/web/css/font-synthesis/index.html @@ -0,0 +1,95 @@ +--- +title: font-synthesis +slug: Web/CSS/font-synthesis +tags: + - CSS + - CSS Fonts + - Fontes CSS + - Propriété + - Reference + - 'recipe: css-property' +translation_of: Web/CSS/font-synthesis +--- +
{{CSSRef}}
+ +

La propriété font-synthesis indique au navigateur s'il peut synthétiser la graisse ou la mise en italique des polices utilisées si ces variantes sont absentes.

+ +
font-synthesis: none;
+font-synthesis: weight;
+font-synthesis: style;
+font-synthesis: weight style;
+
+/* Valeurs globales */
+font-synthesis: initial;
+font-synthesis: inherit;
+font-synthesis: unset;
+
+ +

La plupart des polices occidentales incluent les variantes de graisse et d'italique mais certaines polices récentes ou utilisées pour le chinois, le japonais, le coréen ou d'autres scripts ont tendance à ne pas inclure ces éléments. La synthèse automatique du gras ou de l'italique par le navigateur peut réduire la lisibilité du texte et il est alors préférable de désactiver l'émulation du gras et de l'italique du navigateur.

+ +

Syntaxe

+ +

Cette propriété peut prendre l'une des formes suivantes :

+ +
    +
  • le mot-clé none
    • +
  • le mot-clé weight ou le mot-clé style
    • +
  • la valeur weight style
    • +
+ +

Valeurs

+ +
+
none
+
Ce mot-clé indique que la graisse ou l'italique ne doivent pas être synthétisés.
+
weight
+
Ce mot-clé indique qu'une fonte grasse peut être synthétisée si besoin.
+
style
+
Ce mot-clé indique qu'une fonte italique peut être synthétisée si besoin.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div class="syn">Ne me synthétisez pas !</div>
+ +

CSS

+ +
.syn {font-synthesis: none;}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#propdef-font-synthesis', 'font-synthesis')}}{{Spec2('CSS3 Fonts')}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-synthesis")}}

diff --git a/files/fr/web/css/font-variant-alternates/index.html b/files/fr/web/css/font-variant-alternates/index.html new file mode 100644 index 0000000000..ba6cd8ac54 --- /dev/null +++ b/files/fr/web/css/font-variant-alternates/index.html @@ -0,0 +1,125 @@ +--- +title: font-variant-alternates +slug: Web/CSS/font-variant-alternates +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-variant-alternates +--- +
{{CSSRef}}
+ +

La propriété font-variant-alternates contrôle l'utilisation de glyphes alternatifs. Ces glyphes peuvent être référencé par les noms définis avec la règle @ {{cssxref("@font-feature-values")}}.

+ +
/* Valeurs avec un mot-clé */
+font-variant-alternates: normal;
+font-variant-alternates: historical-forms;
+
+/* Valeurs avec une notation fonctionnelle */
+font-variant-alternates: stylistic(identifiant-utilisateur);
+font-variant-alternates: styleset(identifiant-utilisateur);
+font-variant-alternates: character-variant(identifiant-utilisateur);
+font-variant-alternates: swash(identifiant-utilisateur);
+font-variant-alternates: ornaments(identifiant-utilisateur);
+font-variant-alternates: annotation(identifiant-utilisateur);
+font-variant-alternates: swash(ident1) annotation(ident2);
+
+/* Valeurs globales */
+font-variant-alternates: initial;
+font-variant-alternates: inherit;
+font-variant-alternates: unset;
+
+ +

Ces règles @ définissent les noms associés aux valeurs OpenType pour les différents types de glyphes alternatifs (stylistic, styleset, character-variant, swash, ornament ou annotation). Ces propriétés permettent d'utiliser des noms adaptés (définis avec {{cssxref("@font-feature-values")}}) dans la feuille de style.

+ +

Syntaxe

+ +

Cette propriété peut être définie selon deux formes :

+ +
    +
  • la première avec le mot-clé normal
    • +
  • la seconde avec un ou plusieurs mots-clés parmi ceux listés ci-aprés. S'il y a plusieurs mots-clés, ils sont séparés par des espaces. Les mots-clés peuvent être dans n'importe quel ordre.
    • +
+ +

Valeurs

+ +
+
normal
+
Ce mot-clé désactive l'utilisation de tels glyphes alternatifs.
+
historical-forms
+
Ce mot-clé active l'affichage de formes historiques, c'est-à-dire des glyphes communs par le passé qui ne sont plus utilisés aujourd'hui. Cette valeur correspond à la valeur OpenType hist.
+
stylistic()
+
Cette fonction active l'affichage de formes stylistiques alternatives. Le paramètre passé à la fonction est un nom spécifique à la fonte associé à un nombre. Elle correspond à la valeur OpenType salt, par exemple salt 2.
+
styleset()
+
Cette fonction active l'utilisation d'un ensemble de caractères d'un style alternatif. Le paramètre est un nom spécifique à la fonte, associé à un nombre. Elle correspond à la valeur OpenType ssXY (par exemple ss02).
+
character-variant()
+
Cette fonction active l'utilisation d'un ensemble de caractères stylistiques alternatifs. Elle est semblable à styleset() mais n'implique pas de cohérence entre les différents caractères. Avec cette valeur, les différents caractères peuvent avoir un style indépendant qui peut ne pas être cohérent. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond à la valeur OpenType cvXY (par exemple cv02).
+
swash()
+
Cette fonction active l'affichage des glypes pour les lettres ornées. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond aux valeurs OpenType swsh et cswh (par exemple swsh 2 ou cswh 2).
+
ornaments()
+
Cette fonction active l'affichage des ornements tels que les fleurons et autres casseaux. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType ornm (par exemple ornm 2). +
Note : afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce  (U+2022). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité.
+
+
annotation()
+
Cette fonction active l'affichage des annotations (telles que les chiffres entourés ou les caractères inversés). Le paramètre est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType nalt (par exemple nalt 2).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p>MDN c'est là !</p>
+<p class="variant">MDN c'est là !</p>
+
+ +

CSS

+ +
@font-feature-values "Leitura Display Swashes" {
+  @swash { fancy: 1 }
+}
+
+p {
+  font-size: 1.5rem;
+}
+
+.variant {
+  font-family: Leitura Display Swashes;
+  font-variant-alternates: swash(fancy);
+}
+ +

Résultat

+ +

Pour que cet exemple fonctionne, il faut avoir installé la fonte Open Type Leitura Display Swashes. Une version de test est disponible sur fontsgeek.com.

+ +

{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant-alternates')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-variant-alternates")}}

diff --git a/files/fr/web/css/font-variant-caps/index.html b/files/fr/web/css/font-variant-caps/index.html new file mode 100644 index 0000000000..7c198010cb --- /dev/null +++ b/files/fr/web/css/font-variant-caps/index.html @@ -0,0 +1,132 @@ +--- +title: font-variant-caps +slug: Web/CSS/font-variant-caps +tags: + - CSS + - CSS Fonts + - Propriété + - Reference +translation_of: Web/CSS/font-variant-caps +--- +
{{CSSRef}}
+ +

La propriété font-variant-caps permet de contrôler les glyphes utilisés pour représenter les lettres en capitales. Les scripts peuvent avoir différents glyphes de différentes tailles pour les différentes représentations des capitales et cette propriété permet de choisir une de ces formes.

+ +
{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}
+ + + +

Quand une fonte inclut des glyphes de lettres capitales avec différents corps (taille), cette propriété sélectionne la plus appropriée. Si les très petites capitales ne sont pas toutes présentes pour cette fonte, ce seront les petites capitales qui seront utilisées. Si celles-ci ne sont pas présentes, le moteur les synthétisera à partir des glyphes des capitales.

+ +

Certains caractères sans casse (comme les caractères de ponctuation) peuvent être représentés avec différents glyphes afin de mieux les représenter avec les caractères environnants. Les caractères sans casse ne sont pas synthétisés par le navigateur s'il n'y a pas de petite capitales.

+ +

Règles spécifiques aux langues

+ +

Les règles liées à chaque langue/locale sont prises en compte avec les valeurs. Par exemple :

+ +
    +
  • Pour les langues turques comme le turc (tr), l'azerbaidjanais (az), le tatare de Crimée (crh), le tatare de Volga et le Bashkir (ba), il y a deux types de i : avec ou sans le point et deux majuscules correspondantes i/İ et ı/I.
    • +
  • En allemand (de), le caractère ß devient ẞ (U+1E9E) en majuscule.
    • +
  • En grec (el), les voyelles perdent leur accent en majuscule lorsque tout le mot est en majuscule (ά/Α), sauf pour le êta disjonctif (ή/Ή). Les diphthongues avec un accent sur la première voyellle perdent l'accent et ajoutent une diacritique sur la deuxième voyelle (άι/ΑΪ).
    • +
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+font-variant-caps: normal;
+font-variant-caps: small-caps;
+font-variant-caps: all-small-caps;
+font-variant-caps: petite-caps;
+font-variant-caps: all-petite-caps;
+font-variant-caps: unicase;
+font-variant-caps: titling-caps;
+
+/* Valeurs globales */
+font-variant-caps: inherit;
+font-variant-caps: initial;
+font-variant-caps: unset;
+
+ +

La valeur de cette propriété peut être l'un des mots-clés définis ci-après.

+ +

Valeurs

+ +
+
normal
+
Ce mot-clé désactive l'utilisation des glyphes alternatifs.
+
small-caps
+
Ce mot-clé active l'utilisation de petites capitales pour les minuscules. Il correspond à la valeur OpenType smcp ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes.
+
all-small-caps
+
Ce mot-clé active l'utilisation de petites capitales pour les minuscules. Il correspond aux valeurs OpenType smcp et c2sc ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes.
+
petite-caps
+
Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond à la valeur OpenType pcap ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales.
+
all-petite-caps
+
Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond aux valeurs OpenType pcap et c2pc ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales.
+
unicase
+
Ce mot-clé active l'utilisation de petites capitales pour les majuscules. Il correspond à la valeur OpenType unic.
+
titling-caps
+
Ce mot-clé active l'utilisation de capitales spéciales pour les titres (à la fois pour les minuscules et majuscules). Généralement, les glyphes majuscules sont conçus pour utiliser les glyphes minuscules et ils apparaissent trop gras quand il y a un long fragment de texte utilisant de tels glyphes. L'objectif de ces glyphes spéciaux est d'éviter un tel effet. Ce mot-clé correspond à la valeur OpenType titl ; si la fonte ne supporte pas ce cas, le mot-clé n'aura pas d'action visible.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  font-variant-caps: small-caps;
+}
+ +

HTML

+ +
<p>
+  La Reine devint pourpre de colère et
+  après l’avoir considérée un moment avec
+  des yeux flamboyants comme ceux d’une
+  bête fauve, elle se mit à crier :
+  « <span class="exemple">Qu’on lui coupe la tête !</span> »
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Accessibilité

+ +

L'utilisation de grandes portions de textes avec font-style: all-small-caps ou font-style: all-petite-caps peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-variant-caps")}}

diff --git a/files/fr/web/css/font-variant-east-asian/index.html b/files/fr/web/css/font-variant-east-asian/index.html new file mode 100644 index 0000000000..22d44dfb1a --- /dev/null +++ b/files/fr/web/css/font-variant-east-asian/index.html @@ -0,0 +1,139 @@ +--- +title: font-variant-east-asian +slug: Web/CSS/font-variant-east-asian +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-variant-east-asian +--- +
{{CSSRef}}
+ +

La propriété font-variant-east-asian contrôle l'utilisation des glyphes alternatifs pour les scripts japonais, chinois et d'Asie orientale.

+ +
font-variant-east-asian: normal;
+font-variant-east-asian: ruby;
+font-variant-east-asian: jis78;              /* <east-asian-variant-values> */
+font-variant-east-asian: jis83;              /* <east-asian-variant-values> */
+font-variant-east-asian: jis90;              /* <east-asian-variant-values> */
+font-variant-east-asian: jis04;              /* <east-asian-variant-values> */
+font-variant-east-asian: simplified;         /* <east-asian-variant-values> */
+font-variant-east-asian: traditional;        /* <east-asian-variant-values> */
+font-variant-east-asian: full-width;         /* <east-asian-width-values> */
+font-variant-east-asian: proportional-width; /* <east-asian-width-values> */
+font-variant-east-asian: ruby full-width jis83;
+
+/* Valeurs globales */
+font-variant-east-asian: inherit;
+font-variant-east-asian: initial;
+font-variant-east-asian: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
normal
+
Ce mot-clé désactive les glyphes alternatifs.
+
ruby
+
Ce mot-clé force l'utilisation de glyphes spécifiques pour les caractères ruby. Généralement, ceux-ci sont plus petits et légèrement plus gras pour améliorer le contraste. Ce mot-clé correspond aux valeurs OpenType ruby.
+
<east-asian-variant-values>
+
Ces valeurs définissent un ensemble de variantes de glypes logographiques à utiliser pour l'affichage. Les valeurs possibles sont : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mot-cléStandard dans lequel sont définis les glyphsÉquivalent OpenType
jis78JIS X 0208:1978jp78
jis83JIS X 0208:1983jp83
jis90JIS X 0208:1990jp90
jis04JIS X 0213:2004jp04
simplifiedAucun, ce sont les glyphes chinois simplifiés qui sont utilisés.smpl
traditionalAucun, ce sont les glyphes chinois traditionnels qui sont utilisés.trad
+
+
<east-asian-width-values>
+
Ces valeurs permettent de contrôler le dimensionnement des symboles pour les caractères des langues d'Asie orientale. Deux valeurs sont possibles : +
    +
  • proportional-width qui active l'ensemble de caractères d'Asie orientale qui n'ont pas tous la même largeur. Elle correspond aux valeurs OpenType pwid.
    • +
  • full-width qui active l'ensemble de caractères d'Asie orientale où les caractères ont tous la même taille et forme carrée. Elle correspond aux valeurs OpenType fwid.
    • +
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
exemple {
+  font-variant-east-asian: ruby;
+}
+ +

HTML

+ +
<p class="exemple">!</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

{{LiveSampleLink("Exemples","Lien vers l'exemple")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#propdef-font-variant-east-asian', 'font-variant-east-asian')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-variant-east-asian")}}

diff --git a/files/fr/web/css/font-variant-ligatures/index.html b/files/fr/web/css/font-variant-ligatures/index.html new file mode 100644 index 0000000000..1d5a545e78 --- /dev/null +++ b/files/fr/web/css/font-variant-ligatures/index.html @@ -0,0 +1,212 @@ +--- +title: font-variant-ligatures +slug: Web/CSS/font-variant-ligatures +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-variant-ligatures +--- +
{{CSSRef}}
+ +

La propriété font-variant-ligatures contrôle quelles {{Glossary("ligatures")}} et {{Glossary("formes contextuelles")}} sont utilisées dans les éléments textuels auxquels elle s'applique. Ceci vise à harmoniser l'affichage du texte.

+ +
{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}
+ + + +

Syntaxe

+ +
font-variant-ligatures: normal;
+font-variant-ligatures: none;
+font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
+font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
+font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */
+font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
+font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */
+font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */
+font-variant-ligatures: contextual;                 /* <contextual-alt-values> */
+font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */
+font-variant-ligatures: contextual;                 /* <no-historical-ligatures> <common-ligatures> */
+
+/* Valeurs globales */
+font-variant-ligatures: inherit;
+font-variant-ligatures: initial;
+font-variant-ligatures: unset;
+
+ +

La valeur de cette propriété peut être l'un des mots-clés définis ci-après.

+ +

Valeurs

+ +
+
normal
+
Cette valeur active les ligatures et les formes contextuelles courantes pour un rendu correct. Les ligatures et formes activées dépendent de la police utilisée, de la langue et de certains scripts. C'est la valeur par défaut.
+
none
+
Cette valeur désactive toutes les ligatures et formes contextuelles, y compris celles couramment utilisées.
+
<common-lig-values>
+
Ces valeurs contrôlent les ligatures les plus courantes, comme fi, ffi, th et autres. Elles correspondent aux valeurs OpenType liga and clig. Deux valeurs sont possibles: +
    +
  • common-ligatures active ces ligatures. Notez que la valeur normal active ces ligatures.
    • +
  • no-common-ligatures désactive ces ligatures.
    • +
+
+
<discretionary-lig-values>
+
Ces valeurs contrôlent les ligatures spécifiques, spécifiques à la police et définies par le fondeur. Elles correspondent à la valeur OpenType dlig. Deux valeurs sont possibles: +
    +
  • discretionary-ligatures active ces ligatures.
    • +
  • no-discretionary-ligatures désactive ces ligatures. Notez que la valeur normal désactive ces ligatures.
    • +
+
+
<historical-lig-values>
+
Ces valeurs contrôlent les ligatures historiques, utilisées dans les livres anciens, comme l'allemand tz qui devient ß. Elles correspondent à la valeur OpenType hlig. Deux valeurs sont possibles: +
    +
  • historical-ligatures active ces ligatures.
    • +
  • no-historical-ligatures désactive ces ligatures. Notez que la valeur normal désactive ces ligatures.
    • +
+
+
<contextual-alt-values>
+
Ces valeurs contrôlent la manière dont les lettres s'adaptent à leur contexte, c'est-à-dire aux lettres qui les entourent. Elles correspondent à la valeur OpenType calt. Deux valeurs sont possibles: +
    +
  • contextual précise que des alternatives contextuelles peuvent être utilisées. Notez que la valeur normal active ces ligatures.
    • +
  • no-contextual interdit leur utilisation.
    • +
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
p {
+  font-size: 2rem;
+  font-family: Lora, serif;
+}
+.normal {
+  font-variant-ligatures: normal;
+}
+
+.none {
+  font-variant-ligatures: none;
+}
+
+.common-ligatures {
+  font-variant-ligatures: common-ligatures;
+}
+
+.no-common-ligatures {
+  font-variant-ligatures: no-common-ligatures;
+}
+
+.discretionary-ligatures {
+  font-variant-ligatures: discretionary-ligatures;
+}
+
+.no-discretionary-ligatures {
+  font-variant-ligatures: no-discretionary-ligatures;
+}
+
+.historical-ligatures {
+  font-variant-ligatures: historical-ligatures;
+}
+
+.no-historical-ligatures {
+  font-variant-ligatures: no-historical-ligatures;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+
+.no-contextual {
+  font-variant-ligatures: no-contextual;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+
+ +

HTML

+ +
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet">
+<p class="normal">
+  normal<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="none">
+  none<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="common-ligatures">
+  common-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-common-ligatures">
+  no-common-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="discretionary-ligatures">
+  discretionary-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-discretionary-ligatures">
+  no-discretionary-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="historical-ligatures">
+  historical-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-historical-ligatures">
+  no-historical-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="contextual">
+  contextual<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-contextual">
+  no-contextual<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="contextual">
+  contextual<br>
+  if fi ff tf ft jf fj
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant-ligatures')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-variant-ligatures")}}

diff --git a/files/fr/web/css/font-variant-numeric/index.html b/files/fr/web/css/font-variant-numeric/index.html new file mode 100644 index 0000000000..382a387f47 --- /dev/null +++ b/files/fr/web/css/font-variant-numeric/index.html @@ -0,0 +1,136 @@ +--- +title: font-variant-numeric +slug: Web/CSS/font-variant-numeric +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-variant-numeric +--- +
{{CSSRef}}
+ +

La propriété font-variant-numeric permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux.

+ +
{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}
+ + + +

Syntaxe

+ +
font-variant-numeric: normal;
+font-variant-numeric: ordinal;
+font-variant-numeric: slashed-zero;
+font-variant-numeric: lining-nums;         /* <numeric-figure-values> */
+font-variant-numeric: oldstyle-nums;       /* <numeric-figure-values> */
+font-variant-numeric: proportional-nums;   /* <numeric-spacing-values> */
+font-variant-numeric: tabular-nums;        /* <numeric-spacing-values> */
+font-variant-numeric: diagonal-fractions;  /* <numeric-fraction-values> */
+font-variant-numeric: stacked-fractions;   /* <numeric-fraction-values> */
+font-variant-numeric: oldstyle-nums stacked-fractions;
+
+/* Valeurs globales */
+font-variant-numeric: inherit;
+font-variant-numeric: initial;
+font-variant-numeric: unset;
+
+ +

La valeur de cette propriété peut être définie selon deux formes :

+ +
    +
  • la première avec le mot-clé normal
    • +
  • la seconde avec une ou plusieurs valeurs parmi celles définies ci-après, séparées par des espaces et dans n'importe quel ordre.
    • +
+ +

Valeurs

+ +
+
normal
+
Ce mot-clé désactive l'utilisation des glyphes alternatifs.
+
ordinal
+
Ce mot-clé permet de forcer l'utilisation de glyphes spéciaux pour les marqueurs ordinaux utilisés par exemple pour 1er, 2e, 3e, etc. Il correspond aux valeurs OpenType values ordn.
+
slashed-zero
+
Ce mot-clé permet de forcer l'application d'une barre oblique après un 0. Cela peut être utile quand on cherche à distinguer un O majuscule d'un 0. Il correspond aux valeurs  OpenType zero.
+
<numeric-figure-values>
+
Ces valeurs contrôlent les chiffres utilisés pour les nombres. Deux valeurs peuvent être utilisées : +
    +
  • lining-nums permet d'activer l'ensemble de chiffres pour lequel tous les nombres sont apposés sur la ligne de base. Elle correspond aux valeurs OpenType lnum.
    • +
  • oldstyle-nums permet d'activer l'ensemble de chiffres pour lequel certains nombres, comme 3, 4, 7, 9, ont un jambage. Elle correspond aux valleurs OpenType onum.
    • +
+
+
<numeric-spacing-values>
+
Ces valeurs permettent de contrôler la taille des chiffres utilisés pour les nombres. On peut utiliser deux valelurs : +
    +
  • proportional-nums permet d'activer l'ensemble où les chiffres ne sont pas tous de la même taille. Elle correspond aux valeurs OpenType pnum.
    • +
  • tabular-nums permet d'activer l'ensemble où les chiffres ont la même taille (ce qui leur permet d'être facilement alignés dans des tableaux). Elle correspond aux valeurs OpenType tnum.
    • +
+
+
<numeric-fraction-values>
+
Ces valeurs permettent de contrôler les glyphes utilisés pour afficher les fractions : +
    +
  • diagonal-fractions permet d'utiliser l'ensemble où le numérateur et le dénominateur sont plus petits et séparés par une barre oblique. Elle correspond aux valeurs OpenType frac.
    • +
  • stacked-fractions permet d'utiliser l'ensemble où les chiffres du numérateur et du dénominateur sont plus petits et séparés par une ligne horizontale. Elle correspond aux valeurs OpenType afrc.
    • +
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
/*
+Cet exemple utilise la police Source Sans Pro OpenType développée par Adobe
+et utilisée ici sous les termes de la licence SIL Open Font en Version 1.1 :
+http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
+*/
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
+}
+
+.ordinal {
+  font-variant-numeric: ordinal;
+  font-family: "Source Sans Pro";
+}
+
+ +

HTML

+ +
<p class="ordinal">Premier, deuxième, troisième, quatrième, cinquième</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-variant-numeric")}}

diff --git a/files/fr/web/css/font-variant-position/index.html b/files/fr/web/css/font-variant-position/index.html new file mode 100644 index 0000000000..b506bedb2b --- /dev/null +++ b/files/fr/web/css/font-variant-position/index.html @@ -0,0 +1,95 @@ +--- +title: font-variant-position +slug: Web/CSS/font-variant-position +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-variant-position +--- +
{{CSSRef}}
+ +

La propriété font-variant-position permet d'utiliser des glyphes de plus petite taille positionnés en exposant ou en indice par rapport à la ligne de base utilisée (qui reste la même).

+ +

Généralement, les glyphes utilisés sont ceux utilisés pour les éléments HTML {{HTMLElement("sub")}} et {{HTMLElement("sup")}}.

+ +
/* Valeurs avec un mot-clé */
+font-variant-position: normal;
+font-variant-position: sub;
+font-variant-position: super;
+
+/* Valeurs globales */
+font-variant-position: inherit;
+font-variant-position: initial;
+font-variant-position: unset;
+
+ +

Lorsque ces glyphes alternatifs sont activés, si un caractère de l'ensemble concerné ne possède pas de glyphe correspondant, l'ensemble des caractères est affiché avec une méthode de secours qui synthétise ces glyphes.

+ +

Ces glyphes alternatifs possèdent la même boîte em et la même ligne de base que le reste du texte. La modification est purement graphique et il n'y a pas d'impact sur la hauteur de ligne ou sur les autres caractéristiques liées aux boîtes.

+ +

Syntaxe

+ +

La valeur de cette propriété est définie grâce à l'un des mots-clés définis ci-après.

+ +

Valeurs

+ +
+
normal
+
Les glyphes alternatifs sont désactivés.
+
sub
+
Ce mot-clé permet d'utiliser les glyphes utilisés en indice.
+
super
+
Ce mot-clé permet d'utiliser les glyphes utilisés en exposant.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  font-variant-position: super;
+}
+ +

HTML

+ +
<p> Alice <span class="exemple">ne s’était pas fait le moindre mal.</span>
+    Vite elle se remet sur ses pieds et regarde en l’air ; mais tout
+    est noir là-haut. Elle voit devant elle un long passage et le Lapin
+    Blanc qui court à toutes jambes.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#propdef-font-variant-position', 'font-variant-position')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-variant-position")}}

diff --git a/files/fr/web/css/font-variant/index.html b/files/fr/web/css/font-variant/index.html new file mode 100644 index 0000000000..d6fc3654e0 --- /dev/null +++ b/files/fr/web/css/font-variant/index.html @@ -0,0 +1,117 @@ +--- +title: font-variant +slug: Web/CSS/font-variant +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-variant +--- +
{{CSSRef}}
+ +

La propriété font-variant est une propriété raccourcie représentant les propriétés : {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}} et {{cssxref("font-variant-east-asian")}}. On peut aussi utiliser les valeurs de la propriété font-variant définies avec CSS Level 2 (normal ou small-caps), en utilisant la propriété raccourcie {{cssxref("font")}}.

+ +
{{EmbedInteractiveExample("pages/css/font-variant.html")}}
+ + + +

Syntaxe

+ +
font-variant: small-caps;
+font-variant: common-ligatures small-caps;
+
+/* Valeurs globales */
+font-variant: inherit;
+font-variant: initial;
+font-variant: unset;
+
+ +

Valeurs

+ +
+
normal
+
Définit une police normale ; chacune des propriétés individuelles a une valeur initiale de normal. Ces propriétés sont {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, et {{cssxref("font-variant-east-asian")}}.
+
none
+
Définit la valeur de {{cssxref("font-variant-ligatures")}} comme étant none et les valeurs des autres propriétés à normal, leur valeur initiale.
+
<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values>
+
Définit la valeur de la propriété {{cssxref("font-variant-ligatures")}}. Les valeurs possibles sont: common-ligatures,no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures,contextual, et no-contextual.
+
stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation()
+
Définit les mots-clés et fonctions relatives à la propriété {{cssxref("font-variant-alternates")}}.
+
small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps
+
Définit le mot-clé relatif à la propriété {{cssxref("font-variant-caps")}}.
+
<numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero
+
Définit la valeur de la propriété {{cssxref("font-variant-numeric")}}. Les valeurs possibles sont lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, et slashed-zero.
+
<east-asian-variant-values>, <east-asian-width-values>, ruby
+
Définit la valeur de la propriété {{cssxref("font-variant-east-asian")}}. Les valeurs possibles sont: jis78, jis83,jis90, jis04, simplified, traditional, full-width, proportional-width, ruby.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p class="normal">Firefox normal</p>
+<p class="small">Firefox petit</p>
+
+ +

CSS

+ +
p.normal {
+    font-variant: normal;
+}
+p.small {
+    font-variant: small-caps;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}{{Spec2('CSS3 Fonts')}}La propriété est désormais une propriété raccourcie pour les nouvelles propriétés  font-variant-*.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}{{Spec2('CSS2.1')}}Aucun changement.
{{SpecName('CSS1', '#font-variant', 'font-variant')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-variant")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("text-combine-upright")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/font-variation-settings/index.html b/files/fr/web/css/font-variation-settings/index.html new file mode 100644 index 0000000000..fc5df8a335 --- /dev/null +++ b/files/fr/web/css/font-variation-settings/index.html @@ -0,0 +1,166 @@ +--- +title: font-variation-settings +slug: Web/CSS/font-variation-settings +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-variation-settings +--- +
{{CSSRef}}
+ +

La propriété CSS font-variation-settings permet de contrôler les caractéristiques typographiques de bas niveau OpenType ou TrueType en utilisant les quatres lettres représentant les axes des caractéristiques qu'on souhaite faire varier, ainsi que les valeurs pour les variations associées.

+ +
{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}
+ + + +

Cette propriété fonctionne à un niveau plus bas que {{cssxref("font-feature-settings")}} qui permet de définir les valeurs et les étiquettes (tags) pour les caractéristiques des polices.

+ +
Note : Si possible, les auteurs web devraient utiliser d'autres méthodes pour contrôler l'affichage des polices de caractères et notamment la propriété raccourcie {{cssxref("font-variant")}} ou une des propriétés détaillée associée. Cette propriété est une fonctionnalité de bas niveau destinée à gérer les cas spécifiques pour lesquels il est autrement impossible d'activer ou de paramétrer une caractéristique OpenType existante.
+ +
Note : Les caractéristiques définies avec font-variation-settings l'emporteront sur celles définies par les autres propriétés relatives aux polices (ex. font-weight), où qu'elles soient dans la cascade. Pour certains navigateurs, cela se vérifie uniquement lorsque la déclaration @font-face inclut un intervalle font-weight.
+ +

Syntaxe

+ +
/* Valeur pour les réglages par défaut */
+font-variation-settings: normal;
+
+/* Utilisation des valeurs */
+/* pour les axes OpenType  */
+font-variation-settings: "XHGT" 0.7;
+
+/* Valeurs globales */
+font-variation-settings: inherit;
+font-variation-settings: initial;
+font-variation-settings: unset;
+
+ +

La valeur de cette propriété peut être définie selon deux formes :

+ +
    +
  • Avec le mot-clé normal
    • +
  • Ou avec une chaîne de caractères (<string>) suivi d'un nombre (<number>). Ce motif peut être répété tant qu'une virgule sépare chacun des tuples.
    • +
+ +

Valeurs

+ +
+
normal
+
Le texte est disposé avec les caractéristiques par défaut.
+
<string> <number>
+
Lors de l'affichage du texte, les axes OpenType sont passés au moteur graphique afin d'activer ou de désactiver certaines fonctionnalités de la police. Chaque valeur est une chaîne de caractères (type {{cssxref("<string>")}}) avec quatre caractères ASCII, suivie par un nombre (type {{cssxref("number")}}) qui indique la valeur pour l'axe correspondant. Si la chaîne de caractères <string> a plus ou moins de 4 caractères et contient des caractères en dehors de l'intervalle U+20 - U+7E, la propriété sera considérée comme invalide. La valeur numérique <number> n'est pas nécessairement entière et positive, ce peut être un nombre décimal ou un nombre négatif.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Axes enregistrés et axes spécifiques

+ +

Les axes des polices variables sont rangés selon deux catégories : les axes enregistrés et les axes spécifiques.

+ +

Les axes enregistrés représentent les variations les plus fréquemment utilisées. Si ces axes sont suffisamment fréquents pour avoir été standardisés, cela ne signifie pas qu'un créateur de police doive tous les gérer pour créer une police.

+ +

Voici la liste des axes enregistrés et les propriétés CSS correspondantes, qui permettent de jouer sur ces axes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Étiquette pour l'axePropriété
"wght"{{cssxref("font-weight")}}
"wdth"{{cssxref("font-stretch")}}
"slnt" (slant){{cssxref("font-style")}}: oblique + angle
"ital"{{cssxref("font-style")}}: italic
"opsz" +

{{cssxref("font-optical-sizing")}}

+
+ +

Les axes spécifiques peuvent correspondre à n'importe quel axe que le concepteur de la police souhaite faire varier (ce peut par exemple être la hauteur des hampes et des jambages, la taille des empattements ou tout autre chose). N'importe quel axe peut être utilisé tant qu'il a une étiquette unique sur quatre caractères. Il est possible que, si des axes spécifiques deviennent majoritairement présents, ils soient intégrés parmi les axes enregistrés.

+ +
+

Note : Les étiquettes des axes enregistrés sont écrits en minuscules et les axes spécifiques doivent être écrits en majuscules. On notera que rien n'oblige à suivre cette règle et qu'il est tout à fait possible que des concepteurs de polices donnent des étiquettes en minuscules à des axes spécifiques. Quoiqu'il en soit, on retiendra que les étiquettes des axes sont sensibles à la casse.

+
+ +

Exemples

+ +
+

Attention ! Afin de pouvoir utiliser les polices variables, votre système d'exploitation doit être à jour et votre navigateur doit prendre en charge ces fonctionnalités. Ainsi, les systèmes basés sur Linux requièrent la dernière version de Linux Freetype et les systèmes macOS antérieurs à 10.13 ne prennent pas en charge les polices variables.

+
+ +

Graisse (wght)

+ +

L'exemple suivant peut être édité afin de voir l'effet de la modification des valeurs pour la graisse du texte.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
+ +

Pente (slnt)

+ +

L'exemple suivant peut être édite afin de voir l'effet de la modification des valeurs pour la pente (à ne pas confondre avec l'italique) du texte.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
+ +

Autres exemples

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#low-level-font-variation-settings-control-the-font-variation-settings-property', 'font-variation-settings')}}{{Spec2('CSS4 Fonts')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-variation-settings")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/font-weight/index.html b/files/fr/web/css/font-weight/index.html new file mode 100644 index 0000000000..cfe8c8e614 --- /dev/null +++ b/files/fr/web/css/font-weight/index.html @@ -0,0 +1,394 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/font-weight +--- +
{{CSSRef}}
+ +

La propriété CSS font-weight permet de définir la graisse utilisée pour le texte. Les niveaux de graisse disponibles dépendent de la police (cf. {{cssxref("font-family")}}). Certaines fontes n'existent qu'avec les niveaux de graisses normal et bold.

+ +
{{EmbedInteractiveExample("pages/css/font-weight.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+font-weight: normal;
+font-weight: bold;
+
+/* Valeurs relatives à l'élément parent */
+font-weight: lighter;
+font-weight: bolder;
+
+/* Valeurs numériques */
+font-weight: 1;
+font-weight: 100;
+font-weight: 100.6;
+font-weight: 123;
+font-weight: 200;
+font-weight: 300;
+font-weight: 321;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+font-weight: 1000;
+
+/* Valeurs globales */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+
+ +

La propriété font-weight peut être définie grâce à l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
normal
+
Le niveau de graisse normal pour la fonte. Équivalent à la valeur 400.
+
bold
+
Le texte est en gras. Équivalent à la valeur 700.
+
lighter
+
On diminue la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte paraît plus fin.
+
bolder
+
On augmente la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte est plus gras.
+
<number>
+
Une valeur numérique (type {{cssxref("<number>")}}) comprise entre 1 et 1000. Plus la valeur est grande, plus le niveau de graisse est élevé. Ces valeurs permettent de couvrir un éventail de valeurs plus larges qu'avec normal et bold.
+
+ +

Pour d'anciennes versions de la spécification, font-weight n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices non-variables ne peuvent utiliser que ces valeurs (les valeurs plus fines seront converties cf. ci-après).

+ +

Le module de spécification CSS Fonts de niveau 4 a étendu la syntaxe afin de pouvoir utiliser n'importe quel nombre entre 1 et 1000. Cela permet aux polices variables d'avoir une meilleur précision quant aux tailles utilisables. On notera que cette fonctionnalité n'est pas encore prise en charge (à date de juin 2018) par tous les navigateurs.

+ +

Conversion des valeurs

+ +

Si une fonte avec la graisse demandée n'est pas disponible, le moteur suit la méthode suivante pour déterminer la fonte qui sera affichée :

+ +
    +
  • Si un niveau supérieur à 500 est utilisé, c'est la graisse la plus sombre et la plus proche qui sera utilisée (la plus proche s'il n'y a pas de graisse plus forte)
    • +
  • Si un niveau inférieur à 400 est utilisé, c'est la graisse la plus claire la plus proche qui est utilisée (la plus proche s'il n'y a pas de graisse plus claire)
    • +
  • Si un niveau égal à 400 est utilisé, 500 sera utilisé. Si 500 n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à 400.
    • +
  • Si un niveau égal à 500 est utilisé, 400 sera utilisé. Si 400 n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à 400.
    • +
+ +

Autrement dit, pour les fontes dont les niveaux de graisse sont uniquement normal et bold, 100-500 seront considérés équivalents à normal et 600-900 à bold.

+ +

Signification des poids relatifs

+ +

Lorsqu'on utilise les valeurs lighter ou bolder, on peut utiliser le tableau suivant pour calculer le poids absolu de l'élément :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valeur héritéebolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
+ +

Correspondance entre les valeurs numériques et les noms communément utilisés

+ +

Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (NdT : les noms sont laissés en anglais car généralement utilisés tels quels) :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurNom communément utilisé
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
+ +

Interpolation

+ +

Une valeur font-weight est interpolée de façon discrète (par multiple de 100). L'interpolation se produit sur des valeurs réelles puis la valeur est convertie au multiple de 100 le plus proche. Les valeurs à égale distance entre deux multiples de 100 sont arrondies à la valeur supérieure.

+ +

Polices variables

+ +

La plupart des polices possèdent des niveaux de graisses qui correspondent aux niveaux communément utilisés. Toutefois, certaines polices, appelées « polices variables » prennent en charge un intervalle de niveaux avec plus ou moins de détail, ce qui permet à l'éditeur du document de mieux contrôler la graisse utilisée.

+ +

Pour les polices variables TrueType ou OpenType, c'est l'axe de variation wght qui est utilisé afin d'implémenter les variations de largeur.

+ +

Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification CSS Fonts de niveau 4.

+ +
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
+ +

HTML

+ +
+
<header>
+    <input type="range" id="weight" name="weight" min="1" max="1000" />
+    <label for="weight">Weight</label>
+</header>
+<div class="container">
+    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+
+ +

CSS

+ +
/*
+Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
+and is used here under the terms of its license:
+https://github.com/LettError/mutatorSans/blob/master/LICENSE
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
+  font-family:'MutatorSans';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+  white-space: nowrap;
+}
+
+.container {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.sample {
+  text-transform: uppercase;
+  font: 1.5rem 'MutatorSans', sans-serif;
+}
+
+ + + +

JavaScript

+ +
let weightLabel = document.querySelector('label[for="weight"]');
+let weightInput = document.querySelector('#weight');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  weightLabel.textContent = `font-weight: ${weightInput.value};`;
+  sampleText.style.fontWeight = weightInput.value;
+}
+
+weightInput.addEventListener('input', update);
+
+update();
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p>
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+</p>
+
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+
+ +

CSS

+ +
/* Le texte du paragraphe est gras. */
+p {
+  font-weight: bold;
+}
+
+/* Le texte du div est deux niveaux plus sombres
+   mais moins gras qu'une graisse normale. */
+div {
+ font-weight: 600;
+}
+
+/* Le texte dans le span est un niveau plus
+   clair que le parent. */
+span {
+  font-weight: lighter;
+}
+ +

Résultat

+ +

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

+ +

Accessibilité

+ +

Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec font-weight qui vaut 100 ou 200, notamment si le contraste entre le texte et l'arrière-plan est faible.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS4 Fonts')}}Définition de font-weight qui précise que la propriété peut utiliser des valeurs comprises entre 1 et 1000.
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}Aucun changement.
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}{{Spec2('CSS3 Transitions')}}font-weight peut désormais être animée.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}Aucun changement.
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font-weight")}}

diff --git a/files/fr/web/css/font/index.html b/files/fr/web/css/font/index.html new file mode 100644 index 0000000000..7dcfa34eae --- /dev/null +++ b/files/fr/web/css/font/index.html @@ -0,0 +1,236 @@ +--- +title: font +slug: Web/CSS/font +tags: + - CSS + - Polices CSS + - Propriété + - Reference +translation_of: Web/CSS/font +--- +
{{CSSRef}}
+ +

La propriété font est :

+ +
    +
  • une propriété raccourcie permettant de définir rapidement {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}},  {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}
    • +
  • ou une propriété permettant d'utiliser une police système pour la police de caractères d'un élément grâce à certains mots-clés spécifiques.
    • +
+ +
{{EmbedInteractiveExample("pages/css/font.html")}}
+ + + +

Comme pour les autres propriétés CSS, les valeurs qui ne sont pas définies avec la propriété raccourcie sont définies avec leur valeur initiale, ce qui peut surcharger les valeurs définies précédemment avec les propriétés « détaillées ». Bien qu'elles ne puissent pas directement être paramétrées avec font, les propriétés détaillées, {{cssxref("font-size-adjust")}}, et {{cssxref("font-kerning")}} sont également réinitialisées avec leurs valeurs initiales.

+ +

Syntaxe

+ +
/* size | family */
+font: 2em "Open Sans", sans-serif;
+
+/* style | size | family */
+font: italic 2em "Open Sans", sans-serif;
+
+/* style | variant | weight | size/line-height | family */
+font: italic small-caps bolder 16px/3 cursive;
+
+/* style | variant | weight | stretch | size/line-height | family */
+font: italic small-caps bolder condensed 16px/3 cursive;
+
+/* Mots-clés indiquant la police à utiliser */
+/* pour les boîtes de dialogue système      */
+font: message-box;
+font: icon;
+
+/* Valeurs globales */
+font: inherit;
+font: initial;
+font: unset;
+
+ +

La propriété font peut être définie avec un seul mot-clé (qui sélectionnera la police système à utiliser) ou comme propriété raccourcie pour paramétrer les différentes propriétés relatives aux polices.

+ +

Si font est définie grâce à un mot-clé, ce mot-clé doit être : caption, icon, menu, message-box, small-caption ou status-bar.

+ +

Si font est définie comme une propriété raccourcie :

+ +
    +
  • La déclaration devra inclure des valeurs pour : +
      +
    • {{cssxref("<font-size>")}}
      • +
    • {{cssxref("<font-family>")}}
      • +
    +
    • +
  • La déclaration pourra éventuellement inclure des valeurs pour : +
      +
    • {{cssxref("<font-style>")}}
      • +
    • {{cssxref("<font-variant>")}}
      • +
    • {{cssxref("<font-weight>")}}
      • +
    • {{cssxref("<font-stretch>")}}
      • +
    • {{cssxref("<line-height>")}}
      • +
    +
    • +
  • Les valeurs pour font-style, font-variant et font-weight doivent précéder la valeur pour font-size
    • +
  • La valeur de font-variant ne peut utiliser que les valeurs définies en CSS 2.1 : normal et small-caps
    • +
  • La valeur de font-stretch ne peut être qu'un mot-clé.
    • +
  • La valeur pour line-height doit immédiatement suivre la valeur pour font-size, séparée par une barre oblique (par exemple "16px/3")
    • +
  • La valeur pour font-family doit être la dernière fournie.
    • +
+ +

Valeurs

+ +
+
<'font-style'>
+
Voir la propriété {{cssxref("font-style")}}.
+
<'font-variant'>
+
Voir la propriété {{cssxref("font-variant")}}.
+
<'font-weight'>
+
Voir la propriété {{cssxref("font-weight")}}.
+
<'font-stretch'>
+
Voir la propriété {{cssxref("font-stretch")}}.
+
<'font-size'>
+
Voir la propriété {{cssxref("font-size")}}.
+
<'line-height'>
+
Voir la propriété {{cssxref("line-height")}}.
+
<'font-family'>
+
Voir la propriété {{cssxref("font-family")}}.
+
Polices système :caption icon menu message-box small-caption status-bar
+
Un mot-clé peut être utilisé pour indiquer une police système spécifique : + + + + + + + + + + + + + + + + + + + + + + + + + + + +
captionLa police système utilisée pour les libellés des contrôles (par exemples les boutons, listes déroulantes, etc.).
iconLa police système utilisée pour les textes accompagnant les icônes.
menuLa police système utilisée pour les menus.
message-boxLa police système utilisée dans les boîtes de dialogue.
small-captionLa police système utilisée pour les libellés des contrôles de petite taille.
status-barLa police système utilisée dans les barres de statut de la fenêtre.
+ La plupart du temps, les navigateurs implémentent d'autres valeurs, préfixées. Par exemple, Gecko implémente -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list and -moz-field.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
/* La corps de la police sera  12px */
+/* La hauteur de ligne 14px et la   */
+/* famille de polices sans-serif    */
+
+.exemple1 {
+  font: 12px/14px sans-serif;
+}
+
+/* La taille de la police mesurera   */
+/* 80% de celle de l'élément parent  */
+/* ou la valeur par défaut et la     */
+/* famille de police sera sans-serif */
+
+.exemple2 {
+  font: 80% sans-serif;
+}
+
+/* La graisse est activée, le style    */
+/* est italique, la taille est grande  */
+/* et la famille est serif.            */
+
+.gras_italique_serif {
+  font: bold italic large serif;
+}
+
+/* On utilise la même police que pour */
+/* la barre de statut de la fenêtre.  */
+.statut {
+  font: status-bar;
+}
+ +

HTML

+ +
<p class="exemple1">
+  « Toujours aussi mouillée, » dit Alice tristement.
+  « Je ne sèche que d’ennui. »
+</p>
+
+<p class="exemple2">
+  « Dans ce cas, » dit le Dodo avec emphase, se
+  dressant sur ses pattes, « je propose l’ajournement,
+  et l’adoption immédiate de mesures énergiques. »
+</p>
+
+<p class="gras_italique_serif">
+  « Parlez français, » dit l’Aiglon ; « je ne
+  comprends pas la moitié de ces grands mots, et, qui
+  plus est, je ne crois pas que vous les compreniez
+  vous-même. » L’Aiglon baissa la tête pour cacher
+  un sourire, et quelques-uns des autres oiseaux
+  ricanèrent tout haut.
+</p>
+
+<p class="statut">
+  « J’allais proposer, » dit le Dodo d’un ton vexé,
+  « une course cocasse ; c’est ce que nous pouvons
+  faire de mieux pour nous sécher. »
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","500")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fonts', '#font-prop', 'font')}}{{Spec2('CSS3 Fonts')}}Prise en charge des valeurs de font-stretch.
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}{{Spec2('CSS2.1')}}Prise en charge des mots-clés.
{{SpecName('CSS1', '#font', 'font')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.font")}}

diff --git a/files/fr/web/css/frequency-percentage/index.html b/files/fr/web/css/frequency-percentage/index.html new file mode 100644 index 0000000000..b2c35567a3 --- /dev/null +++ b/files/fr/web/css/frequency-percentage/index.html @@ -0,0 +1,50 @@ +--- +title: +slug: Web/CSS/frequency-percentage +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/frequency-percentage +--- +
{{CSSRef}}
+ +

Le type de donnée <frequency-percentage> représente une valeur qui peut être une valeur de type {{Cssxref("frequency")}} ou une valeur de type {{Cssxref("percentage")}}.

+ +

Syntaxe

+ +

Se référer à la documentation des types {{Cssxref("frequency")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles avec chacun de ces types.

+ +

Utilisation avec calc()

+ +

Lorsqu'une valeur de type <frequency-percentage> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une fréquence et qu'il peut alors être utilisé dans une expression calc().

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#mixed-percentages', '<frequency-percentage>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#mixed-percentages', '<frequency-percentage>')}}{{Spec2('CSS3 Values')}}Définition du type <frequency-percentage>. Ajout de calc()
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.frequency-percentage")}}

diff --git a/files/fr/web/css/frequency/index.html b/files/fr/web/css/frequency/index.html new file mode 100644 index 0000000000..6ebf21cde4 --- /dev/null +++ b/files/fr/web/css/frequency/index.html @@ -0,0 +1,70 @@ +--- +title: +slug: Web/CSS/frequency +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/frequency +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <frequency> permet de représenter des fréquences (par exemple la hauteur d'une voie). Ce type n'est actuellement utilisé pour aucune propriété CSS.

+ +

Syntaxe

+ +

Une valeur de type <frequency> se compose d'une valeur {{cssxref("<number>")}} suivi immédiatement d'une unité de fréquence. Comme pour les autres dimensions CSS, il n'y a pas d'espace entre le nombre et le littéral de l'unité.

+ +

Unités

+ +
+
Hz
+
Permet de représenter des fréquences exprimées en Hertz (par exemple 0Hz, 1500Hz, 10000Hz)
+
kHz
+
Permet de représenter des fréquences exprimées en kilohertz (par exemple 0kHz, 1.5kHz, 10kHz).
+
+ +

Bien que la valeur nulle puisse être représentée avec le même littéral pour les deux unités, l'unité ne doit pas être absente sinon la valeur sera interprétée comme une valeur de longueur (type {{cssxref("length")}}) et ne représentera ni 0Hz ni 0kHz. Bien que les unités CSS soient insensibles à la casse, c'est une bonne pratique que d'utiliser un H majuscule pour Hz et kHz car selon le système international, Hertz est un nom de famille.

+ +

Exemples

+ +

Valeurs valides

+ +
12Hz     Entier positif
+4.3Hz    Flottant
+14KhZ    Unité insensible à la casse
++0Hz     Zero avec un signe + et une unité
+-0kHz    Zero avec un signe - et une unité
+ +

Valeurs invalides

+ +
12.0     Cette valeur est un nombre pas une fréquence (il manque l'unité).
+7 Hz     Aucun espace n'est autorisé entre le nombre et l'unité.
+0        Bien qu'un zéro puisse être utilisé sans unité pour une longueur, ce n'est pas le cas pour une fréquence.
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Values', '#frequency', '<frequency>')}}{{Spec2('CSS3 Values')}}Définition initiale.
+ +

Ce type de donnés fut initialement introduit avec la spécification CSS Niveau 2 pour le groupe de média aural qui est désormais obsolète. Ce type de données a donc été déprécié puis réintroduit avec CSS3 bien qu'aucune propriété ne l'utilise à l'heure actuelle.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.frequency")}}

diff --git a/files/fr/web/css/gap/index.html b/files/fr/web/css/gap/index.html new file mode 100644 index 0000000000..8ce73e5e32 --- /dev/null +++ b/files/fr/web/css/gap/index.html @@ -0,0 +1,228 @@ +--- +title: gap (grid-gap) +slug: Web/CSS/gap +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/gap +--- +
{{CSSRef}}
+ +

La propriété gap est une propriété raccourcie pour {{cssxref("row-gap")}} et {{cssxref("column-gap")}} qui permet de définir les espaces entre les lignes et entre les colonnes d'une grille.

+ +
{{EmbedInteractiveExample("pages/css/gap.html")}}
+ + + +
+

Note : La propriété {{cssxref("grid-gap")}} a initialement été définie dans le module de spécification CSS Grid Layout. Cette version préfixée a été remplacée par gap. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.

+
+ +

Syntaxe

+ +
/* Une valeur de longueur */
+/* Type <length>          */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* Une valeur proportionnelle */
+/* Type <percentage>          */
+gap: 16%;
+gap: 100%;
+
+/* Deux valeurs de longueur */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* Une ou deux valeurs proportionnelles */
+/* Type <percentage>             */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* Valeurs calc() */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* Valeurs globales */
+gap: inherit;
+gap: initial;
+gap: unset;
+
+ +

Cette propriété est définie avec une valeur <'row-gap'>, éventuellement suivi d'une valeur <'column-gap'>. Si <'column-gap'> n'est pas utilisée, la valeur utilisée sera la même que <'row-gap'>.

+ +

<'row-gap'> et <'column-gap'> sont des valeurs de type <length> ou <percentage>.

+ +

Valeurs

+ +
+
<length>
+
La largeur de l'espace entre les lignes et/ou entre les colonnes (cf. {{cssxref("<length>")}} pour les valeurs utilisables).
+
<percentage>
+
La largeur de l'espace entre les lignes et/ou entre les colonnes en fonction de la taille de l'élément englobant (cf. {{cssxref("<percentage>")}} pour les valeurs utilisables).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Disposition flexible

+ +

{{SeeCompatTable}}

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

+ +
#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  gap: 20px 5px;
+}
+
+#flexbox > div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Disposition_flexible", "auto", "120px")}}

+ +

Grilles CSS

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ + + +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#grid > div {
+  border: 1px solid green;
+  background-color: lime;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Grilles_CSS", "auto", "120px")}}

+ +

Multi-colonnes

+ +

HTML

+ +
<p class="content-box">
+  voici un texte en multi-colonne sur des colonnes avec
+  une gouttière de 40 pixels créée grâce à la propriété
+  CSS <code>gap</code>. Est-ce que c'est pas trop génial ?
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}{{Spec2("CSS3 Box Alignment")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

Prise en charge pour les dispositions flexibles

+ +

{{Compat("css.properties.gap.flex_context")}}

+ +

Prise en charge pour les grilles CSS

+ +

{{Compat("css.properties.gap.grid_context")}}

+ +

Prise en charge pour les dispositions multi-colonnes

+ +

{{Compat("css.properties.gap.multicol_context")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/gradient/index.html b/files/fr/web/css/gradient/index.html new file mode 100644 index 0000000000..9dcad38554 --- /dev/null +++ b/files/fr/web/css/gradient/index.html @@ -0,0 +1,134 @@ +--- +title: +slug: Web/CSS/gradient +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/gradient +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <gradient> permet de représenter une {{cssxref("<image>")}} contenant un dégradé entre deux ou plusieurs couleurs. Un dégradé CSS n'est pas une couleur CSS (type {{cssxref("<color>")}}) mais une image sans dimension intrinsèque (elle n'a aucune taille naturelle ou ratio), sa taille réelle sera celle de l'élément auquel elle est appliquée.

+ +
{{EmbedInteractiveExample("pages/css/type-gradient.html")}}
+ + + +

Comme pour l'interpolation des autres couleurs, les dégradés sont calculés dans l'espace de couleurs alpha prémultiplié. Cela permet d'éviter l'apparition de nuances de gris lorsque la couleur et l'opacité varient (on peut constater ce problème avec le mot-clé transparent dans d'anciens navigateurs).

+ +

Les types de dégradés

+ +

Les dégradés linéaires

+ +

Ils sont générés à partir de la fonction {{cssxref("linear-gradient", "linear-gradient()")}} : la couleur évolue suivant un axe imaginaire :

+ + + +
body {
+  background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+  background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+  background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+  background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+  background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
+}
+ +

{{EmbedLiveSample('Les_dégradés_linéaires', 600, 20)}}

+ +

Les dégradés radiaux

+ +

Ils sont générés à partir de la fonction {{cssxref("radial-gradient", "radial-gradient()")}}. Plus on s'éloigne du point d'origine, plus la couleur varie par rapport à la couleur d'origine :

+ + + +
body {
+  background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
+  background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+
+ +

{{EmbedLiveSample('Les_dégradés_radiaux', 600, 20)}}

+ +

Les dégradés répétés

+ +

Ce sont des dégradés linéaires de taille fixe ou des dégradés radiaux qui sont répétés autant que nécessaire pour remplir la boîte visée :

+ + + +
body {
+  background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
+  background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
+}
+ +

{{EmbedLiveSample('Les_dégradés_répétés', 600, 20)}}

+ +

Dégradé conique

+ +

Les couleurs de transitions s'appliquent progressivement autour d'un cercle. Un tel dégradé est généré avec la fonction {{cssref("conic-gradient","conic-gradient()")}}.

+ +
+ + +
.conic-gradient {
+  background: conic-gradient(lightpink, white, powderblue);
+}
+
+ +

{{EmbedLiveSample('conic-gradient', 240, 80)}}

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}{{Spec2('CSS3 Images')}}Définition initiale.
{{SpecName('CSS4 Images', '#gradients', '<gradient>')}}{{Spec2('CSS4 Images')}}Ajout des dégradés coniques.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image.gradient")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-area/index.html b/files/fr/web/css/grid-area/index.html new file mode 100644 index 0000000000..11f8d6af87 --- /dev/null +++ b/files/fr/web/css/grid-area/index.html @@ -0,0 +1,156 @@ +--- +title: grid-area +slug: Web/CSS/grid-area +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid-area +--- +
{{CSSRef}}
+ +

La propriété grid-area est une propriété raccourcie pour {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} et {{cssxref("grid-column-end")}} qui permet de définir la taille d'un objet de la grille et son emplacement via les bords de sa zone de grille.

+ +
{{EmbedInteractiveExample("pages/css/grid-area.html")}}
+ + + +

Si quatre valeurs <grid-line> sont fournies, la première sera appliquée à grid-row-start, la deuxième à grid-column-start, la troisième à grid-row-end et la quatrième à grid-column-end.

+ +

Lorsqu'il n'y a pas de valeur pour grid-column-end, si grid-column-start est un identifiant de zone ({{cssxref("<custom-ident>")}}, grid-column-end sera défini avec cet identifiant, sinon il sera défini avec auto.

+ +

Lorsqu'il n'y a pas de valeur pour grid-row-end, si grid-row-start est un identifiant de zone, grid-row-end sera défini avec cet identifiant, sinon il sera défini avec auto.

+ +

Lorsqu'il n'y  a pas de valeur pour grid-column-start, si grid-row-start est un identifiant de zone, les quatres propriétés seront définies avec cette valeur. Sinon, elles vaudront auto.

+ +

La propriété grid-area peut également prendre comme valeur un identifiant personnalisé ({{cssxref("<custom-ident>")}}) qui pourra être utilisé comme nom pour une zone de la grille placée grâce à la propriété {{cssxref("grid-template-areas")}}.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+grid-area: auto;
+grid-area: auto / auto;
+grid-area: auto / auto / auto;
+grid-area: auto / auto / auto / auto;
+
+/* Valeurs de type <custom-ident> */
+grid-area: une-zone-de-grille;
+grid-area: une-zone-de-grille / une-autre-zone;
+
+/* Forme : <integer> && <custom-ident>? */
+grid-area: une-zone-de-grille 4;
+grid-area: une-zone-de-grille 4 / 2 une-autre-zone;
+
+/* Forme span && [ <integer> || <custom-ident> ] */
+grid-area: span 3;
+grid-area: span 3 / span une-zone-de-grille;
+grid-area: 2 span / une-autre-zone span;
+
+/* Valeurs globales */
+grid-area: inherit;
+grid-area: initial;
+grid-area: unset;
+ +

Valeurs

+ +
+
auto
+
Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (span) automatique ou une taille par défaut de 1.
+
<custom-ident>
+
S'il existe une ligne nommée avec '<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille. +

Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-area: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne foo-start a été explicitement déclarée).

+ +

Sinon, la valeur est traitée comme si on avait utilisé <custom-ident> et la valeur 1.

+
+
<integer> && <custom-ident>?
+
La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite. +

Si un nom est fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.

+ +

Si la valeur entière utilisée est 0, la règle est invalide.

+
+
span && [ <integer> || <custom-ident> ]
+
Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin. +

Si un nom fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.

+ +

Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera 1. Les entiers négatifs ou nuls sont invalides.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template: repeat(4, 1fr) / 50px 100px;
+}
+
+#item1 {
+  background-color: lime;
+  grid-area: 2 / 2 / auto / span 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-area", "grid-area")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-area")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-auto-columns/index.html b/files/fr/web/css/grid-auto-columns/index.html new file mode 100644 index 0000000000..07cac850ff --- /dev/null +++ b/files/fr/web/css/grid-auto-columns/index.html @@ -0,0 +1,160 @@ +--- +title: grid-auto-columns +slug: Web/CSS/grid-auto-columns +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/grid-auto-columns +--- +
{{CSSRef}}
+ +

La propriété grid-auto-columns définit la taille d'une colonne de grille créée de façon implicite.

+ +
{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}
+ + + +

Si un élément de la grille est positionné sur une colonne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-columns")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des colonnes supplémentaires.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+grid-auto-columns: min-content;
+grid-auto-columns: max-content;
+grid-auto-columns: auto;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+grid-auto-columns: 100px;
+grid-auto-columns: 20cm;
+grid-auto-columns: 50vmax;
+
+/* Valeurs proportionnelles */
+/* Type <percentage>        */
+grid-auto-columns: 10%;
+grid-auto-columns: 33.3%;
+
+/* Valeurs <flex> */
+grid-auto-columns: 0.5fr;
+grid-auto-columns: 3fr;
+
+/* Valeurs minmax() */
+grid-auto-columns: minmax(100px, auto);
+grid-auto-columns: minmax(max-content, 2fr);
+grid-auto-columns: minmax(20%, 80vmax);
+
+/* Valeurs fit-content() */
+grid-auto-columns: fit-content(400px);
+grid-auto-columns: fit-content(5cm);
+grid-auto-columns: fit-content(20%);
+
+/* Gestion de plusieurs pistes */
+grid-auto-columns: min-content max-content auto;
+grid-auto-columns: 100px 150px 390px;
+​​​​​​​grid-auto-columns: 10% 33.3%;
+grid-auto-columns: 0.5fr 3fr 1fr;
+​​​​​​​grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+/* Valeurs globales */
+grid-auto-columns: inherit;
+grid-auto-columns: initial;
+grid-auto-columns: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Une longueur positive (cf. type {{cssxref("<length>")}}.
+
<percentage>
+
Un pourcentage positif indiquant la taille de la ligne relativement à la taille du bloc qui contient la grille. Si la taille de ce bloc n'est pas définie, la valeur exprimée en pourcents est considérée comme auto.
+
<flex>
+
Une dimension positive dont l'unité fr indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <flex> occupera une partie de l'espace restant en fonction de ce facteur. +

Lorsque cette valeur apparaît en dehors de la notation minmax(), la valeur minimale auto est implicite (la valeur signifie minmax(auto, <flex>)).

+
+
max-content
+
Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.
+
min-content
+
Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille
+
minmax(min, max)
+
Une notation fonctionnelle qui définit un intervalle de taille entre min et max. Si max est inférieur à min, max est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <flex> qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).
+
fit-content(argument)
+
Cette notation représente la formule min(max-content, max(auto, argument)) qui est calculée de façon semblable à auto, sauf qu'ici, la taille de la piste est écrétée à argument s'i elle est plus grande que le minimum auto.
+
auto
+
Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.
+
+

Note : Les pistes de taille auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#grid {
+  width: 100px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-columns: 200px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-auto-columns")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-auto-flow/index.html b/files/fr/web/css/grid-auto-flow/index.html new file mode 100644 index 0000000000..375fb92ba8 --- /dev/null +++ b/files/fr/web/css/grid-auto-flow/index.html @@ -0,0 +1,163 @@ +--- +title: grid-auto-flow +slug: Web/CSS/grid-auto-flow +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid-auto-flow +--- +
{{CSSRef}}
+ +

La propriété grid-auto-flow permet de contrôler la façon dont fonctionne l'algorithme de placement automatique. Celui-ci définit exactement comme les objets placés automatiquement s'inscrivent dans la grille.

+ +
{{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+grid-auto-flow: row;
+grid-auto-flow: column;
+grid-auto-flow: dense;
+grid-auto-flow: row dense;
+grid-auto-flow: column dense;
+
+/* Valeurs globales */
+grid-auto-flow: inherit;
+grid-auto-flow: initial;
+grid-auto-flow: unset;
+
+ +

Cette propriété peut prendre deux formes :

+ +
    +
  • la première avec un seul mot-clé parmi : row, column ou dense
    • +
  • la seconde avec deux mots-clés : row dense ou column dense.
    • +
+ +

Valeurs

+ +
+
row
+
Les éléments sont organisés en remplissant chacune des lignes au fur et à mesure, quitte à en ajouter si besoin. Si aucune valeur entre row ou column n'est fournie, row sera la valeur par défaut.
+
column
+
Les éléments sont organisés en remplissant chacune des colonnes au fur et à mesure, quitte à en ajouter si besoin.
+
dense
+
L'algorithme de placement automatique utilisera une méthode de « regroupement dense » où il essaie de remplir les trous dans la grille si des éléments plus petits arrivent ensuite. De fait, on peut obtenir une impression de désordre alors qu'il s'agit simplement du comblement des espaces libres. +

Si cette valeur est absente, le moteur utilisera un algorithme simple qui ne fait que se déplacer vers l'avant, sans revenir vers les espaces vides. De cette façon, les éléments apparaitront nécessairement dans l'ordre mais pourront laisser des trous.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#grid {
+  height: 200px;
+  width: 200px;
+  display: grid;
+  grid-gap: 10px;
+  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
+  grid-auto-flow: column;  /* ou 'row', 'row dense', 'column dense' */
+}
+
+#item1 {
+  background-color: lime;
+  grid-row-start: 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+
+#item4 {
+  grid-column-start: 2;
+  background-color: red;
+}
+
+#item5 {
+  background-color: aqua;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+  <div id="item4"></div>
+  <div id="item5"></div>
+</div>
+<select id="direction" onchange="changeGridAutoFlow()">
+  <option value="column">column</option>
+  <option value="row">row</option>
+</select>
+<input id="dense" type="checkbox" onchange="changeGridAutoFlow()">
+<label for="dense">dense</label>
+
+ +

JavaScript

+ +
function changeGridAutoFlow() {
+  var grid = document.getElementById("grid");
+  var direction = document.getElementById("direction");
+  var dense = document.getElementById("dense");
+  var gridAutoFlow = direction.value === "row" ? "row" : "column";
+
+  if (dense.checked) {
+    gridAutoFlow += " dense";
+  }
+
+  grid.style.gridAutoFlow = gridAutoFlow;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-auto-flow", "grid-auto-flow")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-auto-flow")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-auto-rows/index.html b/files/fr/web/css/grid-auto-rows/index.html new file mode 100644 index 0000000000..cd4d6c6b97 --- /dev/null +++ b/files/fr/web/css/grid-auto-rows/index.html @@ -0,0 +1,153 @@ +--- +title: grid-auto-rows +slug: Web/CSS/grid-auto-rows +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid-auto-rows +--- +
{{CSSRef}}
+ +

La propriété grid-auto-rows définit la taille d'une ligne de grille créée de façon implicite.

+ +
{{EmbedInteractiveExample("pages/css/grid-auto-rows.html")}}
+ + + +

Si un élément de la grille est positionné sur une ligne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-rows")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des lignes supplémentaires.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+grid-auto-rows: min-content;
+grid-auto-rows: max-content;
+grid-auto-rows: auto;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+grid-auto-rows: 100px;
+grid-auto-rows: 20cm;
+grid-auto-rows: 50vmax;
+
+/* Valeurs proportionnelles */
+/* Type <percentage>        */
+grid-auto-rows: 10%;
+grid-auto-rows: 33.3%;
+
+/* Valeurs <flex> */
+grid-auto-rows: 0.5fr;
+grid-auto-rows: 3fr;
+
+/* Valeurs minmax() */
+grid-auto-rows: minmax(100px, auto);
+grid-auto-rows: minmax(max-content, 2fr);
+grid-auto-rows: minmax(20%, 80vmax);
+
+/* Gestion de plusieurs pistes */
+grid-auto-rows: min-content max-content auto;
+grid-auto-rows: 100px 150px 390px;
+​​​​​​​grid-auto-rows: 10% 33.3%;
+grid-auto-rows: 0.5fr 3fr 1fr;
+​​​​​​​grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+
+/* Valeurs globales */
+grid-auto-rows: inherit;
+grid-auto-rows: initial;
+grid-auto-rows: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Une longueur positive (cf. type {{cssxref("<length>")}}.
+
<percentage>
+
Un pourcentage positif indiquant la taille de la ligne relativement à la taille du bloc qui contient la grille. Si la taille de ce bloc n'est pas définie, la valeur exprimée en pourcents est considérée comme auto.
+
<flex>
+
Une dimension positive dont l'unité fr indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <flex> occupera une partie de l'espace restant en fonction de ce facteur. +

Lorsque cette valeur apparaît en dehors de la notation minmax(), la valeur minimale auto est implicite (la valeur signifie minmax(auto, <flex>)).

+
+
max-content
+
Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.
+
min-content
+
Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille
+
minmax(min, max)
+
Une notation fonctionnelle qui définit un intervalle de taille entre min et max. Si max est inférieur à min, max est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <flex> qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).
+
auto
+
Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.
+
+

Note : Les pistes de taille auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#grid {
+  width: 200px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "210px", "210px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-auto-rows", "grid-auto-rows")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-auto-rows")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-column-end/index.html b/files/fr/web/css/grid-column-end/index.html new file mode 100644 index 0000000000..f47f8896cc --- /dev/null +++ b/files/fr/web/css/grid-column-end/index.html @@ -0,0 +1,166 @@ +--- +title: grid-column-end +slug: Web/CSS/grid-column-end +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid-column-end +--- +
{{CSSRef}}
+ +

La propriété grid-column-end définit la position de la fin d'un élément de la grille dans une zone donnée ou sur un fragment de colonne donné.

+ +
{{EmbedInteractiveExample("pages/css/grid-column-end.html")}}
+ + + +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+grid-column-end: auto;
+
+/* Valers <custom-ident> */
+grid-column-end: somegridarea;
+
+/* Valeurs <integer> + <custom-ident> */
+grid-column-end: 2;
+grid-column-end: somegridarea 4;
+
+/* Valeurs span + <integer> + <custom-ident> */
+grid-column-end: span 3;
+grid-column-end: span somegridarea;
+grid-column-end: 5 somegridarea span;
+
+/* Valeurs globales */
+grid-column-end: inherit;
+grid-column-end: initial;
+grid-column-end: unset;
+
+ +

Valeurs

+ +
+
auto
+
Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut 1 s'il n'y a pas d'autres contraintes.
+
<custom-ident>
+
S'il existe une ligne nommée '<custom-ident>-end', cela placera l'élément sur la première ligne correspondante.. +

Note : Les noms de zones génèrent automatiquement les noms de colonnes sous cette forme. Ainsi, grid-column-end: foo; permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne a explicitement été nommée avec foo-end).

+ +

Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <custom-ident> (cf. définition suivante).

+
+
<integer> && <custom-ident>?
+
Contribue au placement de l'élément sur la n-ième ligne. Si une valeur négative est fournie, les lignes correspondantes sont comptées depuis la dernière. Si un nom est fourni pour <custom-ident>, seules les lignes avec ce nom sont comptées. S'il n'y a pas suffisamment de lignes avec ce nom, on considère que toutes les lignes sont intitulées avec ce nom afin de trouver une position. +

Un entier nul ne peut pas être utilisé (la règle est invalide).

+
+
span && [ <integer> || <custom-ident> ]
+
Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que la fin de la colonne pour l'élément de la grille soit placé à n lignes du bord situé au début. +

Si un nom fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.

+ +

Si <integer> est absent, la valeur par défaut sera 1. Les entiers négatifs ou nuls ne sont pas autorisés.

+ +

<custom-ident> ne peut pas prendre la valeur span.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{EmbedLiveSample('Exemples', '230', '420')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-column-end", "grid-column-end")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-column-end")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-column-gap/index.html b/files/fr/web/css/grid-column-gap/index.html new file mode 100644 index 0000000000..e2f69abe13 --- /dev/null +++ b/files/fr/web/css/grid-column-gap/index.html @@ -0,0 +1,127 @@ +--- +title: grid-column-gap +slug: Web/CSS/grid-column-gap +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/column-gap +--- +
{{CSSRef}}{{Deprecated_Header}}
+ +
+

Note : La propriété grid-column-gap a été fusionnée avec la propriété {{cssxref("column-gap")}} afin d'être remplacée par cette dernière.

+
+ +

La propriété grid-column-gap définit l'espacement entre les colonnes d'une grille.

+ +
{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}
+ + + +

En termes de dimensionnement, cet espace est traité comme une piste supplémentaire de la longueur indiquée. Les valeurs négatives ne sont pas autorisées.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+grid-column-gap: 20px;
+grid-column-gap: 1em;
+grid-column-gap: 3vmin;
+grid-column-gap: 0.5cm;
+
+/* Valeurs relatives à la taille */
+/* de l'élément englobant        */
+/* Type <percentage>             */
+grid-column-gap: 10%;
+
+/* Valeurs globales */
+grid-column-gap: inherit;
+grid-column-gap: initial;
+grid-column-gap: unset;
+
+ +

Valeurs

+ +
+
<length-percentage>
+
La largeur de la « gouttière » placée entre les colonnes de la grille. Pour les valeurs exprimées en pourcentages, elles sont relatives aux dimensions de l'élément englobant.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  grid-column-gap: 20px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-grid-column-gap", "grid-column-gap")}}{{Spec2("CSS3 Box Alignment")}}Dépréciée afin d'être remplacée par {{cssxref("column-gap")}}.
{{SpecName("CSS3 Grid", "#gutters", "grid-column-gap")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-column-gap")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-column-start/index.html b/files/fr/web/css/grid-column-start/index.html new file mode 100644 index 0000000000..b49f66fc80 --- /dev/null +++ b/files/fr/web/css/grid-column-start/index.html @@ -0,0 +1,178 @@ +--- +title: grid-column-start +slug: Web/CSS/grid-column-start +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid-column-start +--- +
{{CSSRef}}
+ +

La propriété grid-column-start définit la position du début d'un élément (au sens des propriétés logiques *-block-start) en définissant la ligne ou la taille de fragment occupé sur la grille.

+ +
{{EmbedInteractiveExample("pages/css/grid-column-start.html")}}
+ + + +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+grid-column-start: auto;
+
+/* Valeur <custom-ident> */
+grid-column-start: unezonedegrille;
+
+/* Valeurs <integer> + <custom-ident> */
+grid-column-start: 2;
+grid-column-start: unezonedegrille 4;
+
+/* Valeurs span + <integer> + <custom-ident> */
+grid-column-start: span 3;
+grid-column-start: span unezonedegrille;
+grid-column-start: span unezonedegrille 5;
+
+/* Valeurs globales */
+grid-column-start: inherit;
+grid-column-start: initial;
+grid-column-start: unset;
+
+ +

La valeur de cette propriété prend la forme d'une seule valeur <grid-line>. Une telle valeur peut être définie avec :

+ +
    +
  • le mot-clé auto
    • +
  • ou une valeur <custom-ident>
    • +
  • ou une valeur <integer>
    • +
  • ou une valeur <custom-ident> et un <integer> séparés par un espace
    • +
  • ou le mot-clé span avec une valeur <custom-ident> ou un <integer> ou les deux.
    • +
+ +

Valeurs

+ +
+
auto
+
Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (span) automatique ou une taille par défaut de 1.
+
<custom-ident>
+
S'il existe une ligne nommée avec '<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille. +

Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-column-start: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne foo-start a été explicitement déclarée).

+ +

Sinon, la valeur est traitée comme si on avait utilisé <custom-ident> et la valeur 1.

+
+
<integer> && <custom-ident>?
+
La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite. +

Si un nom est fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.

+ +

Si la valeur entière utilisée est 0, la règle est invalide.

+
+
span && [ <integer> || <custom-ident> ]
+
Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin. +

Si un nom fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.

+ +

Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera 1. Les entiers négatifs ou nuls sont invalides.

+ +

<custom-ident> ne peut pas prendre la valeur span.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{EmbedLiveSample('Exemples', '230', '420')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-column-start", "grid-column-start")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-column-start")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-column/index.html b/files/fr/web/css/grid-column/index.html new file mode 100644 index 0000000000..3ad7be06b1 --- /dev/null +++ b/files/fr/web/css/grid-column/index.html @@ -0,0 +1,167 @@ +--- +title: grid-column +slug: Web/CSS/grid-column +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid-column +--- +
{{CSSRef}}
+ +

La propriété grid-column est une propriété raccourcie pour {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}}. Elle permet de définir la taille et l'emplacement d'un élément sur la grille en indiquant l'emplacement du début, de la fin et/ou sa taille.

+ +
{{EmbedInteractiveExample("pages/css/grid-column.html")}}
+ + + +

Si deux valeurs <grid-line> sont utilisées pour la propriété, la valeur de grid-column-start sera définie avec la première valeur avant la barre oblique et la valeur de grid-column-end sera définie avec celle qui est située après la barre oblique.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+grid-column: auto;
+grid-column: auto / auto;
+
+/* Valeurs <custom-ident> */
+grid-column: unezonedegrille;
+grid-column: unezonedegrille / unezonedegrille;
+
+/* Valeurs <integer> + <custom-ident> */
+grid-column: unezonedegrille 4;
+grid-column: 4 unezonedegrille / 6;
+
+/* Valeurs span + <integer> + <custom-ident> */
+grid-column: span 3;
+grid-column: span unezonedegrille;
+grid-column: 5 unezonedegrille span;
+grid-column: span 3 / 6;
+grid-column: span unezonedegrille / span unezonedegrille;
+grid-column: 5 unezonedegrille span / 2 span;
+
+/* Valeurs globales */
+grid-column: inherit;
+grid-column: initial;
+grid-column: unset;
+
+ +

Cette propriété est définie grâce à une ou deux valeurs <grid-line>. Si deux valeurs <grid-line> sont fournies, elles doivent être séparées par une barre oblique (/)

+ +

Une valeur <grid-line> peut être définie avec :

+ +
    +
  • le mot-clé auto
    • +
  • ou une valeur <custom-ident>
    • +
  • ou une valeur <integer>
    • +
  • ou une valeur <custom-ident> et un <integer> séparés par un espace
    • +
  • ou le mot-clé span avec une valeur <custom-ident> ou un <integer> ou les deux.
    • +
+ +

Valeurs

+ +
+
auto
+
Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (span) automatique ou une taille par défaut de 1.
+
<custom-ident>
+
S'il existe une ligne nommée avec '<custom-ident>-start'/'<custom-ident>-end', la première colonne correspondante contribue au placement de l'élément sur la grille. +

Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-column-start: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre colonne foo-start/foo-end a été explicitement déclarée).

+ +

Sinon, la valeur est traitée comme si on avait utilisé <custom-ident> et la valeur 1.

+
+
<integer> && <custom-ident>?
+
La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite. +

Si un nom est fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.

+ +

Si la valeur entière utilisée est 0, la règle est invalide.

+
+
span && [ <integer> || <custom-ident> ]
+
Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin. +

Si un nom fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.

+ +

Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera 1. Les entiers négatifs ou nuls sont invalides.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: 100px;
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-column: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-column: span 2 / 7;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

Résultat

+ +

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

+ +

Prothèse d'émulation (polyfill)

+ +

IE11 ne prend pas en charge le placement automatique des objets sur la grille.Tous les objets finiront sur la première colonne / ligne si ceux-ci ne sont pas marqués avec les propriétés -ms-{{cssxref("grid-column")}} et -ms-{{cssxref("grid-row")}}. Pour effectuer cette annotation automatiquement, on peut utiliser du JavaScript (cf. ce dépôt).

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-column", "grid-column")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-column")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-row-end/index.html b/files/fr/web/css/grid-row-end/index.html new file mode 100644 index 0000000000..93a883beb2 --- /dev/null +++ b/files/fr/web/css/grid-row-end/index.html @@ -0,0 +1,166 @@ +--- +title: grid-row-end +slug: Web/CSS/grid-row-end +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid-row-end +--- +
{{CSSRef}}
+ +

La propriété grid-row-end définit la position de la fin d'un élément de la grille dans une zone donnée ou sur un fragment de ligne donné.

+ +
{{EmbedInteractiveExample("pages/css/grid-row-end.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+grid-row-end: auto;
+
+/* Valeurs <custom-ident> */
+grid-row-end: somegridarea;
+
+/* Valeurs <integer> + <custom-ident> */
+grid-row-end: 2;
+grid-row-end: somegridarea 4;
+
+/* Valeurs span + <integer> + <custom-ident> */
+grid-row-end: span 3;
+grid-row-end: span somegridarea;
+grid-row-end: 5 somegridarea span;
+
+/* Valeurs globales */
+grid-row-end: inherit;
+grid-row-end: initial;
+grid-row-end: unset;
+
+ +

Valeurs

+ +
+
auto
+
Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut 1 s'il n'y a pas d'autres contraintes.
+
<custom-ident>
+
S'il existe une ligne nommée '<custom-ident>-end', cela placera l'élément sur la première ligne correspondante.. +

Note : Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, grid-row-end: foo; permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec foo-end).

+ +

Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <custom-ident> (cf. définition suivante).

+ +

<custom-ident> ne peut pas prendre la valeur span.

+
+
<integer> && <custom-ident>?
+
Contribue au placement de l'élément sur la n-ième ligne. Si une valeur négative est fournie, les lignes correspondantes sont comptées depuis la dernière. Si un nom est fourni pour <custom-ident>, seules les lignes avec ce nom sont comptées. S'il n'y a pas suffisamment de lignes avec ce nom, on considère que toutes les lignes sont intitulées avec ce nom afin de trouver une position. +

Un entier nul ne peut pas être utilisé (la règle est invalide).

+
+
span && [ <integer> || <custom-ident> ]
+
Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord situé au début. +

Si un nom fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.

+ +

Si <integer> est absent, la valeur par défaut sera 1. Les entiers négatifs ou nuls ne sont pas autorisés.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{EmbedLiveSample('Exemples', '230', '420')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-row-end", "grid-row-end")}}{{Spec2("CSS3 Grid")}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-row-end")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-row-start/index.html b/files/fr/web/css/grid-row-start/index.html new file mode 100644 index 0000000000..8f396d02ec --- /dev/null +++ b/files/fr/web/css/grid-row-start/index.html @@ -0,0 +1,178 @@ +--- +title: grid-row-start +slug: Web/CSS/grid-row-start +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid-row-start +--- +
{{CSSRef}}
+ +

La propriété grid-row-start définit le début de la position, sur une ligne, d'un élément placé sur la grille qui participe à une ligne, à un fragment de ligne ou rien (automatique). Par conséquent, cela définit également le début de la zone de la grille pour cet élément.

+ +
{{EmbedInteractiveExample("pages/css/grid-row-start.html")}}
+ + + +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+grid-row-start: auto;
+
+/* Valeurs <custom-ident>*/
+grid-row-start: unezonedegrille;
+
+/* Valeurs <integer> + <custom-ident> */
+grid-row-start: 2;
+grid-row-start: unezonedegrille 4;
+
+/* Valeurs span + <integer> + <custom-ident> */
+grid-row-start: span 3;
+grid-row-start: span unezonedegrille;
+grid-row-start: 5 unezonedegrille span;
+
+/* Valeurs globales */
+grid-row-start: inherit;
+grid-row-start: initial;
+grid-row-start: unset;
+
+ +

La valeur de cette propriété prend la forme d'une seule valeur <grid-line>. Une telle valeur peut être définie avec :

+ +
    +
  • le mot-clé auto
    • +
  • ou une valeur <custom-ident>
    • +
  • ou une valeur <integer>
    • +
  • ou une valeur <custom-ident> et un <integer> séparés par un espace
    • +
  • ou le mot-clé span avec une valeur <custom-ident> ou un <integer> ou les deux.
    • +
+ +

Valeurs

+ +
+
auto
+
Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (span) automatique ou une taille par défaut de 1.
+
<custom-ident>
+
S'il existe une ligne nommée avec '<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille. +

Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-row-start: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne foo-start a été explicitement déclarée).

+ +

Sinon, la valeur est traitée comme si on avait utilisé <custom-ident> et la valeur 1.

+
+
<integer> && <custom-ident>?
+
La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite. +

Si un nom est fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.

+ +

Si la valeur entière utilisée est 0, la règle est invalide.

+
+
span && [ <integer> || <custom-ident> ]
+
Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin. +

Si un nom fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.

+ +

Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera 1. Les entiers négatifs ou nuls sont invalides.

+ +

<custom-ident> ne peut pas prendre la valeur span.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('Exemples', '230', '420') }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-row-start", "grid-row-start")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-row-start")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-row/index.html b/files/fr/web/css/grid-row/index.html new file mode 100644 index 0000000000..3970f9ea5f --- /dev/null +++ b/files/fr/web/css/grid-row/index.html @@ -0,0 +1,152 @@ +--- +title: grid-row +slug: Web/CSS/grid-row +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid-row +--- +
{{CSSRef}}
+ +

La propriété grid-row est une propriété raccourcie pour {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. Elle permet de définir la taille et l'emplacement d'un élément sur la grille en indiquant l'emplacement du début, de la fin et/ou sa taille.

+ +
{{EmbedInteractiveExample("pages/css/grid-row.html")}}
+ + + +

Si deux valeurs <grid-line> sont utilisées pour la propriété, la valeur de grid-row-start sera définie avec la première valeur avant la barre oblique et la valeur de grid-row-end sera définie avec celle qui est située après la barre oblique.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+grid-row: auto;
+grid-row: auto / auto;
+
+/* Valeurs <custom-ident> */
+grid-row: unezonedegrille;
+grid-row: unezonedegrille / unezonedegrille;
+
+/* Valeurs <integer> + <custom-ident> */
+grid-row: unezonedegrille 4;
+grid-row: 4 unezonedegrille / 6;
+
+/* Valeurs span + <integer> + <custom-ident> */
+grid-row: span 3;
+grid-row: span unezonedegrille;
+grid-row: 5 unezonedegrille span;
+grid-row: span 3 / 6;
+grid-row: span unezonedegrille / span unezonedegrille;
+grid-row: 5 unezonedegrille span / 2 span;
+
+/* Valeurs globales */
+grid-row: inherit;
+grid-row: initial;
+grid-row: unset;
+
+ +

Valeurs

+ +
+
auto
+
Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (span) automatique ou une taille par défaut de 1.
+
<custom-ident>
+
S'il existe une ligne nommée avec '<custom-ident>-start'/'<custom-ident>-end', la première ligne correspondante contribue au placement de l'élément sur la grille. +

Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-row-start: foo; cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne foo-start/foo-end a été explicitement déclarée).

+ +

Sinon, la valeur est traitée comme si on avait utilisé <custom-ident> et la valeur 1.

+
+
<integer> && <custom-ident>?
+
La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite. +

Si un nom est fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.

+ +

Si la valeur entière utilisée est 0, la règle est invalide.

+
+
span && [ <integer> || <custom-ident> ]
+
Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin. +

Si un nom fourni pour <custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.

+ +

Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera 1. Les entiers négatifs ou nuls sont invalides.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(6, 1fr);
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-row: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-row: span 2 / 7;
+}
+
+ +

HTML

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-row", "grid-row")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-row")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-template-areas/index.html b/files/fr/web/css/grid-template-areas/index.html new file mode 100644 index 0000000000..4bb71a1f5a --- /dev/null +++ b/files/fr/web/css/grid-template-areas/index.html @@ -0,0 +1,134 @@ +--- +title: grid-template-areas +slug: Web/CSS/grid-template-areas +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid-template-areas +--- +
{{CSSRef}}
+ +

La propriété grid-template-areas permet de définir des zones de grille nommées.

+ +
{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}
+ + + +

Ces zones ne sont pas associées à un objet de la grille mais peuvent être utilisées avec les propriétés de placement : {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} et les méthodes de raccourci correspondantes {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+grid-template-areas: none;
+
+/* Valeurs de chaînes */
+/* Type <string>      */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* Valeurs globales */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+
+ +

Valeurs

+ +
+
none
+
Le conteneur de grille ne définit aucune zone de grille nommée.
+
<string>+
+
Un ligne est créée pour chaque chaîne. Une colonne est créée pour chaque composant de la chaîne de caractères. Si on a un même composant réutilisé sur différentes lignes, cela créera une cellule sur les différentes lignes et colonnes. Il est nécessaire que ces cellules forment un rectangle, sinon, la déclaration est invalide. Voir {{cssxref("<string>")}} pour plus d'informations sur les valeurs de ce type.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<section id="page">
+  <header>En-tête</header>
+  <nav>Navigation</nav>
+  <main>Zone principale</main>
+  <footer>Pied de page</footer>
+</section>
+ +

CSS

+ +
#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page > header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page > nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page > main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page > footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple", "100%", "250px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-template-areas")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-template-columns/index.html b/files/fr/web/css/grid-template-columns/index.html new file mode 100644 index 0000000000..f6d58df3f0 --- /dev/null +++ b/files/fr/web/css/grid-template-columns/index.html @@ -0,0 +1,145 @@ +--- +title: grid-template-columns +slug: Web/CSS/grid-template-columns +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid-template-columns +--- +
{{CSSRef}}
+ +

La propriété grid-template-columns définit les noms des lignes et les fonctions de taille (track sizing) pour les colonnes de la grille.

+ +
{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}
+ + + +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+grid-template-columns: none;
+
+/* Valeurs <track-list> */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+
+/* Valeurs <auto-track-list> */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Valeurs globales */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+
+ +

Valeurs

+ +
+
none
+
Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle colonne sera générée implicitement et sa taille sera déterminée grâce à la propriété {{cssxref("grid-auto-columns")}}.
+
<length>
+
Un longueur positive. Voir {{cssxref("<length>")}}.
+
<percentage>
+
Un pourcentage positif (type {{cssxref("<percentage>")}}) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée comme auto.
+
<flex>
+
Une dimension positive dont l'unité fr indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <flex> occupera une partie de l'espace restant en fonction de ce facteur. +

Lorsque cette valeur apparaît en dehors de la notation minmax(), la valeur minimale auto est implicite (la valeur signifie minmax(auto, <flex>)). Voir {{cssxref("<flex>")}}.

+
+
max-content
+
Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.
+
min-content
+
Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.
+
{{cssxref("minmax","minmax(min, max)")}}
+
Une notation fonctionnelle qui définit un intervalle de taille entre min et max. Si max est inférieur à min, max est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <flex> qui définit le facteur de flexibilité de la piste. Cette valeur est invalide en tant que minimum.
+
auto
+
Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.
+
+

Note : Les pistes de taille auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.

+
+
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
+
Cette notation représente la formule min(max-content, max(auto, argument)) qui est calculée comme pour auto (i.e. minmax(auto, max-content)) sauf que la taille de la piste est ramenée à argument si elle est plus grande que le minimum fourni par auto.
+
{{cssxref("repeat","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}
+
Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses colonnes pour lesquelles on réutilise un motif.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="areaA">A</div>
+  <div id="areaB">B</div>
+</div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-template-columns")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-template-rows/index.html b/files/fr/web/css/grid-template-rows/index.html new file mode 100644 index 0000000000..0e31daf6f7 --- /dev/null +++ b/files/fr/web/css/grid-template-rows/index.html @@ -0,0 +1,149 @@ +--- +title: grid-template-rows +slug: Web/CSS/grid-template-rows +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid-template-rows +--- +
{{CSSRef}}
+ +

La propriété grid-template-rows définit les noms des lignes et les fonctions de taille (track sizing) pour les lignes de la grille.

+ +
{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}
+ + + +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+grid-template-rows: none;
+
+/* Valeurs avec une liste de pistes */
+/* Type <track-list>                */
+grid-template-rows: 100px 1fr;
+grid-template-rows: [linename] 100px;
+grid-template-rows: [linename1] 100px [linename2 linename3];
+grid-template-rows: minmax(100px, 1fr);
+grid-template-rows: fit-content(40%);
+grid-template-rows: repeat(3, 200px);
+
+/* Valeurs <auto-track-list> */
+grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
+grid-template-rows: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-rows: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-rows: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+
+/* Valeurs globales */
+grid-template-rows: inherit;
+grid-template-rows: initial;
+grid-template-rows: unset;
+
+ +

Cette propriété peut être définie avec le mot-clé none ou avec une valeur de type <track-list> ou avec une valeur de type <auto-track-list>.

+ +

Valeurs

+ +
+
none
+
Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle ligne sera générée implicitement et sa taille sera déterminée grâce à la propriété {{cssxref("grid-auto-rows")}}.
+
<length>
+
Un longueur positive (type {{cssxref("<length>")}}).
+
<percentage>
+
Un pourcentage positif (type {{cssxref("<percentage>")}}) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée comme auto.
+
<flex>
+
Une dimension positive dont l'unité fr indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <flex> occupera une partie de l'espace restant en fonction de ce facteur. +

Lorsque cette valeur apparaît en dehors de la notation minmax(), la valeur minimale auto est implicite (la valeur signifie minmax(auto, <flex>)). Voir {{cssxref("<flex_value>")}}.

+
+
max-content
+
Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.
+
min-content
+
Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.
+
{{cssxref("minmax", "minmax(min, max)")}}
+
Une notation fonctionnelle qui définit un intervalle de taille entre min et max. Si max est inférieur à min, max est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <flex> qui définit le facteur de flexibilité de la piste. Cette notation est invalide en tant que minimum.
+
auto
+
Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.
+
+

Note : Les pistes de taille auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.

+
+
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
+
Cette notation représente la formule min(max-content, max(auto, argument)) qui est calculée comme pour auto (i.e. minmax(auto, max-content)) sauf que la taille de la piste est ramenée à argument si elle est plus grande que le minimum fourni par auto.
+
{{cssxref("repeat","repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )")}}
+
Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses lignes pour lesquelles on réutilise un motif.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-rows: 30px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="areaA">A</div>
+  <div id="areaB">B</div>
+</div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-template-rows")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-template/index.html b/files/fr/web/css/grid-template/index.html new file mode 100644 index 0000000000..1311f23f82 --- /dev/null +++ b/files/fr/web/css/grid-template/index.html @@ -0,0 +1,148 @@ +--- +title: grid-template +slug: Web/CSS/grid-template +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid-template +--- +
{{CSSRef}}
+ +

La propriété grid-template est une propriété raccourcie permettant de définir les colonnes, grilles et zones d'une grille.

+ +
{{EmbedInteractiveExample("pages/css/grid-template.html")}}
+ + + +

Les propriétés détaillées sont {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}.

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+grid-template: none;
+
+/* Valeurs utilisant grid-template-rows / grid-template-columns */
+grid-template: 100px 1fr / 50px 1fr;
+grid-template: auto 1fr / auto 1fr auto;
+grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
+grid-template: fit-content(100px) / fit-content(40%);
+
+/* Valeurs utilisant grid-template-areas grid-template-rows / grid-template-column */
+grid-template: "a a a"
+               "b b b";
+grid-template: "a a a" 20%
+               "b b b" auto;
+grid-template: [header-top] "a a a"     [header-bottom]
+                 [main-top] "b b b" 1fr [main-bottom]
+                            / auto 1fr auto;
+
+/* Valeurs globales */
+grid-template: inherit;
+grid-template: initial;
+grid-template: unset;
+
+ +

Valeurs

+ +
+
none
+
Un mot-clé qui applique none sur les trois propriétés détaillées et qui indique qu'il n'y a pas de grille explicite. Il n'y a pas de zone de grille nommée. Les lignes et les colonnes seront générées de façon implicite et leurs tailles seront déterminées par les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.
+
<'grid-template-rows'> / <'grid-template-columns'>
+
Voir {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}} pour les valeurs définies. {{cssxref("grid-template-areas")}} recevra la valeur none.
+
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <track-list> ]?
+
{{cssxref("grid-template-areas")}} est définie avec les chaînes listées, {{cssxref("grid-template-rows")}} est définie avec les tailles de piste suivant chaque chaîne (auto sera utilisé pour les tailles manquantes), les lignes seront découpées selon les noms avant et après chaque taille. {{cssxref("grid-template-columns")}} sera définie avec la valeur listée après la barre oblique (ou none sinon). +

Note : La fonction {{cssxref("repeat()")}} n'est pas autorisée parmi les listes de pistes car les pistes sont conçues pour correspondre à la disposition finale (à la façon d'un dessin en ASCII).

+
+
+ +

Note : La propriété raccourcie {{cssxref("grid")}} accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utiliser grid (plutôt que grid-template) pour empêcher les valeurs de suivre la cascade de façon séparée.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#page {
+  display: grid;
+  width: 100%;
+  height: 200px;
+  grid-template: [header-left] "head head" 30px [header-right]
+                 [main-left]   "nav  main" 1fr  [main-right]
+                 [footer-left] "nav  foot" 30px [footer-right]
+                 / 120px 1fr;
+}
+
+header {
+  background-color: lime;
+  grid-area: head;
+}
+
+nav {
+  background-color: lightblue;
+  grid-area: nav;
+}
+
+main {
+  background-color: yellow;
+  grid-area: main;
+}
+
+footer {
+  background-color: red;
+  grid-column: foot;
+}
+ +

HTML

+ +
<section id="page">
+  <header>En-tête</header>
+  <nav>Navigation</nav>
+  <main>Zone principale</main>
+  <footer>Bas de page</footer>
+</section>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid-template", "grid-template")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-template")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid/index.html b/files/fr/web/css/grid/index.html new file mode 100644 index 0000000000..ead926238c --- /dev/null +++ b/files/fr/web/css/grid/index.html @@ -0,0 +1,140 @@ +--- +title: grid +slug: Web/CSS/grid +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/grid +--- +
{{CSSRef}}
+ +

La propriété grid est une propriété raccourcie qui permet de définir toutes les propriétés liées aux grilles CSS, qu'elles soient explicites ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}), implicites ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}} et {{cssxref("grid-auto-flow")}}).

+ +
{{EmbedInteractiveExample("pages/css/grid.html")}}
+ + + +

Note : Une seule déclaration grid permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.

+ +

Syntaxe

+ +
/* Valeurs <'grid-template'> */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* <'grid-template-rows'> /
+   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
+   <'grid-template-columns'> values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Valeurs globales */
+grid: inherit;
+grid: initial;
+grid: unset;
+ +

Valeurs

+ +

Pour plus de détails, voir les pages de chacune des propriétés : {{cssxref("grid-template")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}.

+ +
+
<'grid-template'>
+
Définit {{cssxref("grid-template")}}, ce qui inclut {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-areas")}}.
+
<'grid-auto-flow'>
+
Définit {{cssxref("grid-auto-flow")}} qui indique le fonctionnement de l'algorithme de placement automatique et qui détaille exactement comment les éléments placés automatiquement « coulent » dans la grille.
+
<'grid-auto-rows'>
+
Définit {{cssxref("grid-auto-rows")}} qui indique la taille des pistes créées pour les lignes de façon implicite.
+
<'grid-auto-columns'>
+
Définit {{cssxref("grid-auto-columns")}} qui indique la taille des pistes créées pour les colonnes de façon implicite.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}
+ +

HTML

+ +
<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/hanging-punctuation/index.html b/files/fr/web/css/hanging-punctuation/index.html new file mode 100644 index 0000000000..7380231a60 --- /dev/null +++ b/files/fr/web/css/hanging-punctuation/index.html @@ -0,0 +1,129 @@ +--- +title: hanging-punctuation +slug: Web/CSS/hanging-punctuation +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/hanging-punctuation +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété hanging-punctuation indique si un signe de ponctuation se situant au début ou à la fin d'une ligne de texte doit rester sur cette ligne, quitte à sortir de la boîte qui représente la ligne.

+ +
/* Valeurs avec un mot-clé */
+hanging-punctuation: none;
+hanging-punctuation: first;
+hanging-punctuation: last;
+hanging-punctuation: force-end;
+hanging-punctuation: allow-end;
+
+/* Valeurs avec deux mots-clés */
+hanging-punctuation: first force-end;
+hanging-punctuation: first allow-end;
+hanging-punctuation: first last;
+hanging-punctuation: last force-end;
+hanging-punctuation: last allow-end;
+
+/* Valeurs avec trois mots-clés */
+hanging-punctuation: first force-end last;
+hanging-punctuation: first allow-end last;
+
+/* Valeurs globales */
+hanging-punctuation: inherit;
+hanging-punctuation: initial;
+hanging-punctuation: unset;
+
+ +

Syntaxe

+ +

Cette propriété peut être définie grâce à une, deux ou trois valeurs :

+ +
    +
  • Avec une valeur : on utilisera l'un des mots-clés de la liste ci-après
    • +
  • Avec deux valeurs : +
      +
    • le mot-clé first avec un des mots-clés parmi : last, allow-end ou force-end
      • +
    • ou le mot-clé last avec un des mots-clés parmi : last, allow-end ou force-end
      • +
    +
    • +
  • Avec trois valeurs : +
      +
    • first, allow-end et last
      • +
    • ou first, force-end et last
      • +
    +
    • +
+ +

Valeurs

+ +
+
none
+
Aucun caractère ne reste suspendu sur la ligne.
+
first
+
Une parenthèse ou des guillemets ouvrants au début de la première ligne d'un texte restent sur la ligne.
+
last
+
Une parenthèse ou des guillemets fermants à la fin de la dernière ligne d'un texte restent sur la ligne.
+
force-end
+
Un point ou une virgule en fin de ligne restera sur cette ligne.
+
allow-end
+
Un point ou une virgule en fin de ligne restera sur cette ligne si la justification du texte ne laisse pas l'espace nécessaire.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p>
+   Lorem ipsum dolor sit amet, consectetur
+   adipiscing elit. Curabitur dignissim nunc
+   mauris, et sollicitudin est scelerisque
+   sed. Praesent laoreet tortor massa, sit
+   amet vulputate nulla pharetra ut. Proin
+   ornare commodo sodales. Class aptent
+   taciti sociosqu ad litora torquent per
+   conubia nostra, per inceptos himenaeos.
+</p>
+ +

CSS

+ +
p {
+  hanging-punctuation: first;
+  margin: .5rem;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#hanging-punctuation-property', 'hanging-punctuation')}}{{Spec2('CSS3 Text')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.hanging-punctuation")}}

diff --git a/files/fr/web/css/height/index.html b/files/fr/web/css/height/index.html new file mode 100644 index 0000000000..e8fe76af40 --- /dev/null +++ b/files/fr/web/css/height/index.html @@ -0,0 +1,179 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/height +--- +
{{CSSRef}}
+ +

La propriété height définit la hauteur de la boîte de contenu d'un élément. La boîte de contenu est à l'intérieur de la boîte de remplissage (padding) qui est à l'intérieur de la boîte de bordure qui est elle-même à l'intérieur de la boîte de marge de l'élément. Si la propriété {{cssxref("box-sizing")}} vaut border-box, cette propriété détermine la hauteur de la boîte de marge.

+ +
{{EmbedInteractiveExample("pages/css/height.html")}}
+ + + +

Les propriétés {{cssxref("min-height")}} et {{cssxref("max-height")}} surchargent la propriété height.

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+height: auto;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+height: 120px;
+height: 10em;
+
+/* Valeurs relatives proportionnelles  */
+/* Type <percentage>                   */
+height: 75%;
+
+/* Valeurs globales */
+height: inherit;
+height: initial;
+height: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Une valeur de longueur absolue. Voir la page {{cssxref("<length>")}} pour les unités qui peuvent être utilisées.
+
<percentage>
+
La valeur exprimée correspond à un pourcentage (type {{cssxref("<percentage>")}}) de la hauteur du bloc englobant.
+
border-box {{experimental_inline}}
+
Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de bordure de l'élément.
+
content-box {{experimental_inline}}
+
Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de contenu de l'élément
+
auto
+
Le navigateur calculera une valeur et sélectionnera une hauteur pour l'élément ciblé.
+
fill {{experimental_inline}}
+
Utilise la taille fill-available dans l'axe du sens de lecture ou la taille fill-available dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.
+
max-content {{experimental_inline}}
+
La hauteur intrinsèque préférrée.
+
min-content {{experimental_inline}}
+
La hauteur intrinsèque minimale.
+
available {{experimental_inline}}
+
La hauteur du bloc englobant à laquelle on a soustrait la marge verticale, la bordure verticale et le remplissage (padding) vertical.
+
fit-content {{experimental_inline}}
+
La plus grande des valeurs entre : +
    +
  • La hauteur minimale intrinsèque.
    • +
  • Le minimum entre la hauteur intrinsèque préférrée et la hauteur disponible
    • +
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemple

+ +

CSS

+ +
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 3px solid #999999;
+}
+
+#red {
+  height: 50px;
+}
+
+#green {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+ +

HTML

+ +
<div id="red">
+  <span>Je mesure 50 pixels de haut.</span>
+</div>
+<div id="green">
+  <span>Et moi je mesure 25 pixels de haut.</span>
+</div>
+<div id="parent">
+  <div id="child">
+    <span>Je suis moitié moins haut que mon parent.</span>
+  </div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple')}}

+ +

Accessibilité

+ +

Veiller à s'assurer que les éléments ciblés avec une règle utilisant height ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Ajout des mots-clés max-content, min-content, available, fit-content.
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}{{Spec2('CSS3 Transitions')}}height peut désormais être animée.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}Ajout de la prise en charge des valeurs de type {{cssxref("<length>")}} et précision sur les éléments auxquels la propriété s'applique.
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.height")}}

+ +

Voir aussi

+ +
    +
  • Le modèle de boîtes
    • +
  • {{cssxref("width")}}
    • +
  • {{cssxref("box-sizing")}}
    • +
  • {{cssxref("min-height")}}
    • +
  • {{cssxref("max-height")}}
    • +
diff --git a/files/fr/web/css/hyphens/index.html b/files/fr/web/css/hyphens/index.html new file mode 100644 index 0000000000..388fcaf226 --- /dev/null +++ b/files/fr/web/css/hyphens/index.html @@ -0,0 +1,141 @@ +--- +title: hyphens +slug: Web/CSS/hyphens +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/hyphens +--- +
{{CSSRef}}
+ +

La propriété hyphens indique au navigateur comment gérer les traits d'union lors des sauts de ligne. Grâce à elle, on peut empêcher l'utilisation des traits d'union en fin de ligne, contrôler quand ils sont ajoutés ou laisser le navigateur décider.

+ +
{{EmbedInteractiveExample("pages/css/hyphens.html")}}
+ + + +

Les règles relatives aux traits d'union en fin de ligne dépendent de la langue utilisée. En HTML, la langue est définie grâce à l'attribut lang et les navigateurs n'appliqueront les règles que si cet attribut est présent et que le dictionnaire correspondant (pour la gestion des traits d'union et des fins de ligne) est disponible. Pour des documents XML, on utilisera l'attribut xml:lang.

+ +
Note : Les règles exactes qui définissent l'application des traits d'union en fin de ligne ne sont pas explicitement définies par la spécification, aussi, le comportement peut varier entre les navigateurs.
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* Valeurs globales */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+
+ +

Valeurs

+ +
+
none
+
Les mots ne sont pas coupés en fin de ligne et ce même si les caractères invitent à une coupe. Les lignes se termineront uniquement sur des blancs.
+
manual
+
Les mots sont coupés là où des caractères invitant à un saut de ligne sont présents. Voir la section suivante pour plus de détails.
+
auto
+
Le navigateur est libre de couper les mots là où il l'estime approprié selon les règles qu'il choisit. Les emplacements de coupe suggérés par certains caractères devraient être privilégiés par rapport aux coupes automatiques.
+
+ +
Note : Le comportement défini par auto dépend de la langue indiquée par le document. Aussi, il faut indiquer la langue via l'attribut HTML lang pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Suggérer des emplacements de coupe pour les lignes

+ +

Deux caractères Unicode peuvent être utilisés manuellement pour indiquer des emplacement où effectuer des sauts de ligne :

+ +
+
U+2010 (HYPHEN)
+
Un trait d'union « dur » qui indique un emplacement indiqué pour un saut de ligne. Même si la ligne n'est pas coupée à cet endroit, le trait d'union est affiché.
+
U+00AD (SOFT HYPHEN)
+
Un trait d'union « doux ». Ce caractère n'est pas affichée de façon visible. Il indique au navigateur un emplacement où effectuer le saut de ligne si nécessaire. En HTML, on peut utiliser l'entité &shy; pour insérer ce caractère.
+
+ +

Exemples

+ +

Dans cet exemple, on crée trois classes CSS pour illustrer chacune des configurations possibles pour la propriété hyphens.

+ +

CSS

+ +
p {
+  width: 55px;
+  border: 1px solid black;
+ }
+p.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+p.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+p.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+ +

HTML

+ +
<ul>
+  <li><code>none</code>: aucun trait d'union, dépassement si nécessaire
+    <p lang="en" class="none">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>manual</code>: un trait d'union uniquement à &amp;hyphen; ou &amp;shy; (si nécessaire)
+    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>auto</code>: un trait d'union où l'algorithme l'estime nécessaire
+    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
+  </li>
+</ul>
+
+ +

Résultat

+ +
+

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

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.hyphens")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("content")}}
    • +
diff --git "a/files/fr/web/css/h\303\251ritage/index.html" "b/files/fr/web/css/h\303\251ritage/index.html" new file mode 100644 index 0000000000..c5595da1e4 --- /dev/null +++ "b/files/fr/web/css/h\303\251ritage/index.html" @@ -0,0 +1,76 @@ +--- +title: Héritage +slug: Web/CSS/Héritage +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/inheritance +--- +
{{CSSRef}}
+ +

Pour chaque propriété CSS, la spécification indique si, par défaut, cette propriété est héritée ou non. Cela permet de définir le comportement qu'on observera lorsqu'aucune valeur n'est spécifiée pour une propriété pour un élément donné.

+ +

Propriétés héritées

+ +

Lorsqu'aucune valeur n'est spécifiée pour une propriété héritée sur un élément, l'élément récupère la valeur calculée de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède la valeur initiale donnée via la spécification.

+ +

Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style :

+ +
 p { color: green; }
+
+ +

Sur le fragment HTML suivant :

+ +
 <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
+
+ +

On obtient le résultat suivant :

+ +

{{EmbedLiveSample("Propriétés_héritées")}}

+ +

Les mots « texte mis en emphase » apparaîtront en vert, car l'élément em a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément p. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur).

+ +

Propriétés non héritées

+ +

Lorsqu'aucune valeur n'est définie pour un élément, pour une propriété non héritée, l'élément prendra la valeur initiale de cette propriété (telle qu'indiquée par la spécification).

+ +

Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style :

+ +
 p { border: medium solid; }
+
+ +

Sur le fragment de code HTML :

+ +
 <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
+
+ +

On obtient le résultat suivant :

+ +

{{EmbedLiveSample("Propriétés_non_héritées")}}

+ +

Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est none).

+ +

Notes

+ +

Le mot-clé {{cssxref("inherit") }} permet aux auteurs de pages web de définir l'héritage de façon explicite. Il fonctionne aussi bien pour les propriétés héritées que pour celles qui ne sont pas héritées.

+ +

Il est possible de contrôler l'héritage de toutes les propriétés grâce à la propriété raccourcie {{cssxref("all")}} afin d'appliquer la valeur indiquée sur toutes les propriétés.

+ +

Ainsi :

+ +
font: {
+  all: revert;
+  font-size: 200%;
+  font-weight: bold;
+}
+ +

permettra d'annuler la mise en forme de l'agent utilisateur pour l'ensemble des propriétés sauf si celles-ci sont fournies via une feuille de styles de l'utilisateur (qui sont alors utilisées). Ensuite, la taille du texte est doublée et celui-ci est mis en gras.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/image()/index.html b/files/fr/web/css/image()/index.html new file mode 100644 index 0000000000..0be7c11f52 --- /dev/null +++ b/files/fr/web/css/image()/index.html @@ -0,0 +1,176 @@ +--- +title: image() +slug: Web/CSS/image() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/image() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La fonction CSS image() définit une image (type {{cssxref("<image>")}}) à la façon du type {{cssxref("<url>")}} mais avec des fonctionnalités supplémentaires comme la définition de la directionnalité, la possibilité d'indiquer une image par défaut si l'image initiale n'est pas prise en charge, l'affichage d'une partie de l'image ou le choix de la couleur à utiliser par défaut si aucune des images indiquées ne peut être affichée.

+ +
+

Note : Attention à ne pas confondre cette notation fonctionnelle CSS avec le constructeur {{DOMxRef("HTMLImageElement/Image", "Image() pour HTMLImageElement","",1)}}.

+
+ +

Syntaxe

+ +
{{CSSSyntax("image()")}}
+
+ +

Paramètres

+ +
+
image-tags{{optional_inline}}
+
La directionnalité de l'image, la valeur ltr pourra être utilisée afin d'indiquer que l'image est orientée de gauche à droite et la valeur rtl indiquera de droite à gauche.
+
image-src{{optional_inline}}
+
Zéro, une ou plusieurs URL ({{CSSxRef("<url>")}}) ou chaînes de caractères ({{CSSxRef("<string>")}}) indiquant des sources d'image et qui contiennent éventuellement des identifiants de fragment.
+
color{{optional_inline}}
+
Une couleur par défaut. Cette couleur sera utilisée par défaut si aucune image n'est trouvée ou prise en charge parmi les images fournies via image-src.
+
+ +

Gestion de la directionnalité

+ +

Le premier paramètre de la fonction image() est optionnel et indique la directionnalité de l'image. Lorsque ce paramètre est utilisé et que l'image est utilisée au sein d'un élément ayant la directionnalité opposée, l'image sera renversée horizontalement pour les modes d'écriture horizontaux. Si ce paramètre n'est pas utilisé, l'image ne sera pas renversée.

+ +

Fragments d'image

+ +

Une différence fondamentale entre url() et image() est la possibilité d'ajouter un identifiant de fragment d'image. Un identifiant de fragment est donné par : un point de départ défini par ses coordonnées x et y et par une largeur et une hauteur. Cela permet de ne sélectionner qu'une section de l'image source. La section ainsi définie devient une image à part entière aux yeux du moteur de rendu.

+ +
background-image: image('monimage.webp#xywh=0,20,40,60');
+ +

Avec l'exemple précédent, l'image d'arrière-plan utilisée sera une section de l'image myImage.webp commençant à la coordonnée (0px,20px), ayant une largeur de 40px et une hauteur de 60px.

+ +

La syntaxe pour l'identifiant de fragment #xywh=#,#,#,# prend quatre arguments numériques séparés par des virgules. Les deux premiers arguments représentent les coordonnées X et Y du point de départ pour la section, la troisième valeur correspond à la largeur de la portion et la quatrième correspond à la hauteur. Par défaut, ces coordonnées et ces mesures sont exprimées en pixels. La définition de la dimension spatiale de la spécification des média indique que les pourcentages peuvent également être pris en charge.

+ +
xywh=160,120,320,240        /* créera une image sur 320x240 à x=160 et y=120 */
+xywh=pixel:160,120,320,240  /* créera une image sur 320x240 à x=160 et y=120 */
+xywh=percent:25,25,50,50    /* créera une image sur 50%x50% à x=25% et y=25% */
+ +

Les fragments d'image peuvent également être utilisés avec la notation url(). La syntaxe #xywh=#,#,#,# est rétrocompatible car elle sera ignorée si elle n'est pas comprise et elle ne rendra pas la source invalide si elle est utilisée avec la notation url(). Si le navigateur ne prend pas en charge les notations pour les fragments de média, il ignorera la définition du fragment et affichera l'image intégralement.

+ +

Les navigateurs qui prennent en charge image() prennent également en charge la notation pour les fragments. Ainsi si le fragment fourni est invalide dans la source pour image(), l'image résultante sera considérée invalide.

+ +

Couleur par défaut

+ +

Si les deux derniers arguments sont utilisés et dans le cas où les images fournies sont invalides, la fonction image() génèrera une image à partir de la couleur indiquée. Cette couleur apparaîtra uniquement dans le cas où l'image source n'est pas utilisable. Ainsi, si on a choisi une image sombre sur laquelle afficher du texte clair, autant prévoir une couleur sombre au cas où afin de garantir un contraste acceptable.

+ +

Il est possible de ne pas définir d'image source et de ne passer qu'une couleur comme argument.

+ +

À la différence de {{cssxref("background-color")}} dont la couleur sera placée derrière l'ensemble des images d'arrière-plan, on peut utiliser image() afin de placer des couleurs sur d'autres images.

+ +

La taille du rectangle de couleur appliqué peut être défini grâce à la propriété {{cssxref("background-size")}}. Ce comportement diffère de background-color qui définit une couleur pour couvrir l'ensemble de l'élément. image(color) et background-color pourront être déplacés grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.

+ +

Exemples

+ +

Utiliser des images prenant en compte la directionnalité

+ +
<ul>
+  <li dir="ltr">La puce est une flèche pointant à droite et située à gauche.</li>
+  <li dir="rtl">La puce est la même flèche mais renversée pour pointer à gauche.</li>
+</ul>
+ +
ul {
+  list-style-image: image(ltr 'rightarrow.jpg');
+}
+ +

Pour les éléments de la liste allant de gauche à droite (ceux avec dir="ltr" ou qui héritent de cette direction depuis leur ancêtre), l'image pour la puce sera utilisée telle quelle. Les éléments de la liste avec dir="rtl" (que ce soit explicitement défini comme ici ou que cette direction provienne de la direction par défaut du document, par exemple un document en arabe ou en hébreu), l'image sera affichée à droite et sera renversée horizontalement (de la même façon qu'avec transform: scalex(-1)). Le texte sera également affiché de gauche à droite.

+ +

{{EmbedLiveSample("Utiliser_des_images_prenant_en_compte_la_directionnalité","100%","200")}}

+ +
+

Afficher une partie (sprite)

+ +
<div class="box">Vous pouvez survoler cet élément pour voir un autre curseur.</div>
+
+ +
.box:hover {
+   cursor: image("https://mdn.mozillademos.org/files/16411/sprite.png#xywh=32,64,16,16");
+}
+ +

Lorsque l'utilisateur survole la boîte, le curseur changera pour afficher une section d'un sprite mesurant 16 pixels de large et de haut et commençant à x=32 et y=64 sur l'image totale.

+ +
{{EmbedLiveSample("Afficher_une_partie_sprite","100%","100")}}
+
+ +
+

Fournir des images alternatives

+ +
.help::before {
+  content: image("try.webp", "try.svg", "try.gif");
+}
+ +

Dans cet exemple, le navigateur affichera une image comme contenu généré précédent tous les éléments avec la classe help. Si le navigateur prend en charge le format WebP, ce sera try.webp qui sera affichée, sinon si le navigateur prend en charge le format SVG, ce sera try.svg qui sera affichée et sinon, ce sera try.gif qui sera utilisée.

+
+ +
+

Placer une couleur sur une image en arrière-plan

+ +
.quarterlogo {height: 200px; width: 200px; border: 1px solid;}
+ +
.quarterlogo {
+  background-image:
+    image(rgba(0, 0, 0, 0.25)),
+    url("https://mdn.mozillademos.org/files/12053/firefox.png");
+  background-size: 25%;
+  background-repeat: no-repeat;
+}
+ +
<div class="quarterlogo">If supported, a quarter of this div has a darkened logo</div>
+
+ +

Dans l'exempel précédent, on placera un masque noir semi-transparent sur le logo Firefox utilisé comme image d'arrière-plan. Si on avait utilisé la propriété background-color à la place, la couleur aurait été placée sous le logo et non sur lui. De plus, le conteneur entier aurait eu cette couleur en arrière-plan. Avec image() et {{cssxref("background-size")}} (tout en empêchant l'aimge de se répéter grâce à {{cssxref("background-repeat")}}), le voile noir ne couvrira qu'un quart du conteneur.

+ +
{{EmbedLiveSample("Placer_une_couleur_sur_une_image_en_arrière-plan","100%","220")}}
+
+ +

Accessibilité

+ +

Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan acr les navigateurs n'extraient pas d'informations du contenu visuel des images. Si l'image contient des informations essentielles à la compréhension du document, il faudra décrire ces informations de façon sémantique dans le document afin, entre autres, que les outils d'assistance puissent transmettre les informations aux utilisateurs.

+ + + +

Cette fonctionnalité permet d'améliorer l'accessibilité en fournissant une couleur par défaut lorsque l'image n'est pas chargée. Bien qu'il soit conseillé d'avoir une couleur d'arrière-plan ({{cssxref("background-color")}}) pour chaque image d'arrière-plan ({{cssxref("background-image")}}), image() pourra être utile afin de définir une couleur uniquement utilisée lorsqu'une image ne charge pas.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Images", "#image-notation", "image()")}}{{Spec2('CSS4 Images')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image.image")}}

+ +

Voir aussi

+ +
    +
  • {{CSSxRef("<image>")}}
    • +
  • {{CSSxRef("element")}}
    • +
  • {{CSSxRef("<url>")}}
    • +
  • {{CSSxRef("clip-path")}}
    • +
  • {{CSSxRef("-moz-image-rect")}}
    • +
  • {{CSSxRef("<gradient>")}}
    • +
  • {{CSSxRef("image-set")}}
    • +
  • {{CSSxRef("cross-fade")}}
    • +
diff --git a/files/fr/web/css/image-orientation/index.html b/files/fr/web/css/image-orientation/index.html new file mode 100644 index 0000000000..a12c6348b3 --- /dev/null +++ b/files/fr/web/css/image-orientation/index.html @@ -0,0 +1,142 @@ +--- +title: image-orientation +slug: Web/CSS/image-orientation +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/image-orientation +--- +
{{CSSRef}}
+ +

La propriété image-orientation décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document. Cette propriété ne doit pas être utilisée afin de tourner l'image pour d'autres cas, si besoin, on pourra utiliser la propriété {{cssxref("transform")}} avec la fonction rotate.

+ +
+

Attention ! Cette propriété sera vraisemblablement dépréciée prochainement. Les fonctionnalités associées deviendront des propriétés de l'élément {{HTMLElement("img")}} et/ou de l'élément {{HTMLElement("picture")}} (excepté peut-être from-image).

+
+ +
/* Valeurs d'angle */
+/* Type <angle>    */
+image-orientation: 0deg;
+image-orientation: 6.4deg;     /* Arrondie à 0deg */
+image-orientation: -90deg;     /* Équivalent à 270deg, la
+                                  valeur calculée normalisée */
+
+/* Valeurs avec un mot-clé */
+image-orientation: from-image; /* Utilise les données EXIF
+                                  de l'image */
+image-orientation: flip;       /* Pas de rotation mais un
+                                  retournement horizontal */
+
+/* Valeurs avec deux arguments */
+image-orientation: 90deg flip; /* Rotation de 90deg, puis
+                                  retournement horizontal */
+
+/* Valeurs globales */
+image-orientation: inherit;
+image-orientation: initial;
+image-orientation: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
from-image
+
Les informations EXIF contenues dans l'image seront utilisées pour tourner l'image de façon appropriée.
+
<angle>
+
Une valeur de type {{cssxref("<angle>")}} qui indique la rotation à appliquer à l'image. Cette valeur est arrondie au quart de tour le plus proche.
+
flip
+
L'image est retournée horizontalement (comme une réflexion) après que la rotation d'angle indiqué par le premier paramètre ait été appliquée. Si aucun argument d'angle n'a été fourni, la valeur 0deg sera utilisée.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Notes d'utilisation

+ +

Cette propriété n'est pas conçue pour appliquer une rotation arbitraire sur une image. Elle permet uniquement de corriger un orientation erronée. C'est pour cette raison que la valeur est arrondie au quart de tour le plus proche.

+ +

De la même façon, cette propriété n'est pas conçue pour gérer le passage de paysage en portrait. image-orientation ne modifie que les images, il faudrait apporter les modifications au niveau de la disposition.

+ +

Exemples

+ +

CSS

+ +
#image {
+  /* Peut-être modifiée dans l'exemple */
+  image-orientation: flip;
+}
+
+ + + +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}}{{Spec2('CSS4 Images')}}Ajout des mots-clés from-image et flip.
{{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}}{{Spec2('CSS3 Images')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.image-orientation")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("object-fit")}}
    • +
  • {{cssxref("object-position")}}
    • +
  • {{cssxref("image-orientation")}}
    • +
  • {{cssxref("image-rendering")}}
    • +
  • {{cssxref("image-resolution")}}
    • +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("rotate")}}
    • +
diff --git a/files/fr/web/css/image-rendering/index.html b/files/fr/web/css/image-rendering/index.html new file mode 100644 index 0000000000..7b28a4c0b4 --- /dev/null +++ b/files/fr/web/css/image-rendering/index.html @@ -0,0 +1,127 @@ +--- +title: image-rendering +slug: Web/CSS/Image-rendering +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/image-rendering +--- +
{{CSSRef}}
+ +

La propriété image-rendering fournit une indication au navigateur à propos de l'algorithme qui devrait être utilisé pour redimensionner les images. Elle s'applique à l'élément visé, aux images fournies via les autres propriétés CSS et aux éléments fils.

+ +

L'agent utilisateur redimensionnera une image si l'auteur de la page indique des dimensions différentes que la taille naturelle de l'image ou si l'utilisateur interagit en zoomant par exemple. Cette propriété n'a aucun effet sur les images qui ne sont pas redimensionnées. Si, par exemple, la taille naturelle de l'image est 100px par 100px et que l'auteur indique les dimensions 200px par 200px (ou 50px par 50px), l'image sera agrandie (ou réduite) aux nouvelles dimensions via l'algorithme indiqué. Le redimensionnement peut aussi avoir lieu suite aux interactions utilisateurs (avec un zoom par exemple).

+ +

Syntaxe

+ +
/*Valeurs avec un mot-clé*/
+image-rendering: auto;
+image-rendering: crisp-edges;
+image-rendering: pixelated;
+
+/* Valeurs globales */
+image-rendering: inherit;
+image-rendering: initial;
+image-rendering: unset;
+
+ +

Valeurs

+ +
+
auto
+
L'image devrait être redimensionnée grâce à un algorithme qui optimise l'apparence de l'image. Les algorithmes de redimensionnement « doux » comme l'interpolation bilinéaire, sont acceptables. Ces algorithmes sont destinés à être utilisés sur des images comme des photos. Depuis la version 1.9 (Firefox 3.0), Gecko utilise un algorithme de rééchantillonnage bilinéaire.
+
crisp-edges
+
L'algorithme utilisé doit avant tout préserver le contraste et les bords de l'image, il ne doit pas ajouter de couleur intermédiaire ou de flou. Cette valeur est conçue pour être utilisée sur du pixel art. Les algorithmes éligibles sont par exemple l'interpolation au plus proche voisin, les familles d'algorithmes 2×SaI et hqx.
+
high-quality{{Experimental_inline}}
+
Cette valeur est proche de smooth mais favorise un redimensionnement avec une qualité élevée. Si les ressources du système sont limitées, ce sont les images ciblées avec high-quality qui devraient être priorisées par rapport aux autres s'il est nécessaire de dégrader la qualité.
+
pixelated
+
Lorsque l'image est agrandie c'est l'algorithme « du plus proche voisin » qui doit être utilisé afin que l'image apparaisse comme composée de grands pixels. Lorsque l'image est réduite, le comportement est le même que auto.
+
smooth{{Experimental_inline}}
+
L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (ex. l'interpolation bilinéaire) sont acceptables. Cette valeur est destinée aux images telles que les photos.
+
+ +
Note : Les valeurs optimizeQuality et optimizeSpeed qui étaient présentes dans un brouillon de la spécification (et qui provenaient de la spécification équivalente pour SVG) sont synonymes respectifs de smooth et pixelated.
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.pixels_petits {
+  height: 50px;
+  width: 50px;
+}
+
+.pixels_grands {
+  height: 69px;
+  width: 69px;
+}
+
+.chapeau_petit {
+  height: 89px;
+  width: 89px;
+}
+.defaut {
+  image-rendering: auto;
+}
+
+.contraste {
+  image-rendering: crisp-edges;
+}
+
+ +

HTML

+ +
<p>Avec <code>auto</code> :</p>
+<img class="pixels_petits defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
+<img class="pixels_grands defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
+<img class="chapeau_petit defaut" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/>
+
+<p>Avec <code>crisp-edges</code> :</p>
+<img class="pixels_petits contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
+<img class="pixels_grands contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
+<img class="chapeau_petit contraste" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/>
+
+ +

Résultat

+ +

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

+ +
+

Note : En pratique, les règles pixelated et crisp-edges peuvent être combinées en cas de besoin (l'une pouvant combler les éventuelles manques de l'autre et vice versa). Si besoin, un {{HTMLElement("canvas")}} peut fournir une alternative pour les valeurs crisp-edge et optimize-contrast via la manipulation manuelle des données de l'image ou avec imageSmoothingEnabled.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}{{Spec2('CSS3 Images')}}Définition initiale.
+ +
+

Note : Cette valeur était, initialement, proche de la propriété SVG image-rendering. Cependant, ces valeurs ont « divergé » et sont assez différentes désormais.

+
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.image-rendering")}}

diff --git a/files/fr/web/css/image-set()/index.html b/files/fr/web/css/image-set()/index.html new file mode 100644 index 0000000000..b54ea600c9 --- /dev/null +++ b/files/fr/web/css/image-set()/index.html @@ -0,0 +1,84 @@ +--- +title: image-set() +slug: Web/CSS/image-set() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/image-set() +--- +

{{CSSRef}}

+ +

La fonction image-set() est une méthode permettant au navigateur de sélectionner l'image la plus appropriée parmi un ensemble d'images. Elle s'avère notamment utile pour les écrans à haute densité de pixels.

+ +

La résolution et la bande passante varient selon l'appareil et l'accès au réseau dont on dispose. La fonction image-set() permet au navigateur de sélectionner l'image avec la résolution la mieux adaptée aux conditions de l'utilisateur. Cette fonction reçoit différentes options d'images qui sont chacune une image avec une déclaration de résolution. La résolution sera généralement couplée avec la taille du fichier associé. Ainsi, un agent utilisateur conscient que la bande passante est faible pourra privilégier une image à faible résolution plutôt que d'attendre longtemps le chargement d'une image à plus haute résolution.

+ +

Cette fonction permet ainsi à l'auteur du document de fournir différentes options plutôt que de laisser l'utilisateur payer les conséquences.

+ +

Syntaxe

+ +
image-set() = image-set( <image-set-option># )
+où <image-set-option> = [ <image> | <string> ] <resolution> et où
+      <string> est une valeur <url>
+
+ +

Valeurs

+ +

La plupart du temps, la source d'une des images de l'ensemble sera indiquée via la fonction {{cssxref("url")}}.

+ +

On notera qu'on ne peut pas imbriquer un appel à une fonction image-set() au sein d'un autre appel à image-set().

+ +

La valeur <resolution> peut utiliser une unité x ou dppx (points par unité de pixel), dpi (points par pouce) ou dpcm (points par centimètre). Une résolution donnée ne peut être utilisée que pour une seule image au sein d'un appel à image-set().

+ +

Exemples

+ +
background-image: image-set( "chat.png" 1x,
+                             "chat-2x.png" 2x,
+                             "chat-print.png" 600dpi);
+ +

Dans cet exemple, on utilise image-set() afin de fournir deux versions pour une image en arrière-plan. Le navigateur pourra choisir l'image avec la meilleure résolution si l'utilisateur dispose d'un appareil permettant de l'afficher correctement et si sa connexion est suffisamment rapide.

+ +

Accessibilité

+ +

Les navigateurs ne fournissent pas d'informations particulières aux outils d'assistance quant aux outils d'assistance. Ainsi, les lecteurs d'écran ne pourront pas annoncer d'informations utiles si l'image contient des informations essentielles à la compréhension de la page. Il faudra inclure une description sémantique sur l'image pour que tous les utilisateurs puissent en bénéficier.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image.image-set")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("image")}}
    • +
  • {{cssxref("_image", "image()")}}
    • +
  • {{cssxref("element")}}
    • +
  • {{cssxref("url")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git a/files/fr/web/css/image/index.html b/files/fr/web/css/image/index.html new file mode 100644 index 0000000000..4da7dfe332 --- /dev/null +++ b/files/fr/web/css/image/index.html @@ -0,0 +1,189 @@ +--- +title: +slug: Web/CSS/image +tags: + - CSS + - CSS Images + - Reference + - Type +translation_of: Web/CSS/image +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <image> représente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilisées via une URL (cf. {{cssxref("<url>")}})), et les images générées dynamiquement comme les dégradés (cf. {{cssxref("<gradient>")}}) ou les images construites à partir de fragments de l'arbre du DOM ({{CSSxRef("element")}}). D'autres fonctions peuvent être utilisées pour créer des images comme {{CSSxRef("imagefunction", "image()")}}, {{CSSxRef("image-set")}} et {{CSSxRef("cross-fade")}}.

+ +

Les images peuvent être utilisées pour de nombreuses propriétés CSS dont, par exemple, {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} et {{cssxref("cursor")}}.

+ +

Les types d'images

+ +

Le CSS permet de manipuler différentes sortes d'images :

+ +
    +
  • les images avec des dimensions intrinsèques, qui ont une taille propre, comme une image au format JPEG ou PNG (ou dans un autre format matriciel) qui possède des dimensions fixes.
    • +
  • les images avec plusieurs dimensions intrinsèques, qui existent sous différentes dimensions dans un même fichier, comme certains formats .ico. Dans ce cas, les dimensions intrinsèques seront celles de la plus grande image en surface, et ayant le ratio le plus proche de la boîte englobante.
    • +
  • les images sans dimensions intrinsèques avec un ratio intrinsèque, entre la largeur et sa hauteur, comme certaines images vectorielles, au format SVG par exemple.
    • +
  • les images n'ayant ni dimensions intrinsèques, ni ratio intrisèque, comme un dégradé CSS par exemple.
    • +
+ +

Le CSS détermine la taille concrète de l'objet en utilisant ces dimensions intrinsèques, la taille spécifiée définie par les propriétés CSS comme {{cssxref("width")}}, {{cssxref("height")}} ou {{cssxref("background-size")}}, et la taille par défaut de l'objet définie en fonction de la propriété utilisée :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type d'objetTaille par défaut de l'objet
{{cssxref("background-image")}}La taille de la zone de positionnement de l'arrière-plan
{{cssxref("list-style-image")}}La taille d'un caractère de 1em
{{cssxref("border-image-source")}}La taille de la zone de bordure de l'élément
{{cssxref("cursor")}}La dimension correspondant à la taille d'un curseur sur le système utilisé
{{cssxref("mask-image")}}?
{{cssxref("shape-outside")}}?
{{cssxref("mask-border-source")}}?
{{cssxref("symbols")}} pour @counter-styleUne fonctionnalité en cours de discussion. Si elle est prise en charge, la taille utilisée sera celle des curseurs utilisés par le système.
{{cssxref("content")}} avec les pseudo-éléments {{cssxref("::after")}} et {{cssxref("::before")}}Un rectangle de 300px × 150px
+ +

La taille concrète de l'objet est calculée selon l'algorithme suivant :

+ +
    +
  • si la taille spécifié définit à la fois la largeur et la hauteur, ces valeurs sont utilisées comme la taille concrète de l'élément.
    • +
  • si la taille spécifiée définit soit la hauteur soit la largeur, la valeur manquante est déterminée grâce au ratio intrinsèque s'il existe ou les dimensions intrisèques si la valeur spécifiée y correspond ou la taille par défaut de l'objet pour la dimension manquante.
    • +
  • si la taille spécifiée ne définit ni hauteur ni largeur, la taille concrète de l'objet est calculée de manière à ce que le ratio intrinsèque soit conservé et que la taille par défaut de l'objet ne soit pas dépassée. Si l'image n'a pas de ratio intrinsèque, le ratio intrinsèque de l'objet auquel il s'applique est utilisé ; si l'objet n'en possède pas, la hauteur ou la largeur manquante est prise depuis la taille par défaut de l'objet.
    • +
+ +

Les images peuvent être utilisées pour de nombreuses propriétés CSS comme {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} ou {{cssxref("cursor")}}.

+ +
Note : tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section compatibilité des navigateurs pour une liste explicative.
+ +

Syntaxe

+ +

Un type de donnée CSS <image> peut représenter un type parmi les suivants :

+ +
    +
  • une image dénotée par le type de donnée CSS {{cssxref("<url>")}} et la fonction url() ;
    • +
  • une valeur CSS {{cssxref("<gradient>")}} (représentant un dégradé) ;
    • +
  • une partie de la page, définie par la fonction {{cssxref("element")}} ;
    • +
  • une image, un fragment d'image ou une couleur définie grâce à la fonction {{cssxref("image()")}} ;
    • +
  • une fusion de deux ou plusieurs images avec la fonction {{cssxref("cross-face")}}
    • +
  • une image choisie parmi un ensemble d'images (selon leurs résolutions, l'appareil et la connexion utilisés) grâce à la fonction {{cssxref("image-set()")}}.
    • +
+ +

Exemples

+ +

Voici des exemples valides d'images :

+ +
url(test.jpg)              /* La fonction url() fonctionne tant que test.jpg est bien une image */
+linear-gradient(blue, red) /* Un dégradé (<gradient>) */
+element(#colonne3)         /* Utilisation d'un élément de la page via la fonction element(),
+                              si colonne3 est bien un identifiant CSS existant. */
+image(ltr 'arrow.png#xywh=0,0,16,16', red)
+                           /* Une section de 16x16 pixels de l'image arrow.png et qui démarre au coin
+                              supérieur gauche de l'image et qui sera utilisée si arrow.png est à un
+                              format pris en charge. Sinon, ce sera un fond rouge qui sera utilisé.
+                              Si la langue est écrite de gauche à droite, l'image sera inversée
+                              horizontalement. */
+cross-fade(20% url(vingt.png), url(quatrevingt.png));
+                           /* Deux images superposées où « vingt » est 20%
+                              opaque et « quatrevingt » compose les 80%
+                              restants. */
+image-set('test.jpg' 1x, 'text-2x.jpg' 2x);
+                           /* Un ensemble d'images avec différentes résolutions. */
+
+ +

Voici des exemples invalides :

+ +
nourl.jpg            /* Le fichier de l'image doit être ciblé via la fonction url(). */
+url(report.pdf)      /* Le fichier référencé par la fonction url() doit être une image. */
+element(#fakeid)     /* Ne fonctionne pas si 'fakeid' n'est pas un identifiant existant. */
+image(z.jpg#xy=0,0)  /* L'indicateur de fragment doit avoir la forme xywh=#,#,#,# */
+image-set('chat.jpg' 1x, 'chien.jpg' 1x) /* Chaque image doit avoir une résolution différente */
+
+ +

Accessibilité

+ +

Les navigateurs ne fournissent pas d'information aux outils d'assistance pour les images d'arrière-plan. Cela est particulièrement important pour les lecteurs d'écran car ces derniers ne pourront pas annoncer la présence de ces informations 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 Images", "#typedef-image", "<image>")}}{{Spec2('CSS3 Images')}}Définition initiale. Avant CSS3, il n'existait pas de type défini de façon explicite pour les images. Celles-ci pouvaient uniquement être utilisées via la notation fonctionnelle url().
{{SpecName("CSS4 Images", "#typedef-image", "<image>")}}{{Spec2('CSS4 Images')}}Ajout de {{cssxref("element()")}}, {{cssxref("image()")}}, {{cssxref("image-set()")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient", "repeating-conic-gradient()")}} et {{cssxref("image-resolution")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("<gradient>")}} +
      +
    • Manipuler les dégradés CSS
      • +
    • {{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")}}
      • +
    +
    • +
  • {{cssxref("element")}}
    • +
  • {{CSSxRef("imagefunction", "image()")}}
    • +
  • {{cssxref("image-set()")}}
    • +
  • {{CSSxRef("cross-fade")}}
    • +
diff --git a/files/fr/web/css/ime-mode/index.html b/files/fr/web/css/ime-mode/index.html new file mode 100644 index 0000000000..0bae84381a --- /dev/null +++ b/files/fr/web/css/ime-mode/index.html @@ -0,0 +1,100 @@ +--- +title: ime-mode +slug: Web/CSS/ime-mode +tags: + - CSS + - Obsolete + - Propriété + - Reference +translation_of: Web/CSS/ime-mode +--- +
{{CSSRef}}{{obsolete_header}}
+ +

La propriété ime-mode contrôle l'état de l'éditeur de méthode d'entrée (IME) pour la saisie des champs textuels.

+ +
/* Valeurs avec un mot-clé */
+ime-mode: auto;
+ime-mode: normal;
+ime-mode: active;
+ime-mode: inactive;
+ime-mode: disabled;
+
+/* Valeurs globales */
+ime-mode: inherit;
+ime-mode: initial;
+ime-mode: unset;
+
+ +

Selon la spécification :

+ +

« ime-mode » est en quelques sortes une propriété implémentée par quelques navigateurs, qui pose problème et qui est officiellement rendue obsolète par cette spécification

+ +

Aussi, la spécification indique aux agents utilisateurs de ne pas prendre en charge ime-mode et il est déconseillé d'utiliser cette propriété dans des feuilles de styles.

+ +

La propriété ime-mode est partiellement implémentée et de façon hétérogène entre les différents navigateurs. Elle est apparue sous la forme d'une extension Microsoft avec Internet Explorer 5 : {{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}.

+ +
+

Note : Il n'est, en général, pas pertinent de modifier le mode IME d'un site. Cette propriété ne devrait être utilisée que pour des applications web privées ou pour annuler une modification de cette propriété par du code historique.

+
+ +

Syntaxe

+ +

La valeur de cette propriété peut être l'un des mots-clés définis ci-après.

+ +

Valeurs

+ +
+
auto
+
Aucun changement n'est apporté à l'état de l'éditeur. C'est la valeur par défaut.
+
normal
+
L'état de l'IME devrait être normal. Cette valeur peut être utilisée via une feuille de style utilisateur pour surcharger la valeur indiquée par le document. Cette valeur n'est pas prise en charge par Internet Explorer.
+
active
+
L'éditeur de méthode d'entrée est actif au début et la saisie utilise l'éditeur sauf si l'utilisateur le ferme. Cette valeur n'est pas prise en charge sur Linux.
+
inactive
+
L'éditeur de méthode d'entrée est inactif au début et l'utilisateur peut l'activer si besoin. Cette valeur n'est pas prise en charge sur Linux.
+
disabled
+
L'éditeur de méthode d'entrée est désactivé et ne peut pas être activé par l'utilisateur.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
<input type="text" name="name" value="initial value" style="ime-mode: disabled">
+ +

Cet exemple désactive l'IME pour un champ donné (par exemple pour saisir des données dans une base de données qui ne supporte pas certains jeux de caractères).

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Basic UI', '#input-method-editor', 'ime-mode')}}{{Spec2('CSS3 Basic UI')}}Définition initiale. Rend ime-mode obsolète.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.ime-mode")}}

+ +

Voir aussi

+ +
    +
  • La propriété Microsoft avec un suffixe propriétaire IE5 {{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}
    • +
diff --git "a/files/fr/web/css/impl\303\251mentation_des_brouillons_css/index.html" "b/files/fr/web/css/impl\303\251mentation_des_brouillons_css/index.html" new file mode 100644 index 0000000000..5a7b19f747 --- /dev/null +++ "b/files/fr/web/css/impl\303\251mentation_des_brouillons_css/index.html" @@ -0,0 +1,46 @@ +--- +title: Implémentation des fonctionnalités CSS à l'état de brouillon +slug: Web/CSS/Implémentation_des_Brouillons_CSS +tags: + - CSS + - Draft + - NeedsContent +translation_of: Web/CSS/Mozilla_Extensions +--- +
{{CSSRef}}{{Draft}}
+ +
+

Attention ! Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :

+ + +
+ +

Mozilla gère un certain nombre d'extensions CSS préfixées par -moz-. La liste suivante contient toutes les extensions Mozilla correspondant aux  implémentations de fonctionnalités en cours de standardisation par le W3C. Les fonctionnalités propriétaires ne sont pas présentes dans cette liste.

+ +

Propriétés

+ +

...

+ +

Valeurs

+ +

...

+ +

Pseudo-éléments et pseudo-classes

+ +

...

+ +

Règles At

+ +

...

+ +

Requêtes de média

+ +

...

+ +

Autres

+ +

...

diff --git a/files/fr/web/css/index.html b/files/fr/web/css/index.html new file mode 100644 index 0000000000..fedb551fe9 --- /dev/null +++ b/files/fr/web/css/index.html @@ -0,0 +1,104 @@ +--- +title: 'CSS : Feuilles de style en cascade' +slug: Web/CSS +tags: + - CSS + - Design + - Landing + - Reference + - Structure + - Styles +translation_of: Web/CSS +--- +

{{CSSRef}}

+ +
+ +
+ +

CSS est l'un des langages principaux du Web ouvert et a été standardisé par le W3C. Ce standard évolue sous forme de niveaux (levels), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et CSS3, qui est découpé en modules plus petits, est en voie de standardisation.

+ +
+
    +
  • Introduction à CSS + +

    Si vous débutez en développement web, n'hésitez pas à consulter l'article les bases de CSS pour découvrir CSS, ce que c'est et comment l'utiliser.

    +
    • +
  • Tutoriels CSS +

    Notre section Apprendre le Web - CSS contient de nombreux tutoriels pour vous guider d'un niveau débutant à intermédiaire en CSS. Elle couvre l'ensemble des concepts fondamentaux en CSS.

    +
    • +
  • La référence CSS +

    Une référence exhaustive destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.

    +
    • +
+ +
+
+

Tutoriels

+ +

La section Apprendre le Web fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable.

+ +
+
Introduction à CSS
+
Dans ce module, on commence avec les bases du fonctionnement de CSS : les sélecteurs, les propriétés, écrire des règles CSS, appliquer du CSS à un document HTML, utiliser des longueurs, des couleurs et d'autres unités. On voit également la cascade et l'héritage en CSS, les bases du modèle de boîtes et comment déboguer du code CSS.
+
Mettre en forme le texte
+
Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens.
+
Mettre en forme les boîtes
+
Ensuite, on voit comment mettre en forme les boîtes CSS qui sont un composant clé de la mise en page d'une page web. Dans ce module, on revoit le modèle de boîtes, comment régler les propriétés de remplissage, bordures et marges, comment définir des couleurs d'arrière-plan, des images et aussi comment appliquer des ombres et des filtres sur les boîtes.
+
La disposition en CSS
+
Avant ce chapitre, on a vu les concepts fondamentaux en CSS, comment mettre en forme du texte, comment manipuler des boîtes correctement, etc. On voit ici comment correctement placer les boîtes dans la zone d'affichage (viewport). Grâce aux concepts précédents, on peut désormais étudier les différentes méthodes pour positionner les éléments sur une page : les boîtes flottantes, le positionnement fixe et les nouveaux outils comme les boîtes flexibles (flexbox).
+
+
+ +
+

Références

+ +
+
La référence CSS
+
Une référence exhaustive, destinée aux développeurs web expérimentés. Elle décrit les différentes propriétés et concepts qui composent CSS.
+
Les concepts majeurs de CSS
+
Plusieurs articles de cette section présentent les aspects clés du langage. On y décrit notamment : + +
+
+ +

Livre de recettes

+ +

Le livre de recettes de disposition CSS contient différentes recettes pour mettre en place différentes dispositions courantes. En plus de fournir du code pouvant servir de point de départ, ces recettes illustrent les différentes façons dont les spécifications CSS liées à la disposition peuvent être utilisées ainsi que les choix à faire en tant que développeur.

+ +

Outils de développement pour CSS

+ + +
+
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/index/index.html b/files/fr/web/css/index/index.html new file mode 100644 index 0000000000..aa0bcd3253 --- /dev/null +++ b/files/fr/web/css/index/index.html @@ -0,0 +1,10 @@ +--- +title: Index de la documentation CSS +slug: Web/CSS/Index +tags: + - CSS + - Index + - MDN Meta +translation_of: Web/CSS/Index +--- +

{{Index("/fr/docs/Web/CSS")}}

diff --git a/files/fr/web/css/inherit/index.html b/files/fr/web/css/inherit/index.html new file mode 100644 index 0000000000..ee133c8016 --- /dev/null +++ b/files/fr/web/css/inherit/index.html @@ -0,0 +1,89 @@ +--- +title: inherit +slug: Web/CSS/inherit +tags: + - CSS + - Mot-clé + - Reference +translation_of: Web/CSS/inherit +--- +
{{CSSRef}}
+ +

Le mot-clé inherit est une valeur qui peut être utilisée pour qu'une propriété prenne la valeur calculée de la propriété pour l'élément parent. Cette valeur peut être utilisée sur n'importe quelle propriété CSS, y compris sur la propriété raccourcie {{cssxref("all")}}.

+ +

Pour les propriétés héritées, cela accentue le comportement par défaut et ce mot-clé n'est nécessaire que pour surcharger une autre règle.

+ +

Pour les propriétés non-héritées, cela permettra d'obtenir le comportement indiqué. Ce comportement a peu d'intérêt dans ces cas et mieux vaudra utiliser {{cssxref("initial")}} ou {{cssxref("unset")}}.

+ +

L'héritage provient toujours de l'élément parent par rapport à l'arbre du document, même si cet élément n'est pas le bloc englobant.

+ +

Exemples

+ +

CSS

+ +
p {
+  color: green;
+}
+
+.exemple {
+  color: inherit;
+}
+
+ +

HTML

+ +
<p>Alice remarqua, avec quelque surprise, qu’en
+   tombant sur le plancher les cailloux se changeaient
+   en petits gâteaux, et une brillante idée lui
+   traversa l’esprit.</p>
+<p class="exemple">Elle avala un des gâteaux, et s’aperçut avec
+   joie qu’elle diminuait rapidement</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Cascade', '#inherit', 'inherit')}}{{Spec2('CSS4 Cascade')}}Aucun changement.
{{SpecName('CSS3 Values', "#common-keywords", "inherit")}}{{Spec2('CSS3 Values')}}Aucun changement {{SpecName('CSS2.1')}}
{{SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit")}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.global_keywords.inherit")}}

+ +

Voir aussi

+ +
    +
  • L'héritage
    • +
  • La propriété {{cssxref("all")}}
    • +
  • Les propriétés globales {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.
    • +
  • La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou indéfinies.
    • +
diff --git a/files/fr/web/css/initial-letter-align/index.html b/files/fr/web/css/initial-letter-align/index.html new file mode 100644 index 0000000000..cdbe179beb --- /dev/null +++ b/files/fr/web/css/initial-letter-align/index.html @@ -0,0 +1,104 @@ +--- +title: initial-letter-align +slug: Web/CSS/initial-letter-align +tags: + - Alignement + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/initial-letter-align +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété initial-letter-align définit l'alignement des premières lettres d'un paragraphe lorsque celles-ci sont mises en avant grâce à {{cssxref("initial-letter")}} pour former une lettrine.

+ +
/* Valeurs avec un mot-clé */
+initial-letter-align: auto;
+initial-letter-align: alphabetic;
+initial-letter-align: border-box;
+initial-letter-align: hanging;
+initial-letter-align: hebrew;
+initial-letter-align: ideographic;
+
+/* Valeurs globales */
+initial-letter-align: inherit;
+initial-letter-align: initial;
+initial-letter-align: unset;
+
+ +

Syntaxe

+ +

La valeur de cette propriété peut être l'un des mots-clés parmi ceux définis ci-après.

+ +

Valeurs

+ +
+
auto
+
L'agent utilisateur choisit la meilleure valeur par rapport à la langue du texte. Pour les langues occidentales, cela sera alphabetic, pour les langues hébraïques hebrew, pour les langues CJK ideographic et pour certaines langues indo-aryennes, cela correspondra à hanging.
+
alphabetic
+
La ligne de majuscule est alignée avec la ligne de majuscule de la première ligne de texte. La ligne de pied de la première lettre s'aligne avec la ligne de pied de la N-ième ligne.
+
border-box
+
C'est la boîte formée par la première lettre qui s'aligne avec la ligne de jambage de la première ligne de texte.
+
hanging
+
La ligne de jambage de la première lettre est alignée avec la ligne de jambage de la première ligne de texte.
+
hebrew
+
La ligne de jambage et la ligne de base alphabétique hébreuses du texte qui suit qui sont utilisées pour aligner la première lettre.
+
ideographic
+
La première lettre est centrée par rapport à la N-ième ligne utilisée pour la lettrine.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  initial-letter: 3 1;
+  initial-letter-align: hanging;
+}
+
+ +

HTML

+ +
<p class="exemple">
+  Tombe, tombe, tombe ! « Cette chute n’en finira
+  donc pas ! Je suis curieuse de savoir combien de
+  milles j’ai déjà faits, » dit-elle tout haut. « Je
+  dois être bien près du centre de la terre. Voyons
+  donc, cela serait à quatre mille milles de profondeur,
+  il me semble. » </p>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Inline', '#aligning-initial-letter', 'initial-letter-align')}}{{Spec2('CSS3 Inline')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.initial-letter-align")}}

diff --git a/files/fr/web/css/initial-letter/index.html b/files/fr/web/css/initial-letter/index.html new file mode 100644 index 0000000000..016c320d49 --- /dev/null +++ b/files/fr/web/css/initial-letter/index.html @@ -0,0 +1,97 @@ +--- +title: initial-letter +slug: Web/CSS/initial-letter +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/initial-letter +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété initial-letter permet de définir la mise en forme pour les lettrines (qu'elles soient abaissées, surélevées ou autre).

+ +
/* Valeurs avec un mot-clé */
+initial-letter: normal;
+
+/* Valeurs numériques            */
+/* Types <number> puis <integer> */
+initial-letter: 1.5;   /* La première lettre occupe 1.5 lignes */
+initial-letter: 3.0;   /* La première lettre occupe 3 lignes   */
+initial-letter: 3.0 2; /* La première lettre occupe 3 lignes et
+                          s'enfonce de deux lignes vers le bas */
+
+/* Valeurs globales */
+initial-letter: inherit;
+initial-letter: initial;
+initial-letter: unset;
+
+ +

Syntaxe

+ +

La valeur de cette propriété peut être le mot-clé normal ou un nombre (<number>) éventuellement suivi d'un entier (<integer>).

+ +

Valeurs

+ +
+
normal
+
Le texte se comporte de façon normale et on n'a pas de lettrines.
+
<number>
+
Cet argument définit le facteur de taille appliqué pour calculer la taille de la première lettre par rapport à la taille de la ligne du texte. Les valeurs négatives ne sont pas autorisées.
+
<integer>
+
Cet argument définit le nombre de lignes dont s'enfoncera la lettrine vers le bas. La valeur utilisée doit être supérieure à 0. Si cet argument est absent, on dupliquera la valeur du premier argument, arrondi vers le bas à l'entier positif le plus proche.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  -webkit-initial-letter: 3.0 2;
+  initial-letter: 3.0 2;
+}
+
+ +

HTML

+ +
<p class="exemple">
+  Un grand rosier se trouvait à l’entrée du jardin ;
+  les roses qu’il portait étaient blanches, mais trois
+  jardiniers étaient en train de les peindre en rouge.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Inline', '#sizing-drop-initials', 'initial-letter')}}{{Spec2('CSS3 Inline')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.initial-letter")}}

diff --git a/files/fr/web/css/initial/index.html b/files/fr/web/css/initial/index.html new file mode 100644 index 0000000000..f4a7d0e3e6 --- /dev/null +++ b/files/fr/web/css/initial/index.html @@ -0,0 +1,90 @@ +--- +title: initial +slug: Web/CSS/initial +tags: + - CSS + - Cascade + - Mot-clé + - Reference +translation_of: Web/CSS/initial +--- +
{{CSSRef}}
+ +

Le mot-clé initial applique la valeur initiale d'une propriété à un élément. La valeur initiale est fournie par le navigateur et peut être utilisée pour chaque propriété CSS. Cette propriété prendra alors la valeur initiale spécifiée pour cette la propriété.

+ +

La propriété {{cssxref("all")}} peut être utilisée avec cette valeur afin de réinitialiser l'ensemble des propriétés CSS.

+ +
+

Note : Pour les propriétés héritées, la valeur initiale peut donner des résultats étranges et mieux vaudra utiliser les mots-clés {{cssxref("inherit")}}, {{cssxref("unset")}} ou {{cssxref("revert")}}. Attention également à ne pas confondre la valeur initiale avec la valeur décrite dans la feuille de style portée par le navigateur.

+
+ +

Exemples

+ +

CSS

+ +
/* On écrit le texte en rouge */
+.exemple {
+  color: red;
+}
+
+/* Et on veut que le texte mis en avant
+   prenne la valeur initiale de
+   color */
+.exemple em {
+  color: initial;
+}
+
+ +

HTML

+ +
 <p class="exemple">
+    Texte rouge
+       <em>
+          ce texte est avec la couleur initiale (noire)
+       </em>
+    ce texte est rouge aussi
+ </p> 
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Cascade', '#initial', 'initial')}}{{Spec2('CSS4 Cascade')}}Aucun changement.
{{SpecName('CSS3 Cascade', '#initial', 'initial')}}{{Spec2('CSS3 Cascade')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.global_keywords.initial")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/inline-size/index.html b/files/fr/web/css/inline-size/index.html new file mode 100644 index 0000000000..92610bd499 --- /dev/null +++ b/files/fr/web/css/inline-size/index.html @@ -0,0 +1,112 @@ +--- +title: inline-size +slug: Web/CSS/inline-size +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/inline-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété inline-size définit la taille verticale ou horizontale d'un élément de bloc selon son mode d'écriture. Selon la valeur de {{cssxref("writing-mode")}}, cette propriété correspond à {{cssxref("width")}} quand le mode d'écriture n'est pas vertical ou à {{cssxref("height")}} sinon.

+ +
{{EmbedInteractiveExample("pages/css/inline-size.html")}}
+ + + +

Cette propriété est à rapprocher de {{cssxref("block-size")}} qui définit l'autre dimension de l'élément.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+inline-size: 300px;
+inline-size: 25em;
+
+/* Valeurs proportionnelles relatives */
+/* Type <percentage>                  */
+inline-size: 75%;
+
+/* Valeurs avec un mot-clé */
+inline-size: 25em border-box;
+inline-size: 75% content-box;
+inline-size: max-content;
+inline-size: min-content;
+inline-size: available;
+inline-size: fit-content;
+inline-size: auto;
+
+/* Valeurs globales */
+inline-size: inherit;
+inline-size: initial;
+inline-size: unset;
+
+ +

Valeurs

+ +

La propriété inline-size peut prendre les mêmes valeurs que les propriétés {{cssxref("width")}} et {{cssxref("height")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  inline-size: 110px;
+}
+ +

HTML

+ +
<p class="exemple">Texte d'exemple</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.inline-size")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("width")}}
      • +
    • {{cssxref("height")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/fr/web/css/inset-block/index.html b/files/fr/web/css/inset-block/index.html new file mode 100644 index 0000000000..7ef04b2736 --- /dev/null +++ b/files/fr/web/css/inset-block/index.html @@ -0,0 +1,108 @@ +--- +title: inset-block +slug: Web/CSS/inset-block +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/inset-block +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété inset-block définit le décalage d'un élément par rapport au début et à la fin de l'axe de bloc de l'élément. Cette propriété logique correspond à une propriété physique donnée selon le mode d'écriture de l'élément, sa direction et l'orientation de son texte. Autrement dit, cette propriété peut correspondre à {{cssxref("top")}} et {{cssxref("bottom")}} ou à {{cssxref("right")}} et {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
/* Valeurs de longueur */
+/* Type <length> */
+inset-block: 3px 10px;
+inset-block: 2.4em 3em;
+inset-block: 10px; /* La valeur est appliquée des deux côtés */
+
+/* Les valeurs en pourcentage sont relatives à la */
+/* largeur ou à la hauteur du bloc englobant */
+/* Type <percentage> */
+inset-block: 10% 5%;
+
+/* Valeur avec un mot-clé */
+inset-block: auto;
+
+/* Valeurs globales */
+inset-block: inherit;
+inset-block: initial;
+inset-block: unset;
+
+ +

Pour gérer les décalages sur la dimension orthogonale, on pourra utiliser la propriété logique {{cssxref("inset-inline")}} qui est une propriété raccourcie pour {{cssxref("inset-inline-start")}}, and {{cssxref("inset-inline-end")}}.

+ +

Syntaxe

+ +

Valeurs

+ +

La propriété inset-block peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block: 20px 50px;
+  background-color: #c8c800;
+}
+ +

HTML

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

Exemples

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset-block", "inset-block")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.inset-block")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}}
    • +
  • Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/inset-inline/index.html b/files/fr/web/css/inset-inline/index.html new file mode 100644 index 0000000000..7a6f06fbf0 --- /dev/null +++ b/files/fr/web/css/inset-inline/index.html @@ -0,0 +1,108 @@ +--- +title: inset-inline +slug: Web/CSS/inset-inline +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/inset-inline +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété inset-inline définit le décalage d'un élément par rapport au début et à la fin de l'axe en ligne de l'élément. Cette propriété logique correspond à une propriété physique donnée selon le mode d'écriture de l'élément, sa direction et l'orientation de son texte. Autrement dit, cette propriété peut correspondre à {{cssxref("top")}} et {{cssxref("bottom")}} ou à {{cssxref("right")}} et {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
/* Valeurs de longueur */
+/* Type <length> */
+inset-inline: 3px 10px;
+inset-inline: 2.4em 3em;
+inset-inline: 10px; /* La valeur est appliquée des deux côtés */
+
+/* Les valeurs en pourcentage sont relatives à la */
+/* largeur ou à la hauteur du bloc englobant */
+/* Type <percentage> */
+inset-inline: 10% 5%;
+
+/* Valeur avec un mot-clé */
+inset-inline: auto;
+
+/* Valeurs globales */
+inset-inline: inherit;
+inset-inline: initial;
+inset-inline: unset;
+
+ +

Pour gérer les décalages sur la dimension orthogonale, on pourra utiliser la propriété logique {{cssxref("inset-block")}} qui est une propriété raccourcie pour {{cssxref("inset-block-start")}}, and {{cssxref("inset-block-end")}}.

+ +

Syntaxe

+ +

Valeurs

+ +

La propriété inset-inline peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline: 20px 50px;
+  background-color: #c8c800;
+}
+ +

HTML

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

Exemples

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.inset-inline")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}}
    • +
  • Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/inset/index.html b/files/fr/web/css/inset/index.html new file mode 100644 index 0000000000..bf91e20df5 --- /dev/null +++ b/files/fr/web/css/inset/index.html @@ -0,0 +1,115 @@ +--- +title: inset +slug: Web/CSS/inset +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/inset +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété inset définit les décalages physiques d'un élément. Bien qu'elle fasse partie de la spécification sur les propriétés logiques, sa valeur ne dépend pas du mode d'écriture de l'élément, de sa direction ou de l'orientation du texte. La syntaxe de cette propriété suit la même structure que {{cssxref("margin")}}, inset est une propriété raccourcie permettant de définir les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et/ou {{cssxref("left")}}.

+ +
/* Valeurs de longueurs */
+/* Type <length> */
+inset: 10px; /* la valeur est appliquée à l'ensemble des côtés */
+inset: 4px 8px; /* haut/bas gauche/droit */
+inset: 5px 15px 10px; /* haut gauche/droit bas */
+inset: 2.4em 3em 3em 3em; /* haut droit bas gauche */
+
+/* pourcentages de la largeur/hauteur du bloc englobant */
+inset: 10% 5% 5% 5%;
+
+/* Valeur avec un mot-clé */
+inset: auto;
+
+/* Valeurs globales */
+inset: inherit;
+inset: initial;
+inset: unset;
+
+
+ +

Syntaxe

+ +

Valeurs

+ +

La propriété inset prend les mêmes valeurs que la propriété {{cssxref("left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 150px;
+  height: 120px;
+  position: relative;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  position: absolute;
+  inset: 20px 40px 30px 10px;
+  background-color: #c8c800;
+}
+ +

HTML

+ +
<div>
+  <span class="texteExemple">Texte d'exemple</span>
+</div>
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.inset")}}

+ +

Voir aussi

+ +
    +
  • La propriété raccourcie physique {{cssxref("margin")}}
    • +
  • Les propriétés physiques détaillées : +
      +
    • {{cssxref("top")}},
      • +
    • {{cssxref("right")}},
      • +
    • {{cssxref("bottom")}},
      • +
    • {{cssxref("left")}}
      • +
    +
    • +
  • Les propriétés utilisées pour les autres propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/integer/index.html b/files/fr/web/css/integer/index.html new file mode 100644 index 0000000000..96501b4ca6 --- /dev/null +++ b/files/fr/web/css/integer/index.html @@ -0,0 +1,93 @@ +--- +title: +slug: Web/CSS/integer +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/integer +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <integer> permet de représenter des nombres entiers positifs ou négatifs. Aucune unité n'est liée à la valeur. Les entiers sont utilisés dans de nombreuses propriétés CSS comme {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}}, {{cssxref("column-count")}}, {{cssxref("grid-row")}}, {{cssxref("repeat")}}. Ce type est un sous-type de {{cssxref("number")}}.

+ +

Syntaxe

+ +

Un entier se compose d'un ou de plusieurs chiffres, de 0 à 9, éventuellement précédés par un seul signe + ou -. Il n'y a pas d'unité pour ce type de donnée.

+ +

Toutes les valeurs de type <integer> sont également des valeurs de type {{cssxref("<number>")}}, bien que l'inverse ne soit pas vrai.

+ +
Note : Il n'y a pas de bornes à l'ensemble des valeurs de type <entier> valides. Opera supporte des valeurs jusqu'à 215-1, IE jusqu'à 220-1 et d'autres navigateurs des valeurs encore plus hautes. Durant le cycle CSS3 Values, il y a eu de nombreuses discussions pour définir une valeur minimale à supporter : la dernière décision, en date d'avril 2012 pendant la phase LC, était [-227-1; 227-1] # mais d'autres valeurs comme 224-1 et 230-1 ont aussi été proposées # #. Le dernier brouillon ne fait plus apparaître de limite.
+ +

Interpolation

+ +

Les valeurs du type <entier> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par incrémentation discrète. Le calcul est réalisé comme si les valeurs étaient des nombres réels, en virgule flottante et la valeur discrète est obtenue en utilisant la fonction partie entière. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation")}} associée à l'animation.

+ +

Exemples

+ +

Ces valeurs sont des entiers valides :

+ +
12          Entier positif (sans le signe + à l'avant)
++123        Entier positif (avec le signe + à l'avant)
+-456        Entier négatif
+0           Zéro
++0          Zéro, avec un signe + à l'avant
+-0          Zéro, avec un signe - à l'avant (bien qu'étrange, cette valeur est acceptée)
+
+ +

Ces valeurs sont des entiers non valides :

+ +
12.0        Ceci est un {{cssxref("<number>")}}, pas un <entier>, bien qu'il représente un entier
+12.         Le point ne peut pas faire partie d'un <entier>
++---12      Un seul +/- à l'avant est accepté
+ten         Les lettres ne sont pas acceptées
+_5          Les caractères spéciaux ne sont pas acceptés
+\35         Les caractères Unicode échappés ne sont pas acceptés, même s'ils sont un entier (ici : 5)
+\4E94       Les chiffres non-arabes ne sont pas acceptés, même échappés (ici : le 5 japonais, 五)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#integers', '<integer>')}}{{Spec2('CSS4 Values')}}Aucune modification significative.
{{SpecName('CSS3 Values', '#integers', '<integer>')}}{{Spec2('CSS3 Values')}}Aucune modification depuis la spécification CSS de niveau 2 (première révision)
{{SpecName('CSS2.1', 'syndata.html#numbers', '<integer>')}}{{Spec2('CSS2.1')}}Définition implicite.
{{SpecName('CSS1', '', '<integer>')}}{{Spec2('CSS1')}}Définition implicite.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.integer")}}

+ +

 Voir aussi

+ +
    +
  • {{cssxref("<number>")}}
    • +
diff --git a/files/fr/web/css/isolation/index.html b/files/fr/web/css/isolation/index.html new file mode 100644 index 0000000000..f307209c1d --- /dev/null +++ b/files/fr/web/css/isolation/index.html @@ -0,0 +1,122 @@ +--- +title: isolation +slug: Web/CSS/isolation +tags: + - CSS + - Composition + - Propriété + - Reference +translation_of: Web/CSS/isolation +--- +
{{CSSRef}}
+ +

La propriété isolation indique que l'élément crée un nouveau contexte d'empilement (stacking context).

+ +
{{EmbedInteractiveExample("pages/css/isolation.html")}}
+ + + +

Cette propriété s'avère particulièrement utile avec {{cssxref("mix-blend-mode")}} afin de ne mélanger que l'arrière plan d'un contexte d'empilement particulier.

+ +

Syntaxe

+ +
/* Valeurs avec mots-clés */
+isolation: auto;
+isolation: isolate;
+
+/* Valeurs globales */
+isolation: inherit;
+isolation: initial;
+isolation: unset;
+
+ +

La propriété isolation est définie avec l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
auto
+
Un mot-clé qui indique qu'un nouveau contexte d'empilement doit être créé uniquement si une propriété appliquée à l'élément le rend nécessaire.
+
isolate
+
Un mot-clé qui indique qu'un nouveau contexte d'empilement doit être créé.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.a {
+  background-color: rgb(0,255,0);
+}
+#b {
+  width: 200px;
+  height: 210px;
+}
+.c {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  padding: 2px;
+  mix-blend-mode: difference;
+}
+#d {
+  isolation: auto;
+}
+#e {
+  isolation: isolate;
+}
+ +

HTML

+ +
<div id="b" class="a">
+  <div id="d">
+    <div class="a c">auto</div>
+  </div>
+  <div id="e">
+    <div class="a c">isolate</div>
+  </div>
+</div>
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Compositing', '#isolation', 'Isolation')}}{{Spec2('Compositing')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.isolation")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("mix-blend-mode")}}
    • +
  • {{cssxref("background-blend-mode")}}
    • +
diff --git "a/files/fr/web/css/jeux_de_caract\303\250res_css/index.html" "b/files/fr/web/css/jeux_de_caract\303\250res_css/index.html" new file mode 100644 index 0000000000..a7c76a2c4e --- /dev/null +++ "b/files/fr/web/css/jeux_de_caract\303\250res_css/index.html" @@ -0,0 +1,50 @@ +--- +title: Jeux de caractères CSS +slug: Web/CSS/Jeux_de_caractères_CSS +tags: + - Aperçu + - CSS + - CSS Charsets + - Reference +translation_of: Web/CSS/CSS_Charsets +--- +
{{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/justify-content/index.html b/files/fr/web/css/justify-content/index.html new file mode 100644 index 0000000000..02d22d44ee --- /dev/null +++ b/files/fr/web/css/justify-content/index.html @@ -0,0 +1,208 @@ +--- +title: justify-content +slug: Web/CSS/justify-content +tags: + - CSS + - Propriété + - Reference + - flexbox +translation_of: Web/CSS/justify-content +--- +
{{CSSRef}}
+ +

La propriété CSS justify-content indique la façon dont l'espace doit être réparti entre et autour des éléments selon l'axe principal d'un conteneur flexible ou selon l'axe en ligne lorsque le conteneur est une grille.

+ +

L'exemple suivant illustre le fonctionnement des valeurs de cette propriété au sein d'une grille CSS.

+ +
{{EmbedInteractiveExample("pages/css/justify-content.html")}}
+ + + +

L'alignement est appliqué après que les longueurs et les marges automatiques ont été appliquées. Dans une disposition utilisant les boîtes flexibles, cela signifie que s'il existe au moins un élément flexible pour lequel {{cssxref("flex-grow")}} est différent de 0, justify-content n'aura aucun effet car il n'y aura plus d'espace disponible.

+ +

Syntaxe

+ +
/* Alignement « géométrique » */
+justify-content: center;     /* Éléments groupés au centre */
+justify-content: start;      /* Éléments groupés au début */
+justify-content: end;        /* Éléments groupés à la fin */
+justify-content: flex-start; /* Éléments flexibles groupés au début */
+justify-content: flex-end;   /* Éléments flexibles groupés à la fin */
+justify-content: left;       /* Éléments groupés à gauche */
+justify-content: right;      /* Éléments groupés à droite */
+
+/* Alignement par rapport à la ligne de base */
+/* justify-content ne prend pas de valeurs relatives à la ligne de base */
+
+/* Alignement normal */
+justify-content: normal;
+
+/* Alignement distribué */
+justify-content: space-between; /* Les éléments sont répartis équitablement
+                                   Le bord du premier est aligné sur le
+                                   début du conteneur et la fin du dernier
+                                   est alignée sur la fin du conteneur */
+justify-content: space-around;  /* Les éléments sont répartis équitablement
+                                   À chaque extrémité, entre le bord du
+                                   conteneur et le premier/dernier élément
+                                   on a la moitié de l'espace appliqué entre
+                                   chaque élément */
+justify-content: space-evenly;  /* Les éléments sont répartis équitablement
+                                   Tous les éléments sont séparés par le même
+                                   espace */
+justify-content: stretch;       /* Les éléments sont répartis équitablement et
+                                   les éléments dimensionnés avec 'auto' sont
+                                   étirés afin de remplir le conteneur */
+
+/* Alignement pour le dépassement */
+justify-content: safe center;
+justify-content: unsafe center;
+
+/* Valeurs globales */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+
+ +

Valeurs

+ +
+
start
+
Les éléments sont regroupés au début du conteneur selon l'axe principal. Le bord du premier élément est aligné avec le bord du conteneur.
+
end
+
Les éléments sont regroupés à la fin du conteneur selon l'axe principal. Le bord du dernier élément est aligné avec le bord du conteneur.
+
flex-start
+
Les éléments sont regroupés vers le début du conteneur, selon l'axe principal et le sens du conteneur flexible.
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme de start.
+
flex-end
+
Les éléments sont regroupés vers la fin du conteneur, selon l'axe principal et le sens du conteneur flexible.
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme de end.
+
center
+
Les éléments sont regroupés au centre du conteneur selon l'axe principal.
+
left
+
Les éléments sont regroupés vers le bord gauche du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de start.
+
right
+
Les éléments sont regroupés vers le bord droit du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de start.
+
normal
+
Les éléments sont groupés sur leur position par défaut, comme si justify-content n'avait pas été utilisé. Cette valeur se comporte comme stretch dans les conteneurs de grille et les conteneurs flexibles.
+
space-between
+
Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est aussi aligné sur le bord de l'élément.
+
space-around
+
Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. L'espace entre le bord du conteneur et le premier élément et l'espace entre le dernier élément et le bord du conteneur représente la moitié de l'espace entre deux éléments.
+
space-evenly
+
Les éléments sont espacés équitablement. L'espace utilisé entre chaque élément, entre le bord du conteneur et le premier élément, et entre le dernier élément et le bord du conteneur est le même.
+
stretch
+
Si la somme des tailles des éléments sur l'axe principal est inférieure à la taille du conteneur, tous les éléments dimensionnés avec auto sont agrandis avec le même supplément, tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités analogues). Ainsi, l'ensemble des éléments remplit exactement le conteneur sur l'axe principal.
+ La valeur stretch n'est pas prise en charge pour les boîtes flexibles (flexbox)
+
safe
+
Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Si le mot-clé choisi indique que le dépassement de l'objet entraîne la perte de donnée, alors l'élément sera plutôt aligné avec la valeur start.
+
unsafe
+
Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Quelle que soit la situation de dépassement ou les contraintes de taille, la valeur utilisée pour l'alignement est respectée.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#container {
+  display: flex;
+  /* Cette valeur peut être changée dans l'exemple */
+  justify-content: space-between;
+}
+
+#container > div {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+ + + +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}{{Spec2('CSS3 Flexbox')}}Définition initiale.
{{SpecName('CSS3 Box Alignment', '#propdef-justify-content', 'justify-content')}}{{Spec2('CSS3 Box Alignment')}}Ajout des valeurs space-evenly, [ first | last ]? baseline, start, end, left, right, safe et unsafe.
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ + + +

Prise en charge pour les dispositions flexibles

+ +

{{Compat("css.properties.justify-content.flex_context")}}

+ +

Prise en charge pour les grilles

+ +

{{Compat("css.properties.justify-content.grid_context")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/justify-items/index.html b/files/fr/web/css/justify-items/index.html new file mode 100644 index 0000000000..862d8e697c --- /dev/null +++ b/files/fr/web/css/justify-items/index.html @@ -0,0 +1,242 @@ +--- +title: justify-items +slug: Web/CSS/justify-items +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/justify-items +--- +
{{CSSRef}}
+ +

La propriété CSS justify-items définit la valeur par défaut de {{cssxref("justify-self")}} pour tous les éléments d'une boîte et permet ainsi de définir le comportement par défaut pour la justification des éléments d'une boîte le long de l'axe en ligne (c'est-à-dire l'axe correspondant au sens d'écriture).

+ +
{{EmbedInteractiveExample("pages/css/justify-items.html")}}
+ + + +

L'effet de cette propriété sera différent selon le type de disposition utilisé :

+ +
    +
  • Pour les dispositions de bloc : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant.
    • +
  • Pour les éléments positionnés de façon absolue : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant en prenant en compte les valeurs de décalage par rapport au haut, à la gauche, au bas et à la droite.
    • +
  • Pour les cellules de tableau, cette propriété est ignorée (en savoir plus).
    • +
  • Pour les dispositions flexibles (flexbox), cette propriété est ignorée (en savoir plus).
    • +
  • Pour les grilles, cette propriété aligne l'élément sur la zone de la grille à laquelle il appartient selon l'axe en ligne (en savoir plus).
    • +
+ +

Syntaxe

+ +
/* Mots-clés de base */
+justify-items: auto;
+justify-items: normal;
+justify-items: stretch;
+
+/* Alignement par rapport à l'axe */
+justify-items: center;     /* Les éléments sont regroupés au centre */
+justify-items: start;      /* Les éléments sont regroupés au début  */
+justify-items: end;        /* Les éléments sont regroupés à la fin  */
+justify-items: flex-start; /* Les éléments sont regroupés au début de l'axe */
+justify-items: flex-end;   /* Les éléments sont regroupés à la fin de l'axe */
+justify-items: self-start;
+justify-items: self-end;
+justify-items: left;       /* Les éléments sont regroupés à gauche */
+justify-items: right;      /* Les éléments sont regroupés à droite */
+
+/* Alignement par rapport à la ligne de base */
+justify-items: baseline;
+justify-items: first baseline;
+justify-items: last baseline;
+
+/* Gestion du dépassement */
+justify-items: safe center;
+justify-items: unsafe center;
+
+/* Valeurs historiques */
+justify-items: legacy right;
+justify-items: legacy left;
+justify-items: legacy center;
+
+/* Valeurs globales */
+justify-items: inherit;
+justify-items: initial;
+justify-items: unset;
+
+ +

Cette propriété peut être définie selon trois formes différentes :

+ +
    +
  • Grâce à un mot-clé : normal, auto ou stretch.
    • +
  • Relativement à la ligne de base : dans ce cas, on a le mot-clé baseline éventuellement suivi de first ou de last
    • +
  • Grâce à un positionnement : +
      +
    • Un mot-clé parmi : center, start, end, flex-start, flex-end, self-start, self-end, left ou right
      • +
    • Puis éventuellement safe ou unsafe
      • +
    +
    • +
  • Grâce à un alignement tel que précédemment spécifié : le mot-clé legacy suivi de left ou de right.
    • +
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée est celle de la propriété justify-items pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, auto sera synonyme de normal.
+
normal
+
Ce mot-clé aura un sens différent selon le mode de disposition utilisé : +
    +
  • Pour une disposition en bloc, normal est synonyme de start.
    • +
  • Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme start pour les boîtes des éléments remplacés ou comme stretch pour les autres boîtes positionnées de façon absolue.
    • +
  • Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.
    • +
  • Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée.
    • +
  • Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de stretch, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de start.
    • +
+
+
start
+
Les éléments sont regroupés vers le début du conteneur pour l'axe en ligne.
+
end
+
Les éléments sont regroupés vers la fin du conteneur pour l'axe en ligne.
+
flex-start
+
Les éléments sont regroupés vers le début du conteneur flexible pour l'axe en ligne.
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à start.
+
flex-end
+
Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe en ligne.
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à end.
+
self-start
+
Les éléments sont alignés sur le bord du conteneur au début de l'axe en ligne.
+
self-end
+
Les éléments sont alignés sur le bord du conteneur à la fin de l'axe en ligne.
+
center
+
Les éléments sont regroupés au centre du conteneur dans le sens de l'axe en ligne.
+
left
+
Les éléments sont alignés vers la gauche du conteneur dans le sens de l'axe en ligne.
+
right
+
Les éléments sont alignés vers la droite du conteneur dans le sens de l'axe en ligne.
+
baseline
+ first baseline
+ last baseline
+
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.
+
stretch
+
Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, 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
+
Si la taille de l'élément dépasse du conteneur pour la valeur d'alignement indiquée, l'élément est alors aligné comme si la valeur start avait été utilisée.
+
unsafe
+
Quelle que soit la taille de l'élément par rapport au conteneur (il peut dépasser), la valeur fournie pour indiquer l'alignement est respectée.
+
legacy
+
La valeur est héritée par les éléments descendants de la boîte. Si un élément descendant a justify-self: auto, le mot-clé legacy ne sera pas pris en compte mais uniquement la valeur left, right, ou center.
+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

CSS

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +

HTML

+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

Résultat

+ +

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

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}{{Spec2("CSS3 Box Alignment")}}Définition initiale.
+ +

{{CSSInfo}}

+ +

Compatibilité des navigateurs

+ + + +

Prise en charge pour les dispositions flexibles

+ +

{{Compat("css.properties.justify-items.flex_context")}}

+ +

Prise en charge pour les grilles CSS

+ +

{{Compat("css.properties.justify-items.grid_context")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/justify-self/index.html b/files/fr/web/css/justify-self/index.html new file mode 100644 index 0000000000..d093566da0 --- /dev/null +++ b/files/fr/web/css/justify-self/index.html @@ -0,0 +1,221 @@ +--- +title: justify-self +slug: Web/CSS/justify-self +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/justify-self +--- +
{{CSSRef}}
+ +

La propriété CSS justify-self définit la façon dont une boîte est alignée sur l'axe en ligne du conteneur.

+ +
{{EmbedInteractiveExample("pages/css/justify-self.html")}}
+ + + +

L'effet de cette propriété varie selon le mode de disposition utilisé :

+ +
    +
  • Pour les dispositions de bloc : elle permet d'aligner un élément sur l'axe en ligne par rapport à son bloc englobant.
    • +
  • Pour les éléments positionnés de façon absolue : elle permet d'aligner un élément dans le bloc englobant par rapport à l'axe en ligne en prenant en compte les valeurs de décalage pour les côtés haut, gauche, bas et droit.
    • +
  • Pour les dispositions des cellules de tableau : cette propriété est ignorée (en savoir plus).
    • +
  • Pour les dispositions flexibles : cette propriété est ignorée (en savoir plus).
    • +
  • Pour les dispositions avec les grilles : cette propriété permet d'aligner un objet sur l'axe en ligne sur la zone de grille à laquelle il appartient (en savoir plus).
    • +
+ +

Syntaxe

+ +
/* Mots-clés de base */
+justify-self: auto;
+justify-self: normal;
+justify-self: stretch;
+
+/* Alignement par rapport à l'axe */
+justify-self: center;     /* L'élément est aligné au centre */
+justify-self: start;      /* L'élément est aligné au début  */
+justify-self: end;        /* L'élément est aligné à la fin  */
+justify-self: flex-start; /* L'élément est aligné au début de l'axe */
+justify-self: flex-end;   /* L'élément est aligné à la fin de l'axe */
+justify-self: self-start;
+justify-self: self-end;
+justify-self: left;       /* L'élément est aligné à gauche */
+justify-self: right;      /* L'élément est aligné à droite */
+
+/* Alignement par rapport à la ligne de base */
+justify-self: baseline;
+justify-self: first baseline;
+justify-self: last baseline;
+
+/* Gestion du dépassement */
+justify-self: safe center;
+justify-self: unsafe center;
+
+/* Valeurs globales */
+justify-self: inherit;
+justify-self: initial;
+justify-self: unset;
+
+ +

Cette propriété peut être définie selon trois formes différentes :

+ +
    +
  • Grâce à un mot-clé : normal, auto ou stretch.
    • +
  • Relativement à la ligne de base : dans ce cas, on a le mot-clé baseline éventuellement suivi de first ou de last
    • +
  • Grâce à un positionnement : +
      +
    • Un mot-clé parmi : center, start, end, flex-start, flex-end, self-start, self-end, left ou right
      • +
    • Puis éventuellement safe ou unsafe
      • +
    +
    • +
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée est celle de la propriété justify-items définie pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, auto sera synonyme de normal.
+
normal
+
Ce mot-clé aura un sens différent selon le mode de disposition utilisé : +
    +
  • Pour une disposition en bloc, normal est synonyme de start.
    • +
  • Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme start pour les boîtes des éléments remplacés ou comme stretch pour les autres boîtes positionnées de façon absolue.
    • +
  • Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.
    • +
  • Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée.
    • +
  • Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de stretch, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de start.
    • +
+
+
start
+
L'élément est aligné vers le début du conteneur pour l'axe en ligne.
+
end
+
L'élément est aligné vers la fin du conteneur pour l'axe en ligne.
+
flex-start
+
L'élément est aligné vers le début du conteneur flexible pour l'axe en ligne.
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à start.
+
flex-end
+
L'élément est aligné vers la fin du conteneur flexible pour l'axe en ligne.
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à end.
+
self-start
+
L'élément est aligné sur le bord du conteneur au début de l'axe en ligne.
+
self-end
+
L'élément est aligné sur le bord du conteneur à la fin de l'axe en ligne.
+
center
+
L'élément est aligné au centre du conteneur dans le sens de l'axe en ligne.
+
left
+
L'élément est aligné vers la gauche du conteneur dans le sens de l'axe en ligne.
+
right
+
L'élément est aligné vers la droite du conteneur dans le sens de l'axe en ligne.
+
baseline
+ first baseline
+ last baseline
+
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.
+
stretch
+
Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, 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
+
Si la taille de l'élément dépasse du conteneur pour la valeur d'alignement indiquée, l'élément est alors aligné comme si la valeur start avait été utilisée.
+
unsafe
+
Quelle que soit la taille de l'élément par rapport au conteneur (il peut dépasser), la valeur fournie pour indiquer l'alignement est respectée.
+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

CSS

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(2, 100px);
+  grid-template-rows: repeat(2,100px);
+  height: 300px;
+  width: 300px;
+  grid-gap: 10px;
+  align-content: space-between;
+}
+.item1 {
+  justify-self: start;
+}
+.item3 {
+  justify-self: end;
+}
+
+ +

HTML

+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

Résultat

+ +

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

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box Alignment', '#propdef-justify-slef', 'justify-self')}}{{Spec2('CSS3 Box Alignment')}}Définition initiale.
+ +

{{CSSInfo}}

+ +

Compatibilité des navigateurs

+ + + +

Prise en charge pour les dispositions flexibles/flexbox

+ +

{{Compat("css.properties.justify-self.flex_context")}}

+ +

Prise en charge pour les grilles CSS

+ +

{{Compat("css.properties.justify-self.grid_context")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" "b/files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" new file mode 100644 index 0000000000..be032d79cd --- /dev/null +++ "b/files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" @@ -0,0 +1,73 @@ +--- +title: Bas de page adhérant +slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant +tags: + - CSS + - Guide + - Recette +translation_of: Web/CSS/Layout_cookbook/Sticky_footers +--- +
{{CSSRef}}
+ +

Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (viewport) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.

+ +

A sticky footer pushed to the bottom of a box

+ +

Spécifications sommaires

+ +

Voici les spécifications rapides pour décrire le résultat qu'on souhaite obtenir :

+ +
    +
  • Le pied de page est en bas de la zone d'affichage lorsque le contenu est suffisamment petit
    • +
  • Si le contenu est plus grand que la zone d'affichage, le pied de page est situé sous le contenu.
    • +
+ +

Recette

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}

+ +
+

Note : Télécharger cet example

+
+ +
+

Note : Dans cet exemple, ainsi que dans le suivant, on utilise un élément enveloppant avec min-height: 100% afin que l'exemple intégré à la page fonctionne. Pour reproduire cela sur une page complète, on peut utiliser {{cssxref("min-height")}} avec la valeur 100vh sur l'élément {{htmlelement("body")}} qu'on utilise comme conteneur de grille.

+
+ +

Choix effectués

+ +

Dans l'exemple précédent, on utilise une grille CSS pour réaliser ce bas de page adhérant. L'élément .wrapper a une hauteur minimale de 100%, ce qui signifie qu'il est aussi grand que le conteneur dans lequel il est placé. On crée ensuite une grille avec une seule colonne et trois lignes, une pour chaque partie de la disposition.

+ +

Le placement automatique de la grille placera les objets selon l'ordre du document source. Le titre vient donc se placer sur la première piste (dimensionnée automatiquement), le contenu vient se placer sur la piste 1fr et le pied de page se retrouve dans la troisième région (dimensionnée automatiquement). La piste du milieu, dimensionnée avec 1fr, occupera tout l'espace disponible et grandira pour remplir l'espace disponible.

+ +

Méthodes alternatives

+ +

Si vous devez prendre en charge des navigateurs qui ne permettent pas d'utiliser les grilles CSS, vous pouvez utiliser les boîtes flexibles (flexbox) pour avoir une note de bas de page adhérante.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}

+ +

On commence de la même façon mais on utilise display:flex plutôt que display:grid sur .wrapper. On définit flex-direction avec la valeur column afin d'avoir une organisation verticale. Pour le contenu principal, on utilise flex-grow: 1 et pour les deux autres éléments, on utilise flex-shrink: 0. Cela évite de les réduire encore lorsque le contenu remplit la zone principale.

+ +

Compatibilité des navigateurs

+ +

grid-template-rows

+ +

{{Compat("css.properties.grid-template-rows")}}

+ +

flex-direction

+ +

{{Compat("css.properties.flex-direction")}}

+ +

flex-grow

+ +

{{Compat("css.properties.flex-grow")}}

+ +

flex-shrink

+ +

{{Compat("css.properties.flex-shrink")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/carte/index.html b/files/fr/web/css/layout_cookbook/carte/index.html new file mode 100644 index 0000000000..f363a49f0d --- /dev/null +++ b/files/fr/web/css/layout_cookbook/carte/index.html @@ -0,0 +1,81 @@ +--- +title: Carte +slug: Web/CSS/Layout_cookbook/Carte +tags: + - CSS + - CSS Grid + - Guide + - Recette +translation_of: Web/CSS/Layout_cookbook/Card +--- +

{{CSSRef}}

+ +

Dans ce guide, nous verrons comment créer des cartes (cards en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.

+ +

Three card components in a row

+ +

Spécifications sommaires

+ +

Une carte peut contenir différents éléments tels qu'un titre, une image, un contenu texte et un pied de page.

+ +

Chaque carte devrait avoir la même hauteur et les pied de page devrait être placés en bas de la carte.

+ +

Lorsqu'on ajoute des cartes à un ensemble de cartes, celles-ci devraient s'organiser sur deux dimensions.

+ +

Recette

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}

+ +
+

Note : Télécharger cet exemple.

+
+ +

Choix effectués

+ +

Chaque carte est organisée en utilisant une grille CSS bien qu'elle ne soit que sur une seule dimension. Cela permet en effet d'utiliser le dimensionnement du contenu pour les pistes de la grille. Pour avoir une grille avec une seule colonne, on utilise ce fragment de CSS :

+ +
.card {
+  display: grid;
+  grid-template-rows: max-content 200px 1fr;
+}
+ +

La piste pour le titre est définie avec {{cssxref("max-content")}} ce qui empêche de l'étirer. On décide ensuite que l'image puisse occuper la piste au maximum sur 200 pixels. On définit ensuite la prochaine piste (où le contenu texte se trouve) avec une dimension de 1fr. Autrement dit, la piste dédiée au contenu occupera tout l'espace restant.

+ +

Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte.

+ +
+

Note : Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (subgrid), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.

+
+ +

Méthodes alternatives

+ +

On pourrait également utiliser les boîtes flexibles pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément.

+ +

Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser une disposition multi-colonnes où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).

+ +

Voir la recette sur les colonnes pour observer ces méthodes en action.

+ +

Accessibilité

+ +

Selon le contenu des cartes, il est possible voire souhaitable d'appliquer quelques traitements pour améliorer l'accessibilité. Voir l'article Inclusive Components: Card (en anglais), écrit par Heydon Pickering, pour des explications détaillées à ce propos.

+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+ + + +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

grid-template-rows

+ +

{{Compat("css.properties.grid-template-rows")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/centrer_un_element/index.html b/files/fr/web/css/layout_cookbook/centrer_un_element/index.html new file mode 100644 index 0000000000..c4d1fb52c3 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/centrer_un_element/index.html @@ -0,0 +1,59 @@ +--- +title: Centrer un élément +slug: Web/CSS/Layout_cookbook/Centrer_un_element +tags: + - Alignement + - CSS + - Layout + - centrer + - flexbox + - recettes +translation_of: Web/CSS/Layout_cookbook/Center_an_element +--- +
{{CSSRef}}
+ +

Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (flexbox), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification Box Alignment.

+ +

an element centered inside a larger box

+ +

Spécifications sommaires

+ +

Centrer un élément à la fois horizontalement et verticalement dans un autre élément.

+ +

Recette

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

Choix effectués

+ +

Pour centrer une boîte dans une autre, on a donné au contenant une propriété display: flex.

+ +

Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur center pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur center pour centrer horizontalement.

+ +

À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique.
+ Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste.

+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété.

+ + + +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

justify-content

+ +

{{Compat("css.properties.justify-content")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" "b/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" new file mode 100644 index 0000000000..7223cde7ef --- /dev/null +++ "b/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" @@ -0,0 +1,62 @@ +--- +title: Cookbook template +slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_template +tags: + - CSS + - Meta +translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template +--- +

{{CSSRef}}

+ +
Note : Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.
+Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.
+ +

Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.

+ +

Spécifications sommaires

+ +

Que cherche-t-on à faire avec cette recette ? Quel problème résout-on ici ? Il faut expliquer de façon concise ce que l'on souhaite faire.

+ +

Recette

+ +

Il faudra changer le chemin de la macro pour correspondre à celui de votre exemple une fois que celui-ci a été fusionné sur le dépôt principal. Le dernier paramètre correspond à la hauteur qui peut être adaptée si besoin.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

+ +

Il faut modifier le lien pour cibler la version téléchargeable de votre exemple.

+ +
+

Note : Télécharger cet exemple.

+
+ +

Choix effectués

+ +

Expliquez ici les décisions prises pour réaliser cette  recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement.

+ +

Méthodes de recours ou alternatives

+ +

S'il existe d'autres méthodes ou des méthodes qui permettent une amélioration progressive pour les navigateurs qui ne prennent pas en charge les fonctionnalités récentes utilisées, vous pouvez les décrire ici.

+ +

Accessibilité

+ +

Inclure ici les aspects spécifiquement liés à l'accessibilité pour cette recette. Cette section peut être omise si rien de notable ne concerne l'accessiblité pour cette recette.

+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+ + + +

Inclure ici les données de compatibilité pour les principales propriétés utilisées. Comme exemple, voici comment faire pour inclure les données concernant align-items.

+ +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

Voir aussi

+ +
    +
  • Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}
    • +
  • Liens vers des articles qui expliquent comment utiliser telles propriétés en contexte
    • +
  • Liens vers des ressources externes. Il ne faut pas hésiter à pointer vers de bonnes ressources externes mais leur contenu ne doit pas se limiter à des points de détail.
    • +
diff --git "a/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" "b/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" new file mode 100644 index 0000000000..b356d20339 --- /dev/null +++ "b/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" @@ -0,0 +1,104 @@ +--- +title: Contribuer à une recette +slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette +tags: + - CSS + - Guide + - MDN + - Meta +translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe +--- +
{{CSSRef}}
+ +

Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.

+ +

Qu'est-ce qu'une « bonne » recette ?

+ +

Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web. Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.

+ +
+

Note quant à la traduction et aux recettes en anglais : Une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.

+
+ +

Les étapes pour la publication

+ +

Une recette se décompose comme suit :

+ +
    +
  1. Un exemple interactif, stocké sur le dépôt GitHub des exemples CSS
    2. +
  2. Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS.
    3. +
  3. Une page MDN, rattachée à la section Livre de recettes CSS qui contient : +
      +
    1. Les spécifications sommaires
      2. +
    2. La recette
      3. +
    3. Les choix effectués
      4. +
    4. Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive)
      5. +
    5. Les points relatifs à l'accessibilité
      6. +
    6. La compatibilité des navigateurs
      7. +
    7. D'éventuelles ressources additionnelles
      8. +
    +
    4. +
+ +

1. Construire le motif

+ +

Avant de passer de l'exemple à la recette, commencez par écrire votre motif sous la forme d'une simple page HTML. Pensez à ce que vous voulez démontrer/illustrer et visez un résultat aussi simple que possible. Évitez d'utiliser des conventions CSS spécifiques qui ne seraient pas nécessairement connues et qui pourraient complexifier inutilement l'exemple.

+ +

Assurez-vous que le code HTML et CSS soit valide et testez le dans différents navigateurs. Vous pouvez tout à fait utiliser des propriétés CSS qui ne sont pas prises en charge par l'ensemble des navigateurs. Vous pourrez inclure les informations de compatibilité dans la page dédiée. Dans certains cas, il pourra être utile de fournir une deuxième version de l'exemple qui illustre des techniques qui permettent de prendre en charge des navigateurs plus anciens.

+ +

2. Créer un exemple interactif

+ +

Les exemples interactifs que vous voyez sur ces recettes et dans d'autres articles MDN permettent aux visiteurs de modifier le code et d'en voir le résultat sans être submergé⋅e de code superflu. Votre recette pourra utiliser un ou plusieurs exemples interactifs.

+ +

Créez un fork du dépôt des exemples CSS puis étudiez le dossier css-cookbook. Ce dernier contient un fichier cookbook-template.html dont vous pouvez repartir pour réaliser votre exemple. Enregistrez le nouveau fichier dans le répertoire css-cookbook avec un nom pertinent. Le modèle de base est commenté afin de vous aider à situer les différentes parties.

+ +

Voici les quelques éléments importants.

+ +

Il y a une feuille de style pour les panneaux des éditeurs, quelques règles pour la mise en forme de base et un fichier JavaScript qui contient les fonctionnalités de l'éditeur. Ces fichiers doivent être laissés tels quels.

+ +

Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les éléments que le visiteur n'a pas besoin de voir ou de changer pour modifier l'exemple. Le second correspond à ce qui pourra être modifié dans l'exemple. Généralement, on ajoute l'ensemble du CSS provenant de l'exemple dans le premier bloc puis on choisit les règles qu'on souhaite reproduire dans le deuxième bloc. Les règles du deuxième bloc doivent être celles qui illustrent l'essence de l'exemple et qu'un utilisateur pourra modifier afin d'en voir l'effet sur le motif.

+ +

Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe preview puis dans l'élément textarea playable-html.

+ +

Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section  playable-css.

+ +

Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter center.html qui est utilisé sur la page Comment centrer un élément.

+ +

Si vous avez créé un fork du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.

+ +

Quelques conseils

+ +
    +
  1. N'indentez pas le code CSS et HTML à l'intérieur des textarea par rapport à l'ensemble du document HTML mais reprenez l'indentation depuis la première colonne (voir center.html par exemple).
    2. +
  2. Si vous avez besoins d'images, placez les dans le dossier avec les exemples. Vous pouvez également utiliser une des images déjà présente.
    3. +
  3. Vous pouvez ajuster la hauteur des textarea en modifiant la hauteur dans les styles inline/en incise.
    4. +
+ +

3. Créer une version téléchargeable

+ +

L'exemple intégré à la page contient tout le code mais seule la partie nécessaire est affichée. Faites une copie du fichier en ajoutant --download au nom. Ainsi, center.html possède une version téléchargeable intitulée center--download.html. Ce fichier devra ressembler à l'exemple initial et contenir une version basique du motif, sur une seule page HTML. Il peut être utile d'inclure les règles CSS applliquées à body et qui sont dans la feuille de style intégrée. Vous pouvez consulter cookbook-template--download.html comme exemple et point de départ.

+ +

4. Réaliser une pull request avec votre exemple

+ +

Ouvrez une pull request depuis votre fork vers le dépôt des exemples CSS. Nous pourrons ainsi vous aider à apporter les modifications nécessaires pour la créations de la page. De plus, l'exemple devra être fusionné afin de pouvoir être affiché sur une page. Dans la pull request, veuillez écrire une présentation de cette recette et des concepts que vous illustrez.

+ +

5. Créer la page sur MDN

+ +

Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et des permissions pour la création de page. Vous pourrez alors créer une page comme sous-page de la section. Cette page modèle pourra vous servir de point de départ pour votre contenu.

+ +

Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.

+ +
+

Note de traduction : Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter la page modèle en français.

+
+ +

Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.

+ +

Si vous avez des questions ou que vous souhaitez que quelqu'un vérifie votre page, n'hésitez pas à demander sur le forum Discourse de MDN ou à venir discuter sur IRC (ces deux canaux sont principalement anglophones).

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html b/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html new file mode 100644 index 0000000000..140cc9a35a --- /dev/null +++ b/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html @@ -0,0 +1,129 @@ +--- +title: Disposition en colonnes +slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes +tags: + - CSS + - Guide + - Multi-col + - flexbox + - grid +translation_of: Web/CSS/Layout_cookbook/Column_layouts +--- +
{{CSSRef}}
+ +

Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.

+ +

three different styles of layouts which have two columns in the container.

+ +

Prérequis

+ +

Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes :

+ +
    +
  • Un fil continu qui se divise en colonne, à la façon d'un journal papier.
    • +
  • Une seule ligne d'éléments divisée en colonnes qui ont la même hauteur.
    • +
  • Plusieurs lignes et colonnes qui sont alignées.
    • +
+ +

Les « recettes »

+ +

Selon le scénario souhaité, on utilisera différentes méthodes de disposition.

+ +

Un fil continu de contenu - Disposition multi-colonnes

+ +

En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier.

+ +

L'espacement entre les colonnes peut être géré avec la propriété {{cssxref("column-gap")}} et il est possible d'ajouter une ligne de délimitation grâce à {{cssxref("column-rule")}}.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

On utilisera une disposition multi-colonnes lorsque :

+ +
    +
  • On souhaite organiser le texte à la façon d'un journal imprimé
    • +
  • On a un ensemble de petits éléments qu'on souhaite fragmenter en colonnes
    • +
  • Il n'est pas nécessaire de cibler une colonne en particulier pour des raisons de mise en forme.
    • +
+ +

Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles

+ +

Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété {{cssxref("flex-direction")}} utilisée avec la valeur row. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes.

+ +

À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés {{cssxref("column-gap")}} et {{cssxref("row-gap")}} est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur wrap sur le conteneur.  Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

On utilisera les boîtes flexibles pour :

+ +
    +
  • Organiser des lignes ou colonnes d'objets indépendantes
    • +
  • Aligner les objets sur l'axe orthogonal au sens de lecture
    • +
  • Les cas où l'alignement d'une ligne sur l'autre n'est pas important
    • +
+ +

Aligner des objets en lignes et colonnes — Utilisation d'une grille

+ +

Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

On utiliser les grilles CSS lorsque :

+ +
    +
  • On a des éléments/objets à organiser sur plusieurs lignes et colonnes
    • +
  • On souhaite pouvoir aligner les éléments sur les deux axes
    • +
+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+ + + +

column-width

+ +

{{Compat("css.properties.column-width")}}

+ +

column-rule

+ +

{{Compat("css.properties.column-rule")}}

+ +

flex

+ +

{{Compat("css.properties.flex")}}

+ +

flex-wrap

+ +

{{Compat("css.properties.flex-wrap")}}

+ +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/grid_wrapper/index.html b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html new file mode 100644 index 0000000000..0e2ed6385f --- /dev/null +++ b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html @@ -0,0 +1,83 @@ +--- +title: Envelopper une grille +slug: Web/CSS/Layout_cookbook/Grid_wrapper +tags: + - CSS + - Guide + - Recette +translation_of: Web/CSS/Layout_cookbook/Grid_wrapper +--- +
{{CSSRef}}
+ +

Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.

+ +

Spécifications sommaires

+ +

Les éléments placés sur la grille devraient pouvoir être alignés au centre et/ou sur les bords.

+ +

Recette

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple.

+
+ +

Choix effectués

+ +

Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.

+ +

Les deux colonnes extérieures ont une taille maximale de 1fr, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.

+ +

Méthodes de recours ou alternatives

+ +

Si cette recette est utilisée pour une page entière, il peut s'avérer utile de définir max-width et des marges horzontales avec auto afin que le contenu soit centré horizontalement :

+ +
.grid {
+  max-width: 1200px;
+  margin: 0 auto; // on centre le conteneur en horizontal
+  display: grid;
+  /* Other grid code goes here */
+}
+
+/* On retire max-width et les marges si le navigateur */
+/* prend en charge les grilles */
+@supports (display: grid) {
+  .grid {
+    max-width: none;
+    margin: 0;
+  }
+}
+ +

Pour qu'un élément soit isolé et colle au bord du viewport, on peut utiliser cette astuce de Una Kravets :

+ +
.item {
+  width: 100vw;
+  margin-left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+ +

On a ainsi une méthode plus compatible mais qui ne permet pas d'aligner les éléments aussi facilement que sur une grille CSS.

+ +

Accessibilité

+ +

Bien que les grilles CSS nous permettent potentiellement de positionner n'importe où on le souhaite, il est important que l'ordre des éléments dans le document soit le même que l'ordre visuel, utilisé pour la navigation (voir les grilles CSS et l'accessibilité pour plus de détails).

+ +

Compatibilité des navigateurs

+ + + +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/css/layout_cookbook/index.html b/files/fr/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..dc96a66da3 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/index.html @@ -0,0 +1,84 @@ +--- +title: CSS Layout cookbook +slug: Web/CSS/Layout_cookbook +tags: + - CSS + - Guide + - recettes +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+ +

Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.

+ +
+

Note : Si vous débutez en CSS, nous vous conseillons de consulter notre module sur l'apprentissage de la disposition en CSS. Ce guide vous fournira les informations de base pour comprendre le fonctionnement de chacune de ces recettes.

+
+ +

Les recettes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecetteDescriptionMéthodes de disposition utilisées
Objets avec médiaUne boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page).Grilles CSS, {{cssxref("float")}} pour une méthode de recours, dimensionnement avec {{cssxref("fit-content")}}
ColonnesComment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu.Grilles CSS, Disposition multi-colonnes, Flexbox
Centrer un élémentComment centrer un élément horizontalement et verticalement.Flexbox, Alignement des boîtes
Bas de page adhérantCréer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (viewport) lorsque le contenu est plus petit que la zone ou le conteneur.Grilles CSS, Flexbox
Navigation segmentéeUn motif de navigation où certains liens sont séparés des autres.Flexbox, {{cssxref("margin")}}
Navigation avec un fil d'Ariane (breadcrumb)Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages.Flexbox
Liste de groupes avec indicateursAfficher une liste d'éléments avec chacun un indicateur numérique.Flexbox, Alignement des boîtes
PaginationComment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple).Flexbox, Alignement des boîtes
CarteUn composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes.Grilles CSS
Envelopper une grille (grid wrapper)Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords.Grilles CSS
+ +

Contribuer en créant une recette

+ +

MDN est un wiki auquel vous pouvez contribuer, y compris en ajoutant une recette à celles-ci ! Voir cette page pour un modèle ainsi que les règles à suivre pour créer votre propre exemple.

diff --git a/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html b/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html new file mode 100644 index 0000000000..6c3f1d171f --- /dev/null +++ b/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html @@ -0,0 +1,53 @@ +--- +title: Liste de groupes avec indicateurs +slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/Layout_cookbook/List_group_with_badges +--- +

{{CSSRef}}

+ +

Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (badge).

+ +

A list of items with a badge indicating a count displayed to the right of the text.

+ +

Spécifications sommaires

+ +

Les éléments de la liste doivent être affichés avec les indicateurs alignés à droite, quel que soit le volume de contenu pour un élément. L'indicateur doit être centré verticalement s'il y a plus d'une ligne de contenu.

+ +

Exemple appliqué

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}

+ +

Note : Télécharger l'exemple.

+ +

Choix effectués

+ +

Les boîtes flexibles sont un outil plutôt pratique pour constituer ce motif et permettent d'adapter simplement la disposition.

+ +

Pour s'assurer que le texte et l'indicateur soient bien alignés, on utilise la propriété justify-content avec la valeur space-between. Ainsi, l'espace supplémentaire est placé entre les éléments. Vous pouvez retirer cette propriété dans l'exemple ci-avant pour voir le badge se déplacer à la fin du texte.

+ +

Pour aligner le contenu horizontalement, on utilise la propriété align-items afin d'aligner le texte et l'indicateur sur l'axe secondaire. Si on veut que l'indicateur soit aligné en haut du contenu, on pourra utiliser align-items: flex-start à la place.

+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes utilisées ici peuvent avoir une prise en charge différentes par les navigateurs. Se référer à chacun des tableaux pour avoir plus de détails.

+ + + +

justify-content

+ +

{{Compat("css.properties.justify-content")}}

+ +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/media_objects/index.html b/files/fr/web/css/layout_cookbook/media_objects/index.html new file mode 100644 index 0000000000..129ba33c40 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/media_objects/index.html @@ -0,0 +1,89 @@ +--- +title: Objets avec média +slug: Web/CSS/Layout_cookbook/Media_objects +tags: + - CSS + - Guide + - Recette +translation_of: Web/CSS/Layout_cookbook/Media_objects +--- +
{{CSSRef}}
+ +

Le motif Media Object (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. Intitulé ainsi par Nicole Sullivan, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).

+ +

+ +

Spécifications sommaires

+ +

Voici ce qu'on souhaite obtenir :

+ +
    +
  • Un empilement des deux zones sur mobile et deux colonnes sur ordinateur
    • +
  • L'image peut être à gauche ou à droite
    • +
  • L'image peut être petite ou grande
    • +
  • Les objets avec média peuvent être imbriqués
    • +
  • L'objet avec média devrait dégager l'espace pour le contenu, quel que soit le côté le plus grand.
    • +
+ +

Recette

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}

+ +
+

Note : Télécharger cet exemple.

+
+ +

Choix effectués

+ +

On a ici choisi d'utiliser une grille pour réaliser cet objet. cela permet de contrôler les deux dimensions lorsqu'on en a besoin. Ainsi, si on a besoin d'un pied de page avec un contenu au dessus, le pied de page peut être poussé sous l'objet.

+ +

La grille permet également d'utiliser {{cssxref("fit-content")}} pour la piste contenant l'image. En utilisant fit-content avec une taille maximale de 200 pixels, lorsqu'on a une petite image (une icône), la piste est réduite à la taille de cette image. Si l'image est plus grande, la piste ne sera pas plus large que 200 pixels, de plus, l'image ayant {{cssxref("max-width ")}} avec 100%, elle sera redimensionnée afin de pouvoir tenir dans la colonne.

+ +

En utilisant {{cssxref("grid-template-areas")}} pour dessiner la disposition, on peut voir le motif dans la feuille de style CSS. La grille est définie lorsqu'on a max-width qui vaut au moins 500 pixels et on a donc un empilement pour les plus petits écrans.

+ +

En ajoutant une classe media-flip, on fournit une disposition alternative qui permet de changer le côté sur lequel l'image est affichée.

+ +

Lorsqu'on imbrique un objet dans un autre, il faut le placer dans la deuxième piste en mode normal et sur la première lorsqu'on choisit d'inverser le côté de l'image.

+ +

Méthodes alternatives

+ +

Il existe différentes méthodes alternatives permettant d'obtenir ce résultat selon les navigateurs que vous souhaitez prendre en charge. Une méthode assez générique consiste à placer l'image en flottante à gauche et d'ajouter un dégagement sur la boîte afin qu'elle contienne bien tous les éléments flottants.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}

+ +
+

Note : Télécharger cet exemple.

+
+ +

Une fois que les éléments flottants sont des éléments de grille, les dégagements ne s'appliquent plus et il n'est donc pas nécessaire de retirer quoi que ce soit sur les dégagements.

+ +

En revanche, il faudra retirer les marges appliquées aux objets et les largeurs superflues pour la grille (la propriété {{cssxref("gap")}} permet de contrôler l'espace entre et les pistes gèrent le reste du dimensionnement).

+ +
    +
+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+ + + +

grid-template-areas

+ +

{{Compat("css.properties.grid-template-areas")}}

+ +

float

+ +

{{Compat("css.properties.float")}}

+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html b/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html new file mode 100644 index 0000000000..8ba8d1ea7e --- /dev/null +++ b/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html @@ -0,0 +1,49 @@ +--- +title: Fil d'Ariane (breadcrumb) +slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb +tags: + - CSS + - Navigation +translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +--- +
{{CSSRef}}
+ +

La navigation avec un fil d'Ariane (breadcrumb) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane qui permette de revenir à la page de départ.

+ +

Links displayed inline with separators

+ +

Spécifications sommaires

+ +

Les différents éléments formant le chemin sont affichés sur une ligne avec un séparateur qui permet d'identifier la hiérarchie entre les pages.

+ +

Exemple appliqué

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

Choix effectués

+ +

L'ensemble est organisé dans un conteneur flexible. Les séparateurs sont générés à partir de pseudo-éléments et le séparateur choisi ici peut être modifié à votre convenance.

+ +

Accessibilité

+ +

On utilise ici les attributs aria-label et aria-current afin d'aider les utilisateurs à comprendre cette navigation et l'emplacement de la page actuelle dans la structure. Pour plus d'informations, voir les liens ci-après.

+ +

Compatibilité des navigateurs

+ + + +

Boîtes flexibles

+ +

{{Compat("css.properties.flex")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" "b/files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" new file mode 100644 index 0000000000..24cc872422 --- /dev/null +++ "b/files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" @@ -0,0 +1,48 @@ +--- +title: Navigation segmentée +slug: Web/CSS/Layout_cookbook/Navigation_segmentée +tags: + - CSS + - Navigation + - flexbox +translation_of: Web/CSS/Layout_cookbook/Split_Navigation +--- +
{{CSSRef}}
+ +

Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.

+ +

Items separated into two groups.

+ +

Spécifications sommaires

+ +

Une telle barre de navigation consiste généralement à avoir un élément écarté des autres. Pour cela, on va pouvoir utiliser les boîtes flexibles sans avoir besoin de deux conteneurs flexibles.

+ +

Exemple appliqué

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}

+ +
+

Note : Télécharger cet exemple.

+
+ +

Choix effectués

+ +

Ce composant utilise les marges automatiques et les boîtes flexibles pour séparer l'élément voulu.

+ +

Une marge automatique absorbe tout l'espace disponible sur la direction à laquelle elle est appliquée. C'est comme cela qu'on peut centrer un bloc avec des marges automatiques, de chaque côté du bloc, la marge essaye de consommer le plus d'espace possible et pousse le bloc au milieu.

+ +

Dans notre exemple, c'est la marge à gauche du dernier élément qui est automatique et qui consomme l'espace, poussant ainsi l'élément sur la droite. Pour déplacer la séparation, on peut appliquer la classe push à n'importe quel élément de la liste.

+ +

Compatibilité des navigateurs

+ + + +

Boîtes flexibles

+ +

{{Compat("css.properties.flex")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/pagination/index.html b/files/fr/web/css/layout_cookbook/pagination/index.html new file mode 100644 index 0000000000..5ab2bf1d11 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/pagination/index.html @@ -0,0 +1,81 @@ +--- +title: Pagination +slug: Web/CSS/Layout_cookbook/Pagination +tags: + - CSS + - Guide + - Recette + - flexbox +translation_of: Web/CSS/Layout_cookbook/Pagination +--- +

{{CSSRef}}

+ +

Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).

+ +

Links to sets of pages in a paged listing

+ +

Spécifications sommaires

+ +

Pour cette méthode de navigation, les éléments sont généralement affichés sur une ligne. Afin de s'assurer que la pagination est compréhensible pour les utilisateurs d'outils d'assistance, on balise les éléments dans une liste avec un élément {{htmlelement("nav")}} et on utilise CSS afin d'organiser visuellement l'ensemble sur une ligne.

+ +

Généralement, l'outil de navigation sera centré horizontalement et placé sous le contenu.

+ +

Recette

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple.

+
+ +

Choix effectués

+ +

Pour obtenir ce résultat, on utilise les boîtes flexibles avec une conteneur flexible imbriqué dans un autre. L'élément {{htmlelement("nav")}} est utilisé comme conteneur flexible afin de pouvoir en centrer le contenu grâce à la propriété {{cssxref("justify-content")}}.

+ +

La liste est elle-même un conteneur flexible qui permet d'organiser ces éléments sur une lignes. Pour espacer les éléments, on utilise la propriété {{cssxref("margin")}} pour espacer les éléments entre eux.

+ +

Méthodes alternatives

+ +

Lorsque la propriété {{cssxref("column-gap")}} sera plus largement implémentée par les navigateurs, celle-ci pourra être utilisée à la place des marges pour espacer les éléments flexibles.

+ +
.pagination {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  column-gap: 2px;
+}
+
+ +

Accessibilité

+ +

Il est nécessaire qu'une personne utilisant un lecteur d'écran comprenne comment la navigation fonctionne et que cliquer sur un lien envoie vers une autre page. Aussi, on ajoute aria-label="pagination" sur l'élément <nav>.

+ +

On a également ajouté du contenu qui pourra être lu par le lecteur d'écran mais qui est masqué visuellement et on a ajouter l'attribut aria-hidden sur les flèches de pagination.

+ +

Voir la section « Voir aussi » en fin d'article pour divers liens portants sur l'accessibilité.

+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+ + + +

justify-content

+ +

{{Compat("css.properties.justify-content")}}

+ +

column-gap in Flex layout

+ +

{{Compat("css.properties.column-gap.flex_context")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/left/index.html b/files/fr/web/css/left/index.html new file mode 100644 index 0000000000..e616347698 --- /dev/null +++ b/files/fr/web/css/left/index.html @@ -0,0 +1,218 @@ +--- +title: left +slug: Web/CSS/left +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/left +--- +
{{CSSRef}}
+ +

La propriété left permet de définir une partie de la position des éléments positionnés. Elle n'a aucun effet pour les éléments non-positionnés.

+ +
{{EmbedInteractiveExample("pages/css/left.html")}}
+ + + +

Pour les éléments positionnés de façon absolue (ceux pour lesquels {{cssxref("position")}}: absolute ou position: fixed), elle définit la distance entre le bord gauche de la marge de l'élément et le bord gauche de son bloc englobant (le bloc englobant étant l'ancêtre par rapport auquel l'élément est positionné de façon relative).

+ +

Pour les éléments positionnés grâce à {{cssxref("position")}}: relative, c'est le décalage ajouté à gauche de l'élément (qui est donc déplacé vers la droite de sa position normale).

+ +

Pour les éléments positionnés grâce à {{cssxref("position")}}: sticky, cette propriété se comportera comme avec relative lorsque l'élément fait partie de la zone d'affichage (viewport) et comme avec fixed lorsque l'élément est en dehors de la zone d'affichage.

+ +

Lorsque {{cssxref("position")}}: static, la propriété left n'a aucun effet.

+ +

Si les deux propriétés left et {{cssxref("right")}} sont définies et que l'élément ne peut pas s'étendre afin de satisfaire ces contraintes, la position de l'élément est « sur-définie ». Dans ce cas, la valeur left aura la priorité si le conteneur est orienté de gauche à droite (dans ce cas, la valeur calculée de right vaudra -left) et si le conteneur est orienté de droite à gauche, c'est la valeur right qui aura la priorité (auquel cas, la valeur calculée de left vaudra -right).

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+left: 3px;
+left: 2.4em;
+
+/* Valeurs proportionnelles à   */
+/* la largeur du bloc englobant */
+/* Type <percentage>            */
+left: 10%;
+
+/* Valeur avec un mot-clé */
+left: auto;
+
+/* Valeurs globales */
+left: inherit;
+left: initial;
+left: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Une valeur de longueur qui peut être positive, nulle ou négative et qui représente : +
    +
  • La distance au bord gauche du bloc englobant pour les éléments positionnés de façon absolue
    • +
  • Le décalage vers la gauche qui est appliqué à l'élément par rapport à sa position normale dans le flux pour les éléments positionnés de façon relative.
    • +
+ +

Pour plus d'informations sur les valeurs possibles, voir {{cssxref("<length>")}}.

+
+
<percentage>
+
Une valeur en pourcentage (type {{cssxref("<percentage>")}} par rapport à la largeur du bloc englobant.
+
auto
+
Un mot-clé qui représente : +
    +
  • Pour les éléments positionnés de façon absolue : la position de l'élément selon la valeur de la propriété {{cssxref("right")}}, on considère width: auto comme une largeur basée sur le contenu.
    • +
  • Pour les éléments positionnés de façon relative : le décalage à gauche de l'élément par rapport à sa position initiale selon la valeur de la propriété {{cssxref("right")}}. SI right vaut également auto, il n'y a aucun décalage.
    • +
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#exemple_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#exemple_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#exemple_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#exemple_4 {
+  width:200px;
+  height:200px;
+  position:absolute;
+  bottom:10px;
+  right:20px;
+  background-color:#FFC7E4;
+}
+ +

HTML

+ +
<div id="wrap">
+  <div id="exemple_1">
+    <pre>
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    </pre>
+    <p>Le seul élément englobant pour ce div est la fenêtre principale. Elle se positionne par rapport à elle.</p>
+  </div>
+
+  <div id="exemple_2">
+    <pre>
+      position: relative;
+      top: 0;
+      right: 0;
+    </pre>
+    <p>La position est relative par rapport aux voisins.</p>
+  </div>
+
+  <div id="exemple_3">
+    <pre>
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    </pre>
+    <p>La position est relative par rapport au div voisin mais on le retire du flux.</p>
+
+    <div id="exemple_4">
+      <pre>
+        position: absolute;
+        bottom: 10px;
+        right: 20px;
+      </pre>
+      <p>La position est absolue à l'intérieur d'un parent positionné de façon relative.</p>
+    </div>
+  </div>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples',1200,650)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '#animatable-css', 'left')}}{{Spec2('CSS3 Transitions')}}left peut désormais être animée.
{{SpecName('CSS3 Positioning', '#propdef-left', 'left')}}{{Spec2('CSS3 Positioning')}}Décrit le comportement pour le positionnement adhérent (sticky).
{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.left")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("position")}}
    • +
  • {{cssxref("right")}}
    • +
  • {{cssxref("bottom")}}
    • +
  • {{cssxref("top")}}
    • +
diff --git a/files/fr/web/css/length-percentage/index.html b/files/fr/web/css/length-percentage/index.html new file mode 100644 index 0000000000..9f58f905f2 --- /dev/null +++ b/files/fr/web/css/length-percentage/index.html @@ -0,0 +1,55 @@ +--- +title: +slug: Web/CSS/length-percentage +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/length-percentage +--- +
{{CSSRef}}
+ +

Le type de donnée <length-percentage> représente une valeur qui peut être une valeur de type {{Cssxref("length")}} ou une valeur de type {{Cssxref("percentage")}}.

+ +

Syntaxe

+ +

Se référer à la documentation des types {{Cssxref("length")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles pour chacun de ces types.

+ +

Utilisation avec calc()

+ +

Lorsqu'une valeur de type <length-percentage> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une longueur et qu'il peut alors être utilisé au sein d'une expression {{cssxref("calc", "calc()")}}. Ainsi, toutes les valeurs qui suivent sont acceptables pour la propriété {{Cssxref("width")}} :

+ +
width: 200px;
+width: 20%;
+width: calc(100% - 200px);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#mixed-percentages', '<length-percentage>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#mixed-percentages', '<length-percentage>')}}{{Spec2('CSS3 Values')}}Définition du type <length-percentage>. Ajout de calc()
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.length-percentage")}}

diff --git a/files/fr/web/css/length/index.html b/files/fr/web/css/length/index.html new file mode 100644 index 0000000000..33252fc014 --- /dev/null +++ b/files/fr/web/css/length/index.html @@ -0,0 +1,182 @@ +--- +title: +slug: Web/CSS/length +tags: + - CSS + - Reference + - Type + - Type de donnée +translation_of: Web/CSS/length +--- +
{{CSSRef}}
+ +

Le type de données CSS <length> correspond à une mesure de distance.

+ +

De nombreuses propriétés CSS utilisent des valeurs de longueurs. Entre autres, on pourra énumérer {{cssxref("width")}}, {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("font-size")}}, {{cssxref("border-width")}}, {{cssxref("text-shadow")}}, …

+ +

Pour certaines propriétés, l'utilisation d'une longueur négative est une erreur de syntaxe, pour d'autres, elles sont autorisées.

+ +

On notera que bien que les valeurs {{cssxref("<percentage>")}} soient aussi des dimensions CSS et acceptées par certaines propriétés CSS acceptant les valeurs <length>, ce sont bien deux types distincts. Voir {{cssxref("<length-percentage>")}}.

+ +

Syntaxe

+ +

Une longueur est un nombre (type {{cssxref("<number>")}}) immédiatement suivi d'une unité de longueur (px, em, pc, in, mm…). Comme toutes les dimensions CSS, il n'y aucun espace entre le nombre et l'unité. L'unité est optionnelle pour la valeur nulle.

+ +
+

Note : Certaines propriétés permettent d'utiliser des longueurs négatives alors que d'autres n'acceptent que des valeurs positives.

+
+ +

Unités

+ +

Unités de longueur relatives

+ +

Les longueurs relatives permettent d'indiquer une longueur basée sur la taille d'un caractère dans une police donnée, sur la taille de l'élément parent ou sur la taille de la zone d'affichage (viewport). Les unités associées permettent d'indiquer à quelle taille elles se rapportent.

+ +
Longueurs liées à la police
+ +

Les unités relatives aux polices de caractères permettent d'obtenir des longueurs basées sur la taille d'un caractère ou la caractéristique de la police utilisée pour l'élément courant ou pour un élément parent.

+ +
+
cap
+
Cette unité représente la taille nominale d'une lettre capitale pour la police ({{cssxref("font")}}) de l'élément.
+
ch
+
Cette unité représente la largeur du caractère « 0 » (zéro, le caractère Unicode U+0030) dans la police actuelle. Dans les cas où il est impossible ou trop complexe de déterminer la taille du glyphe pour « 0 », on prend l'hypothèse que celui-ci mesure 0.5em de large sur 1em de haut.
+
em
+
+

Cette unité représente la {{cssxref("font-size")}} calculée de l'élément. Si utilisée avec la propriété {{cssxref("font-size")}}, elle représente la taille de police héritée de l'élément.

+ +
+

Cette unité est souvent utilisée pour créer des mises en page s'adaptant à la taille des contenus, qui gardent le rythme vertical de la page, même lorsque l'utilisateur change la taille des polices. Les propriétés CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-top")}} ont souvent des dimensions exprimées en em.

+
+
+
ex
+
Cette unité représente la hauteur d'x de la {{cssxref("font")}} de l'élément. Il peut s'agir généralement de la hauteur des lettres bas de casse de la police. 1ex ≈ 0.5em dans de nombreuses polices.
+
ic
+
Cette unité représente la largeur entre le début du caractère “水” (U+6C34) et le début du caractère suivant selon la police utilisée et après que les transformations qui modifient la taille des caractères aient été appliquées.
+
lh
+
Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}}, convertie en longueur absolue, de l'élément sur lequel elle est utilisée.
+
rem
+
+

Cette unité représente la {{cssxref("font-size")}} de l'élément racine (par exemple la taille de la police de l'élément {{HTMLElement("html")}}). Quand utilisée avec {{cssxref("font-size")}} sur l'élément racine, elle représente sa valeur initiale.

+ +
+

Cette unité est utile pour la création de mises en page s'adaptant à la taille des contenus. Si elle n'est pas supportée par les navigateurs ciblés, ces mises en pages peuvent être réalisées en utilisant l'unité em, mais la réalisation est un petit peu plus complexe.

+
+
+
rlh
+
Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}} de l'élément racine, convertie en longueur absolue. Lorsque cette unité est utilisée pour les propriétés {{cssxref("font-size")}} ou {{cssxref("line-height")}} de l'élément racine, l'unité rlh fait référence aux valeurs initiales des propriétés.
+
+ +
Longueurs liées au viewport
+ +

Les longueurs liées au viewport définissent une longueur relative à la taille du viewport, qui correspond à la partie visible du document.

+ +

Dans un bloc de déclaration {{cssxref("@page")}}, l'utilisation des longueurs liées au viewport sont invalides et la déclaration sera ignorée.

+ +
+
vb
+
1 % de la taille du bloc englobant initial selon la direction de bloc (la direction orthogonale au sens d'écriture) de l'élément racine.
+
vh
+
1/100e de la hauteur du viewport.
+
vi
+
1 % de la taille du bloc englobant initial selon la direction en ligne (la direction du sens d'écriture) de l'élément racine.
+
vw
+
1/100e de la largeur du viewport.
+
vmin
+
1/100e du côté le plus petit du viewport.
+
vmax
+
1/100e du côté le plus grand du viewport.
+
+ +

Unités de longueur absolues

+ +

Les unités de longueur absolues représentent une mesure physique. Cela est réalisé en faisant correspondre une des unités à une unité physique et en définissant les autres relativement à elle. La correspondance est différente pour les périphériques basse-résolution, tels que les écrans, et pour les périphériques haute-résolution, comme les imprimantes.

+ +

Pour les périphériques ayant un faible nombre de points par pouce, l’unité px représente le pixel de référence physique et les autres sont définies de façon relative à lui. Ainsi, 1in est définit comme 96px, ce qui équivaut à 72pt. Sur de tels périphériques, cette définition à pour conséquence que la longueur exprimée en pouces (in), centimètres (cm) et millimètres (mm) ne correspondent pas forcément à la longueur de l’unité physique du même nom.

+ +

Pour les périphériques ayant un nombre de points par pouce élevé, les pouces (in), centimètres (cm) et millimètres (mm) sont définis comme leur équivalent physique. Par conséquent, l’unité px est définie comme étant relavite à eux (1/96 de pouce).

+ +
+

Note : Les utilisateurs peuvent augmenter la taille des polices pour des raisons d’accessibilité. Pour permettre des mises en page adaptées quelque soit la taille des polices, utilisez uniquement des unités de longueur quand les caractéristiques physiques du média de sortie sont connues, telles que les images matricielles (bitmap) et sinon, privilégiez les unités relatives telles que em et rem (notamment pour {{cssxref("font-size")}}).

+
+ +
+
px
+
Pour l'affichage sur écran, correspond typiquement à un pixel de l'affichage. Pour les écrans en haute résolution et les imprimantes, un pixel CSS correspond à plusieurs pixels du périphérique, de sorte que le nombre de pixels par pouce (ppi) reste aux alentours de 96.
+
mm
+
Un millimètre. Pour l'affichage sur écran, le nombre de pixels par millimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
+
Q{{experimental_inline}}
+
Un quart de millimètre (1/40e de centimètre).
+
cm
+
Un centimètre (ou 10 millimètres). Pour l'affichage sur écran, le nombre de pixels par centimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
+
in
+
Un pouce (soit 2,54 centimètres). Pour l'affichage sur écran, le nombre de pixels par pouce est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
+
pt
+
Un point pica (soit 1/72e de pouce). Pour l'affichage sur écran, le nombre de pixels par point est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
+
pc
+
Un pica (soit 12 points, soit 1/6e de pouce). Pour l'affichage sur écran, le nombre de pixels par pica est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
+
mozmm {{non-standard_inline}}, retiré avec Firefox 59
+
Une unité expérimentale qui tente de représenter exactement un millimètre, quelque soit la taille ou la résolution de l’affichage. C’est rarement ce que nous voulons, mais peut être utile en particulier pour les terminaux mobiles.
+
+ +

Unités CSS et points par pouce

+ +

L’unité in ne représente pas un pouce physique de l’écran, mais 96px. Celà signifie que quelque soit la densité de pixel réelle de l’écran, elle est supposée correspondre à 96dpi. Sur les périphériques dotés d’une plus grande densité de pixel, 1in fera moins d’1 pouce physique. De la même manière, mm, cm, et pt ne sont pas des longueurs absolues.

+ +

Quelques exemples particuliers :

+ +
    +
  • 1in est toujours égal à 96px,
    • +
  • 3pt est toujours égal à 4px,
    • +
  • 25.4mm est toujours égal à 96px.
    • +
+ +

Interpolation

+ +

Les valeurs du type <length> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. L'interpolation se fait sur les valeurs calculées. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation","",1)}} associée à l'animation.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#lengths', '<length>')}}{{Spec2('CSS4 Values')}}Ajout des unités vi, vb, ic, lh et rlh.
{{SpecName('CSS3 Values', '#lengths', '<length>')}}{{Spec2('CSS3 Values')}}Ajout des unités ch, rem, vw, vh, vmin, vmax
{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}{{Spec2('CSS2.1')}}Définition explicite des unités em, pt, pc, px (la définition était implicite pour CSS1)
{{SpecName('CSS1', '#length-units', '<length>')}}{{Spec2('CSS1')}}Définition initiale. Définition implicite des unités em, pt, pc et px.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.length")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/letter-spacing/index.html b/files/fr/web/css/letter-spacing/index.html new file mode 100644 index 0000000000..9a2f305952 --- /dev/null +++ b/files/fr/web/css/letter-spacing/index.html @@ -0,0 +1,131 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/letter-spacing +--- +
{{CSSRef}}
+ +

La propriété letter-spacing définit l'interlettre utilisée pour les caractères qui composent le texte.

+ +
{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* Valeur avec mot-clé */
+letter-spacing: normal;
+
+/* Valeurs globales */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+
+ +

Valeurs

+ +
+
normal
+
L'interlettre est dictée par la police utilisée. À la différence de 0, cette valeur permet à l'agent utilisateur de modifier l'espace entre les caractères afin de le justifier.
+
<length>
+
Cette valeur indique l'espace ajouté à l'espace par défaut. Les valeurs peuvent être négatives mais les limites imposées dépendent de l'implémentation du moteur. Les agents utilisateurs ne pourront plus augmenter ou réduire l'interlettre afin de justifier le texte. Pour les différentes unités possibles, se référer à la page {{cssxref("<length>")}}.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.premier    { letter-spacing: 0.4em; }
+.deuxieme   { letter-spacing: 1em; }
+.troisieme  { letter-spacing: -0.05em; }
+.quatrieme  { letter-spacing: 6px; }
+ +

HTML

+ +
<p class="premier">Et voici l'interlettre</p>
+<p class="deuxieme">Et voici l'interlettre</p>
+<p class="troisieme">Et voici l'interlettre</p>
+<p class="quatrieme">Et voici l'interlettre</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 440, 185)}}

+ +

Accessibilité

+ +

Utiliser une valeur trop grande (positive ou négative) pour letter-spacing rendra les mots illisibles. Si une valeur positive trop importante est utilisée, les lettres seront trop éloignées les unes des autres et on ne pourra pas distinguer les mots. Si une valeur négative trop faible est employée, les lettres se chevaucheront et on ne pourra pas lire le texte.

+ +

L'espacement doit être déterminé au cas par cas car chaque famille de polices utilise des caractères de largeurs différentes. Il n'existe pas de valeur unique qui permette de s'assurer que, quelle que soit la police utilisée, le texte soit lisible.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}{{Spec2('CSS3 Text')}}Aucune modification.
{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}{{Spec2('CSS3 Transitions')}}letter-spacing peut désormais être animée.
{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}{{Spec2('CSS2.1')}}Aucune modification.
{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}{{Spec2('SVG1.1')}}Définition initiale pour SVG.
{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.letter-spacing")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("font-kerning")}}
    • +
diff --git a/files/fr/web/css/line-break/index.html b/files/fr/web/css/line-break/index.html new file mode 100644 index 0000000000..8395c08a3a --- /dev/null +++ b/files/fr/web/css/line-break/index.html @@ -0,0 +1,70 @@ +--- +title: line-break +slug: Web/CSS/line-break +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/line-break +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété line-break définit la façon dont les sauts de ligne sont gérés. Cette propriété affecte uniquement les textes en chinois, japonais ou coréen (CJK).

+ +
/* Valeurs avec un mot-clé */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+
+/* Valeurs globales */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
auto
+
Les sauts de ligne sont gérés avec la règle par défaut.
+
loose
+
Les sauts de ligne sont appliqués afin d'obtenir des lignes courtes (comme pour un journal). L'agent utilisateur fixera une règle souple en fonction des conventions liées à la langue utilisée.
+
normal
+
L'agent utilisateur utilisera les règles normales liées à la langue utilisée
+
strict
+
L'agent utilisateur utilisera des règles strictes et passera à la ligne dès que ce sera nécessaire au vu des caractères du langage utilisé.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}{{Spec2('CSS3 Text')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.line-break")}}

diff --git a/files/fr/web/css/line-height-step/index.html b/files/fr/web/css/line-height-step/index.html new file mode 100644 index 0000000000..7006bee134 --- /dev/null +++ b/files/fr/web/css/line-height-step/index.html @@ -0,0 +1,85 @@ +--- +title: line-height-step +slug: Web/CSS/line-height-step +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/line-height-step +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété line-height-step définit le pas de hauteur des boîtes de ligne. Quand le pas est positif, les hauteurs des boîtes de ligne sont arrondies au pas le plus proche. Les valeurs négatives sont invalides.

+ +
/* Valeurs avec une longueur */
+line-height-step: 18pt;
+
+ +

Syntaxe

+ +

La propriété line-height-step peut être définie avec une valeur de type <length>.

+ +

Valeurs

+ +
+
<length>
+
La longueur indiquée est utilisée pour calculer le « pas » pour la hauteur de la boîte de chaque ligne. Voir {{cssxref("<length>")}} pour plus d'informations sur ce type de valeur.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Exemples

+ +

Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraphe est arrondie à l'unité supérieure. La boîte de la ligne pour l'élément <h1> ne tient pas sur une unité et en occupe donc deux (mais est toujours centrée sur ces deux unités).

+ +
:root {
+  font-size: 12pt;
+  --my-grid: 18pt;
+  line-height-step: var(--my-grid);
+}
+h1 {
+  font-size: 20pt;
+  margin-top: calc(2 * var(--my-grid));
+}
+ +

Voici le résultat obtenu avec une capture d'écran :

+ +

How the line-height-step property affects the appearance of text.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Rhythmic Sizing', '#line-height-step', 'line-height-step')}}{{Spec2('CSS Rhythmic Sizing')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.line-height-step")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("font")}}
    • +
  • {{cssxref("font-size")}}
    • +
  • {{cssxref("line-height")}}
    • +
diff --git a/files/fr/web/css/line-height/index.html b/files/fr/web/css/line-height/index.html new file mode 100644 index 0000000000..dc8f2b105c --- /dev/null +++ b/files/fr/web/css/line-height/index.html @@ -0,0 +1,187 @@ +--- +title: line-height +slug: Web/CSS/line-height +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/line-height +--- +
{{CSSRef}}
+ +

La propriété line-height définit la hauteur de la boîte d'une ligne.

+ +

Sur les éléments de bloc, la propriété line-height indique la hauteur minimale des lignes au sein de l'élément. Sur les éléments en ligne qui ne sont pas remplacés, line-height indique la hauteur utilisée pour calculer la hauteur de la boîte d'une ligne.

+ +
{{EmbedInteractiveExample("pages/css/line-height.html")}}
+ + + +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+line-height: normal;
+
+/* Type <number> */
+/* S'il n'y a pas d'unité, cela
+   représente un facteur multiplicateur
+   de la taille de la police appliquée à
+   l'élément */
+line-height: 3.5;
+
+/* Valeur de longueur */
+/* Type <length>      */
+line-height: 3em;
+
+/* Valeurs proportionnelles */
+/* Type <percentage>        */
+line-height: 34%;
+
+/* Valeurs globales */
+line-height: inherit;
+line-height: initial;
+line-height: unset;
+
+ +

La propriété line-height peut être définie grâce :

+ +
    +
  • à un nombre (une valeur de type <number>)
    • +
  • à une longueur (une valeur de type <length>)
    • +
  • à un pourcentage (une valeur de type <percentage>)
    • +
  • au mot-clé normal
    • +
+ +

Valeurs

+ +
+
normal
+
Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2  selon la valeur de font-family.
+
<number>
+
La valeur utilisée est sans unité (type {{cssxref("<number>")}}) et correspond à un facteur multiplicateur de la taille de fonte utilisée. La valeur calculée est la même que celle définie avec <number>. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définir line-height et éviter les effets de l'héritage.
+
<length>
+
La valeur de longueur (type {{cssxref("<length>")}}) est utilisée pour calculer la hauteur de la boîte de la ligne. Les différentes unités qui peuvent être utilisées sont décrites avec la page {{cssxref("<length>")}}. Les valeurs exprimées en em peuvent produire des résultats inattendus.
+
<percentage>
+
La valeur exprimée est relative à la taille de fonte utilisée pour l'élément. La valeur calculée sera le pourcentage (type {{cssxref("<percentage>")}}) indiqué, multiplié par la taille calculée de la police de l'élément. Voir la section Notes pour plus de précisions sur le comportement de ce type et des valeurs exprimées en em.
+
-moz-block-height {{non-standard_inline}}
+
La hauteur de la ligne correspond à la hauteur du contenu pour le bloc courant.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
/* Toutes les règles qui suivent
+   fourniront un résultat équivalent */
+
+div { line-height: 1.2;   font-size: 10pt }   /* number */
+div { line-height: 1.2em; font-size: 10pt }   /* length */
+div { line-height: 120%;  font-size: 10pt }   /* percentage */
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }
+ +

Notes

+ +
    +
  • Plus souvent, on utilisera la propriété raccourcie {{cssxref("font")}} plutôt que line-height. Pour cette propriété raccourcie, il est cependant nécessaire d'avoir une valeur pour la propriété font-family.
    • +
+ +

Gestion de l'héritage et valeurs sans unité

+ +

Dans cet exemple, on voit qu'il est préférable d'utiliser des valeurs de type {{cssxref("<number>")}} plutôt que des valeurs de longueur (type {{cssxref("<length>")}}.

+ +

On utilisera deux éléments {{HTMLElement("div")}}. Le premier aura une bordure verte et une valeur sans unité. Le second aura une bordure rouge et une valeur de longueur

+ +

CSS

+ +
.green {
+  line-height: 1.1;
+  border: solid limegreen;
+}
+.red {
+  line-height: 1.1em;
+  border: solid red;
+}
+h1 {
+  font-size: 30px;
+}
+.box {
+  width: 18em;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+}
+
+ +

HTML

+ +
<div class="box green">
+ <h1>Avoid unexpected results by using unitless line-height</h1>
+  length and percentage line-heights have poor inheritance behavior ...
+</div>
+
+<div class="box red">
+ <h1>Avoid unexpected results by using unitless line-height</h1>
+  length and percentage line-heights have poor inheritance behavior ...
+</div>
+
+<!-- La première hauteur pour <h1> est calculée à partir de sa propre hauteur  (30px × 1.1) = 33px  -->
+<!-- La hauteur du deuxième <h1> est basée sur la hauteur du div (15px × 1.1) = 16.5px ... -->
+
+ +

Résultat

+ +

{{EmbedLiveSample("Gestion_de_l'héritage_et_valeurs_sans_unité", '100%', '200', '')}}

+ +

Accessibilité

+ +

Il est nécessaire d'utiliser une valeur minimale de 1.5 pour la propriété line-height lorsqu'on l'applique sur le contenu des paragraphes principaux. Cela aidera les personnes ayant du mal à lire et les personnes dyslexiques. Utiliser une valeur sans unité permet de garantir une mise à l'échelle proportionnelle lorsqu'on zoome/dézoome.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}}{{Spec2('CSS3 Transitions')}}line-height peut désormais être animée.
{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}{{Spec2('CSS2.1')}}Aucun changement.
{{SpecName('CSS1', '#line-height', 'line-height')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.line-height")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("font")}}
    • +
  • {{cssxref("font-size")}}
    • +
diff --git a/files/fr/web/css/linear-gradient()/index.html b/files/fr/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..155ead9fe4 --- /dev/null +++ b/files/fr/web/css/linear-gradient()/index.html @@ -0,0 +1,296 @@ +--- +title: linear-gradient +slug: Web/CSS/linear-gradient() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/linear-gradient() +--- +
{{CSSRef}}
+ +

La fonction linear-gradient() permet de créer une image (type {{cssxref("<image>")}}) représentant un dégradé de couleur linéaire. Le résultat de la fonction sera un objet CSS {{cssxref("<gradient>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}
+ + + +

Comme pour les autres types de dégradés, la valeur obtenue n'est pas une couleur CSS (type {{cssxref("<color>")}} mais une image sans dimension intrinsèque. Autrement dit, celle-ci ne possède aucune taille « naturelle » ou préférée, sa taille réelle correspondra à la taille de l'élément auquel elle est appliquée.

+ +

Les dégradés linéaires sont définis par un axe : la ligne du dégradé. Chaque point de cette ligne aura une couleur différente. Les lignes perpendiculaires à la ligne du dégradé ont chacune une couleur qui est celle du point se situant sur la ligne du dégradé à ce niveau.

+ +

linear-gradient.png

+ +

La ligne du dégradé est définie par le centre de la boîte contenant le dégradé et par un angle. Les couleurs du dégradé sont définies par différents points : le point de départ et le point d'arrivée. Entre ces deux points, on peut avoir différents points d'arrêt définissant la couleur à ce niveau.

+ +

Le point de départ utilise la couleur initiale du dégradé. Ce point est défini comme l'intersection de la ligne du dégradé et de la ligne perpendiculaire à cette droite et qui passe par le coin de la boîte situé dans le même quadrant.

+ +

De la même façon, le point d'arrivée est le point de la ligne du dégradé où la couleur finale est atteinte. Il peut également être défini comme l'intersection entre la ligne du dégradé et une ligne perpendiculaire, passant par le coin le plus proche.

+ +

Ces définitions plutôt complexes ont des conséquence plutôt intéressantes : les coins les plus proches de ces deux points (parfois appelés « coins magiques ») ont les couleurs de départ et de fin.

+ +

Il est possible de définir des couleurs intermédiaires grâce à des points d'arrêt de couleurs qui seront situés sur la ligne du dégradé. Cela permet de créer une transition non linéaire ou d'utiliser plusieurs couleurs sur un seul dégradé. 

+ +

Lorsque la position d'un point d'arrêt est définie de façon implicite, celui-ci sera placé à mi-chemin entre le point précédent et le point suivant. Sa position pourra aussi être définie explicitement grâce à une valeur {{cssxref("<length>")}} ou {{cssxref("<percentage>")}}.

+ +

La fonction linear-gradient ne permet pas de répéter le motif du dégradé. Pour cela, on pourra utiliser la propriété {{cssxref("repeating-linear-gradient")}}.

+ +
Note : Les dégradés sont des valeurs de type <image> et non des couleurs (type {{cssxref("<color>")}}. Aussi, linear-gradient ne pourra pas être utilisée sur {{cssxref("background-color")}} et sur les autres propriétés qui n'acceptent que des valeurs de type <color>.
+ +

Paramétrer des dégradés

+ +

En ajoutant plus de points d'arrêt de couleurs sur la ligne du dégradé, il est possible de créer des transitions complexes entre plusieurs couleurs. La position d'un point d'arrêt peut être définie de façon explicite en utilisant une longueur (valeur de type {{cssxref("<length>")}}) ou un pourcentage (valeur de type {{cssxref("<percentage>")}}). Si l'emplacement du point d'arrêt n'est pas indiqué, il sera placé à mi-chemin entre les deux points d'arrêt adjacents. Aussi, les deux instructions suivantes sont synonymes :

+ +
linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
+
+ +

Par défaut, la transition entre les couleurs de deux points d'arrêt se fait de façon linéaire et la couleur intermédiaire se situera à mi-chemin. Toutefois, il est possible de déplacer cette couleur intermédiaire entre les deux points d'arrêt en fournissant une indication sur l'emplacement du milieu de la transition. L'instruction qui suit permet de définir un dégradé qui commence par du rouge allant jusqu'à 10%, passe du rouge au bleu avec la couleur intermédiaire située à 30% de la ligne puis finit en bleu pur sur les 10% de la fin de la longueur.

+ +
linear-gradient(red 10%, 30%, blue 90%);
+ +

Si deux points d'arrêt de couleur sont situés au même emplacement, il y aura une ligne de rupture brutale entre les deux couleus des deux points d'arrêts.

+ +

L'ordre des points d'arrêt est important. Si les points d'arrêt ne sont pas déclarés dans l'ordre, les points d'arrêts de valeur inférieure et situés après surchargeront les points précédents. Autrement dit, si une valeur supérieure est située avant une valeur inférieure, la première n'aura aucun effet. Avec le fragment de code qui suit, on obtient un dégradé qui commence en rouge, passe en jaune à 30% puis à bleu à 65%.

+ +
linear-gradient(red 40%, yellow 30%, blue 65%);
+
+ +

Il est possible de définir plusieurs positions d'arrêt sur une même couleur pour des points d'arrêt adjacents. Ainsi, les trois dégradés suivants sont équivalents :

+ +
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
+
+ +

Par défaut, lorsqu'aucune couleur n'est définie pour le point d'arrêt 0%, c'est la couleur du premier point d'arrêt qui est utilisée au début du dégradé. De même, si aucune couleur n'est explicitement déclarée pour la position 100%, c'est la couleur du dernier point d'arrêt qui sera prolongée.

+ +

Syntaxe

+ +
/* Un dégradé suivant une ligne à 45°
+ qui démarre en bleu et finit en rouge */
+linear-gradient(45deg, blue, red);
+
+/* Un dégradé qui démarre en bas à droite,
+   qui démarre en bleu et finit en rouge */
+linear-gradient(to left top, blue, red);
+
+/* Un dégradé qui démarre du bas et va vers le haut
+   qui commence en bleu, passe en vert à 40% et termine
+   en rouge */
+linear-gradient(0deg, blue, green 40%, red);
+
+/* Indication de couleur : un dégradé de gauche à droite
+   qui commmence en rouge et dont la couleur intermédiaire
+   est située à 10% et laisse les 90% pour la seconde
+   moitié de la transition vers le bleu */
+linear-gradient(.25turn, red, 10%, blue);
+
+/* Plusieurs points d'arrêt par couleur : un dégradé
+   orienté de 45° avec une moitié inférieure gauche
+   rouge et une moitié supérieure droite bleue avec
+   une ligne franche au milieu */
+linear-gradient(45deg, red 0 50%, blue 50% 100%);
+
+ +

Valeurs

+ +
+
<side-or-corner>
+
Représente la position du point de départ de la ligne du dégradé. Elle consiste en deux mots-clés : le premier indique le côté horizontal : left ou right ; le second indique le côté vertical : top ou bottom. L'ordre n'est pas pertinent et chaque mot-clé est optionnel. Si la valeur est absente, elle vaudra to bottom par défaut. Les valeurs to top, to bottom, to left et to right correspondent respectivement aux angles 0deg, 180deg, 270deg, 90deg. Les autres valeurs sont traduites en angles à partir de to top et dans le sens des aiguilles d'une montre. Le point d'arrivé est défini comme le symétrique du point de départ par rapport au centre de la boîte.
+
<angle>
+
L'angle de la direction du dégradé. L'angle démarre à partir de to top et progresse dans le sens des aiguilles d'une montre. Pour plus de détails, voir {{cssxref("<angle>")}}.
+
<linear-color-stop>
+
Un valeur composée d'une valeur {{cssxref("<color>")}} éventuellement suivie d'une position (un pourcentage ou une longueur {{cssxref("<length>")}}) sur l'axe du dégradé. L'affichage des points d'arrêt de couleur en CSS suit les mêmes règles que les dégradés SVG.
+
<color-hint>
+
Cette valeur est une indication pour l'emplacement de la couleur moyenne entre les deux couleurs des points d'arrêt adjacents. Si cette valeur n'est pas utilisée, la moitié de la transition se produit à équidistance entre les deux points d'arrêt.
+
+ +
+

Note : Le rendu des points d'arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui pour les points d'arrêts de couleur pour les dégradés SVG.

+
+ +

Syntaxe formelle

+ +
linear-gradient(
+  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
+  \---------------------------------/ \----------------------------/
+    Définition de la ligne du dégradé   Liste des arrêts de couleur
+
+où <side-or-corner> = [ left | right ] || [ top | bottom ]
+  et <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+  et <linear-color-stop> = <color> [ <color-stop-length> ]?
+  et <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  et <color-hint> = [ <percentage> | <length> ]
+ +

Exemples

+ +

Dégradé à 45 degrés

+ +

CSS

+ +
div {
+  background: linear-gradient(135deg, red, blue);
+}
+ +

HTML

+ +
<div style="width: 200px; height: 200px;"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("Dégradé_à_45_degrés")}}

+ +

Décalage du début

+ +

Parfois, on veut que le dégradé commence après le début de la ligne. Pour cela, on ajoute un point d'arrêt de la même couleur que la couleur de début.

+ +

CSS

+ +
div {
+  background: linear-gradient(135deg, red, red 60%, blue);
+}
+ +

HTML

+ +
<div style="width: 200px; height: 200px;"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("Décalage_du_début")}}

+ +

Un dégradé avec plusieurs couleurs

+ +

Si la position du premier point d'arrêt n'est pas définie par une valeur <length> ou <percentage>, sa valeur par défaut sera 0%. Si la position du dernier point d'arrêt n'est pas définie par une valeur <length> ou <percentage>, sa valeur par défaut sera 100%. Si un point d'arrêt n'a aucune indication de position et que ce n'est ni le premier ni le dernier, celui-ci sera situé à mi-chemin entre les deux points d'arrêts qui l'entourent.

+ +

Les points d'arrêt doivent être définis dans l'ordre. Une fois les valeurs associées au premier et au dernier point d'arrêt, si la position d'un point d'arrêt intermédiaire est définie « avant » un point d'arrêt déclaré avant, la position réelle du point d'arrêt intermédiaire sera ramenée à la position du point d'arrêt précédent.

+ +

CSS

+ +
div {
+  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+}
+
+ +

HTML

+ +
<div>Un arc-en-ciel dégradé</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Un_dégradé_avec_plusieurs_couleurs")}}

+ +

Répéter un dégradé linéaire

+ +

La fonction linear-gradient ne permet pas de répéter un dégradé (par défaut le dégradé sera étiré pour remplir tout l'élément). Pour obtenir cette répétition, il faudra utiliser la fonction {{cssxref("repeating-linear-gradient")}}.

+ +

Utiliser la transparence

+ +

CSS

+ +
div {
+  background: linear-gradient(to bottom right, red, rgba(0,0,0,0));
+}
+ +

HTML

+ +
<div>Un dégradé linéaire avec de la transparence</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Utiliser_la_transparence")}}

+ +

Des dégradés pour les différents navigateurs

+ +

Chaque moteur possède des préfixes différents. Voici un dégradé allant du rose vers le vert et de haut en base, exprimé avec les différents préfixes :

+ +
.grad {
+  background-color: #F07575; /* fallback color if gradients are not supported */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
+}
+
+ +

Le préfixe -moz- est utilisé pour une compatibilité avec Firefox 3.6 jusqu'à Firefox 15. L (Fx 3.6 to Fx 15). Le préfixe -webkit- est le seul qui doit toujours être inclus pour Android 4.3-, iOS jusqu'à la version 6.1 et Safari 6. Lorsqu'on utilise une version préfixée, il ne faut pas utiliser to.

+ +

Un dégradé avec des points d’arrêt à plusieurs couleurs

+ +

Cet exemple utilise des points d'arrêt situés à la même position et avec des couleurs différentes. La transition est donc franche et on obtient ainsi des bandes de couleurs.

+ + + +
body {
+  background: linear-gradient(to right,
+     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
+}
+ +

{{EmbedLiveSample("Un_dégradé_avec_des_points_d’arrêts_à_plusieurs_couleurs", 120, 120)}}

+ +
+

Note : Voir la page Utiliser les dégradés CSS pour plus d'exemples.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Définition initiale.
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Ajout des indices d'interpolation.
+ +

Compatibilité des navigateurs

+ + + +

Voir aussi

+ +

{{Compat("css.types.image.gradient.linear-gradient")}}

+ +
    +
  • Manipuler les dégradés CSS + +
      +
    • {{cssxref("radial-gradient", "radial-gradient()")}}
      • +
    • {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}
      • +
    • {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}
      • +
    • {{cssxref("conic-gradient")}}
      • +
    • {{cssxref("repeating-conic-gradient")}}
      • +
    +
    • +
  • Des propriétés sur lesquelles cette fonction peut être utilisée : +
      +
    • {{cssxref("background-image")}}
      • +
    • {{cssxref("background")}}
      • +
    +
    • +
  • Une collection de motifs construits avec des dégradés CSS, par Léa Verou
    • +
  • Générateur de dégradés CSS
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("_image","image()")}}
    • +
  • {{cssxref("image-set","image-set()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git a/files/fr/web/css/list-style-image/index.html b/files/fr/web/css/list-style-image/index.html new file mode 100644 index 0000000000..5dc240279f --- /dev/null +++ b/files/fr/web/css/list-style-image/index.html @@ -0,0 +1,108 @@ +--- +title: list-style-image +slug: Web/CSS/list-style-image +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/list-style-image +--- +
{{CSSRef}}
+ +

La propriété list-style-image définit l'image utilisée comme puce devant les éléments de listes. On peut également utiliser la propriété raccourcie {{cssxref("list-style")}}.

+ +
{{EmbedInteractiveExample("pages/css/list-style-image.html")}}
+ + + +
+

Note : Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}: list-item;}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé*/
+list-style-image: none;
+
+/*  Valeurs pointant vers une image */
+list-style-image: url('starsolid.gif');
+
+/* Valeurs globales */
+list-style-image: inherit;
+list-style-image: initial;
+list-style-image: unset;
+
+ +

Valeurs

+ +
+
url
+
Emplacement de l'image à utiliser comme puce (cf. {{cssxref("<url>")}} pour plus de détails sur les valeurs possibles pour ce type).
+
none
+
Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec {{cssxref("list-style-type")}} sera utilisé à la place.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
+}
+ +

HTML

+ +
<ul>
+    <li>Élément 1</li>
+    <li>Élément 2</li>
+</ul>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Lists', '#propdef-list-style-image', 'list-style-image')}}{{Spec2('CSS3 Lists')}}Propriété étendue pour supporter n'importe quel type {{cssxref("<image>")}}.
{{SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.list-style-image")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("list-style")}}
    • +
  • {{cssxref("list-style-type")}}
    • +
  • {{cssxref("list-style-position")}}
    • +
  • La fonction {{cssxref("url()", "url()")}}
    • +
diff --git a/files/fr/web/css/list-style-position/index.html b/files/fr/web/css/list-style-position/index.html new file mode 100644 index 0000000000..a9ebac525b --- /dev/null +++ b/files/fr/web/css/list-style-position/index.html @@ -0,0 +1,138 @@ +--- +title: list-style-position +slug: Web/CSS/list-style-position +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/list-style-position +--- +
{{CSSRef}}
+ +

La propriété list-style-position permet de définir la position du marqueur (cf. {{cssxref("::marker")}} de liste par rapport à la boîte principale.

+ +
{{EmbedInteractiveExample("pages/css/list-style-position.html")}}
+ + + +

Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie {{cssxref("list-style")}}.

+ +
+

Notes :

+ +
    +
  • Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}: list-item;). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).
    • +
  • Une différence de comportement existe entre les navigateurs lorsqu'un élément de bloc est placé en premier au sein d'un élément de liste avec list-style-position: inside. Chrome et Safari placent l'élément sur la même ligne que la boîte du marqueur. En revanche, Firefox, Internet Explorer et Opera placent l'élément sur la ligne suivante. Voir {{bug("36854")}} pour plus d'informations.
    • +
+
+ +

Syntaxe

+ +
/* Valeurs avec mot-clé */
+list-style-position: inside;
+list-style-position: outside;
+
+/* Valeurs globales */
+list-style-position: inherit;
+list-style-position: initial;
+list-style-position: unset;
+
+ +

La propriété list-style-position est définie avec l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
inside
+
La boîte du marqueur ({{cssxref("::marker")}}) est la première boîte en ligne (inline) de la boîte principale. Le contenu de l'élément sera appliqué à la suite de la boîte du marqueur.
+
outside
+
La boîte du marqueur ({{cssxref("::marker")}}) est en dehors de la boîte principale.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.one {
+  list-style:square inside;
+}
+
+.two {
+  list-style-position: outside;
+  list-style-type: circle;
+}
+
+.three {
+  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
+  list-style-position: inherit;
+}
+ +

HTML

+ +
<ul class="one"> Liste 1
+  <li>Élément 1-1</li>
+  <li>Élément 1-2</li>
+  <li>Élément 1-3</li>
+  <li>Élément 1-4</li>
+</ul>
+<ul class="two"> Liste 2
+  <li>Élément 2-1</li>
+  <li>Élément 2-2</li>
+  <li>Élément 2-3</li>
+  <li>Élément 2-4</li>
+</ul>
+<ul class="three"> Liste 3
+  <li>Élément 3-1</li>
+  <li>Élément 3-2</li>
+  <li>Élément 3-3</li>
+  <li>Élément 3-4</li>
+</ul>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Lists', '#list-style-position-property', 'list-style-position')}}{{Spec2('CSS3 Lists')}}Aucun changement.
{{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.list-style-position")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("list-style")}}
    • +
  • {{cssxref("list-style-type")}}
    • +
  • {{cssxref("list-style-image")}}
    • +
  • {{cssxref("::marker")}}
    • +
diff --git a/files/fr/web/css/list-style-type/index.html b/files/fr/web/css/list-style-type/index.html new file mode 100644 index 0000000000..fce26cdf01 --- /dev/null +++ b/files/fr/web/css/list-style-type/index.html @@ -0,0 +1,614 @@ +--- +title: list-style-type +slug: Web/CSS/list-style-type +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/list-style-type +--- +
{{CSSRef}}
+ +

La propriété list-style-type permet de définir l'apparence de la puce d'un élément de liste (un cercle, un caractère, un compteur spécifique, etc.).

+ +
{{EmbedInteractiveExample("pages/css/list-style-type.html")}}
+ + + +

La couleur de la puce utilisée sera la même que la couleur calculée de l'élément sur lequel elle s'applique.

+ +

Cette propriété s'applique aux éléments d'une liste (c'est-à-dire les éléments pour lesquels on a {{cssxref("display")}}: list-item;. Cela inclut par défaut les éléments {{HTMLElement("li")}} et {{HTMLElement("summary")}}. Il est possible de l'utiliser pour d'autres éléments si on utilise display: list-item sur ceux-ci. Cette propriété est héritée et on peut donc l'appliquer aux éléments parents (généralement {{HTMLElement("ol")}} ou {{HTMLElement("ul")}}) afin qu'elle s'applique à l'ensemble des éléments fils.

+ +

Syntaxe

+ +
/* Liste partielle des mots-clés utilisables */
+list-style-type: disc;
+list-style-type: circle;
+list-style-type: square;
+list-style-type: decimal;
+list-style-type: georgian;
+list-style-type: cjk-ideographic;
+list-style-type: kannada;
+
+/* Une chaîne de caractères */
+/* Type <string>            */
+list-style-type: '-';
+
+/* Un identifiant correspondant à */
+/* une règle @counter-style       */
+list-style-type: custom-counter-style;
+
+/* Valeur avec un mot-clé */
+list-style-type: none;
+
+/* Valeurs globales */
+list-style-type: inherit;
+list-style-type: initial;
+list-style-type: unset;
+
+ +

La propriété list-style-type peut être définie grâce à :

+ + + +

Valeurs

+ +
+
{{cssxref("symbols()")}}
+
Définit un style de puce utilisé.
+
none
+
Aucun marqueur n'est affiché.
+
{{cssxref("<string>")}}
+
La chaîne de caractères indiquée sera utilisée comme puce
+
{{cssxref("custom-ident", "<custom-ident>")}}
+
Un identifiant correspondant à la valeur d'un {{cssxref("@counter-style")}} ou à un style prédéfini :
+
+ +
+
disc
+
+
    +
  • Un disque plein (la valeur par défaut)
    • +
+
+
circle
+
+
    +
  • Un cercle vide
    • +
+
+
square
+
+
    +
  • Un carré plein
    • +
+
+
decimal
+
+
    +
  • Des nombres en base 10
    • +
  • Commençant par 1
    • +
+
+
cjk-decimal {{experimental_inline}}
+
+
    +
  • Nombres décimaux Han
    • +
  • E.g. 一, 二, 三, ..., 九八, 九九, 一〇〇
    • +
+
+
decimal-leading-zero
+
+
    +
  • Nombres en base 10
    • +
  • Avec des 0 devant
    • +
  • E.g. 01, 02, 03, … 98, 99
    • +
+
+
lower-roman
+
+
    +
  • Nombres romains minuscules
    • +
  • Par exemple i, ii, iii, iv, v…
    • +
+
+
upper-roman
+
+
    +
  • Nombres romains en majuscules
    • +
  • Par exemple I, II, III, IV, V…
    • +
+
+
lower-greek
+
+
    +
  • Lettres grecques minuscules
    • +
  • alpha, beta, gamma…
    • +
  • Par exemple α, β, γ…
    • +
+
+
lower-alpha
+
lower-latin
+
+
    +
  • Lettres ASCII en minuscules
    • +
  • Par exemple a, b, c, … z
    • +
  • lower-latin n'est pas pris en charge par les versions avant IE7
    • +
  • Voir le tableau de compatibilité
    • +
+
+
upper-alpha
+
upper-latin
+
+
    +
  • Lettres ASCII en majuscules
    • +
  • Par exemple A, B, C, … Z
    • +
  • upper-latin n'est pas pris en charge par les versions avant IE7
    • +
+
+
arabic-indic
+
-moz-arabic-indic
+
+
    +
  • Exemple
    • +
+
+
armenian
+
+
    +
  • Système de numérotation arménien
    • +
  • (ayb/ayp, ben/pen, gim/keem…
    • +
+
+
bengali
+
-moz-bengali
+
+
    +
  • Exemple
    • +
+
+
cambodian {{experimental_inline}}*
+
+
    +
  • Exemple
    • +
  • est un synonyme pour khmer
    • +
+
+
cjk-earthly-branch
+
-moz-cjk-earthly-branch
+
+
    +
  • Exemple
    • +
+
+
cjk-heavenly-stem
+
-moz-cjk-heavenly-stem
+
+
    +
  • Exemple
    • +
+
+
cjk-ideographic{{experimental_inline}}
+
+
    +
  • Identique à trad-chinese-informal
    • +
  • E.g. 一萬一千一百一十一
    • +
+
+
devanagari
+
-moz-devanagari
+
+
    +
  • Exemple
    • +
+
+
ethiopic-numeric {{experimental_inline}}
+
+
    +
  • Exemple
    • +
+
+
georgian
+
+
    +
  • Système de numérotation géorgien
    • +
  • Par exemple an, ban, gan, … he, tan, in…
    • +
+
+
gujarati
+
-moz-gujarati
+
+
    +
  • Exemple
    • +
+
+
gurmukhi
+
-moz-gurmukhi
+
+
    +
  • Exemple
    • +
+
+
hebrew {{experimental_inline}}
+
+
    +
  • Système de numérotation hébreux
    • +
+
+
hiragana {{experimental_inline}}
+
+
    +
  • あ, い, う, え, お, か, き , …
    • +
  • (Japonais)
    • +
+
+
hiragana-iroha {{experimental_inline}}
+
+
    +
  • い, ろ, は, に, ほ, へ, と  …
    • +
  • {{interwiki('wikipedia', 'Iroha')}} est l'ancien ordre japonais pour les syllabes.
    • +
+
+
japanese-formal {{experimental_inline}}
+
+
    +
  • Système de numérotation japonais formel utilisé pour les documents légaux ou financiers.
    • +
  • E.g., 壱萬壱阡壱百壱拾壱
    • +
  • Ces kanjis ont été conçus afin de ne pas pouvoir être confondus avec d'autres
    • +
+
+
japanese-informal {{experimental_inline}}
+
+
    +
  • Système de numérotation japonais informel
    • +
+
+
kannada
+
-moz-kannada
+
+
    +
  • Exemple
    • +
+
+
katakana {{experimental_inline}}
+
+
    +
  • ア, イ, ウ, エ, オ, カ, キ, …
    • +
  • (Japonais)
    • +
+
+
katakana-iroha {{experimental_inline}}
+
+
    +
  • イ, ロ, ハ, ニ, ホ, ヘ, ト, …
    • +
  • {{interwiki('wikipedia', 'Iroha')}} correspond à l'ancien ordre japonais pour les syllabes.
    • +
+
+
khmer
+
-moz-khmer
+
+
    +
  • Exemple
    • +
+
+
korean-hangul-formal {{experimental_inline}}
+
+
    +
  • Système de numérotation coréen hangul .
    • +
  • E.g., 일만 일천일백일십일
    • +
+
+
korean-hanja-formal {{experimental_inline}}
+
+
    +
  • Système de numérotation formel coréen Han.
    • +
  • E.g. 壹萬 壹仟壹百壹拾壹
    • +
+
+
korean-hanja-informal {{experimental_inline}}
+
+
    +
  • Système de numérotation coréen hanja numbering.
    • +
  • E.g., 萬 一千百十一
    • +
+
+
lao
+
-moz-lao
+
+
    +
  • Exemple
    • +
+
+
lower-armenian {{experimental_inline}}*
+
+
    +
  • Exemple
    • +
+
+
malayalam
+
-moz-malayalam
+
+
    +
  • Exemple
    • +
+
+
mongolian {{experimental_inline}}
+
+
    +
  • Exemple
    • +
+
+
myanmar
+
-moz-myanmar
+
+
    +
  • Exemple
    • +
+
+
oriya
+
-moz-oriya
+
+
    +
  • Exemple
    • +
+
+
persian {{experimental_inline}}
+
-moz-persian
+
+
    +
  • Exemple
    • +
+
+
simp-chinese-formal {{experimental_inline}}
+
+
    +
  • Système de numérotation formel chinois simplifié.
    • +
  • E.g. 壹万壹仟壹佰壹拾壹
    • +
+
+
simp-chinese-informal {{experimental_inline}}
+
+
    +
  • Système de numérotation informel chinois simplifié.
    • +
  • E.g. 一万一千一百一十一
    • +
+
+
tamil {{experimental_inline}}
+
-moz-tamil
+
+
    +
  • Exemple
    • +
+
+
telugu
+
-moz-telugu
+
+
    +
  • Exemple
    • +
+
+
thai
+
-moz-thai
+
+
    +
  • Exemple
    • +
+
+
tibetan {{experimental_inline}}*
+
+
    +
  • Exemple
    • +
+
+
trad-chinese-formal {{experimental_inline}}
+
+
    +
  • Système de numérotation formel chinois traditionnel.
    • +
  • E.g. 壹萬壹仟壹佰壹拾壹
    • +
+
+
trad-chinese-informal {{experimental_inline}}
+
+
    +
  • Système de numérotation informel chinois traditionnel.
    • +
  • E.g. 一萬一千一百一十一
    • +
+
+
upper-armenian {{experimental_inline}}*
+
+
    +
  • Exemple
    • +
+
+
disclosure-open {{experimental_inline}}
+
+
    +
  • Symbole indiquant qu'un widget (comme {{HTMLElement("details")}}) est ouvert.
    • +
+
+
disclosure-closed {{experimental_inline}}
+
+
    +
  • Symbole indiquant qu'un widget (comme {{HTMLElement("details")}}) est fermé.
    • +
+
+
+ +

Extensions non-standards

+ +

D'autres types sont fournis par Gecko (Firefox), Blink (Chrome and Opera) and WebKit (Safari) mais ne sont pas standards. Pour voir les différents navigateurs les supportant, se référer au tableau de compatibilité en bas de page.

+ +
+
-moz-ethiopic-halehame
+
+
    +
  • Exemple
    • +
+
+
-moz-ethiopic-halehame-am
+
+
    +
  • Exemple
    • +
+
+
ethiopic-halehame-ti-er
+
-moz-ethiopic-halehame-ti-er
+
+
    +
  • Exemple
    • +
+
+
ethiopic-halehame-ti-et
+
-moz-ethiopic-halehame-ti-et
+
+
    +
  • Exemple
    • +
+
+
hangul
+
-moz-hangul
+
+
    +
  • Exemple
    • +
  • Exemple
    • +
  • Exemple
    • +
+
+
hangul-consonant
+
-moz-hangul-consonant
+
+
    +
  • Exemple
    • +
  • Exemple
    • +
  • Exemple
    • +
+
+
urdu
+
-moz-urdu
+
+
    +
  • Exemple
    • +
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
ol.normal {
+  list-style-type: upper-alpha;
+}
+
+/* on peut aussi utiliser la propriété raccourcie */
+/* "list-style": */
+ol.shortcut {
+  list-style: upper-alpha;
+}
+
+ +

HTML

+ +
<ol class="normal">Liste 1
+  <li>Coucou</li>
+  <li>Monde</li>
+  <li>Comment ça va ?</li>
+</ol>
+
+<ol class="shortcut">Liste 2
+  <li>On a</li>
+  <li>le</li>
+  <li>même</li>
+  <li>résultat</li>
+</ol>
+
+ +

Résultat

+ +

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

+ +

Accessibilité

+ +

Le lecteur d'écran VoiceOver n'annonce pas, incorrectement, les listes non ordonnées lorsque list-style-type:none leur est appliqué. Pour pallier ce problème, on peut ajouter un espace sans chasse comme pseudo-contenu avant chaque élément de liste afin que la liste soit correctement annoncée.

+ +
ul {
+  list-style-type: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+
+ + + +

Notes

+ +
    +
  • Pour certains types, il est nécessaire d'avoir une police correspondante installée pour que l'affichage fonctionne.
    • +
  • Pour des raisons historiques, cjk-ideographic est synonyme de trad-chinese-informal.
    • +
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Counter Styles', '#extending-css2', 'list-style-type')}}{{Spec2("CSS3 Counter Styles")}}Les compteurs CSS2.1 sont redéfinis.
+ La syntaxe est étendue pour prendre en charge les règles @counter-style.
+ Définition des types : hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha, japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-formal, trad-chinese-formal,korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal, ethiopic-numeric, disclosure-open et disclosure-closed.
+ <counter-style> est étendu avec la notation fonctionnelle symbols().
{{SpecName('CSS3 Lists', '#propdef-list-style-type', 'list-style-type')}}{{Spec2('CSS3 Lists')}}La syntaxe est modifiée pour prendre en charge les identifiants utilisés avec les règles @counter-style.
+ Prise en charge du type <string>.
{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}{{Spec2('CSS2.1')}} +

Définition initiale.

+
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.list-style-type")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("list-style")}}
    • +
  • {{cssxref("list-style-image")}}
    • +
  • {{cssxref("list-style-position")}}
    • +
diff --git a/files/fr/web/css/list-style/index.html b/files/fr/web/css/list-style/index.html new file mode 100644 index 0000000000..19fcbef3f3 --- /dev/null +++ b/files/fr/web/css/list-style/index.html @@ -0,0 +1,155 @@ +--- +title: list-style +slug: Web/CSS/list-style +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/list-style +--- +
{{CSSRef}}
+ +

La propriété list-style est une propriété raccourcie qui permet de définir {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}} et {{cssxref("list-style-position")}}.

+ +
{{EmbedInteractiveExample("pages/css/list-style.html")}}
+ + + +
+

Note : Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}: list-item;}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).

+
+ +

Syntaxe

+ +
/* Type */
+list-style: square;
+
+/* Image */
+list-style: url('../img/etoile.png');
+
+/* Position */
+list-style: inside;
+
+/* type | position */
+list-style: georgian inside;
+
+/* type | image | position */
+list-style: lower-roman url('../img/etoile.png') outside;
+
+list-style: none;
+
+/* Valeurs globales */
+list-style: inherit;
+list-style: initial;
+list-style: unset;
+
+ +

Valeurs

+ +

Cette propriété raccourcie peut prendre un, deux ou trois mots-clés, dans n'importe quel ordre. Si {{cssxref("list-style-type")}} et {{cssxref("list-style-image")}} sont tous les deux définis, list-style-type sera utilisé si l'image est indisponible.

+ +
+
<'list-style-type'>
+
Voir {{cssxref("list-style-type")}}
+
<'list-style-image'>
+
Voir {{cssxref("list-style-image")}}
+
<'list-style-position'>
+
Voir {{cssxref("list-style-position")}}
+
none
+
Aucun style n'est utilisé.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.un {
+  list-style: circle;
+}
+
+.deux {
+  list-style: square inside;
+}
+ +

HTML

+ +
Liste 1
+<ul class="un">
+  <li>Élément 1</li>
+  <li>Élément 2</li>
+  <li>Élément 3</li>
+</ul>
+Liste 2
+<ul class="deux">
+  <li>Élément A</li>
+  <li>Élément B</li>
+  <li>Élément C</li>
+</ul>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','auto', 220)}}

+ +

Accessibilité

+ +

Safari ne reconnait pas (incorrectement) les listes non ordonnées lorsque list-style:none leur est appliqué et ne les ajoute pas dans l'arbre d'accessibilité (utilisé par les lecteurs d'écrans). Pour pallier ce problème, on peut ajouter un espace sans chasse comme pseudo-contenu avant chaque élément de liste afin que la liste soit correctement annoncée.

+ +
ul {
+  list-style: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+
+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Lists', '#list-style-property', 'list-style')}}{{Spec2('CSS3 Lists')}}Aucun changement.
{{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.list-style")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("list-style-type")}}
    • +
  • {{cssxref("list-style-image")}}
    • +
  • {{cssxref("list-style-position")}}
    • +
diff --git "a/files/fr/web/css/liste_de_fonctionnalit\303\251s_css_propri\303\251taires/index.html" "b/files/fr/web/css/liste_de_fonctionnalit\303\251s_css_propri\303\251taires/index.html" new file mode 100644 index 0000000000..2c88258187 --- /dev/null +++ "b/files/fr/web/css/liste_de_fonctionnalit\303\251s_css_propri\303\251taires/index.html" @@ -0,0 +1,173 @@ +--- +title: Liste de fonctionnalités CSS propriétaires +slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires +tags: + - CSS + - Draft + - NeedsContent +translation_of: Web/CSS/List_of_Proprietary_CSS_Features +--- +

{{CSSRef}}{{Draft}}

+ +
+

Note : Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.

+
+ +
+

Attention ! Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :

+ + +
+ +
BROUILLON + +
Cette page est incomplète.
+
+ +

Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir Implémentation des fonctionnalités CSS à l'état de brouillon pour une liste de ces dernières).

+ +

Gecko

+ +

Propriétés

+ +
    +
  • {{ Cssxref("-moz-force-broken-image-icon") }}
    • +
  • {{ Cssxref("-moz-image-region") }}
    • +
  • {{ Cssxref("-moz-margin-end") }}
    • +
  • {{ Cssxref("-moz-margin-start") }}
    • +
  • {{ Cssxref("-moz-orient") }}
    • +
  • {{ Cssxref("-moz-padding-end") }}
    • +
  • {{ Cssxref("-moz-padding-start") }}
    • +
  • {{ Cssxref("-moz-stack-sizing") }}
    • +
  • {{ Cssxref("-moz-window-shadow") }}
    • +
+ +

Valeurs

+ +

{{ cssxref("background-image") }}

+ +
    +
  • Portions d'images +
      +
    • {{ cssxref("-moz-image-rect") }}
      • +
    +
    • +
+ +

Pseudo-éléments et pseudo-classes

+ +

...

+ +

Règles At

+ +

...

+ +

Requêtes de média

+ +

...

+ +

Autres

+ +

...

+ +

Opera

+ +

Propriétés

+ +

...

+ +

Valeurs

+ +

{{ cssxref("background-image") }}

+ +
    +
  • {{ cssxref("-o-double-rainbow") }}
    • +
+ +

Pseudo-éléments et pseudo-classes

+ +

...

+ +

Règles At

+ +

...

+ +

Requêtes de média

+ +

...

+ +

Autres

+ +

...

+ +

Trident (IE)

+ +

Propriétés

+ +
    +
  • {{ cssxref("-ms-accelerator") }}
    • +
+ +

Valeurs

+ +

...

+ +

Pseudo-éléments et pseudo-classes

+ +

...

+ +

Règles At

+ +

...

+ +

Requêtes de média

+ +

...

+ +

Autres

+ +

...

+ +

WebKit

+ +

Propriétés

+ +
    +
  • {{ Cssxref("-webkit-box-reflect") }}
    • +
  • {{ Cssxref("-webkit-mask") }}
    • +
  • {{ Cssxref("-webkit-mask-attachment") }}
    • +
  • {{ Cssxref("-webkit-mask-composite") }}
    • +
  • {{ Cssxref("-webkit-mask-image") }}
    • +
  • {{ Cssxref("-webkit-mask-origin") }}
    • +
  • {{ Cssxref("-webkit-mask-repeat") }}
    • +
  • {{ Cssxref("-webkit-tap-highlight-color") }}
    • +
  • {{ Cssxref("-webkit-text-decorations-in-effect") }}
    • +
  • {{ Cssxref("-webkit-text-stroke") }}
    • +
  • {{ Cssxref("-webkit-text-stroke-color") }}
    • +
  • {{ Cssxref("-webkit-text-stroke-width") }}
    • +
  • {{ Cssxref("-webkit-touch-callout") }}
    • +
+ +

Valeurs

+ +

...

+ +

Pseudo-éléments et pseudo-classes

+ +

...

+ +

Règles At

+ +

...

+ +

Requêtes de média

+ +

...

+ +

Autres

+ +

...

diff --git "a/files/fr/web/css/liste_propri\303\251t\303\251s_css_anim\303\251es/index.html" "b/files/fr/web/css/liste_propri\303\251t\303\251s_css_anim\303\251es/index.html" new file mode 100644 index 0000000000..e3927a94d8 --- /dev/null +++ "b/files/fr/web/css/liste_propri\303\251t\303\251s_css_anim\303\251es/index.html" @@ -0,0 +1,17 @@ +--- +title: Liste des propriétés CSS animées +slug: Web/CSS/Liste_propriétés_CSS_animées +tags: + - Animations + - CSS + - Reference + - Transitions +translation_of: Web/CSS/CSS_animated_properties +--- +
{{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/margin-block-end/index.html b/files/fr/web/css/margin-block-end/index.html new file mode 100644 index 0000000000..2634d401ec --- /dev/null +++ b/files/fr/web/css/margin-block-end/index.html @@ -0,0 +1,113 @@ +--- +title: margin-block-end +slug: Web/CSS/margin-block-end +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/margin-block-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété margin-block-end définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.

+ +
{{EmbedInteractiveExample("pages/css/margin-block-end.html")}}
+ + + +

Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+margin-block-end: 10px;      /* Une longueur absolue */
+margin-block-end: 1em;       /* Une longueur relative à la taille du texte */
+margin-block-end: 5%;        /* Une largeur relative à la
+                                   largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-block-end: auto;
+
+/* Valeurs globales */
+margin-block-end: inherit;
+
+ +

Valeurs

+ +

La propriété margin-block-end peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  margin-block-end: 20px;
+  background-color: #c8c800;
+}
+ +

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-margin-block-end", "margin-block-end")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.margin-block-end")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("margin-top")}},
      • +
    • {{cssxref("margin-right")}},
      • +
    • {{cssxref("margin-bottom")}}
      • +
    • {{cssxref("margin-left")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}
    • +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/margin-block-start/index.html b/files/fr/web/css/margin-block-start/index.html new file mode 100644 index 0000000000..d7ead1802d --- /dev/null +++ b/files/fr/web/css/margin-block-start/index.html @@ -0,0 +1,113 @@ +--- +title: margin-block-start +slug: Web/CSS/margin-block-start +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/margin-block-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété margin-block-start définit la marge logique appliquée au début des éléments en bloc, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.

+ +
{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}
+ + + +

Cette propriété est à rapprocher de {{cssxref("margin-inline-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+margin-block-start: 10px;      /* Une longueur absolue */
+margin-block-start: 1em;       /* Une longueur relative à la taille du texte */
+margin-block-start: 5%;        /* Une largeur relative à la
+                                   largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-block-start: auto;
+
+/* Valeurs globales */
+margin-block-start: inherit;
+
+ +

Valeurs

+ +

La propriété margin-block-start peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  margin-block-start: 20px;
+  background-color: #c8c800;
+}
+ +

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-margin-block-start", "margin-block-start")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.margin-block-start")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("margin-top")}},
      • +
    • {{cssxref("margin-right")}},
      • +
    • {{cssxref("margin-bottom")}}
      • +
    • {{cssxref("margin-left")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}
    • +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/margin-block/index.html b/files/fr/web/css/margin-block/index.html new file mode 100644 index 0000000000..8d7482ceae --- /dev/null +++ b/files/fr/web/css/margin-block/index.html @@ -0,0 +1,103 @@ +--- +title: margin-block +slug: Web/CSS/margin-block +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/margin-block +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété margin-block définit la marge sur les côtés de l'élément qui sont ceux de l'axe de bloc. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à   {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
/* Valeurs de longueur */
+/* Type <length> */
+margin-block: 10px 20px;  /* Une longueur absolue */
+margin-block: 1em 2em;    /* Une longueur relative à la taille du texte */
+margin-block: 5% 2%;      /* Une longueur relative à la largeur ou hauteur du bloc englobant */
+margin-block: 10px;       /* Une valeur utilisée pour les deux côtés */
+
+/* Valeurs avec un mot-clé */
+margin-block: auto;
+
+/* Valeurs globales */
+margin-block: inherit;
+margin-block: initial;
+margin-block: unset;
+
+ +

Cette propriété est une propriété raccourcie pour les deux propriétés logiques {{cssxref("margin-block-start")}} et {{cssxref("margin-block-end")}}. Pour régler les marges selon l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("margin-inline")}} qui correspond aux propriétés {{cssxref("margin-inline-start")}} et {{cssxref("margin-inline-end")}}.

+ +

Syntaxe

+ +

Valeurs

+ +

La propriété margin-block peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  margin-block: 20px 40px;
+  background-color: #c8c800;
+}
+ +

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-margin-block", "margin-block")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.margin-block")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}
    • +
  • Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/margin-bottom/index.html b/files/fr/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..6da12febe9 --- /dev/null +++ b/files/fr/web/css/margin-bottom/index.html @@ -0,0 +1,141 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/margin-bottom +--- +
{{CSSRef}}
+ +

La propriété margin-bottom définit la marge basse appliquée à un élément. On peut définir une marge négative qui rapprochera l'élément de ses voisins ou une marge positive qui l'en écartera..

+ +
{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}
+ + + +

Cette propriété n'a aucun effet sur les éléments en ligne (inline) qui ne sont pas remplacés comme {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>     */
+margin-bottom: 10px;    /* Une longueur absolue */
+margin-bottom: 1em;     /* Une longueur relative à la taille du texte */
+margin-bottom: 5%;      /* Une longueur relative à la
+                 largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-bottom: auto;
+
+/* Valeurs globales*/
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+
+ +

La valeur de cette propriété peut être le mot-clé auto, une longueur (<length>) ou un pourcentage (<percentage>). Cette valeur peut être nulle, positive ou négative.

+ +

Valeurs

+ +
+
<length>
+
Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type {{cssxref("<length>")}}.
+
<percentage>
+
Une valeur en pourcentage (type {{cssxref("<percentage>")}} qui est relative à la largeur du bloc englobant.
+
auto
+
Voir {{cssxref("margin")}}.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +

Grâce à la feuille de style on définit la marge basse et la hauteur des différentes div :

+ +
.box0 {
+  margin-bottom:1em;
+  height:3em;
+}
+.box1 {
+  margin-bottom:-1.5em;
+  height:4em;
+}
+.box2 {
+  border:1px dashed black;
+  border-width:1px 0;
+  margin-bottom:2em;
+}
+
+
+ +

On ajoute quelques règles afin de mieux visualiser les effets obtenus :

+ +
.container {
+  background-color:orange;
+  width:320px;
+  border:1px solid black;
+}
+div {
+  width:320px;
+  background-color:gold;
+}
+ +

HTML

+ +
<div class="container">
+<div class="box0">Boîte 0</div>
+<div class="box1">Boîte 1</div>
+<div class="box2">La marge négative de 1 m'attire vers le haut</div>
+</div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS3 Box')}}Pas de modification significative.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}{{Spec2('CSS3 Transitions')}}margin-bottom peut désormais être animée.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}{{Spec2('CSS2.1')}}L'effet sur les éléments en ligne est supprimé.
{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.margin-bottom")}}

diff --git a/files/fr/web/css/margin-inline-end/index.html b/files/fr/web/css/margin-inline-end/index.html new file mode 100644 index 0000000000..a2f3b7c213 --- /dev/null +++ b/files/fr/web/css/margin-inline-end/index.html @@ -0,0 +1,114 @@ +--- +title: margin-inline-end +slug: Web/CSS/margin-inline-end +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/margin-inline-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété margin-inline-end définit la marge logique appliquée à la fin des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.

+ +
{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}
+ + + +

Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+margin-inline-end: 10px;      /* Une longueur absolue */
+margin-inline-end: 1em;       /* Une longueur relative à la taille du texte */
+margin-inline-end: 5%;        /* Une largeur relative à la
+                                   largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-inline-end: auto;
+
+/* Valeurs globales */
+margin-inline-end: inherit;
+
+ +

Valeurs

+ +

La propriété margin-inline-end peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  margin-inline-end: 20px;
+  background-color: #c8c800;
+}
+ +

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-margin-inline-end", "margin-inline-end")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.margin-inline-end")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("margin-top")}},
      • +
    • {{cssxref("margin-right")}},
      • +
    • {{cssxref("margin-bottom")}}
      • +
    • {{cssxref("margin-left")}}
      • +
    +
    • +
  • {{cssxref("margin-inline-start")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/margin-inline-start/index.html b/files/fr/web/css/margin-inline-start/index.html new file mode 100644 index 0000000000..66f62e3a22 --- /dev/null +++ b/files/fr/web/css/margin-inline-start/index.html @@ -0,0 +1,114 @@ +--- +title: margin-inline-start +slug: Web/CSS/margin-inline-start +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/margin-inline-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété margin-inline-start définit la marge logique appliquée au début des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.

+ +
{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}
+ + + +

Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+margin-inline-start: 10px;      /* Une longueur absolue */
+margin-inline-start: 1em;       /* Une longueur relative à la taille du texte */
+margin-inline-start: 5%;        /* Une largeur relative à la
+                                   largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-inline-start: auto;
+
+/* Valeurs globales */
+margin-inline-start: inherit;
+
+ +

Valeurs

+ +

La propriété margin-inline-start peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  margin-inline-start: 20px;
+  background-color: #c8c800;
+}
+ +

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-margin-inline-start", "margin-inline-start")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.margin-inline-start")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("margin-top")}},
      • +
    • {{cssxref("margin-right")}},
      • +
    • {{cssxref("margin-bottom")}}
      • +
    • {{cssxref("margin-left")}}
      • +
    +
    • +
  • {{cssxref("margin-inline-end")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/margin-inline/index.html b/files/fr/web/css/margin-inline/index.html new file mode 100644 index 0000000000..44ce1a255a --- /dev/null +++ b/files/fr/web/css/margin-inline/index.html @@ -0,0 +1,103 @@ +--- +title: margin-inline +slug: Web/CSS/margin-inline +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/margin-inline +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété margin-inline définit la marge sur les côtés de l'élément qui sont ceux de l'axe en ligne. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à   {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
/* Valeurs de longueur */
+/* Type <length> */
+margin-inline: 10px 20px;  /* Une longueur absolue */
+margin-inline: 1em 2em;    /* Une longueur relative à la taille du texte */
+margin-inline: 5% 2%;      /* Une longueur relative à la largeur ou hauteur du bloc englobant */
+margin-inline: 10px;       /* Une valeur utilisée pour les deux côtés */
+
+/* Valeurs avec un mot-clé */
+margin-inline: auto;
+
+/* Valeurs globales */
+margin-inline: inherit;
+margin-inline: initial;
+margin-inline: unset;
+
+ +

Cette propriété est une propriété raccourcie pour les deux propriétés logiques {{cssxref("margin-inline-start")}} et {{cssxref("margin-inline-end")}}. Pour régler les marges selon l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("margin-block")}} qui correspond aux propriétés {{cssxref("margin-block-start")}} et {{cssxref("margin-block-end")}}.

+ +

Syntaxe

+ +

Valeurs

+ +

La propriété margin-inline peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  margin-inline: 20px 40px;
+  background-color: #c8c800;
+}
+ +

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-margin-inline", "margin-inline")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.margin-inline")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}
    • +
  • Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/margin-left/index.html b/files/fr/web/css/margin-left/index.html new file mode 100644 index 0000000000..46fda52a12 --- /dev/null +++ b/files/fr/web/css/margin-left/index.html @@ -0,0 +1,188 @@ +--- +title: margin-left +slug: Web/CSS/margin-left +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/margin-left +--- +
{{CSSRef}}
+ +

La propriété margin-left d'un élément définit l'espace horizontal à gauche qui formera la marge à gauche de l'élément. On peut avoir une marge gauche négative qui rapproche l'élément de ses voisins ou une marge positive qui l'en écarte.

+ +
{{EmbedInteractiveExample("pages/css/margin-left.html")}}
+ + + +

Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle la fusion de marges.

+ +

Dans certains cas où les dimensions sont sur-contraintes (autrement dit quand width, margin-left, border, padding, la taille de la zone de contenu et margin-right sont toutes définies), margin-left est ignorée. La valeur calculée sera la même que si auto avait été utilisée.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+margin-left: 10px;  /* Une longueur absolue */
+margin-left: 1em;   /* Une longueur absolue relative à la taille du texte */
+margin-left: 5%;    /* Une marge dont la taille est relative à la largeur
+                       du bloc englobant */
+
+/* Valeur avec un mot-clé */
+margin-left: auto;
+
+/* Valeurs globales */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+
+ +

La valeur de cette propriété peut être le mot-clé auto, une longueur (<length>) ou un pourcentage (<percentage>).

+ +

Valeurs

+ +
+
<length>
+
Une valeur fixe, du type {{cssxref("<length>")}} : elle peut être exprimée en pixels (px) ou en fonction de la taille du texte (em) ou être relative à la taille de la zone d'affichage (viewport) (vh).
+
<percentage>
+
Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}} relative à la largeur du bloc englobant.
+
auto
+
Un mot-clé qui indique que la marge droite s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé.L'espace calculé sera réparti de façon équitable entre la marge droite et la marge gauche si celle-ci vaut également auto. Le tableau suivant précise les différents cas : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valeur de {{cssxref("display")}}Valeur de {{cssxref("float")}}Valeur de {{cssxref("position")}}Valeur calculée pour autoCommentaires
inline, inline-block, inline-tablen'importe laquellestatic ou relative0Disposition en ligne
block, inline, inline-block, block, table, inline-table, list-item, table-captionn'importe laquellestatic ou relative0 sauf si margin-left et margin-right valent auto. Dans ce cas, la valeur utilisée sera celle qui permet de centrer l'élément au sein de l'élément parent.Disposition en bloc
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft ou rightstatic ou relative0Disposition en bloc avec les éléments flottants
n'importe quelle table-*, sauf table-captionn'importe laquellen'importe laquelle0Les éléments table-* n'ont pas de marge, il faut utiliser {{cssxref("border-spacing")}} à la place.
n'importe laquelle, sauf flex, inline-flex, ou table-*n'importe laquellefixed ou absolute0 sauf si margin-left et margin-right valent auto. Dans ce cas, la valeur utilisée sera celle qui permet de centrer la boîte de bordure dans la zone de largeur disponible si elle fixée.Positionnement absolu.
flex, inline-flexn'importe laquellen'importe laquelle0, sauf s'il reste de l'espace horizontal libre. Dans ce cas, l'espace restant sera distribué de façon équitable entre toutes les marges avec auto.Boîtes flexibles.
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  margin-left: 50%;
+}
+ +

HTML

+ +
<p>Un grand rosier se trouvait à l’entrée du jardin ;
+   les roses qu’il portait étaient blanches, mais
+   trois jardiniers étaient en train de les peindre
+   en rouge.
+</p>
+<p class=exemple>
+  Alice s’avança pour les regarder, et, au moment où
+  elle approchait, elle en entendit un qui disait :
+  « Fais donc attention, Cinq, et ne m’éclabousse pas
+  ainsi avec ta peinture. »
+</p>
+<p>
+  « Ce n’est pas de ma faute, » dit Cinq d’un ton
+  bourru, « c’est Sept qui m’a poussé le coude. »
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#the-margin', 'margin-left')}}{{Spec2('CSS3 Box')}}Pas de modification significative depuis CSS 2.1.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}{{Spec2('CSS3 Transitions')}}margin-left peut désormais être animée.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}{{Spec2('CSS3 Flexbox')}}Le comportement de margin-left sur les éléments flexibles est défini.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}{{Spec2('CSS2.1')}}L'effet sur les éléments en ligne (inline) est retiré.
{{SpecName('CSS1', '#margin-left', 'margin-left')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.margin-left")}}

diff --git a/files/fr/web/css/margin-right/index.html b/files/fr/web/css/margin-right/index.html new file mode 100644 index 0000000000..a34a800ead --- /dev/null +++ b/files/fr/web/css/margin-right/index.html @@ -0,0 +1,186 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/margin-right +--- +
{{CSSRef}}
+ +

La propriété margin-right d'un élément définit l'espace horizontal à droite qui formera la marge à droite. On peut avoir une marge droite négative.

+ +
{{EmbedInteractiveExample("pages/css/margin-right.html")}}
+ + + +

Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle la fusion de marges.

+ +

Syntaxe

+ +
/* Valeur de longueur */
+/* Type <length>      */
+margin-right: 20px;        /* Une longueur absolue */
+margin-right: 1em;         /* Une longueur relative à la taille du texte */
+margin-right: 5%;          /* Une marge relative à la largeur
+                           du bloc englobant */
+
+/* Valeur avec un mot-clé */
+margin-right: auto;
+
+/* Valeurs globales */
+margin-right: inherit;
+margin-right: initial;
+margin-right: unset;
+
+ +

La valeur de cette propriété peut être le mot-clé auto, une longueur (<length>) ou un pourcentage (<percentage>).

+ +

Valeurs

+ +
+
<length>
+
Une valeur fixe, du type {{cssxref("<length>")}} : elle peut être exprimée en pixels (px) ou en fonction de la taille du texte (em) ou être relative à la taille de la zone d'affichage (viewport) (vh).
+
<percentage>
+
Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}} relative à la largeur du bloc englobant.
+
auto
+
Un mot-clé qui indique que la marge droite s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé.L'espace calculé sera réparti de façon équitable entre la marge droite et la marge gauche si celle-ci vaut également auto. Le tableau suivant précise les différents cas : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valeur de {{cssxref("display")}}Valeur de {{cssxref("float")}}Valeur de {{cssxref("position")}}Valeur calculée pour autoCommentaires
inline, inline-block, inline-tablen'importe laquellestatic ou relative0Disposition en ligne
block, inline, inline-block, block, table, inline-table, list-item, table-captionn'importe laquellestatic ou relative0 sauf si margin-left et margin-right valent auto. Dans ce cas, la valeur utilisée sera celle qui permet de centrer l'élément au sein de l'élément parent.Disposition en bloc
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft ou rightstatic ou relative0Disposition en bloc avec les éléments flottants
n'importe quelle table-* sauf table-captionn'importe laquellen'importe laquelle0Les éléments table-* n'ont pas de marge, il faut utiliser {{cssxref("border-spacing")}} à la place.
ni'mporte quelle autre sauf flex, inline-flex ou table-*n'importe laquellefixed ou absolute0 sauf si margin-left et margin-right valent auto. Dans ce cas, la valeur utilisée sera celle qui permet de centrer la boîte de bordure dans la zone de largeur disponible si elle fixée.Positionnement absolu.
flex, inline-flexn'importe laquellen'importe laquelle0, sauf s'il reste de l'espace horizontal libre. Dans ce cas, l'espace restant sera distribué de façon équitable entre toutes les marges avec auto.Boîtes flexibles.
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  margin-right: 50%;
+}
+ +

HTML

+ +
<p>Un grand rosier se trouvait à l’entrée du jardin ;
+   les roses qu’il portait étaient blanches, mais
+   trois jardiniers étaient en train de les peindre
+   en rouge.
+</p>
+<p class=exemple>
+  Alice s’avança pour les regarder, et, au moment où
+  elle approchait, elle en entendit un qui disait :
+  « Fais donc attention, Cinq, et ne m’éclabousse pas
+  ainsi avec ta peinture. »
+</p>
+<p>
+  « Ce n’est pas de ma faute, » dit Cinq d’un ton
+  bourru, « c’est Sept qui m’a poussé le coude. »
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#the-margin', 'margin-right')}}{{Spec2('CSS3 Box')}}Pas de changement significatif.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-right')}}{{Spec2('CSS3 Transitions')}}margin-right peut désormais être animée.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}{{Spec2('CSS3 Flexbox')}}Le comportement de margin-right est défini sur les éléments flexibles.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right')}}{{Spec2('CSS2.1')}}L'effet sur les éléments en ligne (inline) est retiré.
{{SpecName('CSS1', '#margin-right', 'margin-right')}}{{Spec2('CSS1')}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.margin-right")}}

diff --git a/files/fr/web/css/margin-top/index.html b/files/fr/web/css/margin-top/index.html new file mode 100644 index 0000000000..01d930ef85 --- /dev/null +++ b/files/fr/web/css/margin-top/index.html @@ -0,0 +1,125 @@ +--- +title: margin-top +slug: Web/CSS/margin-top +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/margin-top +--- +
{{CSSRef}}
+ +

La propriété margin-top définit l'espace vertical pour la marge appliquée en haut de l'élément. Une valeur négative peut être utilisée.

+ +
{{EmbedInteractiveExample("pages/css/margin-top.html")}}
+ + + +

Cette propriété n'a aucun effet sur les éléments non-remplacés en ligne (inline) tels que {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+margin-top: 10px;  /* Une longueur absolue */
+margin-top: 1em;   /* Une longueur proportionnelle à la taille du texte */
+margin-top: 5%;    /* Une marge relative à la largeur */
+                   /* du bloc englobant le plus proche */
+
+/* Valeur avec un mot-clé */
+margin-top: auto;
+
+/* Valeurs globales */
+margin-top: inherit;
+margin-top: initial;
+margin-top: unset;
+
+ +

Le mot-clé auto ou une valeur de longueur (<length>) ou de pourcentage (<percentage>).

+ +

Valeurs

+ +
+
<length>
+
Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type {{cssxref("<length>")}}.
+
<percentage>
+
Une valeur en pourcentage (type {{cssxref("<percentage>")}} qui est relative à la largeur du bloc englobant.
+
auto
+
Voir {{cssxref("margin")}}.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: blue;
+  background-clip: border-box;
+  width: 50px;
+  height: 2em;
+}
+.exemple {
+  margin-top: 3em;
+  background-color: gold;
+  background-clip: border-box;
+}
+ +

HTML

+ +
<div></div>
+<p class=exemple>
+  C’est ce qui arriva en effet, et bien plus tôt
+  qu’elle ne s’y attendait. Elle n’avait pas bu
+  la moitié de la bouteille, que sa tête touchait
+  au plafond et qu’elle fut forcée de se baisser
+  pour ne pas se casser le cou.</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}{{Spec2('CSS3 Box')}}Aucun changement significatif
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}{{Spec2('CSS3 Transitions')}}margin-top peut désormais être animée.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}{{Spec2('CSS2.1')}}L'effet sur les éléments en ligne (inline) est retiré.
{{SpecName('CSS1', '#margin-top', 'margin-top')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.margin-top")}}

diff --git a/files/fr/web/css/margin-trim/index.html b/files/fr/web/css/margin-trim/index.html new file mode 100644 index 0000000000..1cff4f496c --- /dev/null +++ b/files/fr/web/css/margin-trim/index.html @@ -0,0 +1,66 @@ +--- +title: margin-trim +slug: Web/CSS/margin-trim +tags: + - CSS + - Draft + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/margin-trim +--- +
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
+ +

La propriété margin-trim permet à un conteneur de rogner les marges de ses éléments enfants qui sont adjacentes aux bords du conteneur.

+ +

Syntaxe

+ +
+
none
+
Les marges ne sont pas rognées par le conteneur.
+
in-flow
+
+

Pour les boîtes du conteneur et qui sont dans le flux, les marges sur l'axe de bloc et qui sont adjacentes aux bords du conteneur sont tronquées.

+ +

Les marges fusionnées avec de telles marges sont également tronquées.

+
+
all
+
Les marges des boîtes qui sont dans le flux et des boîtes flottantes coincidant avec le bord du conteneur sont tronquées.
+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box", "#margin-trim", "margin-trim")}}{{Spec2("CSS3 Box")}}Définition initiale.
+ +

{{CSSInfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.margin-trim")}}

+ +

Voir aussi

+ +
    +
  • {{CSSxRef("margin")}}
    • +
diff --git a/files/fr/web/css/margin/index.html b/files/fr/web/css/margin/index.html new file mode 100644 index 0000000000..867ce5d592 --- /dev/null +++ b/files/fr/web/css/margin/index.html @@ -0,0 +1,187 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

La propriété margin définit la taille des marges sur les quatre côtés de l'élément. C'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}.

+ +

Il est possible d'utiliser des valeurs négatives pour chacun des côtés.

+ +
{{EmbedInteractiveExample("pages/css/margin.html")}}
+ + + +

Les marges haute et basse n'ont aucun effet sur les élements en ligne (inline) qui ne sont pas remplacés (par exemple les {{HTMLElement("span")}} ou {{HTMLElement("code")}}).

+ +
+

Note : Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le « remplissage » ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.

+
+ +

Syntaxe

+ +
/* La propriété s'applique aux quatre côtés */
+margin: 1em;
+
+/* vertical | horizontal */
+margin: 5% auto;
+
+/* haut | horizontal | bas */
+margin: 1em auto 2em;
+
+/* haut | droit | bas | gauche */
+margin: 2px 1em 0 auto;
+
+/* Valeurs globales */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ +

La propriété margin peut être définie grâce à une, deux, trois ou quatre valeurs. Chaque valeur est une valeur de type {{cssxref("<length>")}} ou de type {{cssxref("<percentage>")}} ou est le mot-clé auto. Les valeurs négatives permette de dessiner l'élément plus près de ses voisins que ne l'aurait permis la valeur par défaut.

+ +
    +
  • Avec une valeur, celle-ci définira la marge pour les quatre côtés de la boîte
    • +
  • Avec deux valeurs, la première s'appliquera aux côtés haut et bas et la seconde aux côtés gauche et droit
    • +
  • Avec trois valeurs, la première s'appliquera au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas
    • +
  • Avec quatre valeurs, la première s'appliquera en haut, la deuxième à droite, la troisième en bas et la quatrième à gauche (ce qui correspond au sens des aiguilles d'une montre - c'est plus facile à mémoriser).
    • +
+ +

Valeurs

+ +

Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants :

+ +
+
<length>
+
La marge est définie avec une valeur absolue. On peut utiliser des valeurs négatives. Pour les différentes unités possibles, voir la page {{cssxref("<length>")}}.
+
<percentage>
+
Une valeur relative, exprimée en pourcentage (type {{cssxref("<percentage>")}}, à la largeur du bloc englobant. On peut utiliser des valeurs négatives.
+
auto
+
auto est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, div { width:50%;  margin:0 auto; } permet de centrer un conteneur div horizontalement).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple simple

+ +

CSS

+ +
.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}
+ +

HTML

+ +
<div class="ex1">
+  margin:     auto;
+  background: gold;
+  width:      66%;
+</div>
+<div class="ex2">
+  margin:     20px 0px 0px -20px;
+  background: gold;
+  width:      66%;
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple_simple')}}

+ +

Autres exemples

+ +
margin: 5%;                /* tous les côtés avec une marge de 5% */
+margin: 10px;              /* tous les côtés avec une marge de 10px */
+
+margin: 1.6em 20px;        /* haut et bas à 1.6em     */
+                           /* gauche et droite à 20px */
+
+margin: 10px 3% 1em;       /* haut à 10px, gauche et droite à 3% */
+                           /* bas à 1em */
+
+margin: 10px 3px 30px 5px; /* haut à 10px, droite à 3px */
+                           /* bas à 30px, gauche à 5px  */
+
+margin: 1em auto;          /* marge de 1em en haut et en bas       */
+                           /* la boîte est centrée horizontalement */
+
+margin: auto;              /* boîte centrée horizontalement */
+                           /* marge nulle en haut et en bas */
+
+ +

Notes

+ +

Centrer horizontalement

+ +

Afin de centrer un élément horizontalement, avec un navigateur « moderne » on peut utiliser {{cssxref("display")}}: flex; {{cssxref("justify-content")}}: center;.

+ +

Les anciens navigateurs comme IE8-9 ne gèrent pas ces valeurs. Aussi, il faudra utiliser margin: 0 auto pour centrer un élément au sein de son parent.

+ +

Fusion des marges

+ +

Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire l'article sur la fusion des marges.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#margin', 'margin')}}{{Spec2('CSS3 Box')}}Aucun changement significatif.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin')}}{{Spec2('CSS3 Transitions')}}margin peut désormais être animée.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin')}}{{Spec2('CSS2.1')}}Retrait de l'effet sur les éléments en ligne (inline).
{{SpecName('CSS1', '#margin', 'margin')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.margin")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/mask-border-mode/index.html b/files/fr/web/css/mask-border-mode/index.html new file mode 100644 index 0000000000..4b28d66c90 --- /dev/null +++ b/files/fr/web/css/mask-border-mode/index.html @@ -0,0 +1,63 @@ +--- +title: mask-border-mode +slug: Web/CSS/mask-border-mode +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-border-mode +--- +
{{cssref}}{{SeeCompatTable}}
+ +

La propriété CSS mask-border-mode indique le mode de fusion utilisé pour le masque de bordure.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+mask-border-mode: luminance;
+mask-border-mode: alpha;
+
+/* Valeurs globales */
+mask-border-mode: inherit;
+mask-border-mode: initial;
+mask-border-mode: unset;
+
+ +

Valeurs

+ +
+
luminance
+
Les valeurs de luminance proventant de l'image de masque sont utilisées pour le masque.
+
alpha
+
Les valeurs du canal alpha proventant de l'image de masque sont utilisées pour le masque.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#propdef-mask-border-mode", "mask-border-mode")}}{{Spec2("CSS Masks")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

TBD

diff --git a/files/fr/web/css/mask-border-outset/index.html b/files/fr/web/css/mask-border-outset/index.html new file mode 100644 index 0000000000..336e8f8c4f --- /dev/null +++ b/files/fr/web/css/mask-border-outset/index.html @@ -0,0 +1,85 @@ +--- +title: mask-border-outset +slug: Web/CSS/mask-border-outset +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-border-outset +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété CSS mask-border-outset indique la distance entre le masque de la bordure et la boîte de la bordure.

+ +

Syntaxe

+ +
/* Valeur de longueur */
+/* Type <length> */
+mask-border-outset: 1rem;
+
+/* Valeur numérique */
+/* Type <number> */
+mask-border-outset: 1.5;
+
+/* Décalage vertical | horizontal */
+mask-border-outset: 1 1.2;
+
+/* haut | horizontal | bas */
+mask-border-outset: 30px 2 45px;
+
+/* haut | droit | bas | gauche */
+mask-border-outset: 7px 12px 14px 5px;
+
+/* Valeurs globales */
+mask-border-outset: inherit;
+mask-border-outset: initial;
+mask-border-outset: unset;
+
+ +

La propriété mask-border-outset peut être utilisée avec une, deux, trois ou quatre valeurs. Chaque valeur peut être de type {{cssxref("<length>")}} ou {{cssxref("<number>")}}. Les valeurs négatives ne sont pas autorisées.

+ +
    +
  • Si une seule valeur est utilisée, c'est ce décalage qui est utilisé pour chaque côté.
    • +
  • Lorsque deux valeurs sont utilisées, la première indique le décalage en haut et en bas et la seconde indique le décalage à gauche et à droite.
    • +
  • Lorsque trois valeurs sont utilisées, la première indique le décalage avec le côté haut, la deuxième avec le côté gauche et le côté droit et la troisième le décalage avec le côté bas.
    • +
  • Lorsque quatre valeurs sont indiquées, elles s'appliquent respectivement aux côtés haut, droit, bas et gauche (c'est-à-dire dans le sens des aiguilles d'une montre).
    • +
+ +

Valeurs

+ +
+
{{cssxref("<length>")}}
+
La distance, avec une dimension, pour le décalage du masque.
+
{{cssxref("<number>")}}
+
Le décalage du masque, exprimé comme un multiple de {{cssxref("border-width")}}.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#propdef-mask-border-outset", "mask-border-outset")}}{{Spec2("CSS Masks")}}Définition initiale.
+ +
{{cssinfo}}
+ +

Compatiblité des navigateurs

+ +

TBD

diff --git a/files/fr/web/css/mask-border-repeat/index.html b/files/fr/web/css/mask-border-repeat/index.html new file mode 100644 index 0000000000..ac59c27850 --- /dev/null +++ b/files/fr/web/css/mask-border-repeat/index.html @@ -0,0 +1,79 @@ +--- +title: mask-border-repeat +slug: Web/CSS/mask-border-repeat +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-border-repeat +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété CSS mask-border-repeat indique la façon dont les régions du bord du masque sont ajustées pour correspondre aux dimensions de la bordure de l'élément.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+mask-border-repeat: stretch;
+mask-border-repeat: repeat;
+mask-border-repeat: round;
+mask-border-repeat: space;
+
+/* vertical | horizontal */
+mask-border-repeat: round stretch;
+
+/* Valeurs globales */
+mask-border-repeat: inherit;
+mask-border-repeat: initial;
+mask-border-repeat: unset;
+
+ +

La propriété mask-border-repeat peut être utilisée avec une ou deux valeurs parmi celles de la liste ci-après.

+ +
    +
  • Lorsqu'une seule valeur est fournie, le même comportement est utilisé pour les quatre côtés.
    • +
  • Lorsque deux valeurs sont indiquées, la première valeur s'applique aux côtés haut et bas et la deuxième aux côtés gauche et droit.
    • +
+ +

Values

+ +
+
stretch
+
Les bords de l'image source sont étirés afin de remplir l'espace entre chaque bordure.
+
repeat
+
Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. Les fragments répétés peuvent être rognés afin que le remplissage soit exact.
+
round
+
Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. Les fragments peuvent être étirés afin que le remplissage soit exact.
+
space
+
Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. L'espace supplémentaire est réparti entre les fragments répétés pour que le remplissage soit exact.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#propdef-mask-border-repeat", "mask-border-repeat")}}{{Spec2("CSS Masks")}}Définition initiale.
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ +

TBD

diff --git a/files/fr/web/css/mask-border-slice/index.html b/files/fr/web/css/mask-border-slice/index.html new file mode 100644 index 0000000000..a3020b76fd --- /dev/null +++ b/files/fr/web/css/mask-border-slice/index.html @@ -0,0 +1,107 @@ +--- +title: mask-border-slice +slug: Web/CSS/mask-border-slice +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-border-slice +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété CSS mask-border-slice permet de découper l'image source, fournie par {{cssxref("mask-border-source")}}, en différentes régions. Ces régions sont utilisées pour former les composants du masque de la bordure.

+ +

Cette découpe permet d'obtenir neuf régions au total : quatre pour les coins, quatre pour les côtés et une région pour le centre. Cette découpe est effectuée selon 4 lignes qui sont écartées d'une certaine distance des bords de l'image.

+ +

The nine regions defined by the border-image or border-image-slice properties

+ +

Le diagramme ci-avant illustre l'emplacement de chaque région.

+ +
    +
  • Les zones de 1 à 4 sont les zones aux coins. Chacune sera utilisée une seule fois pour construire les coins de l'image du masque.
    • +
  • Les zones 5 à 8 sont les zones de côtés. Ces zones peuvent être répétées, redimensionnées, ou modifiées afin que le masque de bordule final aient les mêmes dimensions que l'élément.
    • +
  • La zone 9 est  la zone centrale. Par défaut, elle n'est pas utilisée mais elle pourra être utilisée comme image d'arrière-plan si le mot-clé fill est utilisé.
    • +
+ +

Les propriétés {{cssxref("mask-border-repeat")}}, {{cssxref("mask-border-width")}} et  {{cssxref("mask-border-outset")}} déterminent la façon dont ces régions sont utilisées pour construire le masque final.

+ +

Syntaxe

+ +
/* Une valeur pour tous les côtés */
+mask-border-slice: 30%;
+
+/* vertical | horizontal */
+mask-border-slice: 10% 30%;
+
+/* haut | horizontal | bas */
+mask-border-slice: 30 30% 45;
+
+/* haut | droit | bas | gauche */
+mask-border-slice: 7 12 14 5;
+
+/* Utilisation du mot-clé `fill` */
+mask-border-slice: 10% fill 7 12;
+
+/* Valeurs globales */
+mask-border-slice: inherit;
+mask-border-slice: initial;
+mask-border-slice: unset;
+
+ +

La propriété mask-border-slice peut être définie avec une, deux, trois ou quatre valeurs <number-percentage> qui représentent la distance entre le trait de coupe et le bord de l'image. Les valeurs négatives sont invalides et les valeurs supérieures à la dimension de l'image sur cet axe sont ramenées à 100%.

+ +
    +
  • Lorsqu'une seule valeur est utilisée, les quatre traits de découpe se situent à la même distance de leurs côtés respectifs.
    • +
  • Lorsque deux valeurs sont utilisées, la première valeur indique la distance des traits de coupe pour le côté haut et bas et la deuxième indique la distance des traits de coupe pour le côté droit et gauche.
    • +
  • Lorsque trois positions sont utilisées, la première indique la distance pour le trait de coupe du côté haut, la deuxième indique la distance pour les traits de coupe des côtés droit et gauche et la troisième valeur indique la distance pour le trait de coupe par rapport au côté bas.
    • +
  • Si 4 valeurs sont employées, elles indiquent respectivement les distances des traits de coupe par rapport aux côtés haut, droit, bas et gauche (c'est-à-dire dans l'ordre des aiguilles d'une montre).
    • +
+ +

La valeur optionnelle fill peut être utilisée et placée à n'importe quel endroit de la déclaration.

+ +

Valeurs

+ +
+
{{cssxref("<number>")}}
+
Une valeur numérique représentant le décalage entre le trait de coupe et le bord de l'image. La valeur est exprimée en nombre de pixels pour les images matricielles (bitmap/raster) et en coordonnées pour les images vectorielles. Pour les images vecorielles, le nombre utilisé est relatif à la taille de l'élément et pas à la taille de l'image source. Dans ce dernier cas, il peut être préférable d'utiliser des valeurs en pourcentage.
+
{{cssxref("<percentage>")}}
+
Le décalage entre le trait de découpe et le bord de l'image, exprimé relativement à la taille de l'image source (pour les traits horizontaux, la distance est proportionnelle à la hauteur et pour les traits verticaux, la distance est proportionnelle à la largeur).
+
fill
+
La zone centrale est conservée ; sa largeur et sa hauteur correspondent aux dimensions utilisées pour les régions haute et gauche.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#propdef-mask-border-slice", "mask-border-slice")}}{{Spec2("CSS Masks")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

TBD

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/mask-border-source/index.html b/files/fr/web/css/mask-border-source/index.html new file mode 100644 index 0000000000..2b6ffcd553 --- /dev/null +++ b/files/fr/web/css/mask-border-source/index.html @@ -0,0 +1,72 @@ +--- +title: mask-border-source +slug: Web/CSS/mask-border-source +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-border-source +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété CSS mask-border-source définit l'image à utiliser pour créer le masque de bordure d'un élément.

+ +

C'est la propriété {{cssxref("mask-border-slice")}} qui est utilisée afin de découper l'image en tranches/régions ensuite appliquées dynamiquement pour créer le masque final.

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+mask-border-source: none;
+
+/* Valeurs de type <image> */
+mask-border-source: url(image.jpg);
+mask-border-source: linear-gradient(to top, red, yellow);
+
+/* Valeurs globales */
+mask-border-source: inherit;
+mask-border-source: initial;
+mask-border-source: unset;
+
+ +

Valeurs

+ +
+
none
+
Aucun masque de bordure n'est utilisé.
+
{{cssxref("<image>")}}
+
Une référence vers une image qu'on utilise pour le masque de la bordure.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Voir la page {{cssxref("mask-border")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#propdef-mask-border-source", "mask-border-source")}}{{Spec2("CSS Masks")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

TBD

diff --git a/files/fr/web/css/mask-border-width/index.html b/files/fr/web/css/mask-border-width/index.html new file mode 100644 index 0000000000..e10891a78b --- /dev/null +++ b/files/fr/web/css/mask-border-width/index.html @@ -0,0 +1,94 @@ +--- +title: mask-border-width +slug: Web/CSS/mask-border-width +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-border-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété CSS mask-border-width définit la largeur du masque de bordure d'un élément.

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+mask-border-width: auto;
+
+/* Valeur de longueur */
+/* Type <length> */
+mask-border-width: 1rem;
+
+/* Valeur proportionnelle */
+/* Type <percentage> */
+mask-border-width: 25%;
+
+/* Valeur numérique */
+/* Type <number> */
+mask-border-width: 3;
+
+/* vertical | horizontal */
+mask-border-width: 2em 3em;
+
+/* haut | horizontal | bas */
+mask-border-width: 5% 15% 10%;
+
+/* haut | droit | bas | gauche */
+mask-border-width: 5% 2em 10% auto;
+
+/* Valeurs globales */
+mask-border-width: inherit;
+mask-border-width: initial;
+mask-border-width: unset;
+
+ +

La propriété mask-border-width peut être définie avec une, deux, trois ou quatre valeurs parmi celles de la liste ci-après.

+ +
    +
  • Lorsqu'une seule valeur est indiquée, elle est utilisée comme largeur pour les quatre côtés.
    • +
  • Lorsque deux valeurs sont fournies, la première indique la largeur pour les côtés bas et haut et la deuxième la largeur pour les côtés gauche et droite.
    • +
  • Lorsque trois valeurs sont fournies, la première est appliquée au côté haut, la deuxième au côté gauche et droit et la troisième au côté bas.
    • +
  • Lorsque quatre valeurs sont fournies, elles s'appliquent respectivement aux côtés haut, droit, bas et gauche (c'est-à-dire dans l'ordre des aiguilles d'une montre).
    • +
+ +

Valeurs

+ +
+
<length-percentage>
+
La largeur du masque de bordure, indiquée avec une valeur de type {{cssxref("<length>")}} ou {{cssxref("<percentage>")}}. Les pourcentages sont relatifs à la largeur de la zone de bordure pour les décalages horizontaux et à la hauteur de la zone de bordure pour les décalages verticaux. Cette valeur ne peut pas être négative.
+
<number>
+
La largeur du masque de bordure comme multiple de la largeur {{cssxref("border-width")}}. Cette valeur ne peut pas être négative.
+
auto
+
La largeur du masque de bordure est égale à la largeur ou à la hauteur intrinsèque de la valeur {{cssxref("mask-border-slice")}} correspondante. Si l'image ne possède pas de dimension intrinsèque, c'est la valeur border-width qui est utilisée à la place.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}{{Spec2("CSS Masks")}}Définition intiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

TBD

diff --git a/files/fr/web/css/mask-border/index.html b/files/fr/web/css/mask-border/index.html new file mode 100644 index 0000000000..4695440d10 --- /dev/null +++ b/files/fr/web/css/mask-border/index.html @@ -0,0 +1,114 @@ +--- +title: mask-border +slug: Web/CSS/mask-border +tags: + - CSS + - Experimental + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/mask-border +--- +
{{cssref}}{{SeeCompatTable}}
+ +

La propriété CSS mask-border permet de créer un masque le long de la bordure d'un élément.

+ +

Cette propriété est une propriété raccourcie pour les propriétés {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}} et {{cssxref("mask-border-mode")}}. Comme pour l'ensemble des propriétés raccourcies, toutes les propriétés qui ne sont pas explicitement utilisées dans la règle utilisent leur valeur initiale.

+ +

Syntaxe

+ +
/* source | slice */
+mask-border: url('border-mask.png') 25;
+
+/* source | slice | repeat */
+mask-border: url('border-mask.png') 25 space;
+
+/* source | slice | width */
+mask-border: url('border-mask.png') 25 / 35px;
+
+/* source | slice | width | outset | repeat | mode */
+mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;
+
+ +

Valeurs

+ +
+
<'mask-border-source'>
+
L'image source, pour plus d'informations, voir {{cssxref("mask-border-source")}}.
+
<'mask-border-slice'>
+
Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-slice")}}.
+
<'mask-border-width'>
+
La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-width")}}.
+
<'mask-border-outset'>
+
La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-outset")}}.
+
<'mask-border-repeat'>
+
Cette valeur indiique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir {{cssxref("mask-border-repeat")}}.
+
<'mask-border-mode'>
+
Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir {{cssxref("mask-border-mode")}}.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Image matricielle (bitmap)

+ +

Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large :

+ +

+ +

HTML

+ +
<div id="bitmap">
+  Cet élément est entouré d'un masque de bordure
+  matriciel. C'est pas mal.
+</div>
+ +

CSS

+ +

Pour avoir un seul losange, on divise le carré en 3 (avec la valeur 30). On utilise la valeur round pour que le masque soit réparti également de part et d'autre.

+ +
div {
+  width: 200px;
+  background-color: lavender;
+  border: 18px solid salmon;
+  padding: 10px;
+
+  mask-border:
+    url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png")  /* source */
+    30 /         /* slice */
+    36px 18px    /* width */
+    round;       /* repeat */
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Image_matricielle_(bitmap)")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentairezs
{{SpecName("CSS Masks", "#propdef-mask-border", "mask-border")}}{{Spec2("CSS Masks")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateursEdit

+ +

TBD

diff --git a/files/fr/web/css/mask-clip/index.html b/files/fr/web/css/mask-clip/index.html new file mode 100644 index 0000000000..33e7499059 --- /dev/null +++ b/files/fr/web/css/mask-clip/index.html @@ -0,0 +1,130 @@ +--- +title: mask-clip +slug: Web/CSS/mask-clip +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-clip +--- +
{{CSSRef}}
+ +

La propriété mask-clip définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone.

+ +

{{cssinfo}}

+ +

Syntaxe

+ +
/* Valeurs de type <geometry-box> */
+mask-clip: content-box;
+mask-clip: padding-box;
+mask-clip: border-box;
+mask-clip: margin-box;
+mask-clip: fill-box;
+mask-clip: stroke-box;
+mask-clip: view-box;
+
+/* Valeurs avec un mot-clé */
+mask-clip: no-clip;
+
+/* Valeurs multiples */
+mask-clip: padding-box, no-clip;
+mask-clip: view-box, fill-box, border-box;
+
+/* Mots-clés non-standards */
+-webkit-mask-clip: border;
+-webkit-mask-clip: padding;
+-webkit-mask-clip: content;
+-webkit-mask-clip: text;
+
+/* Valeurs globales */
+mask-clip: inherit;
+mask-clip: initial;
+mask-clip: unset;
+
+ +

Syntaxe

+ +

Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.

+ +

Valeurs

+ +
+
content-box
+
La partie qui est « peinte » est rognée sur la boîte de contenu.
+
padding-box
+
La partie qui est « peinte » est rognée sur la boîte de padding.
+
border-box
+
La partie qui est « peinte » est rognée sur la boîte de bordure.
+
margin-box
+
La partie qui est « peinte » est rognée sur la boîte de marge.
+
fill-box
+
La partie qui est « peinte » est rognée sur la boîte contenant l'objet.
+
stroke-box
+
La partie qui est « peinte » est rognée sur la boîte contenant le contour.
+
view-box
+
C'est le viewport du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut viewBox est défini pour l'élément qui crée le viewport, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut viewBox et les dimensions de la boîtes sont basées sur la hauteur et la largeur de l'attribut viewBox.
+
no-clip
+
La partie qui est « peinte » n'est pas rognée.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  margin: 20px;
+  border: 20px solid #8ca0ff;
+  padding: 20px;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-clip: border;
+  mask-clip: border-box;
+}
+
+ +

HTML

+ +
<div id="masked"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "220px", "250px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}}{{Spec2("CSS Masks")}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.mask-clip")}}

diff --git a/files/fr/web/css/mask-composite/index.html b/files/fr/web/css/mask-composite/index.html new file mode 100644 index 0000000000..1b4d2be85f --- /dev/null +++ b/files/fr/web/css/mask-composite/index.html @@ -0,0 +1,117 @@ +--- +title: mask-composite +slug: Web/CSS/mask-composite +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-composite +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété mask-composite permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous.

+ +
/* Valeurs avec un mot-clé*/
+mask-composite: add;
+mask-composite: subtract;
+mask-composite: intersect;
+mask-composite: exclude;
+
+/* Valeurs globales */
+mask-composite: inherit;
+mask-composite: initial;
+mask-composite: unset;
+
+ +

Syntaxe

+ +

Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.

+ +

Valeurs

+ +

La couche du masque de l'élément est appelée source et les couches inférieures sont appelées destination.

+ +
+
add
+
La source est placée sur la destination.
+
subtract
+
La source est placée lorsque la destination est vide à cet endroit.
+
intersect
+
Les endroits de la source qui chevauchent la destination prennent le pas sur la destination.
+
exclude
+
Les régions de la source et de la destination qui ne se chevauchent pas sont combinées.The non-overlapping regions of source and destination are combined.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
+                      url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
+              url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-size: 100% 100%;
+  -webkit-mask-composite: add;
+  mask-composite: add; /* peut-être modifiée dans la démo */
+}
+
+ + + +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#the-mask-composite", "mask-composite")}}{{Spec2("CSS Masks")}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

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

diff --git a/files/fr/web/css/mask-image/index.html b/files/fr/web/css/mask-image/index.html new file mode 100644 index 0000000000..2a74bb21dc --- /dev/null +++ b/files/fr/web/css/mask-image/index.html @@ -0,0 +1,96 @@ +--- +title: mask-image +slug: Web/CSS/mask-image +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-image +--- +
{{CSSRef}}
+ +

La propriété CSS mask-image définit l'image qui sera utilisée comme masque pour un élément.

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+mask-image: none;
+
+/* Valeur de type <mask-source> */
+mask-image: url(masks.svg#mask1);
+
+/* Valeurs de type <image> */
+mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+mask-image: image(url(mask.png), skyblue);
+
+/* Gestion de plusieurs masques */
+mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* Valeurs globales */
+mask-image: inherit;
+mask-image: initial;
+mask-image: unset;
+
+ +

Valeurs

+ +
+
none
+
Le masque défini par ce mot-clé sera une image noire transparente.
+
<mask-source>
+
Une référence {{cssxref("<url>")}} vers un masque ({{SVGElement("mask")}}) ou une image CSS.
+
{{cssxref("<image>")}}
+
Une image utilisée pour le masque.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+}
+
+ +

HTML

+ +
<div id="masked"></div>
+
+ +

{{EmbedLiveSample("Exemples", "100px", "100px",'', '', 'hide-codepen-jsfiddle') }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#the-mask-image", "mask-image")}}{{Spec2("CSS Masks")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

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

diff --git a/files/fr/web/css/mask-mode/index.html b/files/fr/web/css/mask-mode/index.html new file mode 100644 index 0000000000..1f1f49c77b --- /dev/null +++ b/files/fr/web/css/mask-mode/index.html @@ -0,0 +1,131 @@ +--- +title: mask-mode +slug: Web/CSS/mask-mode +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-mode +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété mask-mode détermine si le masque défini par {{cssxref("mask-image")}} est considéré comme un masque de luminance ou un masque alpha (transparence).

+ +
/* Valeurs avec un mot-clé */
+mask-mode: alpha;
+mask-mode: luminance;
+mask-mode: match-source;
+
+/* Gestion de plusieurs masques */
+mask-mode: alpha, match-source;
+
+/* Valeurs globales */
+mask-mode: inherit;
+mask-mode: initial;
+mask-mode: unset;
+
+ +

Syntaxe

+ +

La propriété mask-mode est définie avec un ou plusieurs mots-clés parmi ceux de la liste suivante, séparés par des virgules.

+ +

Valeurs

+ +
+
alpha
+
Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal de transparence) qui sont utilisées comme valeurs de masque.
+
luminance
+
Ce mot-clé indique que ce sont les valeurs de luminance qui sont utilisées comme valeurs de masque.
+
match-source
+
+

Si la propriété {{cssxref("mask-image")}} est de type <mask-source>, les valeurs de luminance de l'image doivent être utilisée comme valeurs pour le masque.

+ +

Si elle est de type {{cssxref("<image>")}}, ce seront les valeurs de transparence (canal alpha) qui seront utilisées.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Alpha

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background: blue linear-gradient(red, blue);
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-mode: alpha;
+  mask-mode: alpha;
+}
+
+ +

HTML

+ +
<div id="masked"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Alpha", "110px", "130px")}}

+ +

Luminance

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-mode: luminance;
+  mask-mode: luminance;
+}
+
+ +

HTML

+ +
<div id="masked"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Luminance", "110px", "130px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}}{{Spec2("CSS Masks")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.mask-mode")}}

diff --git a/files/fr/web/css/mask-origin/index.html b/files/fr/web/css/mask-origin/index.html new file mode 100644 index 0000000000..fdebe34999 --- /dev/null +++ b/files/fr/web/css/mask-origin/index.html @@ -0,0 +1,144 @@ +--- +title: mask-origin +slug: Web/CSS/mask-origin +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-origin +--- +
{{CSSRef}}
+ +

La propriété mask-origin permet de définir l'origine à partir de laquelle placer le masque.

+ +
/* Valeurs avec un mot-clé */
+mask-origin: content-box;
+mask-origin: padding-box;
+mask-origin: border-box;
+mask-origin: margin-box;
+mask-origin: fill-box;
+mask-origin: stroke-box;
+mask-origin: view-box;
+
+/* Valeurs multiples */
+mask-origin: padding-box, content-box;
+mask-origin: view-box, fill-box, border-box;
+
+/* Valeurs non-standards */
+ -webkit-mask-origin: content;
+ -webkit-mask-origin: padding;
+ -webkit-mask-origin: border;
+
+/* Valeurs globales */
+mask-origin: inherit;
+mask-origin: initial;
+mask-origin: unset;
+
+ +

Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via {{cssxref("mask-image")}}. Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes inline ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles {{cssxref("box-decoration-break")}} agira pour déterminer la zone de positionnement du masque.

+ +

Syntaxe

+ +

Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.

+ +

Valeurs

+ +
+
content-box
+
La position de la zone est relative à la boîte de contenu.
+
padding-box
+
La position de la zone est relative à la boîte de remplissage (padding). Pour les boîtes simples, 0 0 désigne le coin en haut à gauche de la bordure de cette boîte et 100% 100% le coin en bas à droite.
+
border-box
+
La position de la zone est relative à la boîte de bordure.
+
margin-box
+
La position de la zone est relative à la boîte de marge.
+
fill-box
+
La position de la zone est relative à la boîte liée à l'objet (bounding box).
+
stroke-box
+
La position de la zone est relative à la boîte de contour de l'objet (stroke bounding box).
+
view-box
+
La zone d'affichage (viewport) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut {{svgattr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par viewBox. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de viewBox.
+
content{{non-standard_inline}}
+
Synonyme de content-box.
+
padding{{non-standard_inline}}
+
Synonyme de padding-box.
+
border{{non-standard_inline}}
+
Synonyme de border-box.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+  border: 10px solid blue;
+  background-color: #8cffa0;
+  padding: 10px;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  -webkit-mask-origin: border-box; /* À modifier dans le résultat. */
+  mask-origin: border-box; /* À modifier dans le résultat. */
+}
+
+ +

HTML

+ +
<div id="masked">
+</div>
+<select id="origin">
+  <option value="content-box">content-box</option>
+  <option value="padding-box">padding-box</option>
+  <option value="border-box" selected>border-box</option>
+  <option value="margin-box">margin-box</option>
+  <option value="fill-box">fill-box</option>
+  <option value="stroke-box">stroke-box</option>
+  <option value="view-box">view-box</option>
+</select>
+
+ +

JavaScript

+ +
var origin = document.getElementById("origin");
+origin.addEventListener("change", function (evt) {
+  document.getElementById("masked").style.maskOrigin = evt.target.value;
+});
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#the-mask-origin", "mask-origin")}}{{Spec2("CSS Masks")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.mask-origin")}}

diff --git a/files/fr/web/css/mask-position/index.html b/files/fr/web/css/mask-position/index.html new file mode 100644 index 0000000000..c5e49fc5c9 --- /dev/null +++ b/files/fr/web/css/mask-position/index.html @@ -0,0 +1,132 @@ +--- +title: mask-position +slug: Web/CSS/mask-position +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-position +--- +
{{CSSRef}}
+ +

La propriété mask-position indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété {{cssxref("mask-origin")}}.

+ +
/* Valeurs avec un mot-clé */
+mask-position: top;
+mask-position: bottom;
+mask-position: left;
+mask-position: right;
+mask-position: center;
+
+/*  Valeurs en pourcentage */
+/* Type <percentage>       */
+mask-position: 25% 75%;
+
+/* Valeurs en longueur */
+/* Type <length>       */
+mask-position: 0px 0px;
+mask-position: 1cm 2cm;
+mask-position: 10ch 8em;
+
+/* Valeurs multiples */
+mask-position: 0px 0px, center;
+
+/* Valeurs globales */
+mask-position: inherit;
+mask-position: initial;
+mask-position: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
<position>
+
Une position CSS (type {{cssxref("<position>")}}) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#wrapper {
+  border: 1px solid black;
+  width: 250px;
+  height: 250px;
+}
+
+#masked {
+  width: 250px;
+  height: 250px;
+  background: blue linear-gradient(red, blue);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-repeat: no-repeat;
+  mask-position: top right; /* Can be changed in the live sample */
+  margin-bottom: 10px;
+}
+
+ + + +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#the-mask-position", "mask-position")}}{{Spec2("CSS Masks")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

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

diff --git a/files/fr/web/css/mask-repeat/index.html b/files/fr/web/css/mask-repeat/index.html new file mode 100644 index 0000000000..501cc2e22f --- /dev/null +++ b/files/fr/web/css/mask-repeat/index.html @@ -0,0 +1,165 @@ +--- +title: mask-repeat +slug: Web/CSS/mask-repeat +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-repeat +--- +
{{CSSRef}}
+ +

La propriété mask-repeat définit la façon dont les images de masque sont répétées. Une image de masque peut être répétée horizontalement, verticalement, dans les deux directions ou pas du tout.

+ +
/* Syntaxe avec une valeur */
+mask-repeat: repeat-x;
+mask-repeat: repeat-y;
+mask-repeat: repeat;
+mask-repeat: space;
+mask-repeat: round;
+mask-repeat: no-repeat;
+
+/* Syntaxe avec deux valeurs */
+/* Première valeur : répétition horizontale */
+/* Seconde valeur : répétition verticale */
+mask-repeat: repeat space;
+mask-repeat: repeat repeat;
+mask-repeat: round space;
+mask-repeat: no-repeat round;
+
+/* Valeurs globales */
+mask-repeat: inherit;
+mask-repeat: initial;
+mask-repeat: unset;
+
+ +

Par défaut, les images répétées sont rognées aux limites de l'élément mais on peut également les adapter pour qu'elles soient également réparties sur l'élément : en les redimensionnant si nécessaire (round) ou en les espaçant (space).

+ +

Syntaxe

+ +

Une ou plusieurs valeurs <repeat-style>, séparées par des virgules.

+ +

Valeurs

+ +
+
<repeat-style>
+
La notation utilisant une seule valeur est une notation raccourcie qui possède un équivalent avec deux valeurs :
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valeur uniqueÉquivalent sur deux valeurs
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat
+ Lorsqu'on utilise deux valeurs, la première indique le motif de répétition sur l'axe horizontal et la deuxième sur l'axe vertical. Voici une définition de chacun des mots-clés :
+
+ + + + + + + + + + + + + + + + + + + +
repeatL'image est répétée autant de fois que nécessaire pour recouvrir la zone dédiée au masque. 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("mask-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.
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("mask-position")}}.
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128,128,128);
+  border: solid black 1px;
+
+  /* Pour voir la bordure */
+  -webkit-mask-clip: content;
+  mask-clip: content;
+
+  -webkit-mask-image: url('https://developer.mozilla.org/static/img/favicon32.png');
+  mask-image: url('https://developer.mozilla.org/static/img/favicon32.png');
+
+  -webkit-mask-repeat: repeat-x;
+  mask-repeat: repeat-x;
+
+}
+ +

HTML

+ +
<div class="exemple"></div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#the-mask-repeat", "mask-repeat")}}{{Spec2("CSS Masks")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

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

diff --git a/files/fr/web/css/mask-size/index.html b/files/fr/web/css/mask-size/index.html new file mode 100644 index 0000000000..bbdc192176 --- /dev/null +++ b/files/fr/web/css/mask-size/index.html @@ -0,0 +1,153 @@ +--- +title: mask-size +slug: Web/CSS/mask-size +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/mask-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété mask-size définit les dimensions des images utilisées comme masques. La taille de l'image peut être contrainte, partiellement ou complètement, afin de conserver ses proportions intrinsèques.

+ +
/* Valeurs avec un mot-clé */
+mask-size: cover;
+mask-size: contain;
+
+/* Syntaxe avec une valeur           */
+/* qui indique la largeur de l'image */
+/* la hauteur est fixée à auto       */
+mask-size: 50%;
+mask-size: 3em;
+mask-size: 12px;
+mask-size: auto;
+
+/* Syntaxe avec deux valeurs :           */
+/* La première valeur indique la largeur */
+/* La seconde indique la hauteur         */
+mask-size: 50% auto;
+mask-size: 3em 25%;
+mask-size: auto 6px;
+mask-size: auto auto;
+
+/* Valeurs multiples pour gérer différents */
+/* masques. Attention à ne pas confondre   */
+/* avec mask-size: auto auto               */
+mask-size: auto, auto;
+mask-size: 50%, 25%, 25%;
+mask-size: 6px, auto, contain;
+
+/* Valeurs globales */
+mask-size: inherit;
+mask-size: initial;
+mask-size: unset;
+
+ +
Note : Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie {{cssxref("mask")}} et que celle-ci est appliquée après mask-size, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie.
+ +

Syntaxe

+ +

Une ou plusieurs valeurs <bg-size>, séparées par des virgules. Une valeur <bg-size> peut être définie de trois façons :

+ +
    +
  • avec le mot-clé contain
    • +
  • avec le mot-clé cover
    • +
  • avec des valeurs pour la hauteur et la largeur.
    • +
+ +

Pour indiquer une taille avec une largeur et une hauteur, il est possible de fournir une ou deux valeurs :

+ +
    +
  • Si une seule valeur est fournie, elle servira à définir la largeur, la hauteur vaudra alors auto
    • +
  • Si deux valeurs sont fournies, la première définira la largeur et la seonde définira la hauteur.
    • +
+ +

Chaque valeur peut être une longueur (<length>), un pourcentage (<percentage>) ou auto.

+ +

Valeurs

+ +
+
<length>
+
Une valeur de longueur (type {{cssxref("<length>")}} qui redimensionne l'image avec la longueur indiquée dans l'axe correspondant. Les longueurs négatives ne sont pas autorisées.
+
<percentage>
+
Une valeur de pourcentage ({{cssxref("<percentage>")}} qui indique le redimensionnement à appliquer dans l'axe correspondant à partir de l'origine définie par {{cssxref("mask-origin")}} par rapport à la taille  de la zone du masque. Par défaut, cette zone contient la boîte de contenu et la boîte de remplissage (padding) (on peut modifier cette zone pour choisir les boîtes concernées). Les valeurs négatives ne sont pas autorisées.
+
auto
+
Un mot-clé qui permet de redimensionner l'image du masque dans l'axe correspondant tout en conservant ses proportions.
+
contain
+
Un mot-clé qui redimensionne l'image afin qu'elle soit aussi grande que possible et conserve ses proportions tout en étant contenue dans le contenur. Par défaut, l'image est centrée sauf si {{cssxref("mask-position")}} indique un autre paramètre.
+
cover
+
Un mot-clé qui se comporte à l'inverse de contain. L'image est agrandie autant que possible et ses proportions sont conservées et elle couvre toute la surface du conteneur, si les dimensions du conteneur sont différentes, l'image est rognée sur les côtés (haut et bas ou droite et gauche).
+
+ +

L'interprétation des valeurs se fera en fonction des dimensions intrinsèques de l'image (sa hauteur et sa largeur) et de ses proportions intrinsèques (le ratio entre la largeur et la hauteur). Une image matricielle (bitmap) possèdera toujours des dimensions intrinsèques et des proportions intrinsèques. Une image vectorielle pourra avoir des dimensions intrinsèques (et donc, de facto, des proportions intrinsèques) ou également n'avoir qu'une ou aucune dimension intrinsèque et des proportions intrinsèques ou non. Les gradients sont considérés comme des images sans dimensions ni proportions intrinsèques.

+ +

La taille de l'image affichée pour le masque est calculée de la façon suivante :

+ +
+
Si les deux composants de mask-size sont définis et sont différents de auto :
+
L'image est affichée avec la taille indiquée.
+
Si mask-size vaut contain ou cover :
+
L'image est affichée en conservant ses proportions avec la plus grande taille possible pour être contenue ou couvrire toute la zone du masque. Si l'image ne possède pas de proportions intrinsèques, sa taille d'affichage sera la taille de la zone du masque.
+
Si mask-size vaut auto ou auto auto :
+
Si l'image possède deux dimensions intrinsèques, elle sera affichée avec cette taille. Si elle ne possède pas de dimensions intrinsèques ni de proportions intrinsèques, elle sera affichée à la taille de la zone du masque. Si elle n'a aucune dimension intrinsèque mais possède des proportions intrinsèques elle sera affichée comme si contain avait été utilisé. Si l'image possède une dimension intrinsèque et des proportions intrinsèques, sa taille sera déterminée grâce à ses informations. Si l'image possède une dimension intrinsèque mais aucune proportion intrinsèque, la dimension connue sera utilisée pour cet axe et la seconde sera celle de la zone pour le masque.
+
Si mask-size possède un composant auto et un autre composant différent de auto :
+
Si l'image possède des proportions intrinsèques, elle sera affichée avec la dimension connue et la deuxième sera calculée à partir de la proportion. Si l'image ne possède pas de proportions intrinsèques, la valeur définie sera utilisée pour l'axe correspondant et pour l'autre axe, on utilisera la dimension intrinsèque si elle est connue, sinon, on utilisera la dimension (sur cet axe) de la zone du masque.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128,128,128);
+
+  -webkit-mask-image: url('https://mdn.mozillademos.org/files/13024/masque2.png');
+  mask-image: url('https://mdn.mozillademos.org/files/13024/masque2.png');
+
+  -webkit-mask-size: auto 50%;
+  mask-size: auto 50%;
+
+}
+ +

HTML

+ +
<div class="exemple"></div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#the-mask-size", "mask-size")}}{{Spec2("CSS Masks")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.mask-size")}}

diff --git a/files/fr/web/css/mask-type/index.html b/files/fr/web/css/mask-type/index.html new file mode 100644 index 0000000000..e62f64e80e --- /dev/null +++ b/files/fr/web/css/mask-type/index.html @@ -0,0 +1,182 @@ +--- +title: mask-type +slug: Web/CSS/mask-type +tags: + - CSS + - Propriété + - Reference + - SVG +translation_of: Web/CSS/mask-type +--- +
{{CSSRef}}
+ +

La propriété mask-type définit si un masque sera utilisé comme un masque de luminance ou comme un masque de transparence (aussi appelé masque alpha). Cette propriété s'applique sur l'élément SVG {{SVGElement("mask")}}. Le comportement de cette propriété peut être surchargée par la propriété {{cssxref("mask-mode")}} qui définit sur quel élément le masque est appliqué. De façon générale, les masques alpha sont appliqués plus rapidement que les masques de luminance.

+ +
/* Valeurs avec un mot-clé */
+mask-type: luminance;
+mask-type: alpha;
+
+/* Valeurs globales */
+mask-type: inherit;
+mask-type: initial;
+mask-type: unset;
+
+ +

Syntaxe

+ +

La propriété mask-type est définie avec un mot-clé parmi ceux définis ci-après.

+ +

Valeurs

+ +
+
luminance
+
Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de luminance. Autrement dit, ce sont les valeurs de luminance relatives qui seront utilisées lorsque le masque sera appliqué.
+
alpha
+
Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de transparence. Autrement dit, ce sont les valeurs du canal alpha de l'image qui seront utilisées lorsque le masque sera appliqué.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Prenons comme masque le rectangle suivant :

+ +
<rect x="10" y="10" width="80" height="80"
+    fill="red" fill-opacity="0.7" />
+ + + +
Le voici : {{EmbedLiveSample('mask', '100%', '100')}}
+ +

Appliquons le à cette boîte :

+ + + +
{{EmbedLiveSample('box', '100%', '120')}}
+ +

Voici le résultat, si votre navigateur prend en charge cette propriété, avec les deux valeurs de mask-type appliquée à l'élément {{SVGElement("mask")}}, on aura deux carrés différents :

+ + + + + + + + + + + + +
mask-type: alpha;mask-type: luminance;
+ + +
{{EmbedLiveSample('maskalpha', '100%', '102')}}
+ 		+ + +
{{EmbedLiveSample('maskluminance', '100%', '102')}}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Masks', '#the-mask-type', 'mask-type')}}{{Spec2('CSS Masks')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.mask-type")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("mask")}}
    • +
  • {{cssxref("mask-mode")}}
    • +
diff --git a/files/fr/web/css/mask/index.html b/files/fr/web/css/mask/index.html new file mode 100644 index 0000000000..4a69a1adf8 --- /dev/null +++ b/files/fr/web/css/mask/index.html @@ -0,0 +1,128 @@ +--- +title: mask +slug: Web/CSS/mask +tags: + - CSS + - Propriété + - Reference + - SVG +translation_of: Web/CSS/mask +--- +
{{CSSRef}}
+ +

La propriété mask permet de masquer un élément partiellement ou complètement en utilisant un masque apposé sur l'image ou en rognant l'image aux positions données. Cette propriété est une propriété raccourcie pour les propriétés {{cssxref("mask-image")}}, {{cssxref("mask-mode")}}, {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-clip")}}, {{cssxref("mask-origin")}}, {{cssxref("mask-size")}} et {{cssxref("mask-composite ")}}.

+ +
+

Note : La propriété raccourcie réinitialise également {{cssxref("mask-border")}} avec sa valeur initiale. Il est donc recommandé d'utiliser la propriété raccourcie à travers les feuilles de style plutôt que les propriétés raccourcies (sauf en cas d'héritage complexe).

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+mask: none;
+
+/* Valeurs d'image */
+/* Type <image>    */
+mask: url(mask.png);                       /* Image matricielle utilisée comme masque */
+mask: url(masks.svg#star);                 /* Élément d'un SVG utilisé comme masque */
+
+/* Valeurs combinées */
+mask: url(masks.svg#star) luminance;       /* Élément d'un SVG utilisé comme masque de luminance */
+mask: url(masks.svg#star) 40px 20px;       /* Élément d'un SVG utilisé comme masque positioné à 40px du haut et 20px de la gauche */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* Élément d'un SVG utilisé comme masque avec une hauteur et largeur de 50px */
+mask: url(masks.svg#star) repeat-x;        /* Élément d'un SVG utilisé comme masque répété horizontalement */
+mask: url(masks.svg#star) stroke-box;      /* Élément d'un SVG utilisé comme masque étendu à la boîte contenu dans le contour */
+mask: url(masks.svg#star) exclude;         /* Élément d'un SVG utilisé comme masque et combiné avec l'arrière-plan pour les parties qui ne se chevauchent pas */
+
+/* Valeurs globales */
+mask: inherit;
+mask: initial;
+mask: unset;
+
+ +

Valeurs

+ +
+
<mask-reference>
+
Cette valeur permet de définir l'image source pour le masque. Voir {{cssxref("mask-image")}}.
+
<masking-mode>
+
Cette valeur définit le mode du masque. Voir {{cssxref("mask-mode")}}.
+
<position>
+
Cette valeur définit la position de l'image du masque. Voir {{cssxref("mask-position")}}.
+
<bg-size>
+
Cette valeur définit la taille de l'image du masque. Voir {{cssxref("mask-size")}}.
+
<repeat-style>
+
Cette valeur définit le mode de répétition de l'image du masque. Voir {{cssxref("mask-repeat")}}.
+
<geometry-box>
+
Si une seule valeur <geometry-box> est fournie, elle définira les valeurs de {{cssxref("mask-origin")}} et {{cssxref("mask-clip")}}. Si deux valeurs sont fournies, la première sera utilisée pour définir {{cssxref("mask-origin")}} et la deuxième pour définir {{cssxref("mask-clip")}}.
+
<geometry-box> | no-clip
+
Cette valeur définit la zone qui est impactée par l'image du masque. Voir {{cssxref("mask-clip")}}.
+
<compositing-operator>
+
Cette valeur définit l'opération de composition qui est utilisée par rapport à la couche de masque actuelle. Voir {{cssxref("mask-composite")}}.
+
+

Syntaxe formelle

+
+
+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p class="exemple">Il y avait une table servie sous un arbre devant
+ la maison, et le Lièvre y prenait le thé avec le Chapelier. Un Loir
+ profondément endormi était assis entre les deux autres qui s’en
+ servaient comme d’un coussin, le coude appuyé sur lui et causant
+ par-dessus sa tête.</p>
+
+ +

CSS

+ +
.exemple{
+  mask:url(https://developer.cdn.mozilla.net/static/img/favicon72.png) luminance 20%;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks", "#the-mask", 'mask')}}{{Spec2("CSS Masks")}}Extension aux éléments HTML. La syntaxe est étendue et la propriété devient une propriété raccourcie pour les nouvelles propriétés mask-* définies avec cette spécification.
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.mask")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/max()/index.html b/files/fr/web/css/max()/index.html new file mode 100644 index 0000000000..88016899ac --- /dev/null +++ b/files/fr/web/css/max()/index.html @@ -0,0 +1,120 @@ +--- +title: max() +slug: Web/CSS/max() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/max() +--- +
{{CSSRef}}
+ +

La fonction CSS max() permet d'obtenir la plus grande valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce maximum comme valeur d'une propriété CSS. La fonction max() peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} est autorisée.

+ +
/* property: max(expression [, expression]) */
+width: max(10vw, 4em, 80px);
+
+ +

Dans l'exemple précédent, la largeur mesurera au moins 80 pixels de large, sera plus large si la zone d'affichage (viewport) est plus large que 800 pixels ou si un em vaut plus que 20 pixels de large. Autrement dit, la valeur fournie max() est calculée comme un seuil et généralement, on aura un seuil minimal dans une expression max() (ce qui peut paraître contradictoire à juste titre).

+ +

Syntaxe

+ +

La fonction max() prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus grand résultat des évaluations des expressions passées en arguments.

+ +

Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec attr()). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("<length>")}}).

+ +

Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs.

+ +

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

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Garantir une taille minimale pour des images

+ +

max() permet de simplifier la définition d'une taille minimale, par exemple la largeur d'une image. Dans cet exemple, la règle CSS permet d'obtenir un logo qui s'étire sur la moitié de la fenêtre pour les fenêtres les plus larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média.

+ +

CSS

+ +
.logo {
+  width: max(50vw, 300px);
+}
+
+ +

HTML

+ +
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
+ +

Résultat

+ +

{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', 'auto', '60')}}

+ +

Avec cet exemple, le logo sera au moins large de 300 pixels et sera plus large afin d'occuper la moitié de la zone d'affichage si le viewport devient plus large que 600 pixels.

+ +

Fixer une taille minimale pour une police

+ +

On peut également utiliser max() pour définir la taille d'une police et fixer un seuil minimal pour garantir une certaine lisibilité.

+ +

CSS

+ +
h1 {
+  font-size: 2rem;
+}
+h1.responsive {
+  font-size: max(4vw, 2em, 2rem);
+}
+
+ +

Avec ces règles, la valeur pour font-size vaudra au moins 2rems ou deux fois la taille par défaut de la police sur la page.

+ +

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('Fixer_une_taille_minimale_pour_une_police', '700', '300')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#calc-notation', 'max()')}}{{Spec2('CSS4 Values')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.max")}}

+ +

Voir aussi

+ +
    +
  • {{CSSxRef("calc", "calc()")}}
    • +
  • {{CSSxRef("clamp", "clamp()")}}
    • +
  • {{CSSxRef("min", "min()")}}
    • +
  • Valeurs et unités en CSS
    • +
diff --git a/files/fr/web/css/max-block-size/index.html b/files/fr/web/css/max-block-size/index.html new file mode 100644 index 0000000000..775b7f91ed --- /dev/null +++ b/files/fr/web/css/max-block-size/index.html @@ -0,0 +1,140 @@ +--- +title: max-block-size +slug: Web/CSS/max-block-size +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/max-block-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété max-block-size définit la taille maximale horizontale ou verticale d'un élément selon l'axe perpendiculaire (l'axe de bloc) au sens d'écriture indiqué par {{cssxref("writing-mode")}}. Elle correspond à la propriété {{cssxref("max-width")}} ou {{cssxref("max-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}. Si le mode d'écriture est orienté verticalement, max-block-size fait référence à la hauteur maximale de l'élément, sinon elle fait référence à la largeur maximale de l'élément.

+ +

La propriété {{cssxref("max-inline-size")}} peut être utilisée pour l'effet analogue selon l'axe en ligne (c'est-à-dire l'axe qui suit le sens d'écriture).

+ +

Cette propriété est une propriété logique qui doit remplacer les propriétés physiques correspondantes (max-height ou max-width) si on souhaite que la disposition tienne compte du mode d'écriture de la page (que celui-ci soit horizontal ou vertical). Vous pouvez consulter ces exemples pour en savoir plus.

+ +
{{EmbedInteractiveExample("pages/css/max-block-size.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+max-block-size: 300px;
+max-block-size: 25em;
+
+/* Valeurs proportionnelles */
+/* Type <percentage> */
+max-block-size: 75%;
+
+/* Valeurs avec un mot-clé */
+max-block-size: none;
+max-block-size: max-content;
+max-block-size: min-content;
+max-block-size: fit-content;
+max-block-size: fill-available;
+
+/* Valeurs globales */
+max-block-size: inherit;
+max-block-size: initial;
+max-block-size: unset;
+
+ +

Valeurs

+ +

La propriété max-block-size peut prendre les mêmes valeurs que les propriétés {{cssxref("max-width")}} ou {{cssxref("max-height")}}.

+ +

{{page("/fr/docs/Web/CSS/max-width", "Valeurs")}}

+ +

Relation avec les propriétés physiques

+ +

La valeur de writing-mode détermine la propriété physique correspondant à max-block-size :

+ + + + + + + + + + + + + + + + + + +
Valeur pour writing-modePropriété physique équivalente à max-block-size
horizontal-tb, lr {{deprecated_inline}}, lr-tb {{deprecated_inline}}, rl {{deprecated_inline}}, rb {{deprecated_inline}}, rb-rl {{deprecated_inline}}{{cssxref("max-height")}}
vertical-rl, vertical-lr, sideways-rl {{experimental_inline}}, sideways-lr {{experimental_inline}}, tb {{deprecated_inline}}, tb-rl {{deprecated_inline}}{{cssxref("max-width")}}
+ +
+

Note : Les valeurs sideways-lr et sideways-rl pour writing-mode ont été retirées de la spécification CSS Writing Modes Level 3 en fin de processus et pourraient être réintroduites dans la spécification Level 4.

+
+ +
+

Note : Les modes d'écriture lr, lr-tb, rl, rb et rb-tl ne sont plus autorisés pour les contextes {{Glossary("HTML")}} et peuvent uniquement être utilisés dans des contextes {{Glossary("SVG")}} 1.x.

+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemple

+ +

CSS

+ +
.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 100%;
+  max-block-size: 200px;
+}
+ +

HTML

+ +
<p class="exemple">Texte d'exemple</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationsÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}{{Spec2("CSS Logical Properties")}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.max-block-size")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : {{cssxref("max-width")}} et {{cssxref("max-height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/fr/web/css/max-height/index.html b/files/fr/web/css/max-height/index.html new file mode 100644 index 0000000000..9b94e51229 --- /dev/null +++ b/files/fr/web/css/max-height/index.html @@ -0,0 +1,146 @@ +--- +title: max-height +slug: Web/CSS/max-height +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/max-height +--- +
{{CSSRef}}
+ +

La propriété max-height est utilisée pour définir la hauteur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("height")}} de devenir supérieure à la valeur spécifiée par max-height (autrement dit, max-height est une borne supérieure pour height).

+ +
{{EmbedInteractiveExample("pages/css/max-height.html")}}
+ + + +

La valeur de max-height surcharge la valeur de {{cssxref("height")}} mais elle est surchargée par {{cssxref("min-height")}}.

+ +

Syntaxe

+ +
/* Valeur de longueur */
+/* Type <length>      */
+max-height: 3.5em;
+
+/* Valeurs relatives */
+/* Type <percentage> */
+max-height: 10%;
+
+/* Valeurs avec un mot-clé */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content;
+max-height: fill-available;
+
+/* Valeurs globales */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+
+ +

Valeurs

+ +
+
<length>
+
La hauteur maximale fixée, exprimée comme une valeur absolue. Voir {{cssxref("<length>")}} pour les unités qu'on peut utiliser.
+
<percentage>
+
La hauteur maximale fixée, exprimée comme un fraction de la hauteur du bloc englobant. Voir la page {{cssxref("<percentage>")}} sur les valeurs possibles avec ce type.
+
none
+
Il n'y pas de limite à la hauteur que peut prendre la boîte.
+
max-content {{experimental_inline}}
+
La hauteur intrinsèque préférée.
+
min-content {{experimental_inline}}
+
La hauteur intrinsèque minimale.
+
fill-available{{experimental_inline}}
+
La hauteur du bloc englobant moins la marge verticale, la bordure et le remplissage (padding). Certains navigateurs implémentent cette valeur avec un ancien nom : available.
+
fit-content {{experimental_inline}}
+
Un synonyme pour max-content.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div> Lorem ipsum tralala sit amet, consectetur adipisicing
+  <p>
+     Ut enim ad minim veniam, quis nostrud exercitation
+     ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </p>
+</div>
+ +

CSS

+ +
div {
+  height: 250px;
+  border: solid 1px red;
+}
+
+p {
+  max-height: 30%;
+  border: solid 1px blue;
+}
+ +

Résultat

+ +

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

+ +

Accessibilité

+ +

Veiller à s'assurer que les éléments ciblés avec une règle utilisant max-height ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Sizing', '#height-height-keywords', 'max-height')}}{{Spec2('CSS3 Sizing')}}Ajout des mots-clés max-content, min-content, fit-content et fill-available. Les deux brouillons de spécification CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ces spécifications ont été remplacées par celles-ci.
{{SpecName('CSS3 Transitions', '#animatable-css', 'max-height')}}{{Spec2('CSS3 Transitions')}}max-height peut désormais être animée.
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.max-height")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("height")}}
    • +
  • {{cssxref("min-height")}}
    • +
  • {{cssxref("box-sizing")}}
    • +
  • Le modèle de boîtes
    • +
diff --git a/files/fr/web/css/max-inline-size/index.html b/files/fr/web/css/max-inline-size/index.html new file mode 100644 index 0000000000..c8fac84ce1 --- /dev/null +++ b/files/fr/web/css/max-inline-size/index.html @@ -0,0 +1,103 @@ +--- +title: max-inline-size +slug: Web/CSS/max-inline-size +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/max-inline-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété CSS max-inline-size définit la taille maximale horizontale ou verticale d'un élément en ligne (inline) selon le mode d'écriture utilisé. Elle correspond à la propriété {{cssxref("max-width")}} ou {{cssxref("max-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}. Si le mode d'écriture est orienté verticalement, max-inline-size fait référence à la hauteur maximale de l'élément, sinon elle fait référence à la largeur maximale de l'élément. La propriété {{cssxref("max-block-size")}} peut être utilisée pour les blocs.

+ +
{{EmbedInteractiveExample("pages/css/max-inline-size.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+max-inline-size: 300px;
+max-inline-size: 25em;
+
+/* Valeurs proportionnelles */
+/* Type <percentage> */
+max-inline-size: 75%;
+
+/* Valeurs avec un mot-clé */
+max-inline-size: none;
+max-inline-size: max-content;
+max-inline-size: min-content;
+max-inline-size: fit-content;
+max-inline-size: fill-available;
+
+/* Valeurs globales */
+max-inline-size: inherit;
+max-inline-size: initial;
+max-inline-size: unset;
+
+ +

Valeurs

+ +

La propriété max-inline-size peut prendre les mêmes valeurs que les propriétés {{cssxref("max-width")}} ou {{cssxref("max-height")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemple

+ +

CSS

+ +
.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 100%;
+  max-inline-size: 200px;
+}
+ +

HTML

+ +
<p class="exemple">Texte d'exemple</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationsÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-max-inline-size", "max-inline-size")}}{{Spec2("CSS Logical Properties")}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.max-inline-size")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : {{cssxref("max-width")}} et {{cssxref("max-height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/fr/web/css/max-width/index.html b/files/fr/web/css/max-width/index.html new file mode 100644 index 0000000000..e50a03260b --- /dev/null +++ b/files/fr/web/css/max-width/index.html @@ -0,0 +1,150 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/max-width +--- +
{{CSSRef}}
+ +

La propriété max-width est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir supérieure à la valeur spécifiée par max-width (autrement dit, max-width est une borne supérieur pour width).

+ +
{{EmbedInteractiveExample("pages/css/max-width.html")}}
+ + + +

La valeur de max-width surcharge la valeur de {{cssxref("width")}} mais elle est surchargée par {{cssxref("min-width")}}.

+ +

Syntaxe

+ +
/* Valeur de longueur */
+/* Type <length>      */
+max-width: 3.5em;
+
+/* Valeurs relatives */
+/* Type <percentage> */
+max-width: 10%;
+
+/* Valeurs avec un mot-clé */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* Valeurs globales */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+
+ +

Valeurs

+ +
+
<length>
+
La largeur minimale fixée. Voir {{cssxref("<length>")}} pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.
+
<percentage>
+
La largeur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Voir la page {{cssxref("<percentage>")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.
+
fill-available{{experimental_inline}}
+
La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (padding). Certains navigateurs implémentent cette valeur avec un ancien nom : available.
+
fit-content {{experimental_inline}}
+
Un synonyme pour max-content.
+
max-content {{experimental_inline}}
+
La largeur intrinsèque préférée.
+
min-content {{experimental_inline}}
+
La largeur intrinsèque minimale.
+
none
+
Il n'y a pas de maximum pour la largeur. C'est la valeur par défaut.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple simple avec un tableau

+ +

HTML

+ +
<div> Lorem ipsum tralala sit amet, consectetur adipisicing
+  <p>
+     Ut enim ad minim veniam, quis nostrud exercitation
+     ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </p>
+</div>
+ +

CSS

+ +
div {
+  width: 250px;
+  border: solid 1px red;
+}
+
+p {
+  max-width: 60%;
+  border: solid 1px blue;
+}
+ +

Résultat

+ +

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

+ +

Accessibilité

+ +

Veiller à s'assurer que les éléments ciblés avec une règle utilisant max-width ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}}{{Spec2('CSS3 Sizing')}}Ajout des mots-clés max-content, min-content, fit-content et fill-available. Les deux brouillons de spécifications CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ont été remplacées par cette spécification.
{{SpecName('CSS3 Transitions', '#animatable-css', 'max-width')}}{{Spec2('CSS3 Transitions')}}max-width peut désormais être animée.
{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.max-width")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("width")}}
    • +
  • {{cssxref("min-width")}}
    • +
  • {{cssxref("min-height")}}
    • +
  • {{cssxref("max-height")}}
    • +
  • {{cssxref("box-sizing")}}
    • +
  • Le modèle de boîtes
    • +
diff --git a/files/fr/web/css/min()/index.html b/files/fr/web/css/min()/index.html new file mode 100644 index 0000000000..3c948df62a --- /dev/null +++ b/files/fr/web/css/min()/index.html @@ -0,0 +1,140 @@ +--- +title: min() +slug: Web/CSS/min() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/min() +--- +
{{CSSRef}}
+ +

La fonction CSS min() permet d'obtenir la plus petite valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce minimum comme valeur d'une propriété CSS. La fonction min() peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} est autorisée.

+ +
/* property: min(expression [, expression]) */
+width: min(10vw, 4em, 80px);
+
+ +

Dans l'exemple précédent, la largeur mesurera au plus 80 pixels de large, sera moins large si la zone d'affichage (viewport) est moins large que 800 pixels ou si un em vaut moins que 20 pixels de large. Autrement dit, la valeur fournie min() est calculée comme un seuil et généralement, on aura un seuil maximal dans une expression min() (ce qui peut paraître contradictoire à juste titre).

+ +

Syntaxe

+ +

La fonction min() prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus petit résultat des évaluations des expressions passées en arguments.

+ +

Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec {{CSSxRef("attr", "attr()")}}). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("<length>")}}).

+ +

Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs.

+ +

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 min() et min() dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à calc().
    • +
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Garantir une taille maximale pour des images

+ +

min() permet de simplifier la définition d'une taille maximale, par exemple la largeur d'une image. Dans cet exemple, la règle CSS permet d'obtenir un logo qui s'étire sur la moitié de la fenêtre pour les fenêtres les moins larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média.

+ +

CSS

+ +
.logo {
+  width: min(50vw, 300px);
+}
+
+ +

HTML

+ +
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
+ +

Résultat

+ +

{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', '100%', '110')}}

+ +

Définir une taille maximale pour un champ de saisie et son libellé

+ +

La fonction min() peut également être utilisée pour définir la taille maximale d'un contrôle dans un formulaire et permettre de réduire le champ et le libellé associé lorsque la largeur de l'écran diminue.

+ +

CSS

+ +
input, label {
+  padding: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+  width: min(40%, 400px);
+  background-color: pink;
+}
+
+form {
+  margin: 4px;
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

On a ici la règle qui s'applique au formulaire et qui occupe 100% de la largeur de son parent. On déclare avec min() que la largeur doit mesurer au plus 400 pixels ou 40% de la largeur du formulaire. Autrement dit, la taille la plus grande que pourra atteindre le champ et le libellé sera 400 pixels. La largeur la plus étroite sera nécessairement 40% (ce qui peut être tout petit sur l'affichage d'une montre par exemple).

+ +

HTML

+ +
<form>
+  <label>Saisir quelque chose :</label>
+  <input type="text">
+</form>
+
+ +

{{EmbedLiveSample("Définir_une_taille_maximale_pour_un_champ_de_saisie_et_son_libellé", '100%', '110')}}

+ +

Accessibilité

+ +

Lorsqu'on utilise min() afin de contrôler la taille du texte, il faut s'assurer que le texte puisse toujours être suffisamment grand pour être lisible. Pour cela, on peut imbriquer l'appel à min() dans max() utilisant une unité de longueur relative en deuxième argument afin de garantir une lisibilité minimale :

+ +
small {
+  font-size: max(min(0.5vw, 0.5em), 1rem);
+}
+ +

On aura ainsi une taille minimale de 1rem et la taille du texte qui se met à l'échelle si on zoome sur la page.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#calc-notation', 'min()')}}{{Spec2('CSS4 Values')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.min")}}

+ +

Voir aussi

+ +
    +
  • {{CSSxRef("calc", "calc()")}}
    • +
  • {{CSSxRef("clamp", "clamp()")}}
    • +
  • {{CSSxRef("max", "max()")}}
    • +
  • Valeurs et unités en CSS
    • +
diff --git a/files/fr/web/css/min-block-size/index.html b/files/fr/web/css/min-block-size/index.html new file mode 100644 index 0000000000..c53032ddfa --- /dev/null +++ b/files/fr/web/css/min-block-size/index.html @@ -0,0 +1,110 @@ +--- +title: min-block-size +slug: Web/CSS/min-block-size +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/min-block-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété min-block-size définit la taille minimale horizontale ou verticale d'un élément de bloc (block) selon le mode d'écriture utilisé. Cette propriété « logique » correspond à la propriété {{cssxref("min-width")}} ou {{cssxref("min-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}.

+ +
{{EmbedInteractiveExample("pages/css/min-block-size.html")}}
+ + + +

Si le mode d'écriture est orienté verticalement, min-block-size fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément.  to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-inline-size")}} peut être utilisée pour les éléments en ligne.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+min-block-size: 100px;
+min-block-size: 5em;
+
+/* Valeurs proportionnelles à la */
+/* largeur du bloc englobant     */
+/* Type <percentage>             */
+min-block-size: 10%;
+
+/* Valeurs avec un mot-clé */
+min-block-size: max-content;
+min-block-size: min-content;
+min-block-size: fit-content;
+min-block-size: fill-available;
+
+/* Valeurs globales */
+min-block-size: inherit;
+min-block-size: initial;
+min-block-size: unset;
+
+ +

Valeurs

+ +

La propriété min-block-size peut prendre les mêmes valeurs que les propriétés {{cssxref("min-width")}} ou {{cssxref("min-height")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 5%;
+  min-block-size: 200px;
+}
+ +

HTML

+ +
<p class="exemple">Texte d'exemple</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName("CSS Logical Properties", "#propdef-min-block-size", "min-block-size")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.min-block-size")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes +
      +
    • {{cssxref("min-width")}}
      • +
    • {{cssxref("min-height")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/fr/web/css/min-height/index.html b/files/fr/web/css/min-height/index.html new file mode 100644 index 0000000000..cafd659f5d --- /dev/null +++ b/files/fr/web/css/min-height/index.html @@ -0,0 +1,142 @@ +--- +title: min-height +slug: Web/CSS/min-height +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/min-height +--- +
{{CSSRef}}
+ +

La propriété min-height est utilisée afin de définir la hauteur minimale d'un élément. Elle empêche ainsi que la valeur de la propriété {{cssxref("height")}} devienne inférieure à min-height.

+ +
{{EmbedInteractiveExample("pages/css/min-height.html")}}
+ + + +

La valeur de la propriété min-height surcharge celles de {{cssxref("max-height")}} et {{cssxref("height")}} lorsque min-height est supérieure.

+ +

Syntaxe

+ +
/* Valeur de longueur */
+/* Type <length>      */
+min-height: 3.5em;
+
+/* Valeur relative au bloc */
+/* Type <percentage>       */
+min-height: 10%;
+
+/* Valeurs avec un mot-clé */
+min-height: max-content;
+min-height: min-content;
+min-height: fit-content;
+min-height: fill-available;
+
+/* Valeurs globales */
+min-height: inherit;
+min-height: initial;
+min-height: unset;
+
+ +

Valeurs

+ +
+
<length>
+
La hauteur minimale exprimée de façon absolue. Voir la page {{cssxref("<length>")}} pour les différentes unités. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.
+
<percentage>
+
La hauteur minimale exprimée de façon relative à la hauteur du bloc englobant grâce à une valeur de type {{cssxref("<percentage>")}}. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.
+
max-content {{experimental_inline}}
+
La hauteur intrinsèque préférée.
+
min-content {{experimental_inline}}
+
La hauteur intrinsèque minimale préférée.
+
fill-available{{experimental_inline}}
+
La hauteur du bloc englobant moins celle de la marge verticale, de la bordure et du remplissage (padding). Certains navigateurs implémentent cette valeur avec un mot-clé d'une ancienne version : available.
+
fit-content {{experimental_inline}}
+
Selon la spécification CSS3 sur les boîtes (CSS3 Box), cette valeur est synonyme de min-content. La spécification CSS3 sur le dimensionnement (CSS3 Sizing) définit un algorithme plus complexe mais qui n'est implémenté par aucun navigateur, y compris de façon expérimentale.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div> Lorem ipsum tralala
+<p class="exemple">toto</p>
+ Duis aute irure dolor in reprehender
+</div>
+ +

CSS

+ +
div {
+  height: 150px;
+  border: solid 1px red;
+}
+
+.exemple {
+  min-height: 70%;
+  border: solid 1px blue;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}}{{Spec2('CSS3 Sizing')}}Ajout des mots-clés max-content, min-content, fit-content et fill-available.
{{SpecName('CSS3 Flexbox', '#min-auto', 'min-height')}}{{Spec2('CSS3 Flexbox')}} +

Ajout du mot-clé auto et définition de ce mot-clé comme valeur initiale.

+
{{SpecName('CSS3 Transitions', '#animatable-css', 'min-height')}}{{Spec2('CSS3 Transitions')}}min-height peut désormais être animée.
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.min-height")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("width")}}
    • +
  • {{cssxref("height")}}
    • +
  • {{cssxref("max-height")}}
    • +
  • Le modèle de boîtes
    • +
  • {{cssxref("min-width")}}
    • +
  • {{cssxref("box-sizing")}}
    • +
  • {{cssxref("height")}}
    • +
  • {{cssxref("max-height")}}
    • +
diff --git a/files/fr/web/css/min-inline-size/index.html b/files/fr/web/css/min-inline-size/index.html new file mode 100644 index 0000000000..71ff919c9a --- /dev/null +++ b/files/fr/web/css/min-inline-size/index.html @@ -0,0 +1,111 @@ +--- +title: min-inline-size +slug: Web/CSS/min-inline-size +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/min-inline-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété min-inline-size définit la taille minimale horizontale ou verticale d'un élément en ligne (inline) selon le mode d'écriture utilisé. Cette propriété « logique » correspond à la propriété {{cssxref("min-width")}} ou {{cssxref("min-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}.

+ +
{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}
+ + + +

Si le mode d'écriture est orienté verticalement, min-inline-size fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément.  to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-block-size")}} peut être utilisée pour les blocs.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+min-inline-size: 100px;
+min-inline-size: 5em;
+
+/* Valeurs proportionnelles à la */
+/* largeur du bloc englobant     */
+/* Type <percentage>             */
+min-inline-size: 10%;
+
+/* Valeurs avec un mot-clé */
+min-inline-size: max-content;
+min-inline-size: min-content;
+min-inline-size: fit-content;
+min-inline-size: fill-available;
+
+/* Valeurs globales */
+min-inline-size: inherit;
+min-inline-size: initial;
+min-inline-size: unset;
+
+ +

Valeurs

+ +

La propriété min-inline-size peut prendre les mêmes valeurs que les propriétés {{cssxref("min-width")}} ou {{cssxref("min-height")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 5%;
+  min-inline-size: 200px;
+}
+ +

HTML

+ +
<p class="exemple">Texte d'exemple</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName("CSS Logical Properties", "#propdef-min-inline-size", "min-inline-size")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.min-inline-size")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes +
      +
    • {{cssxref("min-width")}}
      • +
    • {{cssxref("min-height")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/fr/web/css/min-width/index.html b/files/fr/web/css/min-width/index.html new file mode 100644 index 0000000000..16337c8f00 --- /dev/null +++ b/files/fr/web/css/min-width/index.html @@ -0,0 +1,142 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/min-width +--- +
{{CSSRef}}
+ +

La propriété min-width est utilisée pour définir la largeur minimale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir inférieure à la valeur spécifiée par min-width (autrement dit, min-width est une borne inférieure pour width).

+ +
{{EmbedInteractiveExample("pages/css/min-width.html")}}
+ + + +

La valeur de min-width surcharge les valeurs de {{cssxref("max-width")}} et de {{cssxref("width")}} si elle est supérieure à l'une de ces propriétés.

+ +

Syntaxe

+ +
/* Valeur de longueur */
+/* Type <length>      */
+min-width: 3.5em;
+
+/* Valeurs relatives */
+/* Type <percentage> */
+min-width: 10%;
+
+/* Valeurs avec un mot-clé */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content;
+min-width: fill-available;
+
+/* Valeurs globales */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+
+ +

Valeurs

+ +
+
<length>
+
La largeur minimale. Voir {{cssxref("<length>")}} pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.
+
<percentage>
+
La largeur minimale, exprimée comme un fraction de la largeur du bloc englobant. Voir la page {{cssxref("<percentage>")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.
+
auto
+
Définit une taille automatique minimale. Sauf si elle est définie par la disposition courante, la résolution de cette valeur sera 0. A des fins de rétro-compatibilité, la valeur résolue de ce mot-clé sera 0 pour l'ensemble des disposition CSS2 : bloc, en ligne, bloc-en ligne, disposition en tableau..
+
max-content {{experimental_inline}}
+
La largeur intrinsèque préférée.
+
min-content {{experimental_inline}}
+
La largeur intrinsèque minimale.
+
fill-available{{experimental_inline}}
+
La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (padding). Certains navigateurs implémentent cette valeur avec un ancien nom : available.
+
fit-content {{experimental_inline}}
+
La largeur calculée par min(max-content, max(min-content, fill-available)).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div> Lorem ipsum tralala sit amet, consectetur adipisicing
+  <p>
+     Ut enim ad minim veniam, quis nostrud exercitation
+     ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </p>
+</div>
+ +

CSS

+ +
div {
+  width: 250px;
+  border: solid 1px red;
+}
+
+p {
+  max-width: 60%;
+  border: solid 1px blue;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width')}}{{Spec2('CSS3 Sizing')}}Ajout des mots-clés max-content, min-content, fit-content et fill-available.
{{SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width')}}{{Spec2('CSS3 Flexbox')}}Ajout du mot-clé auto qui est utilisé comme valeur initiale.
{{SpecName('CSS3 Transitions', '#animatable-css', 'min-width')}}{{Spec2('CSS3 Transitions')}}min-width peut désormais être animée.
{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.min-width")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("width")}}
    • +
  • {{cssxref("max-width")}}
    • +
  • {{cssxref("min-height")}}
    • +
  • {{cssxref("box-sizing")}}
    • +
  • Le modèle de boîtes
    • +
diff --git a/files/fr/web/css/minmax()/index.html b/files/fr/web/css/minmax()/index.html new file mode 100644 index 0000000000..be3492db41 --- /dev/null +++ b/files/fr/web/css/minmax()/index.html @@ -0,0 +1,151 @@ +--- +title: minmax() +slug: Web/CSS/minmax() +tags: + - CSS + - Experimental + - Fonction + - Reference + - Web +translation_of: Web/CSS/minmax() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La fonction CSS minmax() définit un intervalle de taille compris (au sens large) entre min et max. Cette fonction est utilisée avec les grilles CSS.

+ +

Syntaxe

+ +
/* Valeurs <inflexible-breadth>, <track-breadth> */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* Valeurs <fixed-breadth>, <track-breadth> */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* Valeurs <inflexible-breadth>, <fixed-breadth> */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+
+ +

Une fonction qui prend en entrée deux arguments : min et max.

+ +

Chaque paramètre peut être une longueur, un pourcentage, un facteur de flexibilité ou l'un des mots-clés parmi max-content, min-content ou auto.

+ +

Si max < min, max est ignoré et minmax(min,max) correspond à min. Utilisé comme maximum, une valeur {{cssxref("flex_value","<flex>")}} permet de définir le facteur de flexibilité d'une piste de la grille, elle est invalide comme minimum.

+ +

Valeurs

+ +
+
<length>
+
Une longueur positive (cf. le type {{cssxref("<length>")}}).
+
<percentage>
+
Un pourcentage ({{cssxref("<percentage>")}}) positif, relatif à la taille en ligne du conteneur pour les colonnes et à la taille en bloc pour les lignes du conteneur. Si la taille de la grille dépend de la taille de ses pistes, la valeur devra être traitée comme auto. L'agent utilisateur peut ajuster les contributions des tailles intrinsèques à la taille de la piste du conteneur de la grille et augmenter la taille finale de la piste par l'écart minimal nécessaire pour respecter ce pourcentage.
+
<flex>
+
Une dimension positive avec l'unité fr qui définit le facteur de flexibilité de la piste (cf. {{cssxref("<flex>")}}). Chaque piste avec un tel coefficient <flex> occupe une partie de l'espace disponible restant en fonction de son facteur de flexibilité.
+
max-content
+
Cette valeur représente la plus grande valeur max-content contribuant aux objets de la grille qui occupent la piste.
+
min-content
+
Cette valeur représente la plus grande valeur min-content contribuant aux objets de la grille qui occupent la piste
+
auto
+
Utilisé comme maximum, c'est un synonyme de max-content. Utilisé comme un minimum, il représente le plus grand des minima (selon  {{cssxref("min-width")}}/{{cssxref("min-height")}}) des objets de la grille qui occupent la piste.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Propriétés CSS applicables

+ +

La fonction minmax() peut être utilisée avec les propriétés suivantes :

+ +
    +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
+ +

Exemples

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>
+    Item aussi large que le contenu jusqu'à 300 pixels max.
+  </div>
+  <div>
+    Item avec une largeur flexible minimale de 200 pixels.
+  </div>
+  <div>
+    Item inflexible de 150 pixels de large.
+  </div>
+</div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-template-columns.minmax")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/mix-blend-mode/index.html b/files/fr/web/css/mix-blend-mode/index.html new file mode 100644 index 0000000000..c6abaca52a --- /dev/null +++ b/files/fr/web/css/mix-blend-mode/index.html @@ -0,0 +1,661 @@ +--- +title: mix-blend-mode +slug: Web/CSS/mix-blend-mode +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/mix-blend-mode +--- +
{{CSSRef}}
+ +

La propriété mix-blend-mode définit la façon dont le contenu d'un élément doit se mélanger avec le contenu de l'élément parent et avec son arrière-plan.

+ +
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs de type <blend-mode> */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Valeurs globales */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+
+ +

Valeurs

+ +
+
<blend-mode>
+
Indique comment la fusion des modes doit intervenir (cf. {{cssxref("<blend-mode>")}}).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ + + +
{{EmbedLiveSample("mix-blend-mode", "100%", 500, "", "", "example-outcome-frame")}}
+ +

Exemple avec SVG

+ +

SVG

+ +
<svg>
+  <circle cx="40" cy="40" r="40" fill="red"/>
+  <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+  <circle cx="60" cy="80" r="40" fill="blue"/>
+</svg>
+ +

CSS

+ +
circle {
+  mix-blend-mode: screen;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_avec_SVG", "100%", "180")}}

+ +

Exemple avec HTML

+ +

HTML

+ +
<div class="isolate">
+  <div class="circle circle-1"></div>
+  <div class="circle circle-2"></div>
+  <div class="circle circle-3"></div>
+</div>
+ +

CSS

+ +
.circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  mix-blend-mode: screen;
+  position: absolute;
+}
+
+.circle-1 {
+  background: red;
+}
+
+.circle-2 {
+  background: lightgreen;
+  left: 40px;
+}
+
+.circle-3 {
+  background: blue;
+  left: 20px;
+  top: 40px;
+}
+
+.isolate {
+  isolation: isolate; /* Without isolation, the background color will be taken into account */
+  position: relative;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_avec_HTML", "100%", "180")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode')}}{{Spec2('Compositing')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.mix-blend-mode")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("background-blend-mode")}}
    • +
diff --git a/files/fr/web/css/mode_de_mise_en_page/index.html b/files/fr/web/css/mode_de_mise_en_page/index.html new file mode 100644 index 0000000000..377b162194 --- /dev/null +++ b/files/fr/web/css/mode_de_mise_en_page/index.html @@ -0,0 +1,25 @@ +--- +title: Mode de mise en page +slug: Web/CSS/Mode_de_mise_en_page +tags: + - CSS + - Reference +translation_of: Web/CSS/Layout_mode +--- +
{{CSSRef}}
+ +

Un mode de disposition CSS (layout mode), parfois raccourci en « disposition » est un algorithme qui détermine la position et la taille des boîtes des éléments en fonction des interactions avec leurs voisins et leurs ancêtres. Il existe plusieurs modes de disposition :

+ + + +
+

Note : Les propriétés CSS ne s'appliquent toutes à tous les modes de disposition. La plupart des propriétés n'ont d'effet que pour un ou deux de ces modes et seront sans effet pour un élément qui s'inscrit dans un autre mode de disposition.

+
diff --git "a/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/fusion_des_marges/index.html" "b/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/fusion_des_marges/index.html" new file mode 100644 index 0000000000..3b14f121d8 --- /dev/null +++ "b/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/fusion_des_marges/index.html" @@ -0,0 +1,92 @@ +--- +title: Fusion des marges +slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{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/mod\303\250le_de_bo\303\256te_css/g\303\251n\303\251rateur_box-shadow/index.html" "b/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/g\303\251n\303\251rateur_box-shadow/index.html" new file mode 100644 index 0000000000..77f236ac13 --- /dev/null +++ "b/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/g\303\251n\303\251rateur_box-shadow/index.html" @@ -0,0 +1,2887 @@ +--- +title: Générateur de box-shadow +slug: Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow +tags: + - CSS + - Outil +translation_of: 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.

+ +
+

box-shadow generator

+ +

HTML Content

+ +
<div id="container">
+    <div class="group section">
+        <div id="layer_manager">
+            <div class="group section">
+                <div class="button" data-type="add"> </div>
+                <div class="button" data-type="move-up"> </div>
+                <div class="button" data-type="move-down"> </div>
+            </div>
+            <div id="stack_container"></div>
+        </div>
+
+        <div id="preview_zone">
+            <div id="layer_menu" class="col span_12">
+                <div class="button" id="element" data-type="subject" data-title="element"> element </div>
+                <div class="button" id="before" data-type="subject" data-title=":before">
+                    :before
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="button" id="after" data-type="subject" data-title=":after">
+                    :after
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="ui-checkbox" data-topic='before' data-label=":before"></div>
+                <div class="ui-checkbox" data-topic='after' data-label=":after"></div>
+            </div>
+
+            <div id="preview">
+                <div id="obj-element">
+                    <div class="content"> </div>
+                    <div id="obj-before"> </div>
+                    <div id="obj-after"> </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="controls" class="group section">
+        <div class="wrap-left">
+            <div class="colorpicker category">
+                <div class="title"> </div>
+                <div id="colorpicker" class="group">
+                    <div id="gradient" class="gradient">
+                        <div id="gradient_picker"> </div>
+                    </div>
+                    <div id="hue" data-topic="hue" class="hue">
+                        <div id="hue_selector"> </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div>
+                        <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div>
+                        <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div>
+                    </div>
+                    <div class="alpha">
+                        <div id="alpha" data-topic="alpha">
+                            <div id="alpha_selector"> </div>
+                        </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div>
+                        <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div>
+                        <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div>
+                    </div>
+                    <div class="preview block">
+                        <div id="output_color"> </div>
+                    </div>
+                    <div class="block info">
+                        <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div>
+                        <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="wrap-right">
+
+            <div id="shadow_properties" class="category">
+                <div class="title"> Propriétés d'ombre </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> inset </div>
+                        <div class="ui-checkbox" data-topic='inset'></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position x </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posX" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position y </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posY" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Blur </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="blur" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Spread </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="spread" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="element_properties" class="category">
+                <div class="title"> Propriétés d'ombre </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> border </div>
+                        <div class="ui-checkbox" data-topic='border-state' data-state="true"></div>
+                    </div>
+                    <div id="z-index" class="slidergroup">
+                        <div class="ui-slider-name"> z-index </div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"></div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="z-index"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> top </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="top" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> left </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="left" data-unit="px"></div>
+                    </div>
+                    <div id="transform_rotate" class="slidergroup">
+                        <div class="ui-slider-name"> Rotate </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Width </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="width"  data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Height </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="height" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="output" class="category">
+                <div id="menu" class="menu"></div>
+                <div class="title">    Code CSS </div>
+                <div class="group" style="border-top-left-radius: 0;">
+                    <div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow">
+                    </div>
+                    <div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                    <div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input > input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox > label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox > input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left > * {
+	float: left;
+}
+
+.wrap-right > * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview > * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] > span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] > span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] > input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +

+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value <= max && value >= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step <= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step >= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos < 0) pos = 0;
+		if (pos > width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision > this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value > slider.max || value < slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x > size)
+				x = size;
+			if (y > size)
+				y = size;
+
+			if (x < 0) x = 0;
+			if (y < 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value < 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null && this.stack.children.length >= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'Ombre ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count <= 1 || this.layer === null)
+				return;
+			if (direction === -1 && this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 && this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index > this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count >= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index < this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i < size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false && active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false && active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +
{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/index.html" "b/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/index.html" new file mode 100644 index 0000000000..3bc62c03f1 --- /dev/null +++ "b/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/index.html" @@ -0,0 +1,115 @@ +--- +title: Modèle de boîte +slug: Web/CSS/Modèle_de_boîte_CSS +tags: + - Aperçu + - CSS + - CSS Box Model + - Overview + - Reference +translation_of: Web/CSS/CSS_Box_Model +--- +
{{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/mod\303\250le_de_mise_en_forme_visuelle/index.html" "b/files/fr/web/css/mod\303\250le_de_mise_en_forme_visuelle/index.html" new file mode 100644 index 0000000000..d9ac8b3f09 --- /dev/null +++ "b/files/fr/web/css/mod\303\250le_de_mise_en_forme_visuelle/index.html" @@ -0,0 +1,179 @@ +--- +title: Modèle de mise en forme visuelle +slug: Web/CSS/Modèle_de_mise_en_forme_visuelle +tags: + - CSS + - Intermédiaire + - NeedsUpdate +translation_of: Web/CSS/Visual_formatting_model +--- +
{{CSSRef}}
+ +

En CSS, le modèle de mise en forme visuelle est un algorithme qui traite un document afin de l'afficher sur un support visuel. Chaque élément du document est ainsi transformé en zéro, une ou plusieurs boîtes qui s'inscrivent dans le modèle de boîtes CSS. La disposition de chaque boîte est dictée par :

+ +
    +
  • Les dimensions de la boîte qui peuvent être définies explicitement, contraintes ou non
    • +
  • Le type de la boîte : en ligne, en ligne et de niveau (inline-level), atomique, en bloc
    • +
  • Le mode de positionnement : dans le flux normal, en flottement ou positionnée de façon absolue
    • +
  • Les autres éléments présents dans l'arbre du document et notamment ses enfants et ses voisins
    • +
  • La taille et la position de la zone d'affichage (viewport)
    • +
  • Les dimensions intrinsèques des images qu'elle contient
    • +
  • Éventuellement d'autres informations externes.
    • +
+ +

Le modèle affiche une boîte par rapport au bord du bloc qui la contient. Généralement, une boîte devient le bloc contenant pour ses éléments descendants. Toutefois, une boîte n'est pas contrainte dans son bloc contenant, le contenu d'une boîte peut parfois dépasser (ce qu'on appelle en anglais overflow).

+ +

Génération de la boîte

+ +

Lors de cette étape, on crée les boîtes à partir des éléments du document. Les boîtes générées sont de différents types et ces types ont un impact sur la mise en forme visuelle. Le type de boîte générée dépend de la valeur de la propriété {{cssxref("display")}}.

+ +

Les éléments de bloc et les boîtes de bloc

+ +

Un élément est dit « de bloc » lorsque la valeur calculée de la propriété {{cssxref("display")}} qui lui est appliquée vaut : block, list-item ou table. Un élément de bloc est représenté sous la forme d'un bloc (comme un paragraphe par exemple) et les blocs sont empilés verticalement les uns sur les autres.

+ +

Chaque boîte de bloc contribue au contexte de mise en forme des blocs. Chaque élément de bloc génère au moins une boîte de niveau bloc, qu'on appelle la boîte de bloc principale. Certains éléments (comme les éléments d'une liste par exemple) génèrent d'autres boîtes afin de gérer les puces ou d'autres éléments typographiques.

+ +

La boîte de bloc principale contient les boîtes générées par les descendants ete le contenu généré. Cette boîte participe au schéma de positionnement.

+ +

venn_blocks.png

+ +

Une boîte de bloc peut également un conteneur de blocs. Un conteneur de blocs est une boîte qui ne contient que d'autres boîtes de bloc ou qui crée un contexte de formatage en ligne et qui ne contient alors que des boîtes en ligne. Attention, les notions de boîtes de bloc et de conteneurs de blocs ne sont pas identiques. La première décrit la façon dont la boîte se comporte avec ses parents et ses voisins et le seconde définit la façon dont elle interagit avec ses descendants. Certaines boîtes de blocs, telles que les tableaux, ne sont pas des conteneurs de blocs. Réciproquement, certains conteneurs de blocs (tels que les cellules de tableau non remplacées) ne sont pas des boîtes de bloc.

+ +

Les boîtes de bloc qui sont également des conteneurs de blocs sont appelées des boîtes-bloc.

+ +

Les boîtes de bloc anonymes

+ +

Dans certains cas, l'algorithme doit ajouter certaines boîtes supplémentaires. Or, les sélecteurs CSS ne permettent pas de mettre en forme ou de nommer ces boîtes, elles sont donc appelées boîtes de bloc anonymes.

+ +

Les sélecteurs ne permettent pas de manipuler la mise en forme de ces boîtes. Aussi, pour ces boîtes, toutes les propriétés CSS utilisant l'héritage auront la valeur {{cssxref("inherit")}} et toutes les propriétés CSS qui ne sont pas héritées auront la valeur initial.

+ +

Les boîtes qui contiennent des blocs ne contiennent que des boîtes en ligne ou que des boîtes en blocs. Mais souvent, le document contient un mélange des deux. Dans ces cas, des boîtes de bloc anonymes sont créées autour des boîtes en lignes adjacentes.

+ +

Si on prend le code HTML suivant, mis en forme avec les règles par défaut (display:block) :

+ +
<div>
+   Some inline text
+   <p>followed by a paragraph</p>
+   followed by more inline text.
+</div>
+
+ +

On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante :
+   anonymous_block-level_boxes.png

+ +

À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur initial.

+ +

Un autre scénario peut amener à la création de boîtes de bloc anonyme : lorsqu'une boîte en ligne contient une ou plusieurs boîtes de bloc. Dans ce cas, la boîte qui contient la boîte de bloc est divisée en deux boîtes en ligne : une avant et une après la boîte de bloc. Toutes les boîtes en ligne avant la boîte de bloc sont englobées dans une boîte de bloc anonyme et il en va de même pour les boîtes en ligne qui suivent la boîte de bloc. Aussi, la boîte de bloc devient un voisin de deux boîtes de bloc anonymes qui contiennent les éléments en ligne.

+ +

S'il y a plusieurs boîtes de bloc sans contenu en ligne entre elles, les boîtes de bloc anonymes sont créées avant et après ces boîtes.

+ +

Si on prend le code HTML suivant, pour lequel {{HTMLElement("p")}} aura display:inline et {{HTMLElement("span")}} aura display:block :

+ +
<p>
+  Some <em>inline</em> text
+  <span>followed by a paragraph</span>
+  followed by more inline text.
+</p>
+ +

Deux boîtes de bloc anonymes sont créées : une pour le texte avant l'élément <span> et une pour le texte qui suit cet élément. On a alors la structure suivante :

+ +

+ +

Les éléments en ligne et les boîtes en ligne

+ +

Un élément est dit « en ligne » lorsque la valeur de sa propriété CSS {{cssxref("display")}} vaut : inline, inline-block ou inline-table. Visuellement, un tel élément est organisé sur des lignes qui se suivent les unes les autres avec d'autre contenu en ligne. Généralement, il s'agit du contenu d'un paragraphe (éventuellement mis en forme).

+ +

Les éléments en ligne génèrent des boîtes en lignes qui contribuent au contexte de mise en forme en ligne.

+ +

Les boîtes en lignes atomiques ne peuvent pas être divisées en plusieurs lignes au sein d'un contexte de mise en forme.

+ +
<style>
+  span {
+    /* La valeur par défaut */
+    display:inline;
+  }
+</style>
+<div style="width:20em;">
+   Le texte dans le span <span>peut être divisé
+   en plusieurs lignes</span> dans une boîte en
+   ligne.
+</div>
+
+ +
<style>
+  span {
+    display:inline-block;
+  }
+</style>
+<div style="width:20em;">
+   Le texte dans le span <span>ne peut pas être
+   divisé en plusieurs lignes car</span> il est
+   dans une boîte de type inline-block.
+</div>
+
+ +

Les boîtes en ligne anonymes

+ +

Comme pour les boîtes de bloc, il existe quelques cas pour lesquels des boîtes en lignes sont automatiquement créées par le moteur CSS. Ces boîtes en ligne sont également anonymes et ne peuvent être ciblées par les sélecteurs. Pour les propriétés qui fonctionnent avec l'héritage, ces boîtes hériteront de la valeur de la propriété relative à l'élément parent, pour les autres, elles vaudront initial.

+ +

La plupart du temps, une boîte en ligne anonyme est créée lorsque du texte se trouve être un enfant direct d'une boîte en bloc, ce qui crée un contexte de mise en forme en ligne. Dans ce cas, le texte est inclus dans la plus grande boîte en ligne qui puisse être et c'est cette boîte qui est la boîte anonyme. Par ailleurs, le contenu blanc qui serait retiré par la propriété {{cssxref("white-space")}} ne génère pas de boîtes en ligne car celles-ci seraient vides.

+ +

Les autres types de boîte

+ +

Les boîtes de ligne

+ +

Les boîtes de ligne sont générées dans un contexte de mise en forme en ligne afin de représenter une ligne de texte. Au sein d'une boîte en bloc, un boîte de ligne s'étend d'un bord à l'autre de la boîte. Lorsqu'il y a une disposition flottante, la boîte de ligne démarre au bord le plus à droite de la partie flottante qui est située à gauche et finit à la droite du bord gauche suivant.

+ +

Ces boîtes sont uniquement utilisées par le moteur et les développeurs web ne devraient pas avoir à s'en préoccuper.

+ +

Les types de boîtes liés au modèle CSS

+ +

En plus des boîtes en ligne et des boîtes de bloc, CSS définit plusieurs autres modèles de contenu qui peuvent être appliqués aux éléments. Ces modèles définissent des types de boîtes supplémentaires :

+ +
    +
  • Le modèle de contenu pour les tableaux utilise des boîtes englobant les tableaux, des boîtes de tableau et des boîtes de légende
    • +
  • Le modèle de contenu à plusieurs colonnes permet de créer des boîtes de colonne entre la boîte englobante et le contenu.
    • +
  • Les modèles de contenu expérimentaux en grille (CSS Grid) ou avec les boîtes flexibles (flexbox) définissent d'autres types de boîtes.
    • +
+ +

Modes de positionnement

+ +

Une fois les boîtes générées, le moteur CSS doit les disposer les unes par rapport aux autres. Pour ce faire, il utilise un des algorithmes suivants :

+ +
    +
  • Le mode de positionnement normal positionne les boîtes les unes après les autres
    • +
  • Le mode de positionnement flottant permet d'extraire une boîte du flux normal et de la placer sur le côté de la boîte englobante
    • +
  • Le mode de positionnement absolu permet de placer une boîte dans un système de coordonnées absolues, basée sur l'élément englobant. Un élément positionné de façon absolue peut recouvrir d'autres éléments.
    • +
+ +

Le mode normal

+ +

Dans le mode de positionnement normal, les boîtes sont disposées les unes après les autres. Pour un contexte de mise en forme de bloc, elles seront empilées verticalement et pour un contexte de mise en forme en ligne, elles se suivront horizontalement. Le mode de disposition normal est déclenché lorsque la propriété CSS {{cssxref("position")}} vaut static ou relative et si la propriété CSS {{cssxref("float")}} vaut none.

+ +

On a deux cas de figure pour le mode normal : le positionnement statique et le positionnement relatif.

+ +
    +
  • En positionnement statique (obtenu avec la valeur static pour la propriété {{cssxref("position")}}), les boîtes sont dessinées à l'emplacement exact dicté par le flux normal.
    • +
  • En positionnement relatif (obtenu lorsque la propriété {{cssxref("position")}} vaut relative), les boîtes sont dessinées avec un décalage défini par les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.
    • +
+ +

Le mode flottant

+ +

Avec le mode de positionnement flottant, certaines boîtes sont placées au début ou à la fin de ligne courante. Le texte (et tout ce qui se trouve dans le flux normal) épouse donc le contour des boîtes flottantes (sauf si la propriété {{cssxref("clear")}} dicte un autre comportement).

+ +

Pour qu'une boîte soit une boîte flottante, on utilisera la propriété {{cssxref("float")}} avec une valeur différente de none et la propriété {{cssxref("position")}} avec static ou relative. Si {{cssxref("float")}} vaut left, la boîte flottante sera positionnée au début de la ligne de la boîte englobante et si elle vaut right, elle sera à la fin de la ligne.

+ +

Le mode absolu

+ +

En mode absolu, les boîtes sont entièrement retirées du flux normal et n'interagissent plus avec le flux. Elles sont positionnées de façon relative à leur bloc englobant grâce aux propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.

+ +

Un élément est positionné de façon absolue lorsque la propriété {{cssxref("position")}} vaut absolute ou fixed.

+ +

Pour un élément positionné de façon fixe, le bloc englobant sera la zone d'affichage (viewport) et la position de l'élément est absolue par rapport à la zone d'affichage. Faire défiler le contenu ne modifie pas la position de l'élément.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/motion_path/index.html b/files/fr/web/css/motion_path/index.html new file mode 100644 index 0000000000..e6740d2023 --- /dev/null +++ b/files/fr/web/css/motion_path/index.html @@ -0,0 +1,54 @@ +--- +title: Motion Path +slug: Web/CSS/Motion_Path +tags: + - Aperçu + - CSS + - Experimental + - Motion Path + - Reference +translation_of: Web/CSS/CSS_Motion_Path +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Motion Path est un module de la spécification CSS qui permet aux auteurs d'animer des objets graphiques le long d'une ligne appelée chemin.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("offset")}}
    • +
  • {{cssxref("offset-distance")}}
    • +
  • {{cssxref("offset-path")}}
    • +
  • {{cssxref("offset-rotate")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Motion Path Level 1')}}{{Spec2('Motion Path Level 1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

offset

+ + + +

{{Compat("css.properties.offset")}}

diff --git "a/files/fr/web/css/m\303\251dia_pagin\303\251s/index.html" "b/files/fr/web/css/m\303\251dia_pagin\303\251s/index.html" new file mode 100644 index 0000000000..9d114b8e9b --- /dev/null +++ "b/files/fr/web/css/m\303\251dia_pagin\303\251s/index.html" @@ -0,0 +1,20 @@ +--- +title: Médias paginés +slug: Web/CSS/Média_paginés +tags: + - CSS + - Reference +translation_of: Web/CSS/Paged_Media +--- +
{{CSSRef}}
+ +

Les propriétés des médias paginés contrôlent la présentation du contenu imprimable ou de tout autre média dont le contenu est divisé en pages individuelles. Elles permettent de définir des sauts de page, de contrôler la zone d'impression, de donner des styles différents aux pages gauche et droite et de contrôler l'application des césures à l'intérieur des éléments. Voici quelques-unes des propriétés supportées les plus fréquemment utilisées :

+ +
    +
  • {{cssxref("page-break-before")}}
    • +
  • {{cssxref("page-break-after")}}
    • +
  • {{cssxref("page-break-inside")}}
    • +
  • {{cssxref("orphans")}}
    • +
  • {{cssxref("widows")}}
    • +
  • {{cssxref("@page")}}
    • +
diff --git a/files/fr/web/css/none/index.html b/files/fr/web/css/none/index.html new file mode 100644 index 0000000000..a638a00c93 --- /dev/null +++ b/files/fr/web/css/none/index.html @@ -0,0 +1,42 @@ +--- +title: none +slug: Web/CSS/none +tags: + - CSS + - Référence CSS +translation_of: Web/CSS/float +--- +

{{ CSSRef() }}

+

Résumé

+

none est une valeur commune pour la plupart des propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("normal") }} qui peut être utilisée de manière similaire pour d'autres propriétés.

+

Utilisation

+
+ Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.
+
    +
  • {{ Cssxref("animation-name") }}
    • +
  • {{ Cssxref("background-image") }}
    • +
  • {{ Cssxref("border-style") }} ({{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }} et {{ Cssxref("border-top-style") }}
    • +
  • {{ Cssxref("clear") }}
    • +
  • {{ Cssxref("content") }}
    • +
  • {{ Cssxref("display") }}
    • +
  • {{ Cssxref("float") }}
    • +
  • {{ Cssxref("font-size-adjust") }}
    • +
  • {{ Cssxref("list-style-image") }}
    • +
  • {{ Cssxref("list-style-type") }}
    • +
  • {{ Cssxref("max-height") }}
    • +
  • {{ Cssxref("max-width") }}
    • +
  • {{ Cssxref("outline-style") }}
    • +
  • {{ Cssxref("quotes") }}
    • +
  • {{ Cssxref("resize") }}
    • +
  • {{ Cssxref("text-decoration") }}
    • +
  • {{ Cssxref("text-transform") }}
    • +
+

Extensions Mozilla :

+
    +
  • {{ Cssxref("-moz-transform") }}
    • +
  • {{ Cssxref("-moz-transition-property") }}
    • +
  • {{ Cssxref("-moz-text-blink") }}
    • +
  • {{ Cssxref("-moz-user-input") }}
    • +
  • {{ Cssxref("-moz-user-select") }}
    • +
  • {{ Cssxref("-moz-window-shadow") }}
    • +
diff --git a/files/fr/web/css/normal/index.html b/files/fr/web/css/normal/index.html new file mode 100644 index 0000000000..a0647d35ac --- /dev/null +++ b/files/fr/web/css/normal/index.html @@ -0,0 +1,35 @@ +--- +title: normal +slug: Web/CSS/normal +tags: + - CSS + - Référence CSS +translation_of: Web/CSS/font-variant +--- +

{{ CSSRef() }}

+

Résumé

+

normal est une valeur commune pour certaines propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("none") }} qui peut être utilisée de manière similaire pour d'autres propriétés.

+

Utilisation

+
+ Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.
+
    +
  • {{ Cssxref("animation-direction") }}
    • +
  • {{ Cssxref("content") }}
    • +
  • {{ Cssxref("counter-increment") }}
    • +
  • {{ Cssxref("counter-reset") }}
    • +
  • {{ Cssxref("font-style") }}
    • +
  • {{ Cssxref("font-variant") }}
    • +
  • {{ Cssxref("font-weight") }}
    • +
  • {{ Cssxref("letter-spacing") }}
    • +
  • {{ Cssxref("white-space") }}
    • +
  • {{ Cssxref("word-spacing") }}
    • +
  • {{ Cssxref("word-wrap") }}
    • +
+

Extensions Mozilla :

+
    +
  • {{ Cssxref("-moz-appearance") }}
    • +
  • {{ Cssxref("-moz-box-direction") }}
    • +
  • {{ Cssxref("-moz-column-gap") }}
    • +
  • {{ Cssxref("-moz-column-rule-width") }}
    • +
+

{{ languages( { "en": "en/CSS/normal", "es": "es/CSS/normal" } ) }}

diff --git a/files/fr/web/css/number/index.html b/files/fr/web/css/number/index.html new file mode 100644 index 0000000000..24f099da66 --- /dev/null +++ b/files/fr/web/css/number/index.html @@ -0,0 +1,88 @@ +--- +title: +slug: Web/CSS/number +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/number +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <number> permet de représenter des nombres entiers ou décimaux. C'est donc un type qui englobe le type de données {{cssxref("<integer>")}} (permettant de représenter des entiers).

+ +

Syntaxe

+ +

Pour représenter des nombres décimaux, on utilisera le point (.) comme séparateur. Comme pour {{cssxref("<integer>")}}, il n'y a aucune unité associée aux valeurs de type <number> (ce n'est donc pas une dimension).

+ +

Interpolation

+ +

Les valeurs de type <number> peuvent être interpolées afin d'être utilisées dans les animations. Les valeurs de ce type seront interpolées comme des nombres réels à virgule flottante. La vitesse de l'interpolation sera définie grâce à la fonction de temporisation associée à l'animation.

+ +

Exemples

+ +

Voici des exemples de valeurs <number> valides :

+ +
12          Un entier (<integer>) est également un <number>
+4.01        Un nombre (décimal) positif
+-456.8      Un nombre décimal négatif
+0.0         Zéro
++0.0        Zéro, avec un +
+-0.0        Zero, avec un -
+.60         Les chiffres avant le point sont facultatifs
+10e3        On peut utiliser la notation scientifique
+-3.4e-2     Un cas d'utilisation de notation scientifique plus complexe
+
+ +

Voici des exemples de valeurs invalides :

+ +
12.         Le point doit être suivi par des chiffres
++-12.2      Seul un +/- est autorisé.
+12.1.1      Seul un point est autorisé.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Values", "#numbers", "<number>")}}{{Spec2("CSS4 Values")}}Aucune modification significative.
{{SpecName('CSS3 Values', '#numbers', '<number>')}}{{Spec2('CSS3 Values')}}Aucune modification significative depuis la spécification CSS de niveau 2 (première révision).
{{SpecName('CSS2.1', 'syndata.html#numbers', '<number>')}}{{Spec2('CSS2.1')}}Définition explicite du type de données.
{{SpecName('CSS1', '', '<number>')}}{{Spec2('CSS1')}}Définition implicite du type de données.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.number")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("<integer>")}}
    • +
diff --git a/files/fr/web/css/object-fit/index.html b/files/fr/web/css/object-fit/index.html new file mode 100644 index 0000000000..6d86a4f4b7 --- /dev/null +++ b/files/fr/web/css/object-fit/index.html @@ -0,0 +1,189 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/object-fit +--- +
{{CSSRef}}
+ +

La propriété CSS object-fit définit la façon dont le contenu d'un élément remplacé ({{HTMLElement("img")}} ou {{HTMLElement("video")}} par exemple) doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur.

+ +
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
+ + + +

Selon la valeur utilisée pour object-fit, l'élément peut être rogné, mis à l'échelle ou étiré, afin de remplir la boîte qui le contient.

+ +
+

Note : Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-position")}}.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+object-fit: fill;
+object-fit: contain;
+object-fit: cover;
+object-fit: none;
+object-fit: scale-down;
+
+/* Valeurs globales */
+object-fit: inherit;
+object-fit: initial;
+object-fit: unset;
+
+ +

La propriété object-fit peut être définie grâce à l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
contain
+
Le contenu remplacé est dimensionné pour maintenir ses proportions tout en étant ajusté à la boîte de contenu : sa taille réelle est résolue en utilisant la largeur et la hauteur de l'élément comme contraintes de contenant.
+
cover
+
Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute la boîte de contenu. La taille réelle est calculée pour couvrir la zone décrite par la hauteur et la largeur de l'élément. Si les ratios de l'objet et de la boîte ne correspondent pas, le contenu remplacé sera rogné.
+
fill
+
Le contenu remplacé est dimensionné pour remplir la boîte de contenu. La taille réelle de l'objet est déterminée grâce à la hauteur et à la largeur de l'élément. Il est donc étiré afin de remplir la boîte.
+
none
+
Le contenu remplacé n'est pas redimensionné à l'intérieur de l'élément.
+
scale-down
+
Le contenu est dimensionné comme si none ou contain étaient spécifiés, on prend celui qui aboutirait à une taille réelle plus petite.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <h2>object-fit: fill</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
+
+  <h2>object-fit: contain</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
+
+  <h2>object-fit: cover</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
+
+  <h2>object-fit: none</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
+
+  <h2>object-fit: scale-down</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
+
+</div>
+ +

CSS

+ +
h2 {
+  font-family: 'Courier New', monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}}Les mots-clés from-image et flip ont été ajoutés.
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.object-fit")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("background-size")}}
    • +
  • Les autres propriétés CSS liées aux images : +
      +
    • {{cssxref("object-position")}}
      • +
    • {{cssxref("image-orientation")}}
      • +
    • {{cssxref("image-rendering")}}
      • +
    • {{cssxref("image-resolution")}}
      • +
    +
    • +
diff --git a/files/fr/web/css/object-position/index.html b/files/fr/web/css/object-position/index.html new file mode 100644 index 0000000000..c87ac86ea9 --- /dev/null +++ b/files/fr/web/css/object-position/index.html @@ -0,0 +1,116 @@ +--- +title: object-position +slug: Web/CSS/object-position +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/object-position +--- +
{{CSSRef}}
+ +

La propriété object-position détermine l'alignement d'un élément remplacé au sein de sa boîte. Les zones de la boîtes qui ne sont pas recouvertes par le contenu de l'élément remplacé montreront l'arrière-plan de l'élément.

+ +
{{EmbedInteractiveExample("pages/css/object-position.html")}}
+ + + +
+

Note : Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-fit")}}.

+
+ +

Syntaxe

+ +
/* Valeurs de positionnement */
+/* Type <position>           */
+object-position: center top;
+object-position: 100px 50px;
+
+/* Valeurs globales */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+
+ +

Valeurs

+ +
+
<position>
+
Une valeur de type {{cssxref("<position>")}}, c'est-à-dire une à quatre valeurs permettant de définir une position en deux dimensions par rapport aux limites de la boîte dans laquelle est placé l'élément. On peut donner des décalages absolus ou relatifs. On notera que la position peut être définie en dehors de la boîte de l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+
+ +

CSS

+ +
img {
+   width: 300px;
+   height: 250px;
+   border: 1px solid black;
+   background-color: silver;
+   margin-right: 1em;
+   object-fit: none;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 100% 10%;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '100%','300px')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.object-position")}}

+ +

Voir aussi

+ +
    +
  • Les autres propriétés CSS liées aux images : +
      +
    • {{cssxref("object-fit")}}
      • +
    • {{cssxref("image-orientation")}}
      • +
    • {{cssxref("image-rendering")}}
      • +
    • {{cssxref("image-resolution")}}
      • +
    +
    • +
diff --git a/files/fr/web/css/offset-anchor/index.html b/files/fr/web/css/offset-anchor/index.html new file mode 100644 index 0000000000..2d8f3f0ee5 --- /dev/null +++ b/files/fr/web/css/offset-anchor/index.html @@ -0,0 +1,152 @@ +--- +title: offset-anchor +slug: Web/CSS/offset-anchor +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/offset-anchor +--- +
{{cssref}}{{seecompattable}}
+ +

La propriété CSS offset-anchor définit le point, à l'intérieur d'une boîte d'un élément, qui se déplace le long d'un chemin {{cssxref("offset-path")}}.

+ +

Syntaxe

+ +
/* Valeurs avec un movalues */
+offset-anchor: top;
+offset-anchor: bottom;
+offset-anchor: left;
+offset-anchor: right;
+offset-anchor: center;
+offset-anchor: auto;
+
+/* Valeurs de pourcentages */
+/* Type <percentage> */
+offset-anchor: 25% 75%;
+
+/* Valeurs de longueur */
+/* Type <length> */
+offset-anchor: 0 0;
+offset-anchor: 1cm 2cm;
+offset-anchor: 10ch 8em;
+
+/* Valeurs de décalage relatives à un bord */
+offset-anchor: bottom 10px right 20px;
+offset-anchor: right 3em bottom 10px;
+
+/* Valeurs globales */
+offset-anchor: inherit;
+offset-anchor: initial;
+offset-anchor: unset;
+ +

Valeurs

+ +
+
auto
+
offset-anchor reçoit la même valeur que {{cssxref("transform-origin")}} sauf si {{cssxref("offset-path")}} vaut none, dans ce cas, elle récupère la valeur de {{cssxref("offset-position")}}.
+
<position>
+
Une position ({{cssxref("<position>")}}) définie par un couple de coordonnées X/Y qui permet de placer un objet par rapport aux bords de sa boîte. On peut définir la position à partir de une à quatre valeurs. Pour plus d'informations, voir les pages sur {{cssxref("<position>")}} et {{cssxref("background-position")}}. La syntaxe à trois valeurs ne fonctionne pas pour <position>, excepté pour background(-position).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Dans l'exemple suivant, on dispose de trois éléments {{htmlelement("div")}} imbriqués chacun dans un élément {{htmlelement("section")}}. Chaque <div> se déplace sur le même chemin {{cssxref("offset-path")}} (une ligne horizontale mesurant 200 pixels). Les trois blocs possèdent une couleur ({{cssxref("background-color")}}) et une valeur offset-anchor différentes.

+ +

Chaque élément <section> a été mise en forme avec un dégradé linéaire afin de fournir une indication visuelle du chemin.

+ +

On peut voir que la première valeur, auto, déplace l'élément sur son centre. La deuxième et la troisième déplacent le <div> par le coin supérieur droit et le coin inférieur gauche respectivement.

+ +

HTML

+ +
<section>
+  <div class="offset-anchor1"></div>
+</section>
+<section>
+  <div class="offset-anchor2"></div>
+</section>
+<section>
+  <div class="offset-anchor3"></div>
+</section>
+
+ +

CSS

+ +
div {
+  offset-path: path('M 0,20 L 200,20');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+}
+
+section {
+  background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%);
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
+}
+
+.offset-anchor1 {
+  offset-anchor: auto;
+  background: cyan;
+}
+
+.offset-anchor2 {
+  offset-anchor: right top;
+  background: purple;
+}
+
+.offset-anchor3 {
+  offset-anchor: left bottom;
+  background: magenta;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '100%', '300')}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Motion Path Level 1', '#offset-anchor-property', 'offset-anchor')}}{{Spec2('Motion Path Level 1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.offset-anchor")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("offset")}}
    • +
  • {{cssxref("offset-distance")}}
    • +
  • {{cssxref("offset-rotation")}}
    • +
  • L'élément SVG <path>
    • +
diff --git a/files/fr/web/css/offset-distance/index.html b/files/fr/web/css/offset-distance/index.html new file mode 100644 index 0000000000..ea1a89b020 --- /dev/null +++ b/files/fr/web/css/offset-distance/index.html @@ -0,0 +1,100 @@ +--- +title: offset-distance +slug: Web/CSS/offset-distance +tags: + - CSS + - Propriété + - Reference + - motion-offset + - offset-distance +translation_of: Web/CSS/offset-distance +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété offset-distance définit une position le long d'un chemin {{CSSxRef("offset-path")}}.

+ +

Syntaxe

+ +
/* Valeur par défaut */
+offset-distance: 0;
+
+/* La position à la moitié de offset-path */
+offset-distance: 50%;
+
+/* Une position absolue le long du chemin */
+offset-distance: 40px;
+ +
+
{{cssxref('<length-percentage>')}}
+
Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par {{cssxref('offset-path')}}).
+
La valeur 100% représente la longueur totale du chemin (lorsque offset-path est défini par une forme simple ou grâce à la fonction path()).
+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

Animation

+ +

La notion de mouvement contenue dans CSS Motion Path vient principalement de la propriété offset-distance. Si on souhaite animer un élément le long du chemin, on définira un chemin avec {{cssxref('offset-path')}} et on utilisera une animation qui fera évoluer offset-distance de 0% à 100%.

+ +

HTML

+ +
<div id="motion-demo"></div>
+
+ +

CSS

+ +
#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Animation')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Motion Path Level 1', '#offset-distance-property', 'offset-distance')}}{{Spec2('Motion Path Level 1')}}Définition initiale.
+ +

{{CSSInfo}}

+ +
+

Note : Dans les versions antérieures de la spécification, cette propriété était intitulée motion-offset.

+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.offset-distance")}}

diff --git a/files/fr/web/css/offset-path/index.html b/files/fr/web/css/offset-path/index.html new file mode 100644 index 0000000000..3d6826f621 --- /dev/null +++ b/files/fr/web/css/offset-path/index.html @@ -0,0 +1,178 @@ +--- +title: offset-path +slug: Web/CSS/offset-path +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/offset-path +--- +
{{SeeCompatTable}}{{CSSRef}}
+ +

La propriété offset-path définit le tracé d'un mouvement sur lequel un élément est positionné, relativement au conteneur parent ou au système de coordonnées SVG.

+ +
{{EmbedInteractiveExample("pages/css/offset-path.html")}}
+ + + +

Cette propriété sert à définir un chemin qu'un élément va suivre lors d'une animation.

+ +

La position exacte de l'élément sur ce tracé est déterminée grâce à la propriété {{cssxref("offset-distance")}}. Le tracé d'un mouvement peut être défini grâce à un chemin ou à plusieurs chemins successifs ou encore grâce à la géométrie d'une forme. Chaque forme ou chemin doit définir une position initiale pour la valeur calculée 0 de {{cssxref("offset-distance")}} ainsi qu'une direction initiale qui définit la rotation de l'objet dans sa position initiale.

+ +
+

Note : Dans des versions antérieures des spécifications, cette propriété était intitulée motion-path. Le nom a été modifié en offset-path afin de décrire un chemin statique plutôt qu'un chemin en mouvement.

+
+ +

Syntaxe

+ +
/* Valeur par défaut */
+offset-path: none;
+
+/* Valeurs avec une notation fonctionnelle */
+offset-path: ray(45deg closest-side contain);
+
+/* URL */
+offset-path: url(#path);
+
+/* Formes */
+offset-path: circle(50% at 25% 25%);
+offset-path: inset(50% 50% 50% 50%);
+offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
+offset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200');
+
+/* Boîtes géométriques */
+offset-path: margin-box;
+offset-path: stroke-box;
+
+/* Valeurs globales */
+offset-path: inherit;
+offset-path: initial;
+offset-path: unset;
+
+ +

Valeurs

+ +
Attention ! À l'heure actuelle, seule la notation path() est prise en charge par les navigateurs.
+ +
+
ray()
+
Cette notation fonctionnelle prend jusqu'à trois valeurs et définit un chemin qui est un ligne commençant à la position de la boîte et qui suit la direction de l'angle indiqué (la valeur 0deg correspond à une direction verticale, vers le haut et les angles allant dans le sens horaire). La valeur de la taille est définie de façon semblable à celle utilisée pour les dégradés entre closest-side et farthest-corner avec le mot-clé contain.
+
url()
+
Cette notation fonctionnelle permet de faire référence à l'identifiant d'une forme SVG : circle, ellipse, line, path, polygon, polyline ou rect et d'utiliser la géométrie de la forme visée pour construire le chemin.
+
<basic-shape>
+
Cette valeur indique une forme CSS en utilisant les notations fonctionnelles circle(), ellipse(), inset(), polygon() ou path().
+
+
+
path()
+
Une chaîne de caractères qui définit un chemin avec la syntaxe des coordonnées SVG. À l'heure actuelle (16 novembre 2018), c'est la seule valeur qui est prise en charge.
+
+
+
none
+
Aucun chemin de mouvement n'est indiqué.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

L'exemple qui suit est tiré de cette démo présente sur CodePen. Le code SVG dessine la forme d'une maison avec une cheminée. Les propriétés offset-path utilisées permettent de déplacer l'icône (des ciseaux) autour de la maison. On notera que la pseudo-classe :path() est utilisée avec offset-path et que le document SVG contient <path>. Si on compare ces deux données, on verra qu'elles sont identiques.

+ +

CSS

+ +
.scissorHalf {
+  offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
+  animation: followpath 4s linear infinite;
+}
+
+@keyframes followpath {
+   to {
+     motion-offset: 100%;
+     offset-distance: 100%;
+   }
+}
+ +

SVG

+ +

Les moitiés supérieure et inférieure des ciseaux apparaîtront dans le coin en haut à gauche du canevas si elles ne sont pas positionnés sur le point de départ avec offset-path.

+ +
<svg xmlns="http://www.w3.org/2000/svg"
+     width="700"
+     height="450"
+     viewBox="350 0 1400 900">
+  <title>House and Scissors</title>
+  <rect x="595"
+        y="423"
+        width="610"
+        height="377"
+        fill="blue" />
+  <polygon points="506,423 900,190 1294,423"
+           fill="yellow" />
+  <polygon points="993,245 993,190 1086,190 1086,300"
+           fill="red" />
+  <path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
+        fill="none"
+        stroke="black"
+        stroke-width="13"
+        stroke-linejoin="round"
+        stroke-linecap="round" />
+  <path id="firstScissorHalf" class="scissorHalf"
+        d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
+        transform="translate(0,0)"
+        fill="green"
+        stroke="black"
+        stroke-width="5"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill-rule="evenodd" />
+  <path id="secondScissorHalf" class="scissorHalf"
+        d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
+        transform="translate(0,0)"
+        fill="forestgreen"
+        stroke="black"
+        stroke-width="5"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill-rule="evenodd" />
+</svg>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '100%', '450')}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Motion Path Level 1', '#offset-path-property', 'offset-path')}}{{Spec2('Motion Path Level 1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.offset-path")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("offset")}}
    • +
  • {{cssxref("offset-distance")}}
    • +
  • {{cssxref("offset-rotation")}}
    • +
  • {{cssxref("offset-anchor")}}
    • +
  • {{cssxref("offset-position")}}
    • +
  • {{SVGElement("path")}}
    • +
diff --git a/files/fr/web/css/offset-position/index.html b/files/fr/web/css/offset-position/index.html new file mode 100644 index 0000000000..21b83a9b99 --- /dev/null +++ b/files/fr/web/css/offset-position/index.html @@ -0,0 +1,105 @@ +--- +title: offset-position +slug: Web/CSS/offset-position +translation_of: Web/CSS/offset-position +--- +
{{CSSRef}}{{seecompattable}}
+ +

La propriété CSS offset-position définit la position initiale de {{cssxref("offset-path")}}.

+ +

Syntax

+ +
/* Valeurs de mots clefs */
+offset-position: auto;
+offset-position: top;
+offset-position: bottom;
+offset-position: left;
+offset-position: right;
+offset-position: center;
+
+/* Valeurs de <pourcentage> */
+offset-position: 25% 75%;
+
+/* Valeurs de <longueur> */
+offset-position: 0 0;
+offset-position: 1cm 2cm;
+offset-position: 10ch 8em;
+
+/* Valeurs d'écart d'un bord */
+offset-position: bottom 10px right 20px;
+offset-position: right 3em bottom 10px;
+offset-position: bottom 10px right;
+offset-position: top right 10px;
+
+/* Valeurs globales */
+offset-position: inherit;
+offset-position: initial;
+offset-position: unset;
+
+ +

Values

+ +
+
auto
+
La position initiale est la position de la boîte spécifiée par la propriété {{cssxref("position")}}.
+
<position>
+
Une {{cssxref("<position>")}}. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée comme center. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultez {{cssxref("background-position")}}.
+
+ +

Définition formelle

+ +

{{cssinfo}}

+ +

Syntax formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Définir la valeur initiale de offset-position

+ +
<div id="motion-demo"></div>
+
+ +
#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  offset-position: left top;
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Motion Path Level 1', '#offset-position-property', 'offset-position')}}{{Spec2('Motion Path Level 1')}}Définition initiale
+ +

Compatibilité de navigateur

+ + + +

{{Compat("css.properties.offset-position")}}

diff --git a/files/fr/web/css/offset-rotate/index.html b/files/fr/web/css/offset-rotate/index.html new file mode 100644 index 0000000000..4ddd5380c0 --- /dev/null +++ b/files/fr/web/css/offset-rotate/index.html @@ -0,0 +1,123 @@ +--- +title: offset-rotate +slug: Web/CSS/offset-rotate +tags: + - CSS + - Propriété + - Reference + - offset-rotate +translation_of: Web/CSS/offset-rotate +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété offset-rotate définit l'orientation et la direction de l'élément lorsqu'il est positionné le long du chemin représenté par {{cssxref("offset-path")}}.

+ +

Syntaxe

+ +
/* Suit la direction du chemin avec un éventuel */
+/* décalage angulaire */
+offset-rotate: auto;
+offset-rotate: auto 45deg;
+
+/* Suit la direction du chemin mais orienté dans la
+/* direction opposée */
+offset-rotate: reverse;
+
+/* Conserve une rotation constante quelle que soit la position
+/* sur le chemin  */
+offset-rotate: 90deg;
+offset-rotate: .5turn;
+ +
+
auto
+
+

L'élément est tourné avec l'angle donné par la direction du chemin {{cssxref("offset-path")}}, relativement à l'axe des abscisses. C'est la valeur par défaut.

+
+
{{cssxref("<angle>")}}
+
+

L'élément est tourné d'un angle fixe (indiqué dans le sens horaire).

+
+
auto <angle>
+
+

Si le mot-clé auto est suivi d'une valeur {{cssxref("<angle>")}}, l'élément est tourné de l'angle donné par rapport à la direction du chemin.

+
+
reverse
+
+

L'élément est tourné de façon similaire à auto, mais fait face à la direction opposée. Cette valeur est équivalente à auto 180deg.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  width: 40px;
+  height: 40px;
+  background: #2BC4A2;
+  margin: 20px;
+  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
+  animation: move 5000ms infinite alternate ease-in-out;
+
+  offset-path: path('M20,20 C20,50 180,-10 180,20');
+}
+div:nth-child(1) {
+  offset-rotate: auto;
+}
+div:nth-child(2) {
+  offset-rotate: auto 90deg;
+}
+div:nth-child(3) {
+  offset-rotate: 30deg;
+}
+
+@keyframes move {
+  100% {
+    offset-distance: 100%;
+  }
+}
+ +

HTML

+ +
<div></div>
+<div></div>
+<div></div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Motion Path Level 1', '#offset-rotate-property', 'offset-rotate')}}{{Spec2('Motion Path Level 1')}}Définition initiale.
+ +

{{cssinfo}}

+ +
+

Note : Les versions antérieures de la spécification utilisait le nom motion-rotation pour cette propriété.

+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.offset-rotate")}}

diff --git a/files/fr/web/css/offset/index.html b/files/fr/web/css/offset/index.html new file mode 100644 index 0000000000..a3fe13e57b --- /dev/null +++ b/files/fr/web/css/offset/index.html @@ -0,0 +1,104 @@ +--- +title: offset +slug: Web/CSS/offset +tags: + - CSS + - Draft + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/offset +--- +
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
+ +

La propriété offset est une propriété raccourcie pour les propriétés {{cssxref("offset-path")}}, {{cssxref("offset-position")}}, {{cssxref("offset-distance")}}, {{cssxref("offset-rotate")}} et {{cssxref("offset-anchor")}}. Elle permet d'animer un élément sur un tracé défini.

+ +
+

Note : Dans les premières versions de la spécification, cette propriété était intitulée motion.

+
+ +

Syntaxe

+ +
/* Position de décalage */
+offset: auto
+offset: 10px 30px;
+offset: none;
+
+/* Chemin de décalage */
+offset: ray(45deg closest-side);
+offset: path(M 100 100 L 300 100 L 200 300 z);
+offset: url(arc.svg);
+
+/* Chemin de décalage avec une distance et/ou */
+/* une rotation */
+offset: url(circle.svg) 100px;
+offset: url(circle.svg) 40%;
+offset: url(circle.svg) 30deg;
+offset: url(circle.svg) 50px 20deg;
+
+/* Gestion d'une ancre de décalage */
+offset: ray(45deg closest-side) / 40px 20px;
+offset: url(arc.svg) 2cm / 0.5cm 3cm;
+offset: url(arc.svg) 30deg / 50px 100px;
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div id="offsetElement"></div>
+
+ +

CSS

+ +
@keyframes move {
+  from {
+    offset-distance: 0%;
+  }
+
+  to {
+    offset-distance: 100%;
+  }
+}
+
+#offsetElement {
+  width: 50px;
+  height: 50px;
+  background-color: blue;
+  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
+  animation: move 3s linear infinite;
+}
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}}{{Spec2('Motion Path Level 1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.offset")}}

diff --git a/files/fr/web/css/opacity/index.html b/files/fr/web/css/opacity/index.html new file mode 100644 index 0000000000..d454141433 --- /dev/null +++ b/files/fr/web/css/opacity/index.html @@ -0,0 +1,184 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/opacity +--- +
{{CSSRef}}
+ +

La propriété opacity définit la transparence d'un élément. Autrement dit, elle permet de définir le degré de visibilité de l'arrière-plan sur lequel est placé l'élément.

+ +
{{EmbedInteractiveExample("pages/css/opacity.html")}}
+ + + +

La valeur s'applique à l'ensemble de l'élément et à ce qu'il contient même si la valeur n'est pas héritée par les éléments fils. Ainsi, un élément et les fils qu'il contient auront tous la même opacité relative à l'arrière-plan, même si l'élément et ses descendants ont des opacités différentes. Si on souhaite utiliser différentes opacités pour les différents éléments enfants, plutôt que d'utiliser opacity, on pourra utiliser la propriété {{cssxref("background")}} avec une composante alpha différente de 1 (par exemple : background: rgba(0, 0, 0, 0.4);).

+ +

Syntaxe

+ +
/* Valeurs numériques */
+/* Totalement opaque  */
+opacity: 1;
+opacity: 1.0;
+
+/* Légèrement transparent */
+opacity: 0.6;
+
+/* Complètement transparent */
+opacity: 0.0;
+opacity: 0;
+
+/* Valeurs globales */
+opacity: inherit;
+opacity: initial;
+opacity: unset;
+
+ +

Valeurs

+ +
+
<number>
+
Une valeur de type {{cssxref("<number>")}} dans l'intervalle [0.0, 1.0] qui représente l'opacité de l'élément, la valeur de son canal alpha. Les valeurs en dehors de cet intervalle seront considérées comme valides mais ramenées dans cet intervalle (ainsi 6 sera équivalent à 1 et -2 sera équivalent à 0). + + + + + + + + + + + + + + + + + + + +
ValeurSignification
0L'élément est complètement transparent (invisible).
Toute valeur de type {{cssxref("<number>")}} strictement comprise entre 0 et 1L'élément est partiellement transparent, on peut voir l'arrière-plan.
1 (la valeur par défaut)L'élément est complètement opaque.
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple simple

+ +

CSS

+ +
div {
+  background-color: yellow;
+}
+
+.leger {
+  /* On ne voit presque pas le texte */
+  opacity: 0.2;
+}
+.moyen {
+  /* On peut mieux discerner le texte */
+  opacity: 0.5;
+}
+.lourd {
+  /* Le texte est clairement visible */
+  opacity: 0.9;
+}
+
+ +

HTML

+ +
<div class="leger">On arrive à peine à lire.</div>
+<div class="moyen">On voit mieux.</div>
+<div class="lourd">Ceci est plus simple à lire.</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple_simple', '640', '64')}}

+ +

Jouer sur l’opacité avec :hover

+ +

CSS

+ +
img.opacity {
+  opacity: 1;
+  /* IE8 et antérieurs */
+  filter: alpha(opacity=100);
+  /* Déclenche "hasLayout" dans IE 7 et antérieurs */
+  zoom: 1;
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}
+ +

HTML

+ +
<img src="//developer.mozilla.org/media/img/mdn-logo.png"
+     alt="MDN logo" width="128" height="146"
+     class="opacity">
+
+ +

Résultat

+ +

{{EmbedLiveSample("Jouer_sur_l’opacité_avec_hover", '150', '175')}}

+ +

Accessibilité

+ +

Si l'opacité du texte est modifiée, il est nécessaire de vérifier que le contraste entre la couleur du texte et l'arrière-plan est suffisant pour que le texte soit lisible, y compris pour les personnes souffrant de trouble de la vision.

+ +

Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte (dont l'opacité a été adaptée) et celle de l'arrière-plan. Les recommandations du WCAG  conseillent un ratio de 4.5:1 pour les textes normaux et 3:1 pour les textes plus grands (un texte est considéré comme grand s'il est en gras et dont les lettres mesurent 18.66px ou si ses lettres mesurent 24px ou plus).

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}{{Spec2('CSS3 Transitions')}}opacity peut désormais être animée.
{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.opacity")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/order/index.html b/files/fr/web/css/order/index.html new file mode 100644 index 0000000000..193a043b33 --- /dev/null +++ b/files/fr/web/css/order/index.html @@ -0,0 +1,130 @@ +--- +title: order +slug: Web/CSS/order +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/order +--- +
{{CSSRef}}
+ +

La propriété order définit l'ordre avec lequel on dessine les éléments d'un conteneur d'éléments flexibles ou d'une grille d'éléments. Les éléments sont appliqués dans l'ordre croissant des valeurs de order. Les éléments ayant la même valeur pour order seront appliqués dans l'ordre selon lequel ils apparaissent dans le code source du document.

+ +
{{EmbedInteractiveExample("pages/css/order.html")}}
+ + + +
+

Note : order est uniquement conçue pour affecter l'ordre visuel. Elle ne doit pas être utilisée pour modifier l'ordre logique ou l'ordre de tabulation. order ne doit pas être utilisée avec les média non visuels comme les informations vocales.

+
+ +

Syntaxe

+ +
/* Valeurs entières (type <integer>) */
+/* positives ou négatives */
+order: 5;
+order: -5;
+
+/* Valeurs globales */
+order: inherit;
+order: initial;
+order: unset;
+
+ +

Valeurs

+ +
+
<integer>
+
Un nombre entier (cf. {{cssxref("<integer>")}}) indiquant l'ordre à appliquer pour l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div id='main'>
+   <article>Lorem ipsum</article>
+   <nav> consectetur adipisicing elit, sed do eiusmod</nav>
+   <aside>tempor incididunt ut labore et dolore magna</aside>
+</div>
+ +

CSS

+ +

Grâce à ces déclarations CSS, on crée un disposition avec deux barres entourant un bloc de contenu. Le module de disposition des boîtes flexibles crée des bloc de tailles verticales égales et utilise autant d'espace horizontal qu'il y en a de disponible.

+ +
#main {
+  display: flex;
+}
+
+#main > article {
+  flex:1;
+  order: 2;
+  border: 1px dotted orange;
+}
+
+#main > nav {
+  width: 200px;
+  order: 1;
+  border: 1px dotted blue;
+}
+
+#main > aside {
+  width: 200px;
+  order: 3;
+  border: 1px dotted blue;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Accessibilité

+ +

La propriété order créera une incohérence entre l'ordre de présentation visuelle et celui du DOM. Cela aura un impact négatif pour les utilisateurs avec des troubles de la vision et qui utilisent des outils d'assistance comme les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}{{Spec2('CSS3 Flexbox')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.order")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/orphans/index.html b/files/fr/web/css/orphans/index.html new file mode 100644 index 0000000000..8fa838fcac --- /dev/null +++ b/files/fr/web/css/orphans/index.html @@ -0,0 +1,114 @@ +--- +title: orphans +slug: Web/CSS/orphans +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/orphans +--- +
{{CSSRef}}
+ +

La propriété orphans définit le nombre minimum de lignes qui doivent rester en bas d'une page, d'une région ou d'une colonne dans un conteneur de bloc.

+ +
/* Valeur numérique entière */
+orphans: 3;
+
+/* Valeurs globales */
+orphans: inherit;
+orphans: initial;
+orphans: unset;
+
+ +
+

Note : En typographie, un orphelin (orphan en anglais) est la première ligne d'un paragraphe qui apparaît isolée en bas d'une page (le paragraphe poursuivant sur la page suivante).

+
+ +

Syntaxe

+ +

Valeurs

+ +
+
<integer>
+
Seules les valeurs positives sont autorisées. Le nombre de lignes qu'on souhaite avoir au minimum avant une rupture.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p class=exemple>
+  Tout en causant ainsi, Alice était entrée dans une petite chambre
+  bien rangée, et, comme elle s’y attendait, sur une petite table
+  dans l’embrasure de la fenêtre, elle vit un éventail et deux ou
+  trois paires de gants de chevreau tout petits. Elle en prit une
+  paire, ainsi que l’éventail, et allait quitter la chambre lorsqu’
+  elle aperçut, près du miroir, une petite bouteille. Cette fois il
+  n’y avait pas l’inscription BUVEZ-MOI — ce qui n’empêcha pas Alice
+  de la déboucher et de la porter à ses lèvres. « Il m’arrive toujours
+  quelque chose d’intéressant, » se dit-elle, « lorsque je mange ou
+  que je bois. Je vais voir un peu l’effet de cette bouteille.
+  J’espère bien qu’elle me fera regrandir, car je suis vraiment
+  fatiguée de n’être qu’une petite nabote ! »C’est ce qui arriva en
+  effet, et bien plus tôt qu’elle ne s’y attendait. Elle n’avait pas
+  bu la moitié de la bouteille, que sa tête touchait au plafond et
+  qu’elle fut forcée de se baisser pour ne pas se casser le cou. Elle
+  remit bien vite la bouteille sur la table en se disant : « En voilà
+  assez ; j’espère ne pas grandir davantage. Je ne puis déjà plus
+  passer par la porte. Oh ! je voudrais bien n’avoir pas tant bu ! »
+</p>
+ +

CSS

+ +
.exemple {
+  orphans: 4;
+  columns: 3;
+}
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}{{Spec2('CSS3 Fragmentation')}}La propriété orphans est étendue pour s'appliquer à n'importe quel fragment comme les pages, les régions ou les colonnes.
{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.orphans")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/outils/g\303\251n\303\251rateur_de_courbe_de_b\303\251zier/index.html" "b/files/fr/web/css/outils/g\303\251n\303\251rateur_de_courbe_de_b\303\251zier/index.html" new file mode 100644 index 0000000000..6a4671d141 --- /dev/null +++ "b/files/fr/web/css/outils/g\303\251n\303\251rateur_de_courbe_de_b\303\251zier/index.html" @@ -0,0 +1,13 @@ +--- +title: Générateur de courbe de Bézier +slug: Web/CSS/Outils/Générateur_de_courbe_de_Bézier +tags: + - CSS + - Outils +translation_of: Web/CSS/Tools/Cubic_Bezier_Generator +--- +

{{Draft}}

+ +
+

Note : Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.

+
diff --git "a/files/fr/web/css/outils/g\303\251n\303\251rateur_de_d\303\251grad\303\251s_lin\303\251aires/index.html" "b/files/fr/web/css/outils/g\303\251n\303\251rateur_de_d\303\251grad\303\251s_lin\303\251aires/index.html" new file mode 100644 index 0000000000..ae2340fd73 --- /dev/null +++ "b/files/fr/web/css/outils/g\303\251n\303\251rateur_de_d\303\251grad\303\251s_lin\303\251aires/index.html" @@ -0,0 +1,13 @@ +--- +title: Générateur de dégradés linéaires +slug: Web/CSS/Outils/Générateur_de_dégradés_linéaires +tags: + - CSS + - Outils +translation_of: Web/CSS/Tools/Linear-gradient_Generator +--- +

{{Draft}}

+ +
+

Note : Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.

+
diff --git a/files/fr/web/css/outils/index.html b/files/fr/web/css/outils/index.html new file mode 100644 index 0000000000..ac78261ad4 --- /dev/null +++ b/files/fr/web/css/outils/index.html @@ -0,0 +1,20 @@ +--- +title: Outils +slug: Web/CSS/Outils +tags: + - CSS + - Outils +translation_of: Web/CSS/Tools +--- +

CSS fournit de nombreuses fonctionnalités qui peuvent être paramétrées avec différents facteurs. Il est donc utile de pouvoir visualiser ces paramètres lorsqu'on manipule ces propriétés. Cette page indique différents outils qui pourront vous être utiles lorsque vous construirez vos feuilles de style avec ces fonctionnalités.

+ +

{{LandingPageListSubpages}}

+ +

Autres outils

+ +
    +
  • Stylie pour les animations
    • +
  • Connaître les informations d'affichage d'un appareil (utile pour la conception de sites adaptatifs) : mydevice.io
    • +
  • Construire des menus CSS - cssmenumaker.com
    • +
  • Un linter CSS qui permet de respecter des conventions homogènes et d'éviter des erreurs dans les feuilles de style - stylelint
    • +
diff --git a/files/fr/web/css/outline-color/index.html b/files/fr/web/css/outline-color/index.html new file mode 100644 index 0000000000..9e3bc20978 --- /dev/null +++ b/files/fr/web/css/outline-color/index.html @@ -0,0 +1,133 @@ +--- +title: outline-color +slug: Web/CSS/outline-color +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/outline-color +--- +
{{CSSRef}}
+ +

La propriété outline-color permet de définir la couleur avec laquelle on trace le conteur de l'élément. Ce contour est tracé autour de la boîte de bordure et peut être utilisé pour faire ressortir l'élément.

+ +
{{EmbedInteractiveExample("pages/css/outline-color.html")}}
+ + + +

À la différence de la bordure, le contour est tracé en dehors du cadre de l'élément et peut donc chevaucher d'autres contenus. La bordure, en revanche, modifiera la disposition de la page afin de s'assurer qu'aucun chevauchement involontaire ne se produit.La propriété outline-color est également synthétisée avec la propriété raccourcie {{cssxref("outline")}}.

+ +

Syntaxe

+ +

 

+ +
/* Valeurs avec un mot-clé */
+outline-color: invert;
+
+/* Valeurs de couleur */
+/* Type <color>       */
+outline-color: red;
+outline-color: #f92525;
+outline-color: rgb(30,222,121);
+
+/* Valeurs globales */
+outline-color: inherit;
+outline-color: initial;
+outline-color: unset;
+
+ +

 

+ +

La propriété outline-color est définie avec une des valeurs listées ci-après.

+ +

Valeurs

+ +
+
<color>
+
Voir la page {{cssxref("<color>")}} pour plus d'informations sur les valeurs utilisables avec ce type.
+
invert
+
Afin de s'assurer que la bordure est visible, on applique une inversion de couleur avec l'arrière-plan. Cela permet de renforcer le contraste, quelle que soit la couleur de l'arrière-plan. Cette valeur ne doit pas nécessairement être supportée par les navigateurs. Si elle ne l'est pas, ils considèreront la règle comme invalide.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p class="exemple">Mon contour est blue, da ba dee.</p>
+ +

CSS

+ +
.exemple {
+  /* Tout d'abord on utiliser outline */
+  /* pour définir le contour          */
+  outline: 2px solid;
+
+  /* Ensuite on précise sa couleur avec */
+  /* outline-color                      */
+  outline-color: #0000FF;
+}
+ +

Résultat

+ +

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

+ +

Accessibilité

+ +

L'utilisation d'un focus personnalisé s'accompagne généralement d'une modification de la propriété {{cssxref("outline")}}. Si la couleur du contour est modifiée, il est nécessaire de vérifier que le contraste entre le contour et l'arrière-plan est suffisant afin que le contour puisse clairement être distingué.

+ +

Le ratio de contraste est déterminé en comparaisant les luminosités des deux couleurs. Pour le contraste entre un texte et son arrière-plan, les recommandations Web Content Accessibility Guidelines (WCAG) requièrent un ratio de 4.5:1 pour le contenu textuel et un ratio de 3:1 pour les titres ou les textes plus grands (18.66px et en gras ou 24px ou plus grand).

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}{{Spec2('CSS3 Basic UI')}}Aucun changement
{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}{{Spec2('CSS3 Transitions')}}outline-color peut désormais être animée.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.outline-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("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}
    • +
  • Appliquer des couleurs sur des éléments HTML grâce à CSS
    • +
diff --git a/files/fr/web/css/outline-offset/index.html b/files/fr/web/css/outline-offset/index.html new file mode 100644 index 0000000000..d46cc50ed6 --- /dev/null +++ b/files/fr/web/css/outline-offset/index.html @@ -0,0 +1,94 @@ +--- +title: outline-offset +slug: Web/CSS/outline-offset +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/outline-offset +--- +
{{CSSRef}}
+ +

La propriété outline-offset définit l'espace qu'il y a entre la bordure dessinée par {{cssxref("outline")}} et le bord de la boîte de bordure d'un élément. Cet espace est transparent et la couleur visible en arrière-plan sera déterminée par l'élément parent.

+ +
{{EmbedInteractiveExample("pages/css/outline-offset.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+outline-offset: 3px;
+outline-offset: 0.2em;
+
+/* Valeurs globales */
+outline-offset: inherit;
+outline-offset: initial;
+outline-offset: unset;
+
+ +

Valeurs

+ +
+
<length>
+
La largeur de l'espace, voir la page {{cssxref("<length>")}} pour plus d'informations. Les valeurs négatives sont utilisées et font que la bordure dessinée est dessinée dans l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  outline: 1px dashed red;
+  /* On décale la ligne de 10px */
+  outline-offset: 10px;
+  background: yellow;
+  margin: 15px;
+  border: 1px solid black;
+}
+
+ +

HTML

+ +
<p class="exemple">La bordure est décalée<p>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset')}}{{Spec2('CSS3 Transitions')}}outline-offset peut désormais être animée.
{{SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset')}}{{Spec2('CSS3 Basic UI')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.outline-offset")}}

diff --git a/files/fr/web/css/outline-style/index.html b/files/fr/web/css/outline-style/index.html new file mode 100644 index 0000000000..d205203a01 --- /dev/null +++ b/files/fr/web/css/outline-style/index.html @@ -0,0 +1,150 @@ +--- +title: outline-style +slug: Web/CSS/outline-style +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/outline-style +--- +
{{CSSRef}}
+ +

La propriété outline-style permet de définir la mise en forme utilisée pour dessiner la bordure d'un élément. Cette bordure est dessinée autour de la boîte de bordure et peut être utilisée afin de faire ressortir l'élément.

+ +
{{EmbedInteractiveExample("pages/css/outline-style.html")}}
+ + + +

Cette propriété est synthétisée grâce à la propriété {{cssxref("outline")}} qui regroupe outline-style, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+outline-style: auto;
+outline-style: none;
+outline-style: dotted;
+outline-style: dashed;
+outline-style: solid;
+outline-style: double;
+outline-style: groove;
+outline-style: ridge;
+outline-style: inset;
+outline-style: outset;
+
+/* Valeurs globales */
+outline-style: inherit;
+outline-style: initial;
+outline-style: unset;
+
+ +

Valeurs

+ +
+
auto
+
L'agent utilisateur peut afficher une bordure avec une mise en forme par défaut.
+
none
+
Aucune bordure n'est dessinée (équivalent à {{cssxref("outline-width")}} avec la valeur 0).
+
dotted
+
Le bordure est dessinée avec une série de points.
+
dashed
+
La bordure est dessinée avec des tirets.
+
solid
+
La bordure est dessinée avec une ligne continue.
+
double
+
La bordure est dessinée avec deux lignes continues. La valeur de la propriété {{cssxref("outline-width")}} désigne la somme de la largeur des deux lignes et de l'espace entre elles.
+
groove
+
La bordure est dessinée comme si elle était gravée dans le document.
+
ridge
+
La forme obtenue est opposée à groove : la bordure semble dépasser du document.
+
inset
+
La bordure semble être intégrée dans le document..
+
outset
+
La forme obtenue est opposée à inset : la bordure semble ressortir du document.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple simple

+ +

CSS

+ +
.exemple-groove {
+  outline-style: groove;
+  outline-color: red;
+  outline-width: 2px;
+}
+
+.exemple-outset {
+  outline-style: outset;
+  outline-color: green;
+  outline-width: 1px;
+}
+ +

HTML

+ +
<p class="exemple-groove">Ça c'est le groove</p>
+<p class="exemple-outset">Et ça c'est outset</p>
+
+ +

Résultat

+ +

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

+ +

Utilisation de la valeur auto

+ +

La valeur auto indique une bordure sur mesure selon l'interface du système d'exploitation ou de l'agent utilisateur.

+ +

CSS

+ +
.auto {
+  outline-style: auto; /* same result as "outline: auto" */
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

HTML

+ +
<div>
+  <p class="auto">Outline Demo</p>
+</div>
+ +

Résulat

+ +

{{EmbedLiveSample('Example_0_-_auto')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}{{Spec2('CSS3 Basic UI')}}La valeur auto a été ajoutée.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.outline-style")}}

diff --git a/files/fr/web/css/outline-width/index.html b/files/fr/web/css/outline-width/index.html new file mode 100644 index 0000000000..dd552aa948 --- /dev/null +++ b/files/fr/web/css/outline-width/index.html @@ -0,0 +1,135 @@ +--- +title: outline-width +slug: Web/CSS/outline-width +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/outline-width +--- +
{{CSSRef}}
+ +

La propriété CSS outline-width est utilisée afin de définir l'épaisseur de la bordure (outline) d'un élément. Cette bordure est dessinée autour des éléments et délimite la boîte de bordure. Visuellement, cela permet de faire ressortir l'élément.

+ +
{{EmbedInteractiveExample("pages/css/outline-width.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot clé */
+outline-width: thin;
+outline-width: medium;
+outline-width: thick;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+outline-width: 1px;
+outline-width: 0.1em;
+
+/* Valeurs globales */
+outline-width: inherit;
+
+ +

Valeurs

+ +
+
thin
+
La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur fine. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à 1px.
+
medium
+
La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur moyenne. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à 3px.
+
thick
+
La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur de trait prononcée. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à 5px.
+
<length>
+
Voir la page sur le type {{cssxref("<length>")}} pour les différentes valeurs correspondantes.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<span id="thin">thin</span>
+<span id="medium">medium</span>
+<span id="thick">thick</span>
+<span id="deuxpixels">2px</span>
+<span id="unex">1ex</span>
+<span id="deuxem">2em</span>
+
+ +

CSS

+ +
span {
+  outline-style: solid;
+  display: inline-block;
+  margin: 20px;
+}
+
+#thin {
+  outline-width: thin;
+}
+
+#medium {
+  outline-width: medium;
+}
+
+#thick {
+  outline-width: thick;
+}
+
+#deuxpixels {
+  outline-width: 2px;
+}
+
+#unex {
+  outline-width: 1ex;
+}
+
+#deuxem {
+  outline-width: 2em;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '100%', '80')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}{{Spec2('CSS3 Basic UI')}}Aucun changement
{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}}{{Spec2('CSS3 Transitions')}}outline-width peut désormais être animée.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.outline-width")}}

diff --git a/files/fr/web/css/outline/index.html b/files/fr/web/css/outline/index.html new file mode 100644 index 0000000000..11148a26fa --- /dev/null +++ b/files/fr/web/css/outline/index.html @@ -0,0 +1,159 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/outline +--- +
{{CSSRef}}
+ +

La propriété outline est une propriété raccourcie qui permet de définir, dans une seule déclaration, une ou plusieurs des propriétés parmi {{cssxref("outline-style")}}, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.

+ +
{{EmbedInteractiveExample("pages/css/outline.html")}}
+ + + +

À l'instar des autres propriétés raccourcies, toutes les valeurs qui ne sont pas explicitement utilisées dans la déclaration sont réinitialisées avec leur valeur initiale.

+ +

Bordures et contours

+ +

Les contours (outline) diffèrent des bordures, notamment sur les points suivants :

+ +
    +
  • Les contours ne prennent pas d'espace et sont dessinés au-dessus du contenu.
    • +
  • Les contours peuvent avoir une forme qui n'est pas rectangulaire. Ils seront rectangulaires avec Gecko et Firefox mais Opera dessinera une forme autour du contenu (cf. exemples).
    • +
+ +

Syntaxe

+ +
/* style */
+outline: solid;
+
+/* couleur | style */
+outline: #f66 dashed;
+
+/* style | épaisseur */
+outline: inset thick;
+
+/* couleur | style | épaisseur */
+outline: green solid 3px;
+
+/* Valeurs globales */
+outline: inherit;
+outline: initial;
+outline: unset;
+
+ +

La propriété outline peut être définie avec une, deux ou trois valeurs parmi celles listées ci-après. L'ordre de ces valeurs n'a pas d'importance.

+ +
+

Note : Si aucun style n'est défini, le contour sera invisible (car le style par défaut vaut none).

+
+ +

Valeurs

+ +
+
<'outline-width'>
+
Voir {{cssxref("outline-width")}}.
+
<'outline-style'>
+
Voir {{cssxref("outline-style")}}.
+
<'outline-color'>
+
Depuis Gecko 1.9 (Firefox 3), la valeur de la propriété {{cssxref("color")}} de l'élément est utilisée. Voir {{cssxref("outline-color")}}.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple simple

+ +

HTML

+ +
<p class="exemple">Je suis entouré de tirets rouges</p>
+ +

CSS

+ +
.exemple {
+  outline: dashed red 2px;
+  /* on aurait pu utiliser          */
+  /* les trois propriétés unitaires */
+  /* et avoir le même résultat      */
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_simple")}}

+ +

Exemple de contour non rectangulaire

+ +

HTML

+ +
<p class="exemple">
+  petit texte
+    <span class=grand>Grand Texte</span>
+  petit texte
+</p>
+ +

CSS

+ +
.exemple {
+  outline: dotted orange 1px;
+}
+
+.grand {
+  font-size:xx-large;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_de_contour_non_rectangulaire")}}

+ +

Accessibilité

+ +

Utiliser la propriété outline avec une valeur 0 ou none supprimera le style par défaut du navigateur pour le focus. Lorsqu'on interagit avec un élément, celui-ci doit avoir un indicateur visible. Aussi, veillez à fournir un tel indicateur si vous retirez le style par défaut pour le focus

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}{{Spec2('CSS3 Basic UI')}}Aucun changement.
{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.outline")}}

diff --git "a/files/fr/web/css/overflow-anchor/guide_ancrage_d\303\251filement/index.html" "b/files/fr/web/css/overflow-anchor/guide_ancrage_d\303\251filement/index.html" new file mode 100644 index 0000000000..e50bb21aa3 --- /dev/null +++ "b/files/fr/web/css/overflow-anchor/guide_ancrage_d\303\251filement/index.html" @@ -0,0 +1,79 @@ +--- +title: 'Guide : ancrage du défilement (scroll anchoring)' +slug: Web/CSS/overflow-anchor/Guide_ancrage_défilement +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring +--- +
{{CSSRef}}
+ +

Lorsque vous naviguez sur le Web avec une connexion plus ou moins performante, vous avez déjà pu rencontrer le problème suivant : vous faites défiler verticalement le contenu d'une page qui est en cours de chargement puis, au milieu de votre lecture, le contenu se décale brutalement plus bas (parce que des images au-dessus ou d'autres éléments ont fini de charger et s'affichent enfin).

+ +

L'ancrage du défilement (ou scroll anchoring en anglais) est une fonctionnalité des navigateurs qui vise à résoudre ce problème de « saut » (qui se produit lorsque l'utilisateur a déjà suffisamment fait défiler le contenu pour arriver sur une autre partie du document).

+ +

Comment cela fonctionne ?

+ +

L'ancrage du défilement ajuste la position du défilement pour compenser les modification apportées en dehors de la zone d'affichage (viewport). Cela signifie que l'emplacement atteint par l'utilisateur reste dans la zone d'affichage (la position de défilement se retrouve donc implicitement modifiée en termes de distance parcourue sur le document).

+ +

Comment activer l'ancrage du défilement ?

+ +

Il n'y a rien à fait. Cette fonctionnalité est activée par défaut pour les navigateurs qui la prennent en charge. Dans la plupart des cas, ces sauts inattendus ne sont pas une expérience voulue.

+ +

Si besoin, que faire pour le désactiver ?

+ +

La spécification fournit une nouvelle propriété : {{cssxref("overflow-anchor")}}. Celle-ci peut être utilisée pour désactiver explicitement l'ancrage du défilement sur une partie ou sur l'ensemble du document. Cette propriété sert de mécanisme pour ne pas utiliser le nouveau comportement.

+ +

Les valeurs utilisables pour cette propriété sont auto ou none :

+ +
    +
  • auto correspond à la valeur initiale : si c'est un navigateur compatible qui est utilisé, l'ancrage est activé et il devrait y avoir moins de déplacements brusques.
    • +
  • none signifie qu'on choisit explicitement de ne pas utiliser l'ancrage du défilement pour tout ou partie du document.
    • +
+ +

Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la propriété sur l'élément {{htmlelement("body")}} :

+ +
body {
+  overflow-anchor: none;
+}
+ +

Pour désactiver cette fonctionnalité sur une certaine partie du document, on ciblera overflow-anchor: none sur l'élément conteneur dans lequel l'utilisateur fait défiler le contenu :

+ +
.container {
+  overflow-anchor: none;
+}
+ +
+

Note : Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) overflow-anchor: auto à un autre endroit du document.

+
+ +

Supression triggers

+ +

La spécification définit également certains évènements qui suppriment cette fonctionnalité où ça serait problématique. Si un évènement particulier se produit sur le nœud d'ancrage ou sur un ancêtre de celui-ci, l'ancrage est supprimé.

+ +

Les évènements en question sont les modifications des valeurs calculées des propriétés suivantes :

+ +
    +
  • {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} ou {{cssxref("bottom")}}
    • +
  • {{cssxref("margin")}} ou {{cssxref("padding")}}
    • +
  • Toute propriété relative à {{cssxref("width")}} ou à {{cssxref("height")}}
    • +
  • {{cssxref("position")}}
    • +
  • {{cssxref("transform")}}
    • +
+ +

Compatibilité des navigateurs

+ +

Si vous souhaitez appliquer une amélioration progressive et détecter si cette fonctionnalité est disponible dans le navigateur utilisé, vous pouvez utiliser les requêtes de fonctionnalité afin de tester la prise en charge de la propriété overflow-anchor.

+ + + +

{{Compat("css.properties.overflow-anchor")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/overflow-anchor/index.html b/files/fr/web/css/overflow-anchor/index.html new file mode 100644 index 0000000000..79327c6f3f --- /dev/null +++ b/files/fr/web/css/overflow-anchor/index.html @@ -0,0 +1,80 @@ +--- +title: overflow-anchor +slug: Web/CSS/overflow-anchor +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/overflow-anchor +--- +
{{CSSRef}}
+ +

La propriété overflow-anchor permet d'éviter, lors du défilement, que le navigateur ajuste la position afin de minimiser le déplacement du contenu.

+ +

Ce comportement est activé par défaut pour les navigateurs qui le prenne en charge. Aussi, cette propriété est uniquement nécessaire lorsque vous rencontrez des problèmes de défilement dans un document et que vous souhaitez désactiver ce comportement.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+overflow-anchor: auto;
+overflow-anchor: none;
+
+/* Valeurs globales */
+overflow-anchor: inherit;
+overflow-anchor: initial;
+overflow-anchor: unset;
+
+ +

Valeurs

+ +
+
auto
+
L'élément peut devenir une ancre lorsque la position de défilement est ajustée.
+
none
+
L'élément ne sera pas sélectionné comme ancre.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Pour désactiver l'ancrage du défilement, on pourra utiliser cette propriété :

+ +
body {
+  overflow-anchor: none;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Scroll Anchoring', '#propdef-overflow-anchor', 'overflow-anchor')}}{{Spec2('CSS Scroll Anchoring')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.overflow-anchor")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/overflow-block/index.html b/files/fr/web/css/overflow-block/index.html new file mode 100644 index 0000000000..f754f76cca --- /dev/null +++ b/files/fr/web/css/overflow-block/index.html @@ -0,0 +1,140 @@ +--- +title: overflow-block +slug: Web/CSS/overflow-block +tags: + - CSS + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/overflow-block +--- +
{{CSSRef}}
+ +

La propriété CSS overflow-block est une propriété logique qui définit ce qu'il faut afficher quand le contenu dépasse d'un élément de bloc sur les bords de bloc (ceux orthogonaux au sens d'écriture). On peut choisir d'afficher rien, une barre de défilement ou de laisser le contenu dépasser.

+ +
+

Note : La propriété overflow-block correspond à {{cssxref("overflow-y")}} ou {{cssxref("overflow-x")}} selon le mode d'écriture du document.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+overflow-block: visible;
+overflow-block: hidden;
+overflow-block: scroll;
+overflow-block: auto;
+
+/* Valeurs globales */
+overflow-block: inherit;
+overflow-block: initial;
+overflow-block: unset;
+
+ +

La propriété overflow-block se définit avec un mot-clé parmi ceux de la liste suivante.

+ +

Valeurs

+ +
+
visible
+
Le contenu n'est pas rogné et peut être affiché en dehors des limites de bloc de la boîte.
+
hidden
+
Le contenu qui dépasse est masqué afin de ne pas dépasser dans l'axe de bloc. Aucune barre de défilement n'est affichée.
+
scroll
+
Le contenu est rogné si nécessaire selon l'axe de bloc pour tenir dans la boîte (de remplissage). Les navigateurs affichent des barres de défilement que le contenu soit rogné ou non (on évite ainsi d'avoir des barres qui apparaissent/disparaissent lorsque le contenu change). Les imprimantes peuvent imprimer le contenu qui dépasse.
+
auto
+
Le comportement de cette valeur dépend de l'agent utilisateur. Si le contenu tient dans la boîte de remplissage, elle se comportera comme visible mais établira un nouveau contexte de formatage. Les navigateurs de bureau affichent des barres de défilement si le contenu dépasse.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<ul>
+  <li><code>overflow-block:hidden</code> — masque le texte en dehors
+  <div id="div1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:scroll</code> — ajoute une barre de défilement
+  <div id="div2">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:visible</code> — affiche le texte en dehors si besoin
+  <div id="div3">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:auto</code> — pour la plupart des navigateurs, équivalent à <code>scroll</code>
+  <div id="div4">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
+
+ +

CSS

+ +
#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-block: hidden; margin-bottom: 12px;}
+#div2 { overflow-block: scroll; margin-bottom: 12px;}
+#div3 { overflow-block: visible; margin-bottom: 120px;}
+#div4 { overflow-block: auto; margin-bottom: 120px;}
+
+ +

Résultat

+ +
+

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

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block')}}{{Spec2('CSS3 Overflow')}} 
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.overflow-block")}}

+ +

Voir aussi

+ +
    +
  • Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-inline")}}, {{cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}
    • +
  • Les propriétés logiques en CSS
    • +
  • Les modes d'écriture
    • +
diff --git a/files/fr/web/css/overflow-clip-box-block/index.html b/files/fr/web/css/overflow-clip-box-block/index.html new file mode 100644 index 0000000000..54c60574d8 --- /dev/null +++ b/files/fr/web/css/overflow-clip-box-block/index.html @@ -0,0 +1,157 @@ +--- +title: overflow-clip-box-block +slug: Web/CSS/overflow-clip-box-block +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box-block +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS overflow-clip-box-block définit par rapport à quelle boîte est appliqué le rognement lorsque le contenu dépasse dans la direction de bloc (la direction orthogonale au sens d'écriture).

+ +
/* Valeurs avec un mot-clé */
+overflow-clip-box-block: padding-box;
+overflow-clip-box-block: content-box;
+
+/* Valeurs globales */
+overflow-clip-box-block: inherited;
+overflow-clip-box-block: initial;
+overflow-clip-box-block: unset;
+
+ +
+

Note : Sur Gecko, padding-box est, par défaut utilisé partout sauf pour <input type="text"> et les éléments semblables qui utilisent content-box. Par défaut, cette propriété est uniquement activée pour les feuilles de style de l'agent utilisateur et le contexte du chrome.

+
+ +

{{cssinfo}}

+ +

Syntaxe

+ +

Valeurs

+ +
+
padding-box
+
Avec ce mot-clé, le rognage est relatif à la boîte de remplissage (padding).
+
content-box
+
Avec ce mot-clé, le rognage est relatif à la boîte de contenu.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

padding-box

+ +

HTML

+ +
<div class="things">
+  <input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box">
+  <div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div>
+</div>
+
+ +

CSS

+ +
.scroll {
+  overflow: auto;
+  padding: 0 30px;
+  width: 6em;
+  border: 1px solid black;
+  background: lime content-box;
+}
+
+.padding-box {
+  overflow-clip-box-block: padding-box;
+}
+ +

JavaScript

+ +
function scrollSomeElements() {
+  var elms = document.querySelectorAll('.scroll');
+  for (i=0; i < elms.length; ++i) {
+    elms[i].scrollLeft=80;
+  }
+}
+var elt = document.queryElementsByTagName('body')[0];
+
+elt.addEventListener("load", scrollSomeElements, false);
+
+ +

Résultat

+ +

{{EmbedLiveSample('padding-box')}}

+ +

Spécifications

+ +

Cette propriété a été proposée au groupe de travail CSSWG du W3C. Elle n'est pas encore en voie de standardisation mais devrait apparaître dans {{SpecName("CSS3 Overflow")}} si c'est le cas.

+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox (Gecko)ChromeInternet ExplorerOperaSafari (WebKit)
Support simple{{CompatGeckoDesktop(59)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Support simple{{CompatGeckoMobile(59)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Cette propriété est contrôlée par la préférence layout.css.overflow-clip-box.enabled dont la valeur par défaut est false. Elle est uniquement activée pour les feuilles de style de l'agent utilisateur ou le contexte du chrome. Voir {{bug(966992)}}.

+ +

Voir aussi

+ +
    +
  • {{cssxref("text-overflow")}},
    • +
  • {{cssxref("white-space")}},
    • +
  • {{cssxref("overflow")}},
    • +
  • {{cssxref("overflow-x")}},
    • +
  • {{cssxref("overflow-y")}},
    • +
  • {{cssxref("clip")}},
    • +
  • {{cssxref("display")}}
    • +
+ +

 

diff --git a/files/fr/web/css/overflow-clip-box-inline/index.html b/files/fr/web/css/overflow-clip-box-inline/index.html new file mode 100644 index 0000000000..e7df371778 --- /dev/null +++ b/files/fr/web/css/overflow-clip-box-inline/index.html @@ -0,0 +1,157 @@ +--- +title: overflow-clip-box-inline +slug: Web/CSS/overflow-clip-box-inline +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box-inline +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété CSS overflow-clip-box-inline définit par rapport à quelle boîte est appliqué le rognement lorsque le contenu dépasse dans la direction en ligne (la direction correspondant au sens d'écriture).

+ +
/* Valeurs avec un mot-clé */
+overflow-clip-box-inline: padding-box;
+overflow-clip-box-inline: content-box;
+
+/* Valeurs globales */
+overflow-clip-box-inline: inherited;
+overflow-clip-box-inline: initial;
+overflow-clip-box-inline: unset;
+
+ +
+

Note : Sur Gecko, padding-box est, par défaut utilisé partout sauf pour <input type="text"> et les éléments semblables qui utilisent content-box. Par défaut, cette propriété est uniquement activée pour les feuilles de style de l'agent utilisateur et le contexte du chrome.

+
+ +

{{cssinfo}}

+ +

Syntaxe

+ +

Valeurs

+ +
+
padding-box
+
Avec ce mot-clé, le rognage est relatif à la boîte de remplissage (padding).
+
content-box
+
Avec ce mot-clé, le rognage est relatif à la boîte de contenu.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

padding-box

+ +

HTML

+ +
<div class="things">
+  <input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box">
+  <div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div>
+</div>
+
+ +

CSS

+ +
.scroll {
+  overflow: auto;
+  padding: 0 30px;
+  width: 6em;
+  border: 1px solid black;
+  background: lime content-box;
+}
+
+.padding-box {
+  overflow-clip-box-inline: padding-box;
+}
+ +

JavaScript

+ +
function scrollSomeElements() {
+  var elms = document.querySelectorAll('.scroll');
+  for (i=0; i < elms.length; ++i) {
+    elms[i].scrollLeft=80;
+  }
+}
+var elt = document.queryElementsByTagName('body')[0];
+
+elt.addEventListener("load", scrollSomeElements, false);
+
+ +

Résultat

+ +

{{EmbedLiveSample('padding-box')}}

+ +

Spécifications

+ +

Cette propriété a été proposée au groupe de travail CSSWG du W3C. Elle n'est pas encore en voie de standardisation mais devrait apparaître dans {{SpecName("CSS3 Overflow")}} si c'est le cas.

+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox (Gecko)ChromeInternet ExplorerOperaSafari (WebKit)
Support simple{{CompatGeckoDesktop(59)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Support simple{{CompatGeckoMobile(59)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Cette propriété est contrôlée par la préférence layout.css.overflow-clip-box.enabled dont la valeur par défaut est false. Elle est uniquement activée pour les feuilles de style de l'agent utilisateur ou le contexte du chrome. Voir {{bug(966992)}}.

+ +

Voir aussi

+ +
    +
  • {{cssxref("text-overflow")}},
    • +
  • {{cssxref("white-space")}},
    • +
  • {{cssxref("overflow")}},
    • +
  • {{cssxref("overflow-x")}},
    • +
  • {{cssxref("overflow-y")}},
    • +
  • {{cssxref("clip")}},
    • +
  • {{cssxref("display")}}
    • +
+ +

 

diff --git a/files/fr/web/css/overflow-clip-box/index.html b/files/fr/web/css/overflow-clip-box/index.html new file mode 100644 index 0000000000..997137220e --- /dev/null +++ b/files/fr/web/css/overflow-clip-box/index.html @@ -0,0 +1,175 @@ +--- +title: overflow-clip-box +slug: Web/CSS/overflow-clip-box +tags: + - CSS + - Non-standard + - Propriété + - Propriété raccourcie + - Reference +translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété overflow-clip-box permet de définir la boîte à laquelle faire référence lorsqu'il y a un dépassement du contenu. C'est une propriété raccourcie pour les propriétés {{cssxref("overflow-clip-box-inline")}} et {{cssxref("overflow-clip-box-block")}}.

+ +
/* Valeurs avec un mot-clé */
+overflow-clip-box: padding-box;
+overflow-clip-box: content-box;
+
+/* Deux valeurs */
+overflow-clip-box: padding-box content-box;
+overflow-clip-box: content-box content-box;
+
+/* Valeurs globales */
+overflow-clip-box: inherited;
+overflow-clip-box: initial;
+overflow-clip-box: unset;
+
+ +
+

Note : Par défaut, sur Gecko, padding-box est utilisé partout mais <input type="text"> et les éléments similaires utilisent la valeur content-box. Avant Firefox 29, ce comportement était intégré en dur. Depuis, le comportement se base sur cette propriété qui peut être utilisée à d'autres endroits. On notera que cette propriété est uniquement activée pour les feuilles de styles définies au niveau de l'agent utilisateur et pour les contextes liés au chrome de l'application.

+
+ +

{{cssinfo}}

+ +

Syntaxe

+ +

Valeurs

+ +
+
padding-box
+
Ce mot-clé indique que le rognage du contenu qui dépasse sera fait par rapport à la boîte de remplissage (padding).
+
content-box
+
Ce mot-clé indique que le rognage du contenu qui dépasse sera fait par rapport à la boîte de contenu.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div class="things">
+  <input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box">
+  <div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div>
+</div>
+
+ +

CSS

+ +
.scroll {
+  overflow: auto;
+  padding: 0 30px;
+  width: 6em;
+  border: 1px solid black;
+  background: lime content-box;
+}
+
+.padding-box {
+  overflow-clip-box: padding-box;
+}
+
+ +

JavaScript

+ +
function scrollSomeElements() {
+  var elms = document.querySelectorAll('.scroll');
+  for (i=0; i < elms.length; ++i) {
+    elms[i].scrollLeft=80;
+  }
+}
+var elt = document.queryElementsByTagName('body')[0];
+
+elt.addEventListener("load", scrollSomeElements, false);
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ +

Cette propriété a été proposée dans le cadre du groupe de travail CSS du W3C. Elle n'est pas encore sur le chemin du processus standard mais si elle est acceptée, elle fera vraisemblablement partie de la spécification {{SpecName("CSS3 Overflow")}}.

+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox (Gecko)ChromeInternet ExplorerOperaSafari (WebKit)
Support simple{{CompatGeckoDesktop("29.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Propriété raccourcie, gestion de deux valeurs{{CompatGeckoDesktop("59")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Support simple{{CompatGeckoMobile("29.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Propriété raccourcie, gestion de deux valeurs{{CompatGeckoMobile("59")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Cette propriété est contrôlée grâce à la préférence layout.css.overflow-clip-box.enabled dont la valeur par défaut est false. Elle est uniquement activée au sein des feuilles de style de l'agent utilisateur pour le chrome. Pour plus d'informations, voir {{bug(966992)}}.

+ +

Voir aussi

+ +
    +
  • {{cssxref("text-overflow")}},
    • +
  • {{cssxref("white-space")}},
    • +
  • {{cssxref("overflow")}},
    • +
  • {{cssxref("overflow-x")}},
    • +
  • {{cssxref("overflow-y")}},
    • +
  • {{cssxref("clip")}},
    • +
  • {{cssxref("display")}}
    • +
diff --git a/files/fr/web/css/overflow-inline/index.html b/files/fr/web/css/overflow-inline/index.html new file mode 100644 index 0000000000..bbec96456f --- /dev/null +++ b/files/fr/web/css/overflow-inline/index.html @@ -0,0 +1,140 @@ +--- +title: overflow-inline +slug: Web/CSS/overflow-inline +tags: + - CSS + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/overflow-inline +--- +
{{CSSRef}}
+ +

La propriété CSS overflow-inline est une propriété logique qui définit ce qu'il faut afficher quand le contenu dépasse d'une boîte sur les bords en ligne (ceux parallèles au sens d'écriture). On peut choisir d'afficher rien, une barre de défilement ou de laisser le contenu dépasser.

+ +
+

Note : La propriété overflow-inline correspond à {{cssxref("overflow-y")}} ou {{cssxref("overflow-x")}} selon le mode d'écriture du document.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+overflow-inline: visible;
+overflow-inline: hidden;
+overflow-inline: scroll;
+overflow-inline: auto;
+
+/* Valeurs globales */
+overflow-inline: inherit;
+overflow-inline: initial;
+overflow-inline: unset;
+
+ +

La propriété overflow-inline se définit avec un mot-clé parmi ceux de la liste suivante.

+ +

Valeurs

+ +
+
visible
+
Le contenu n'est pas rogné et peut être affiché en dehors des limites en ligne de la boîte.
+
hidden
+
Le contenu qui dépasse est masqué afin de ne pas dépasser dans l'axe en ligne. Aucune barre de défilement n'est affichée.
+
scroll
+
Le contenu est rogné si nécessaire selon l'axe en ligne pour tenir dans la boîte (de remplissage). Les navigateurs affichent des barres de défilement que le contenu soit rogné ou non (on évite ainsi d'avoir des barres qui apparaissent/disparaissent lorsque le contenu change). Les imprimantes peuvent imprimer le contenu qui dépasse.
+
auto
+
Le comportement de cette valeur dépend de l'agent utilisateur. Si le contenu tient dans la boîte de remplissage, elle se comportera comme visible mais établira un nouveau contexte de formatage. Les navigateurs de bureau affichent des barres de défilement si le contenu dépasse.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<ul>
+  <li><code>overflow-inline:hidden</code> — masque le texte en dehors
+  <div id="div1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-inline:scroll</code> — ajoute une barre de défilement
+  <div id="div2">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-inline:visible</code> — affiche le texte en dehors si besoin
+  <div id="div3">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-inline:auto</code> — pour la plupart des navigateurs, équivalent à <code>scroll</code>
+  <div id="div4">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
+
+ +

CSS

+ +
#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-inline: hidden;}
+#div2 { overflow-inline: scroll;}
+#div3 { overflow-inline: visible;}
+#div4 { overflow-inline: auto;}
+
+ +

Résultat

+ +
+

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

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}}{{Spec2('CSS3 Overflow')}} 
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.overflow-inline")}}

+ +

Voir aussi

+ +
    +
  • Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-block")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}
    • +
  • Les propriétés logiques en CSS
    • +
  • Les modes d'écriture
    • +
diff --git a/files/fr/web/css/overflow-wrap/index.html b/files/fr/web/css/overflow-wrap/index.html new file mode 100644 index 0000000000..6cde7358d5 --- /dev/null +++ b/files/fr/web/css/overflow-wrap/index.html @@ -0,0 +1,153 @@ +--- +title: overflow-wrap +slug: Web/CSS/overflow-wrap +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/overflow-wrap +--- +
{{CSSRef}}
+ +

La propriété overflow-wrap s'applique aux éléments en ligne (inline) et est utilisée afin de définir si le navigateur peut ou non faire la césure à l'intérieur d'un mot pour éviter le dépassement d'une chaîne qui serait trop longue afin qu'elle ne dépasse pas de la boîte.

+ +
{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}
+ + + +
+

Note : À la différence de {{cssxref("word-break")}}, overflow-wrap créera uniquement un saut de ligne si un mot entier ne peut pas être placé sur sa propre ligne sans dépasser.

+
+ +

À l'origine, cette propriété était une extension non-standard sans préfixe de Microsoft et intitulée word-wrap. Implémentée sous ce nom par la plupart des navigateurs depuis, elle a été renommée en overflow-wrap et word-wrap est devenu un alias.

+ +

Syntaxe

+ +
/* Avec un mot-clé */
+overflow-wrap: normal;
+overflow-wrap: break-word;
+overflow-wrap: anywhere;
+
+/* Valeurs globales */
+overflow-wrap: inherit;
+overflow-wrap: initial;
+overflow-wrap: unset;
+
+ +

La propriété overflow-wrap peut être définie avec l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
normal
+
Indique que la césure d'une ligne ne peut avoir lieu qu'aux positions de césures normales.
+
anywhere
+
Indique que la césure pourra avoir lieu afin d'éviter le dépassement, y compris s'il n'y a pas de point de césure acceptable sur la ligne. Cela est notamment utile pour éviter le dépassement et qu'on a une longue ligne (un long mot ou une URL). Aucun caractère ne sera ajouté au point de césure. Les possibilités de rupture douces ajoutées par la césure sont prises en compte lors du calcul des tailles min-content intrinsèques.
+
break-word
+
Indique que les mots qui ne subissent habituellement pas de césure peuvent être scindés à n'importe quelle position s'il n'y a pas d'autres positions envisageables pour la césure de la ligne. Les possibilités de rupture douces ajoutées par la césure ne sont pas prises en compte lors du calcul des tailles min-content intrinsèques.
+
+

Syntaxe formelle

+ + 
{{csssyntax}}
+
+
+ +

Exemples

+ +

CSS

+ +
p {
+  width: 13em;
+  margin: 2px;
+  background: gold;
+}
+
+.ow-anywhere {
+  overflow-wrap: anywhere;
+}
+
+.ow-break-word {
+  overflow-wrap: break-word;
+}
+
+.word-break {
+  word-break: break-all;
+}
+
+.hyphens {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
+ +

HTML

+ +
<h3><code>normal</code></h3>
+<p>They say the fishing is excellent at
+  Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself.</p>
+<h3><code>overflow-wrap: anywhere</code></h3>
+<p>They say the fishing is excellent at
+  Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself.</p>
+<h3><code>overflow-wrap: break-word</code></h3>
+<p>They say the fishing is excellent at
+  Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. </p>
+<h3><code>word-break: break-all</code></h3>
+<p>They say the fishing is excellent at
+  Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself.</p>
+<h3><code>hyphens: auto</code>, without <code>lang</code> attribute</h3>
+<p class="hyphens">They say the fishing is excellent at
+  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>
+  though I've never been there myself. </p>
+<h3><code>hyphens: auto</code>, English rules</h3>
+<p class="hyphens" lang="en">They say the fishing is excellent at
+  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself.</p>
+<h3><code>hyphens: auto</code>, German rules</h3>
+<p class="hyphens" lang="de">They say the fishing is excellent at
+  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself.</p>
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap')}}{{Spec2('CSS3 Text')}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.overflow-wrap")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("word-break")}}
    • +
  • {{cssxref("hyphens")}}
    • +
  • {{cssxref("text-overflow")}}
    • +
diff --git a/files/fr/web/css/overflow-x/index.html b/files/fr/web/css/overflow-x/index.html new file mode 100644 index 0000000000..ace75a305c --- /dev/null +++ b/files/fr/web/css/overflow-x/index.html @@ -0,0 +1,153 @@ +--- +title: overflow-x +slug: Web/CSS/overflow-x +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/overflow-x +--- +
{{CSSRef}}
+ +

La propriété overflow-x permet de définir les mécanismes à utiliser (rognage, ascenseurs, dépassement, etc.) lorsque le contenu dépasse des bords droit et gauche de la boîte de contenu.

+ +
+

Note : Si {{cssxref("overflow-y")}} vaut hidden, scroll ou auto et que cette propriété vaut visible (la valeur par défaut), sa valeur calculée sera implicitement auto.

+
+ +
{{EmbedInteractiveExample("pages/css/overflow-x.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+overflow-x: visible;
+overflow-x: hidden;
+overflow-x: scroll;
+overflow-x: auto;
+
+/* Valeurs globales */
+overflow-x: inherit;
+overflow-x: initial;
+overflow-x: unset;
+
+ +

La propriété overflow-x est définie avec l'un des mots-clés définis ci-après.

+ +

Valeurs

+ +
+
visible
+
Le contenu n'est pas rogné. Il peut être affiché en dehors de la boîte de remplissage (padding) à droite et à gauche malgré le manque d'espace.
+
hidden
+
Le contenu est rogné afin de tenir horizontalement dans la boîte de remplissage (padding) et aucun ascenseur horizontal n'est affiché.
+
scroll
+
Le contenu est rogné afin de tenir horizontalement dans la boîte de remplissage et le navigateur affiche des barres de défilement (ascenseurs) dans tous les cas. Cela permet d'éviter d'avoir des barres qui apparaissent / disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu qui dépasse.
+
auto
+
Le comportement dépend de l'agent utilisateur. Les navigateurs de bureau comme Firefox peuvent afficher des barres de défilement si le contenu dépasse.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<ul>
+  <li><code>overflow-x:hidden</code> — cache le texte en dehors de la boîte
+    <div id="div1">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:scroll</code> — ajoute toujours un ascenseur
+    <div id="div2">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:visible</code> — affiche le texte en dehors de la boîte si besoin
+    <div id="div3">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:auto</code> — sur la plupart des navigateurs, cela sera équivalent à <code>scroll</code>
+    <div id="div4">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+</ul>
+
+ +

CSS

+ +
#div1, #div2, #div3, #div4 {
+  border: 1px solid black;
+  width:  250px;
+  margin-bottom: 12px;
+}
+
+#div1 {
+  overflow-x: hidden;
+}
+
+#div2 {
+  overflow-x: scroll;
+}
+
+#div3 {
+  overflow-x: visible;
+}
+
+#div4 {
+  overflow-x: auto;
+}
+
+ +

Résultat

+ +
+

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

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}}{{Spec2('CSS3 Overflow')}} 
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.overflow-x")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("text-overflow")}},
    • +
  • {{cssxref("white-space")}},
    • +
  • {{cssxref("overflow")}},
    • +
  • {{cssxref("overflow-y")}},
    • +
  • {{cssxref("clip")}},
    • +
  • {{cssxref("display")}}
    • +
diff --git a/files/fr/web/css/overflow-y/index.html b/files/fr/web/css/overflow-y/index.html new file mode 100644 index 0000000000..254e6ceafe --- /dev/null +++ b/files/fr/web/css/overflow-y/index.html @@ -0,0 +1,158 @@ +--- +title: overflow-y +slug: Web/CSS/overflow-y +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/overflow-y +--- +
{{CSSRef}}
+ +

La propriété overflow-y permet de définir les mécanismes à utiliser (rognage, ascenseurs, dépassement, etc.) lorsque le contenu dépasse des bords haut et bas de la boîte.

+ +
+

Note : Si {{cssxref("overflow-x")}} vaut hidden, scroll ou auto et que cette propriété vaut visible (la valeur par défaut), la valeur calculée sera implicitement auto.

+
+ +
{{EmbedInteractiveExample("pages/css/overflow-y.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+overflow-y: visible;
+overflow-y: hidden;
+overflow-y: scroll;
+overflow-y: auto;
+
+/* Valeurs globales */
+overflow-y: inherit;
+overflow-y: initial;
+overflow-y: unset;
+
+ +

La propriété overflow-y est définie avec un des mots-clés définis ci-après.

+ +

Valeurs

+ +
+
visible
+
Le contenu n'est pas rogné. Il peut être affiché en dehors de la boîte de remplissage (padding) en haut et en bas malgré le manque d'espace.
+
hidden
+
Le contenu est rogné afin de tenir verticalement dans la boîte de remplissage (padding) et aucun ascenseur vertical n'est affiché.
+
scroll
+
Le contenu est rogné afin de tenir verticalement au sein de la boîte de remplissage (padding) et le navigateur affiche des barres de défilement (ascenseurs) dans tous les cas. Cela permet d'éviter d'avoir des barres qui apparaissent / disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu qui dépasse.
+
auto
+
Le comportement dépend de l'agent utilisateur. Les navigateurs de bureau comme Firefox peuvent afficher des barres de défilement si le contenu dépasse.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<ul>
+  <li><code>overflow-y:hidden</code> — cache le texte en dehors de la boîte
+  <div id="div1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:scroll</code> — ajoute toujours un ascenseur
+  <div id="div2">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:visible</code> — affiche le texte en dehors de la boîte si besoin
+  <div id="div3">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:auto</code> — sur la plupart des navigateurs, cela sera équivalent à <code>scroll</code>
+  <div id="div4">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
+
+ +

CSS

+ +
#div1, #div2, #div3,#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 {
+  overflow-y: hidden;
+  margin-bottom: 12px;
+}
+
+#div2 {
+  overflow-y: scroll;
+  margin-bottom: 12px;
+}
+
+#div3 {
+  overflow-y: visible;
+  margin-bottom: 120px;
+}
+
+#div4 {
+  overflow-y: auto;
+  margin-bottom: 120px;
+}
+
+ +

Résultat

+ +
+

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

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y')}}{{Spec2('CSS3 Overflow')}} 
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.overflow-y")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("text-overflow")}}
    • +
  • {{cssxref("white-space")}}
    • +
  • {{cssxref("overflow")}}
    • +
  • {{cssxref("overflow-x")}}
    • +
  • {{cssxref("clip")}}
    • +
  • {{cssxref("display")}}
    • +
diff --git a/files/fr/web/css/overflow/index.html b/files/fr/web/css/overflow/index.html new file mode 100644 index 0000000000..2361debd6c --- /dev/null +++ b/files/fr/web/css/overflow/index.html @@ -0,0 +1,175 @@ +--- +title: overflow +slug: Web/CSS/overflow +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/overflow +--- +
{{CSSRef}}
+ +

La propriété CSS overflow est une propriété raccourcie qui définit comment gérer le dépassement du contenu d'un élément dans son bloc. Elle définit les valeurs des propriétés {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}}.

+ +
{{EmbedInteractiveExample("pages/css/overflow.html")}}
+ + + +

Lorsqu'on utilise la propriété overflow avec une autre valeur que visible (la valeur par défaut), cela entraîne la création d'un nouveau contexte de formatage de bloc. Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée

+ +

Afin que la propriété overflow puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir white-space avec la valeur nowrap.

+ +
+

Note : Si on définit un axe avec visible (la valeur par défaut) et qu'on définit l'autre axe avec une valeur différente, alors la valeur du premier axe (visible) sera considérée comme auto.

+
+ +
+

Note : Lorsqu'on définit, via un script, la propriété scrollTop sur les éléments HTML pertinents, même lorsque overflow vaut hidden, il faut parfois faire défiler l'élément.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+overflow: visible;
+overflow: hidden;
+overflow: clip;
+overflow: scroll;
+overflow: auto;
+overflow: hidden visible;
+
+/* Valeurs globales */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+
+ +

La propriété overflow peut être définie grâce à un ou deux des mots-clés suivants. Si deux mots-clés sont utilisé, le premier sera appliqué à overflow-x et le second à overflow-y. Si une seule valeur est utilisée, elle sera appliquée à overflow-x et à overflow-y.

+ +

Valeurs

+ +
+
visible
+
La valeur par défaut. Le contenu n'est pas rogné. Le contenu peut éventuellement être affiché en dehors de la boîte de remplissage (padding).
+
hidden
+
Le contenu est rogné si besoin pour s'inscrire dans la boîte de remplissage (padding) et aucune barre de défilement n'est affichée.
+
clip
+
Se comporte comme hidden au sens où le contenu est rogné pour s'inscrire dans la boîte de remplissage. Comme hidden, clip ne présente pas de barre de défilement mais contrairement à hidden, clip empêche tout défilement, y compris à l'aide de scripts. La boîte n'est pas un conteneur de défilement et ne définit pas de nouveau contexte de formatage. Si on souhaite obtenir un nouveau contexte de formatage, il faudra utiliser {{cssxref("display", "display: flow-root", "#flow-root")}}.
+ Certains navigateurs ne prennent pas encore cette fonctionnalité en charge.
+
scroll
+
Le contenu est rogné pour s'inscrire dans la boîte de remplissage (padding) et les navigateurs de bureau affichent des barres de défilement dans tous les cas. Cela évite d'avoir des barres qui apparaissent et disparaissent sans cesse avec du contenu dynamique. Les imprimantes peuvent éventuellement imprimer le contenu qui dépasse.
+
auto
+
Le comportement est laissé à la discrétion de l'agent utilisateur. Les navigateurs comme Firefox affichent des ascenseurs si le contenu dépasse dans la boîte de remplissage (padding)
+
overlay {{Deprecated_inline}}
+
Cette valeur se comporte comme auto sauf que les barres de défilement sont au-dessus du contenu plutôt que de prendre de la place. Cette valeur est uniquement prise en charge par les navigateurs basés sur WebKit (Safari) ou Blink (Chrome, Opera).
+
+ +

Extensions propres au moteur Mozilla

+ +
+
-moz-scrollbars-none {{obsolete_inline}}
+
overflow:hidden doit être utilisé à la place. +

Note : À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.

+
+
-moz-scrollbars-horizontal {{Deprecated_inline}}
+
Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. +

Note : À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.

+
+
-moz-scrollbars-vertical {{Deprecated_inline}}
+
Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. +

Note : À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.

+
+
-moz-hidden-unscrollable {{non-standard_inline}}
+
Principalement utilisé en interne et par les thèmes. Cela désactive le défilement pour les éléments XML racines <html>, <body> (avec les flèches du clavier et la roue de la souris).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
p {
+  width: 12em;
+  height: 6em;
+  border: dotted;
+
+  /* le contenu n'est pas rogné */
+  overflow: visible;
+}
+
+ +

visible (default)
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p {
+  /* pas d'ascenseur fourni */
+  overflow: hidden;
+}
+
+ +

overflow: hidden
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p {
+  /* les ascenseurs sont toujours affichés */
+  overflow: scroll;
+}
+
+ +

overflow: scroll
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p {
+  /* les ascenseurs sont affichés si nécessaires */
+  overflow: auto;
+}
+
+ +

overflow: auto
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Overflow')}}La syntaxe permet désormais d'utiliser une ou deux valeurs.
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.overflow")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("text-overflow")}},
    • +
  • {{cssxref("white-space")}},
    • +
  • {{cssxref("overflow-x")}},
    • +
  • {{cssxref("overflow-y")}},
    • +
  • {{cssxref("overflow-inline")}},
    • +
  • {{cssxref("overflow-block")}},
    • +
  • {{cssxref("clip")}},
    • +
  • {{cssxref("display")}}
    • +
diff --git a/files/fr/web/css/overscroll-behavior-x/index.html b/files/fr/web/css/overscroll-behavior-x/index.html new file mode 100644 index 0000000000..e061936d92 --- /dev/null +++ b/files/fr/web/css/overscroll-behavior-x/index.html @@ -0,0 +1,98 @@ +--- +title: overscroll-behavior-x +slug: Web/CSS/overscroll-behavior-x +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/overscroll-behavior-x +--- +
{{CSSRef}}
+ +

La propriété CSS overscroll-behavior-x définit le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe horizontal.

+ +
+

Note : Voir {{cssxref("overscroll-behavior")}} pour plus de détails.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+overscroll-behavior-x: auto;
+overscroll-behavior-x: contain;
+overscroll-behavior-x: none;
+
+/* Valeurs globales */
+overscroll-behavior-x: inherit;
+overscroll-behavior-x: initial;
+overscroll-behavior-x: unset;
+
+ +

La propriété overscroll-behavior-x est définie avec un des mots-clés définis ci-après.

+ +

Valeurs

+ +
+
auto
+
Le dépassement de la zone de défilement se déroule normalement.
+
contain
+
Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.
+
none
+
Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Dans l'exemple overscroll-behavior-x (cf. le code source associé), on dispose de deux boîtes de bloc, l'une contenue à l'intérieure de l'autre. La boîte englobante possède une grande largeur avec {{cssxref("width")}} afin que la page puisse défiler horizontalement. La boîte intérieure a une petite largeur (et une petite hauteur, définie avec {{cssxref("height")}}) afin de pouvoir être facilement contenue dans la zone d'affichage mais son contenu possède une grande largeur afin de défiler horizontalement.

+ +

Par défaut, lorsqu'on fait défiler la boîte intérieure et qu'on atteint une limite de défilement, c'est toute la page qui commence à défiler. Si ce n'est pas le comportement souhaité, on peut empêcher ça en utilisant overscroll-behavior-x: contain sur la boîte intérieure :

+ +
main > div {
+  height: 300px;
+  width: 500px;
+  overflow: auto;
+  position: relative;
+  top: 100px;
+  left: 100px;
+  overscroll-behavior-x: contain;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}}{{Spec2('Overscroll Behavior')}} 
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.overscroll-behavior-x")}}

+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/css/overscroll-behavior-y/index.html b/files/fr/web/css/overscroll-behavior-y/index.html new file mode 100644 index 0000000000..5cf1ba394b --- /dev/null +++ b/files/fr/web/css/overscroll-behavior-y/index.html @@ -0,0 +1,92 @@ +--- +title: overscroll-behavior-y +slug: Web/CSS/overscroll-behavior-y +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/overscroll-behavior-y +--- +
{{CSSRef}}
+ +

La propriété CSS overscroll-behavior-y permet de contrôler le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe vertical.

+ +
+

Note : Voir {{cssxref("overscroll-behavior")}} pour plus de détails.

+
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+overscroll-behavior-y: auto;
+overscroll-behavior-y: contain;
+overscroll-behavior-y: none;
+
+/* Valeurs globales */
+overscroll-behavior-y: inherit;
+overscroll-behavior-y: initial;
+overscroll-behavior-y: unset;
+
+ +

La propriété overscroll-behavior-x est définie avec un des mots-clés définis ci-après.

+ +

Valeurs

+ +
+
auto
+
Le dépassement de la zone de défilement se déroule normalement.
+
contain
+
Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.
+
none
+
Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+}
+ +

Voir {{cssxref("overscroll-behavior")}}  pour un exemple complet et plus de détails.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}}{{Spec2('Overscroll Behavior')}} 
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.overscroll-behavior-y")}}

+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/css/overscroll-behavior/index.html b/files/fr/web/css/overscroll-behavior/index.html new file mode 100644 index 0000000000..e54eac7aa3 --- /dev/null +++ b/files/fr/web/css/overscroll-behavior/index.html @@ -0,0 +1,109 @@ +--- +title: overscroll-behavior +slug: Web/CSS/overscroll-behavior +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/overscroll-behavior +--- +
{{CSSRef}}
+ +

La propriété CSS overscroll-behavior est une propriété raccourcie permettant de définir les propriétés {{cssxref("overscroll-behavior-x")}} et {{cssxref("overscroll-behavior-y")}}. Ces propriétés contrôlent le comportement du navigateur lorsqu'on dépasse la limite d'une zone de défilement (scrolling).

+ +

Par défaut, les navigateurs mobiles fournissent un effet de rebondissement voire déclenchent un rafraîchissement de la page lorsqu'on défile jusqu'en haut ou jusqu'en bas de la page. Vous avez pu remarquer que, lorsqu'une boîte de dialogue possède du contenu qu'on peut faire défiler, si on atteint la limite de défilement pour ce contenu, c'est la page sous-jacente qui défilera sous la boîte de dialogue : c'est ce qu'on appelle le chaînage du défilement (scroll chaining).

+ +

Dans certains cas, ces effets ne sont pas souhaitables. On peut alors utiliser overscroll-behavior pour éviter les chaînages intempestifs et les comportements du type "défiler pour rafraîchir".

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clés */
+overscroll-behavior: auto;
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Valeurs avec deux mots-clés */
+overscroll-behavior: auto contain;
+
+/* Valeurs globales */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+
+ +

La propriété overscroll-behavior est définie avec un ou deux mots-clés parmi ceux de la liste ci-après.

+ +

Lorsqu'on utilise cette propriété raccourcie avec deux valeurs, la première est utilisée pour overscroll-behavior-x et la seconde pour overscroll-behavior-y. Si une seule valeur est fournie, c'est cette même valeur qui est utilisée pour les deux propriétés.

+ +

Valeurs

+ +
+
auto
+
Le dépassement de la zone de défilement se déroule normalement.
+
contain
+
Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.
+
none
+
Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Dans notre exemple sur overscroll-behavior (cf. le code source associé), on affiche une page entière de contacts et une boîte de dialogue avec une fenêtre de discussion. 

+ +

+ +

Ces deux zones possèdent du contenu qui entraîne leur défilement. Normalement, si on défile la fenêtre de discussion jusqu'à une limite de défilement, ce serait au tour de la liste de contacts de défiler en dessous. Cependant, cet effet n'est pas souhaitable ici. On utilise donc overscroll-behavior-y (overscroll-behavior fonctionnerait également) sur la fenêtre de discussion :

+ +
.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+}
+ +

On souhaite également se débarasser des effets de bord lorsqu'on défile jusqu'en haut ou jusqu'en bas de la liste des contacts (Chrome pour Android rafraichit la page lorsqu'on défile après la limite haute par exemple). Pour cela, on utilise overscroll-behavior: none sur l'élément {{htmlelement("body")}} :

+ +
body {
+  margin: 0;
+  overscroll-behavior: none;
+}
+ +

Spécifications

+ +

Jusqu'à ce que le CSSWG publie son propre brouillon, la spécification est consutable sur le dépôt GitHub du WICG.

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}{{Spec2('CSS Overscroll Behavior')}} 
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.overscroll-behavior")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/padding-block-end/index.html b/files/fr/web/css/padding-block-end/index.html new file mode 100644 index 0000000000..cc97778ece --- /dev/null +++ b/files/fr/web/css/padding-block-end/index.html @@ -0,0 +1,114 @@ +--- +title: padding-block-end +slug: Web/CSS/padding-block-end +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/padding-block-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété padding-block-end définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +

Elle est à rapprocher des propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément.

+ +
{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+padding-block-end: 10px;
+padding-block-end: 1em;
+
+/* Valeurs de proportions */
+/* Type <percentage>      */
+padding-block-end: 5%;  /* Relatif à la largeur du bloc englobant */
+
+/* Valeurs globales */
+padding-block-end: inherit;
+padding-block-end: initial;
+padding-block-end: unset;
+
+ +

Valeurs

+ +

La propriété padding-block-end peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple et Lorem et IP sum</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  padding-block-end: 20px;
+  background-color: #C8C800;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.padding-block-end")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("padding-top")}},
      • +
    • {{cssxref("padding-right")}},
      • +
    • {{cssxref("padding-bottom")}},
      • +
    • {{cssxref("padding-left")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}},
    • +
  • {{cssxref("direction")}},
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/padding-block-start/index.html b/files/fr/web/css/padding-block-start/index.html new file mode 100644 index 0000000000..2af0e4d6fc --- /dev/null +++ b/files/fr/web/css/padding-block-start/index.html @@ -0,0 +1,114 @@ +--- +title: padding-block-start +slug: Web/CSS/padding-block-start +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/padding-block-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété padding-block-start définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +

Elle est à rapprocher des propriétés {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément.

+ +
{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+padding-block-start: 10px;
+padding-block-start: 1em;
+
+/* Valeurs de proportions */
+/* Type <percentage>      */
+padding-block-start: 5%;  /* Relatif à la largeur du bloc englobant */
+
+/* Valeurs globales */
+padding-block-start: inherit;
+padding-block-start: initial;
+padding-block-start: unset;
+
+ +

Valeurs

+ +

La propriété padding-block-start peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple et Lorem et IP sum</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  padding-block-start: 20px;
+  background-color: #C8C800;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.padding-block-start")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("padding-top")}},
      • +
    • {{cssxref("padding-right")}},
      • +
    • {{cssxref("padding-bottom")}},
      • +
    • {{cssxref("padding-left")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}},
    • +
  • {{cssxref("direction")}},
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/padding-block/index.html b/files/fr/web/css/padding-block/index.html new file mode 100644 index 0000000000..80025dd82e --- /dev/null +++ b/files/fr/web/css/padding-block/index.html @@ -0,0 +1,116 @@ +--- +title: padding-block +slug: Web/CSS/padding-block +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/padding-block +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété padding-block définit l'espace de remplissage (padding) pour le début et la fin de l'axe de bloc de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et  {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
/* Valeurs de longueur */
+/* Type <length> */
+padding-block: 10px 20px;  /* Des longueurs absolues */
+padding-block: 1em 2em;    /* Des longueurs relatives à la taille du texte */
+padding-block: 5% 2%;      /* Des longueurs relatives à la taille du bloc englobant */
+padding-block: 10px;       /* Une seule valeur définit le remplissage des deux côtés */
+
+/* Valeurs avec un mot-clé */
+padding-block: auto;
+
+/* Valeurs globales */
+padding-block: inherit;
+padding-block: initial;
+padding-block: unset;
+
+ +

Ces valeurs peuvent être définies individuellement grâce aux propriétés détaillées {{cssxref("padding-block-start")}} et {{cssxref("padding-block-end")}}. Pour définir le remplissage sur l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("padding-inline")}} qui définit {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}}.

+ +

Syntaxe

+ +

Valeur

+ +

La propriété padding-block peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding-block: 20px 40px;
+  background-color: #c8c800;
+}
+ +

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-padding-block", "padding-block")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.padding-block")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("padding-top")}},
      • +
    • {{cssxref("padding-right")}},
      • +
    • {{cssxref("padding-bottom")}},
      • +
    • {{cssxref("padding-left")}}
      • +
    +
    • +
  • Les propriétés influençant les propriétés logiques : +
      +
    • {{cssxref("writing-mode")}},
      • +
    • {{cssxref("direction")}},
      • +
    • {{cssxref("text-orientation")}}
      • +
    +
    • +
diff --git a/files/fr/web/css/padding-bottom/index.html b/files/fr/web/css/padding-bottom/index.html new file mode 100644 index 0000000000..f191ec7c27 --- /dev/null +++ b/files/fr/web/css/padding-bottom/index.html @@ -0,0 +1,120 @@ +--- +title: padding-bottom +slug: Web/CSS/padding-bottom +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/padding-bottom +--- +
{{CSSRef}}
+ +

La propriété padding-bottom d'un élément ajuste la hauteur de la boîte de remplissage (padding) en haut de l'élément. La zone de remplissage correspond à l'espace entre le contenu et la bordure. Contrairement à {{cssxref("margin-bottom")}}, padding-bottom ne peut pas recevoir de valeurs négatives.

+ +
{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}
+ + + +

La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris padding-bottom donc).

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+padding-bottom: 0.5em;
+padding-bottom: 0;
+padding-bottom: 2cm;
+
+/* Valeurs de proportions */
+/* Type <percentage>      */
+padding-bottom: 10%;
+
+/* Valeurs globales */
+padding-bottom: inherit;
+padding-bottom: initial;
+padding-bottom: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Cette valeur définit une hauteur positive. Voir {{cssxref("<length>")}} pour plus de détails.
+
<percentage>
+
Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("<percentage>")}} pour plus de détails.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p class="padd">
+  Elle n’avait pas bu la moitié de la bouteille,
+  que sa tête touchait au plafond et qu’elle fut
+  forcée de se baisser pour ne pas se casser le
+  cou.
+</p>
+ +

CSS

+ +
.padd {
+  padding-bottom: 5em;
+  border: solid 1px;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#the-padding', 'padding-bottom')}}{{Spec2('CSS3 Box')}}Aucun changement depuis {{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom')}}.
{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom')}}{{Spec2('CSS3 Transitions')}}padding-bottom peut désormais être animée.
{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom')}}{{Spec2('CSS2.1')}}Aucun changement depuis {{Specname('CSS1', '#padding-bottom', 'padding-bottom')}}.
{{Specname('CSS1', '#padding-bottom', 'padding-bottom')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.padding-bottom")}}

+ +

Voir aussi

+ +
    +
  • Le modèle de boîtes CSS
    • +
  • La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer padding-bottom, {{cssxref("padding-right")}}, {{cssxref("padding-top")}} et {{cssxref("padding-left")}}.
    • +
diff --git a/files/fr/web/css/padding-inline-end/index.html b/files/fr/web/css/padding-inline-end/index.html new file mode 100644 index 0000000000..b226bc62bd --- /dev/null +++ b/files/fr/web/css/padding-inline-end/index.html @@ -0,0 +1,114 @@ +--- +title: padding-inline-end +slug: Web/CSS/padding-inline-end +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/padding-inline-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété padding-inline-end définit le décalage avec la fin de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} slon les valeurs définies poru {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +

Les autres parties « logiques » du remplissage sont définies grâce aux propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}} et {{cssxref("padding-inline-start")}}.

+ +
{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+padding-inline-end: 10px;
+padding-inline-end: 1em;
+
+/* Valeurs de proportions */
+/* Type <percentage>      */
+padding-inline-end: 5%;  /* Relatif à la largeur du bloc englobant */
+
+/* Valeurs globales */
+padding-inline-end: inherit;
+padding-inline-end: initial;
+padding-inline-end: unset;
+
+ +

Valeurs

+ +

La propriété padding-inline-end peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple Lorem y psoum</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  padding-inline-end: 20px;
+  background-color: #C8C800;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.padding-inline-end")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("padding-top")}},
      • +
    • {{cssxref("padding-right")}},
      • +
    • {{cssxref("padding-bottom")}},
      • +
    • {{cssxref("padding-left")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}},
    • +
  • {{cssxref("direction")}},
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/padding-inline-start/index.html b/files/fr/web/css/padding-inline-start/index.html new file mode 100644 index 0000000000..4e3ab291af --- /dev/null +++ b/files/fr/web/css/padding-inline-start/index.html @@ -0,0 +1,114 @@ +--- +title: padding-inline-start +slug: Web/CSS/padding-inline-start +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/padding-inline-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété padding-inline-start définit le décalage avec le début de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +

Les autres parties « logiques » du remplissage sont définies grâce aux propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}} et {{cssxref("padding-inline-end")}}.

+ +

{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}

+ + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+padding-inline-start: 10px;
+padding-inline-start: 1em;
+
+/* Valeurs de proportions */
+/* Type <percentage>      */
+padding-inline-start: 5%;  /* Relatif à la largeur du bloc englobant */
+
+/* Valeurs globales */
+padding-inline-start: inherit;
+padding-inline-start: initial;
+padding-inline-start: unset;
+
+ +

Valeurs

+ +

La propriété padding-inline-start peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  padding-inline-start: 20px;
+  background-color: #C8C800;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.padding-inline-start")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("padding-top")}},
      • +
    • {{cssxref("padding-right")}},
      • +
    • {{cssxref("padding-bottom")}},
      • +
    • {{cssxref("padding-left")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}},
    • +
  • {{cssxref("direction")}},
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/padding-inline/index.html b/files/fr/web/css/padding-inline/index.html new file mode 100644 index 0000000000..380dfcda04 --- /dev/null +++ b/files/fr/web/css/padding-inline/index.html @@ -0,0 +1,116 @@ +--- +title: padding-inline +slug: Web/CSS/padding-inline +tags: + - CSS + - Experimental + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/padding-inline +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété padding-inline définit l'espace de remplissage (padding) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et  {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
/* Valeurs de longueur */
+/* Type <length> */
+padding-inline: 10px 20px;  /* Des longueurs absolues */
+padding-inline: 1em 2em;    /* Des longueurs relatives à la taille du texte */
+padding-inline: 5% 2%;      /* Des longueurs relatives à la taille du bloc englobant */
+padding-inline: 10px;       /* Une seule valeur définit le remplissage des deux côtés */
+
+/* Valeurs avec un mot-clé */
+padding-inline: auto;
+
+/* Valeurs globales */
+padding-inline: inherit;
+padding-inline: initial;
+padding-inline: unset;
+
+ +

Ces valeurs peuvent être définies individuellement grâce aux propriétés détaillées {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}}. Pour définir le remplissage sur l'axe de bloc, on pourra utiliser la propriété logique raccourcie {{cssxref("padding-block")}} qui définit {{cssxref("padding-block-start")}} et {{cssxref("padding-block-end")}}.

+ +

Syntaxe

+ +

Valeur

+ +

La propriété padding-inline peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding-inline: 20px 40px;
+  background-color: #c8c800;
+}
+ +

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-padding-inline", "padding-inline")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.padding-inline")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("padding-top")}},
      • +
    • {{cssxref("padding-right")}},
      • +
    • {{cssxref("padding-bottom")}},
      • +
    • {{cssxref("padding-left")}}
      • +
    +
    • +
  • Les propriétés influençant les propriétés logiques : +
      +
    • {{cssxref("writing-mode")}},
      • +
    • {{cssxref("direction")}},
      • +
    • {{cssxref("text-orientation")}}
      • +
    +
    • +
diff --git a/files/fr/web/css/padding-left/index.html b/files/fr/web/css/padding-left/index.html new file mode 100644 index 0000000000..164ce17636 --- /dev/null +++ b/files/fr/web/css/padding-left/index.html @@ -0,0 +1,120 @@ +--- +title: padding-left +slug: Web/CSS/padding-left +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/padding-left +--- +
{{CSSRef}}
+ +

La propriété padding-left d'un élément correspond à l'espace nécessaire à la gauche d'un élément. La zone de remplissage correspond à l'espace entre le contenu et la bordure. padding-left ne peut pas recevoir de valeurs négatives.

+ +
{{EmbedInteractiveExample("pages/css/padding-left.html")}}
+ + + +

La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris padding-left donc).

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+padding-left: 0.5em;
+padding-left: 0;
+padding-left: 2cm;
+
+/* Valeurs de proportions */
+/* Type <percentage>      */
+padding-left: 10%;
+
+/* Valeurs globales */
+padding-left: inherit;
+padding-left: initial;
+padding-left: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Cette valeur définit une largeur positive. Voir {{cssxref("<length>")}} pour plus de détails.
+
<percentage>
+
Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("<percentage>")}} pour plus de détails.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p class="padd">
+  Elle n’avait pas bu la moitié de la bouteille,
+  que sa tête touchait au plafond et qu’elle fut
+  forcée de se baisser pour ne pas se casser le
+  cou.
+</p>
+ +

CSS

+ +
.padd {
+  padding-left: 20%;
+  border: solid 1px;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#the-padding', 'padding-left')}}{{Spec2('CSS3 Box')}}Aucun changement.
{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-left')}}{{Spec2('CSS3 Transitions')}}padding-left peut désormais être animée.
{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left')}}{{Spec2('CSS2.1')}}Aucun changement.
{{Specname('CSS1', '#padding-left', 'padding-left')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.padding-left")}}

+ +

Voir aussi

+ +
    +
  • Le modèle de boîtes CSS
    • +
  • La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer padding-top, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.
    • +
diff --git a/files/fr/web/css/padding-right/index.html b/files/fr/web/css/padding-right/index.html new file mode 100644 index 0000000000..bdc3db6f3b --- /dev/null +++ b/files/fr/web/css/padding-right/index.html @@ -0,0 +1,122 @@ +--- +title: padding-right +slug: Web/CSS/padding-right +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/padding-right +--- +
{{CSSRef}}
+ +

La propriété padding-right d'un élément correspond à l'espace nécessaire à la droite d'un élément. La zone de remplissage correspond à l'espace entre le contenu et la bordure. padding-right ne peut pas recevoir de valeurs négatives.

+ +
{{EmbedInteractiveExample("pages/css/padding-right.html")}}
+ + + +
+

Note : La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris padding-right donc).

+
+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+padding-right: 0.5em;
+padding-right: 0;
+padding-right: 2cm;
+
+/* Valeurs de proportions */
+/* Type <percentage>      */
+padding-right: 10%;
+
+/* Valeurs globales */
+padding-right: inherit;
+padding-right: initial;
+padding-right: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Cette valeur définit une largeur positive. Voir {{cssxref("<length>")}} pour plus de détails.
+
<percentage>
+
Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("<percentage>")}} pour plus de détails.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p class="padd">
+  Elle n’avait pas bu la moitié de la bouteille,
+  que sa tête touchait au plafond et qu’elle fut
+  forcée de se baisser pour ne pas se casser le
+  cou.
+</p>
+ +

CSS

+ +
.padd {
+  padding-right: 20%;
+  border: solid 1px;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#the-padding', 'padding-right')}}{{Spec2('CSS3 Box')}}Aucun changement.
{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-right')}}{{Spec2('CSS3 Transitions')}}padding-right peut désormais être animée.
{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right')}}{{Spec2('CSS2.1')}}Aucun changement.
{{Specname('CSS1', '#padding-right', 'padding-right')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.padding-right")}}

+ +

Voir aussi

+ +
    +
  • Le modèle de boîtes CSS
    • +
  • La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer padding-right, {{cssxref("padding-top")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.
    • +
diff --git a/files/fr/web/css/padding-top/index.html b/files/fr/web/css/padding-top/index.html new file mode 100644 index 0000000000..076e4a9f04 --- /dev/null +++ b/files/fr/web/css/padding-top/index.html @@ -0,0 +1,122 @@ +--- +title: padding-top +slug: Web/CSS/padding-top +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/padding-top +--- +
{{CSSRef}}
+ +

La propriété padding-top d'un élément ajuste la hauteur de la boîte de remplissage (padding) en haut de l'élément.

+ +

La zone de remplissage correspond à l'espace entre le contenu et la bordure. Contrairement à {{cssxref("margin-top")}}, padding-top ne peut pas recevoir de valeurs négatives.

+ +
{{EmbedInteractiveExample("pages/css/padding-top.html")}}
+ + + +

La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris padding-top donc).

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+padding-top: 0.5em;
+padding-top: 0;
+padding-top: 2cm;
+
+/* Valeurs de proportions */
+/* Type <percentage>      */
+padding-top: 10%;
+
+/* Valeurs globales */
+padding-top: inherit;
+padding-top: initial;
+padding-top: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Cette valeur définit une hauteur positive. Voir {{cssxref("<length>")}} pour plus de détails.
+
<percentage>
+
Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("<percentage>")}} pour plus de détails.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p class="padd">
+  Elle n’avait pas bu la moitié de la bouteille,
+  que sa tête touchait au plafond et qu’elle fut
+  forcée de se baisser pour ne pas se casser le
+  cou.
+</p>
+ +

CSS

+ +
.padd {
+  padding-top: 5em;
+  border: solid 1px;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#the-padding', 'padding-top')}}{{Spec2('CSS3 Box')}}Aucun changement depuis {{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top')}}.
{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-top')}}{{Spec2('CSS3 Transitions')}}padding-top peut désormais être animée.
{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top')}}{{Spec2('CSS2.1')}}Aucun changement depuis {{Specname('CSS1', '#padding-top', 'padding-top')}}.
{{Specname('CSS1', '#padding-top', 'padding-top')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.padding-top")}}

+ +

Voir aussi

+ +
    +
  • Le modèle de boîtes CSS
    • +
  • La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer padding-top, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.
    • +
diff --git a/files/fr/web/css/padding/index.html b/files/fr/web/css/padding/index.html new file mode 100644 index 0000000000..e5b53a52e6 --- /dev/null +++ b/files/fr/web/css/padding/index.html @@ -0,0 +1,148 @@ +--- +title: padding +slug: Web/CSS/padding +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/padding +--- +
{{CSSRef}}
+ +

La propriété padding est une propriété raccourcie qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. les boîtes CSS). Elle synthétise {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.

+ +
{{EmbedInteractiveExample("pages/css/padding.html")}}
+ + + +

La zone de remplissage correspond à l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.

+ +
+

Note : Le padding permet de créer un espace supplémentaire à l'intérieur d'un élément. La marge ({{cssxref("margin")}}) permet quant à elle de créer un espace supplémentaire à l'extérieur de l'élément.

+
+ +

Syntaxe

+ +
/* On applique la même valeur aux quatre côtés */
+padding: 1em;
+
+/* vertical | horizontal */
+padding: 5% 10%;
+
+/* haut | horizontal | bas */
+padding: 1em 2em 2em;
+
+/* haut | droit | bas | gauche */
+padding: 5px 1em 0 2em;
+
+/* Valeurs globales */
+padding: inherit;
+padding: initial;
+padding: unset;
+
+ +

Selon la quantité de valeurs utilisées, on a un effet différent. Chaque valeur peut être une longueur (<length>) ou un pourcentage (<percentage>). Les valeurs négatives ne sont pas autorisées.

+ +
    +
  • Une valeur applique le même écart aux 4 côtés.
    • +
  • Deux valeurs appliquent le premier écart en haut et en bas et le second sur les côtés droit et gauche.
    • +
  • Trois valeurs appliquent le premier écart en haut, le deuxième à droite et à gauche et le troisième en bas.
    • +
  • Quatre valeurs appliquent le premier écart en haut, le deuxième à droite, le troisième en bas et le quatrième à gauche.
    • +
+ +

Valeurs

+ +

Les valeurs permettent de définir une, deux, trois ou quatre valeurs pour les écarts de remplissage. On peut utiliser des valeurs de type :

+ +
+
<length>
+
Définit un écart fixe. Voir la page {{cssxref("<length>")}} sur les valeurs de ce type.
+
<percentage>
+
Définit un écart relatif à la largeur du bloc englobant. Voir la page {{cssxref("<percentage>")}} pour plus d'informations sur les valeurs de ce type.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<h4>Coucou le monde !</h4>
+<h3>Le remplissage n'est pas le même ici.</h3>
+
+ +

CSS

+ +
h4 {
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3 {
+  background-color: blue;
+  padding: 400px 5%;
+}
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Box', '#the-padding', 'padding')}}{{Spec2('CSS3 Box')}}Aucun changement.
{{SpecName('CSS3 Transitions', '#animatable-css', 'padding')}}{{Spec2('CSS3 Transitions')}}padding peut être animée.
{{SpecName('CSS2.1', 'box.html#propdef-padding', 'padding')}}{{Spec2('CSS2.1')}}Aucun changement.
{{Specname('CSS1', '#padding', 'padding')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.padding")}}

+ +

Voir aussi

+ +
    +
  • CSS : Le modèle de boîtes
    • +
  • Les quatres propriétés détaillées synthétisées par padding : +
      +
    • {{cssxref("padding-top")}}
      • +
    • {{cssxref("padding-right")}}
      • +
    • {{cssxref("padding-bottom")}}
      • +
    • {{cssxref("padding-left")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/page-break-after/index.html b/files/fr/web/css/page-break-after/index.html new file mode 100644 index 0000000000..3d88e13bf6 --- /dev/null +++ b/files/fr/web/css/page-break-after/index.html @@ -0,0 +1,153 @@ +--- +title: page-break-after +slug: Web/CSS/page-break-after +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/page-break-after +--- +
{{CSSRef}}
+ +
+

Attention ! Cette propriété a été remplacée par la propriété {{cssxref("break-after")}}.

+
+ +

La propriété CSS page-break-after permet d'ajuster les sauts de page placés après l'élément courant.

+ +
/* Valeurs avec un mot-clé */
+page-break-after: auto;
+page-break-after: always;
+page-break-after: avoid;
+page-break-after: left;
+page-break-after: right;
+page-break-after: recto;
+page-break-after: verso;
+
+/* Valeurs globales */
+page-break-after: inherit;
+page-break-after: initial;
+page-break-after: unset;
+
+ +

Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.

+ +

Synonymes avec break-after

+ +

La propriété page-break-after est désormais remplacée par {{cssxref("break-after")}}.

+ +

Si pour des raisons de compatibilité, on doit traiter page-break-after comme synonyme, on pourra utiliser le tableau de correspondance des valeurs suivant :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
page-break-afterbreak-after
autoauto
leftleft
rightright
avoidavoid
alwayspage
+ +

Syntaxe

+ +

Valeurs

+ +
+
auto
+
Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).
+
always
+
Le saut de page est toujours forcé après l'élément.
+
avoid
+
Les sauts de page sont évités après l'élément.
+
left
+
Le saut de page est forcé après l'élément afin que la prochaine page soit mise en forme comme une page gauche.
+
right
+
Le saut de page est forcé après l'élément afin que la prochaine page soit mise en forme comme une page droite.
+
recto {{experimental_inline}}
+
Si la page progresse de gauche à droite, cette valeur est équivalente à right. Si la page progresse de droite à gauche, elle est synonyme de left.
+
verso {{experimental_inline}}
+
Si la page progresse de gauche à droite, cette valeur est équivalente à left. Si la page progresse de droite à gauche, elle est synonyme de right.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
/* On force une nouvelle page à la suite */
+/* d'une note en bas de page             */
+div.footnotes {
+  page-break-after: always;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}{{Spec2('CSS Logical Properties')}}Ajout des valeurs recto et verso.
{{SpecName('CSS3 Paged Media', '#page-break-after', 'page-break-after')}}{{Spec2('CSS3 Paged Media')}}Cette propriété peut désormais être étendues aux lignes de tableau et aux groupe de lignes de tableau.
{{SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.page-break-after")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-inside")}}
    • +
  • {{cssxref("page-break-before")}}
    • +
  • {{cssxref("page-break-inside")}}
    • +
  • {{cssxref("orphans")}}
    • +
  • {{cssxref("widows")}}
    • +
diff --git a/files/fr/web/css/page-break-before/index.html b/files/fr/web/css/page-break-before/index.html new file mode 100644 index 0000000000..d6e1df056d --- /dev/null +++ b/files/fr/web/css/page-break-before/index.html @@ -0,0 +1,151 @@ +--- +title: page-break-before +slug: Web/CSS/page-break-before +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/page-break-before +--- +
{{CSSRef}}
+ +
+

Attention ! Cette propriété a été remplacée par la propriété {{cssxref("break-before")}}.

+
+ +

La propriété CSS page-break-before permet d'ajuster les sauts de page placés avant l'élément courant.Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.

+ +
/* Valeurs avec un mot-clé */
+page-break-before: auto;
+page-break-before: always;
+page-break-before: avoid;
+page-break-before: left;
+page-break-before: right;
+page-break-before: recto;
+page-break-before: verso;
+
+/* Valeurs globales */
+page-break-before: inherit;
+page-break-before: initial;
+page-break-before: unset;
+
+ +

Synonymes avec break-before

+ +

La propriété page-break-before est désormais remplacée par {{cssxref("break-before")}}.

+ +

Pour des raisons de compatibilité, si on traite page-break-before comme un synonyme de break-before, on pourra utiliser le tableau de correspondance suivant :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
page-break-beforebreak-before
autoauto
leftleft
rightright
avoidavoid
alwayspage
+ +

Syntaxe

+ +

Valeurs

+ +
+
auto
+
Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).
+
always
+
Le saut de page est toujours forcé avant l'élément.
+
avoid
+
Les sauts de page sont évités avant l'élément.
+
left
+
Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page gauche.
+
right
+
Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page droite.
+
recto {{experimental_inline}}
+
Si la page progresse de gauche à droite, cette valeur est équivalente à right. Si la page progresse de droite à gauche, elle est synonyme de left.
+
verso {{experimental_inline}}
+
Si la page progresse de gauche à droite, cette valeur est équivalente à left. Si la page progresse de droite à gauche, elle est synonyme de right.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
/* Pour éviter d'avoir un saut de page avant */
+/* une note dans un div                      */
+div.note {
+    page-break-before: avoid;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Logical Properties', '#logical-page', 'recto and verso')}}{{Spec2('CSS Logical Properties')}}Ajout des valeurs recto et verso.
{{SpecName('CSS3 Paged Media', '#page-break-before', 'page-break-before')}}{{Spec2('CSS3 Paged Media')}}Cette propriété peut désormais être étendues aux lignes de tableau et aux groupe de lignes de tableau.
{{SpecName('CSS2.1', 'page.html#propdef-page-break-before', 'page-break-before')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.page-break-before")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-inside")}}
    • +
  • {{cssxref("page-break-after")}}
    • +
  • {{cssxref("page-break-inside")}}
    • +
  • {{cssxref("orphans")}}
    • +
  • {{cssxref("widows")}}
    • +
diff --git a/files/fr/web/css/page-break-inside/index.html b/files/fr/web/css/page-break-inside/index.html new file mode 100644 index 0000000000..cf16f15c01 --- /dev/null +++ b/files/fr/web/css/page-break-inside/index.html @@ -0,0 +1,164 @@ +--- +title: page-break-inside +slug: Web/CSS/page-break-inside +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/page-break-inside +--- +
{{CSSRef}}
+ +
+

Attention ! Cette propriété a été remplacée par la propriété {{cssxref("break-inside")}}.

+
+ +

La propriété page-break-inside ajuste la façon dont sont appliqués les sauts de page au sein de l'élément courant.

+ +
/* Valeurs avec un mot-clé */
+page-break-inside: auto;
+page-break-inside: avoid;
+
+/* Valeurs globales */
+page-break-inside: inherit;
+page-break-inside: initial;
+page-break-inside: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
auto
+
Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).
+
avoid
+
L'agent utilisateur évite d'insérer un saut de page au sein de l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Alias avec break-inside

+ +

La propriété page-break-inside a désormais été remplacée par la propriété {{cssxref("break-inside")}}.

+ +

Pour des raisons de compatibilité, page-break-inside devrait être considérée par les navigateurs comme synonyme de break-inside. De cette façon, les sites utilisant page-break-inside pourront continuer de fonctionner. Voici un sous-ensemble des valeurs de cette propriété et des correspondances

+ + + + + + + + + + + + + + + + + + +
page-break-insidebreak-inside
autoauto
avoidavoid
+ +

Exemples

+ +

HTML

+ +
<div class="page">
+  <p>Un premier paragraphe.</p>
+  <section class="list">
+    <span>Une liste</span>
+    <ol>
+      <li>Un</li>
+<!--       <li>Deux</li> -->
+    </ol>
+  </section>
+  <ul>
+    <li>Un</li>
+<!--     <li>Deux</li> -->
+  </ul>
+  <p>Un deuxième paragraphe.</p>
+  <p>Un troisième paragraphe, un peu plus long.</p>
+  <p>Un quatrième paragraphe, un peu plus long voire plus long que le troisième.</p>
+</div>
+ +

CSS

+ +
.page {
+  background-color: #8cffa0;
+  height: 90px;
+  width: 200px;
+  columns: 1;
+  column-width: 100px;
+}
+
+.list, ol, ul, p {
+  break-inside: avoid;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+ol, ul, .list {
+  margin: 0.5em 0;
+  display: block;
+  background-color: orange;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}{{Spec2('CSS3 Paged Media')}}Permet d'appliquer cette propriété sur plus d'éléments.
{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.page-break-inside")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-inside")}}
    • +
  • {{cssxref("page-break-after")}}
    • +
  • {{cssxref("page-break-before")}}
    • +
  • {{cssxref("orphans")}}
    • +
  • {{cssxref("widows")}}
    • +
diff --git a/files/fr/web/css/paint()/index.html b/files/fr/web/css/paint()/index.html new file mode 100644 index 0000000000..189965b358 --- /dev/null +++ b/files/fr/web/css/paint()/index.html @@ -0,0 +1,111 @@ +--- +title: paint() +slug: Web/CSS/paint() +tags: + - CSS + - Fonction + - Houdini + - Reference + - Web +translation_of: Web/CSS/paint() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La fonction CSS paint() définit une {{cssxref("<image>")}} dont la valeur est générée par un PaintWorklet.

+ +

Syntaxe

+ +
paint(workletName, parameters)
+ +

Paramètres

+ +
+
workletName
+
Le nom du worklet enregistré.
+
parameters
+
Des paramètres supplémentaires optionnels, passés aux paintWorklet.
+
+ +

Exemples

+ +

Il est possible de passer des arguments supplémentaires grâce à la fonction CSS paint(). Dans cet exemple, on passe deux arguments : le premier indiquant si l'arrière-plan est rempli ou si on utilise juste son contour et le second indiquant la largeur de ce contour :

+ + + + + +
li {
+   --boxColor: hsla(55, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 2px);
+}
+
+li:nth-of-type(3n) {
+   --boxColor: hsla(155, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, filled,  3px);
+}
+
+li:nth-of-type(3n+1) {
+   --boxColor: hsla(255, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 1px);
+}
+ +

On a ici ajouté une propriété personnalisée dans le sélecteur du bloc. Ces propriétés personnalisées peuvent être manipulées par le PaintWorklet.

+ +

{{EmbedLiveSample("Examples", 300, 300)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Painting API', '#paint-notation', 'Paint Notation')}}{{Spec2('CSS Painting API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image.paint")}}

+ +

Voir aussi

+ +
    +
  • {{domxref('PaintWorklet')}}
    • +
  • {{domxref('CSS Painting API')}}
    • +
  • Utiliser l'API CSS Painting
    • +
  • {{cssxref("<image>")}}
    • +
  • {{domxref("canvas")}}
    • +
diff --git a/files/fr/web/css/paint-order/index.html b/files/fr/web/css/paint-order/index.html new file mode 100644 index 0000000000..3e0e34f287 --- /dev/null +++ b/files/fr/web/css/paint-order/index.html @@ -0,0 +1,116 @@ +--- +title: paint-order +slug: Web/CSS/paint-order +tags: + - CSS + - Experimental + - Propriété + - Reference + - SVG + - Web +translation_of: Web/CSS/paint-order +--- +
{{CSSRef}}{{seecompattable}}
+ +

La propriété paint-order permet de contrôler l'ordre dans lequel le remplissage, les marqueurs de peinture et le contour du texte et des formes sont dessinés.

+ +

Syntaxe

+ +
/* Normal */
+paint-order: normal;
+
+/* Valeur unique */
+/* le contour est dessiné en premier, puis */
+/* le remplissage puis les marqueurs */
+paint-order: stroke;
+/* les marqueurs sont dessinés en premier, */
+/* suivis du remplissage et du contour */
+paint-order: markers;
+
+/* Plusieurs valeurs */
+/* Le contour est dessiné en premier puis */
+/* le remplissage puis les marqueurs */
+paint-order: stroke fill;
+/* Les marqueurs sont dessinés en premiers */
+/* puis le contour, puis le remplissage */
+paint-order: markers stroke fill;
+
+ +

La valeur par défaut, utilisée si aucune valeur n'est fournie, sera fill, stroke, markers.

+ +

Lorsqu'une seule valeur est indiquée, c'est celle-ci qui est appliquée par défaut suivi des deux autres selon l'ordre par défaut. Lorsque deux valeurs sont indiquées, elles sont appliquées dans cet ordre puis suivi de la troisième.

+ +
+

Note : Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétés marker-* (e.g. marker-start) ou l'élément <marker>. Les marqueurs ne sont pas appliqués sur le texte HTML, dans ce cas, seul l'ordre entre stroke et fill importe.

+
+ +

Valeurs

+ +
+
normal
+
Les différents niveaux sont appliqués dans l'ordre normal.
+
stroke
+
 
+
fill
+
markers
+
Indiquent les valeurs dans l'ordre dans lequel on veut qu'elles soient peintes.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

SVG

+ +
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
+  <text x="10" y="75">stroke in front</text>
+  <text x="10" y="150" class="stroke-behind">stroke behind</text>
+</svg>
+ +

CSS

+ +
text {
+  font-family: sans-serif;
+  font-size: 50px;
+  font-weight: bold;
+  fill: black;
+  stroke: red;
+  stroke-width: 4px;
+}
+
+.stroke-behind {
+  paint-order: stroke fill;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '100%', 165)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('SVG2', 'painting.html#PaintOrder', 'paint-order')}}{{Spec2('SVG2')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.paint-order")}}

diff --git a/files/fr/web/css/percentage/index.html b/files/fr/web/css/percentage/index.html new file mode 100644 index 0000000000..338b562069 --- /dev/null +++ b/files/fr/web/css/percentage/index.html @@ -0,0 +1,97 @@ +--- +title: +slug: Web/CSS/percentage +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/percentage +--- +
{{CSSRef}}
+ +

Le type de données CSS <percentage> représente une valeur exprimée en pourcentages. De nombreuses propriétés CSS utilisent des valeurs en pourcentages, la plupart du temps pour déterminer des tailles en fonction de la taille des éléments parent.

+ +

De nombreuses propriétés CSS utilisent des pourcentages : {{cssxref("width")}}, {{cssxref("margin")}}, {{cssxref("padding")}}, etc.. Les pourcentages peuvent aussi être vus avec {{cssxref("font-size")}}, où la taille du texte est directement en relation avec celle de son parent.

+ +
+

Note : Seules les valeurs calculées sont héritées. Ainsi, même si une valeur en pourcentage est utilisée sur la propriété parent, une valeur réelle, comme une largeur en pixel pour une valeur {{cssxref("<length>")}}, sera accessible sur la propriété héritée, pas la valeur en pourcentage.

+
+ +

Syntaxe

+ +

Les valeurs de type <percentage> sont formées d'un {{cssxref("<number>")}} immédiatement suivi par le signe pourcentage %. Comme pour toutes les valeurs avec unité en CSS, il n'y a aucun espace entre le '%' et le nombre.

+ +

Interpolation

+ +

Les valeurs du type <percentage> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation","",1)}} associée à l'animation.

+ +

Exemples

+ +

width et margin-left

+ +
<div style="background-color:#0000FF;">
+  <div style="width:50%;margin-left:20%;background-color:#00FF00;">
+    width : 50%, left-margin : 20%
+  </div>
+  <div style="width:30%;margin-left:60%;background-color:#FF0000;">
+    width : 30%, left-margin : 60%
+  </div>
+</div>
+
+ +

Le fragment de HTML précédent sera affiché de cette façon :

+ +

{{EmbedLiveSample('width_et_margin-left', '100%', '140')}}

+ +

font-size

+ +
<div style="font-size:18px;">
+  <p>Texte en taille normale (18px)</p>
+  <p><span style="font-size:50%;">50%</span></p>
+  <p><span style="font-size:200%;">200%</span></p>
+</div>
+
+ +

Le fragment HTML précédent donnera ce résultat :

+ +

{{EmbedLiveSample('font-size')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#percentages', '<percentage>')}}{{Spec2('CSS4 Values')}}Aucune modification significative.
{{SpecName('CSS3 Values', '#percentages', '<percentage>')}}{{Spec2('CSS3 Values')}}Aucune modification significative depuis la spécification CSS de niveau 2 (première révision).
{{SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>')}}{{Spec2('CSS2.1')}}Aucune modification depuis la spécification CSS de niveau 1.
{{SpecName('CSS1', '#percentage-units', '<percentage>')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.percentage")}}

diff --git a/files/fr/web/css/perspective-origin/index.html b/files/fr/web/css/perspective-origin/index.html new file mode 100644 index 0000000000..6505dac1ab --- /dev/null +++ b/files/fr/web/css/perspective-origin/index.html @@ -0,0 +1,389 @@ +--- +title: perspective-origin +slug: Web/CSS/perspective-origin +tags: + - CSS + - Propriété + - Reference + - Transformations CSS +translation_of: Web/CSS/perspective-origin +--- +
{{CSSRef}}
+ +

La propriété perspective-origin détermine la poisition depuis laquelle le spectateur regarde le document. Elle est utilisée comme point de fuite par la propriété {{cssxref("perspective")}}.

+ +
{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}
+ + + +

Les propriétés perspective-origin et {{cssxref("perspective")}} sont à rattacher à l'élément parent de l'élément qu'on veut placer dans un espace 3D. En revanche, la fonction perspective() s'applique à même l'élément qu'on veut placer en 3D.

+ +

Syntaxe

+ +
/* Syntaxe avec une valeur */
+perspective-origin: x-position;
+
+/* Syntaxe avec deux valeurs */
+perspective-origin: x-position y-position;
+
+/* Lorsque x-position et y-position sont des mots-clés */
+/* on peut aussi avoir la forme suivante valide        */
+perspective-origin: y-position x-position;
+
+/* Valeurs globales */
+perspective-origin: inherit;
+perspective-origin: initial;
+perspective-origin: unset;
+
+ +

Valeurs

+ +
+
x-position
+
Indique l'abscisse de la position du point de fuite. La valeur peut être : +
    +
  • De type {{cssxref("<length-percentage>")}} : la position est indiquée comme une longueur absolue ou relativement à la largeur de l'élément. La valeur peut être négative.
    • +
  • left : un mot-clé qui est un alias pour indiquer une longueur nulle.
    • +
  • center : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de 50%.
    • +
  • right : un mot-clé qui est un alias pour indiquer un pourcentage de 100%.
    • +
+
+
y-position
+
Indique l'ordonnée de la position du point de fuite. La valeur peut être : +
    +
  • De type {{cssxref("<length-percentage>")}} : la position est indiquée comme une longueur absolue ou relativement à la hauteur de l'élément. La valeur peut être négative.
    • +
  • De type {{cssxref("<length>")}} : la position est indiquée avec une valeur de longueur. La valeur peut être négative.
    • +
  • top : un mot-clé qui est un alias pour indiquer une longueur nulle.
    • +
  • center : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de 50%.
    • +
  • bottom : un mot-clé qui est un alias pour indiquer un pourcentage de 100%.
    • +
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Cubes avec des valeurs communes pour perspective-origin

+ +

HTML

+ +
<section>
+<figure>
+  <caption><code>perspective-origin: top left;</code></caption>
+    <div class="container">
+    <div class="cube potl">
+      <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>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: top;</code></caption>
+   <div class="container">
+    <div class="cube potm">
+      <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>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: top right;</code></caption>
+  <div class="container">
+    <div class="cube potr">
+      <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>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: left;</code></caption>
+  <div class="container">
+    <div class="cube poml">
+      <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>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: 50% 50%;</code></caption>
+  <div class="container">
+    <div class="cube pomm">
+      <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>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: right;</code></caption>
+  <div class="container">
+    <div class="cube pomr">
+      <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>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: bottom left;</code></caption>
+  <div class="container">
+    <div class="cube pobl">
+      <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>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: bottom;</code></caption>
+  <div class="container">
+    <div class="cube pobm">
+      <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>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: bottom right;</code></caption>
+  <div class="container">
+    <div class="cube pobr">
+      <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>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: -200% -200%;</code></caption>
+  <div class="container">
+    <div class="cube po200200neg">
+      <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>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: 200% 200%;</code></caption>
+  <div class="container">
+    <div class="cube po200200pos">
+      <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>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: 200% -200%;</code></caption>
+  <div class="container">
+    <div class="cube po200200">
+      <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>
+</figure>
+
+</section>
+
+ +

CSS

+ +
/* Valeurs de perspective-origin (uniques pour chaque exemple) */
+.potl {
+  perspective-origin: top left;
+}
+.potm {
+  perspective-origin: top;
+}
+.potr {
+  perspective-origin: top right;
+}
+.poml {
+  perspective-origin: left;
+}
+.pomm {
+  perspective-origin: 50% 50%;
+}
+.pomr {
+  perspective-origin: right;
+}
+.pobl {
+  perspective-origin: bottom left;
+}
+.pobm {
+  perspective-origin: bottom;
+}
+.pobr {
+  perspective-origin: bottom right;
+}
+.po200200neg {
+  perspective-origin: -200% -200%;
+}
+.po200200pos {
+  perspective-origin: 200% 200%;
+}
+.po200200 {
+  perspective-origin: 200% -200%;
+}
+
+/* On définit le conteneur, le cube et une face générique */
+.container {
+  width: 100px;
+  height: 100px;
+  margin: 24px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  backface-visibility: visible;
+  perspective: 300px;
+  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 chaque face */
+.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 la disposition */
+section {
+  background-color: #EEE;
+  padding: 10px;
+  font-family: sans-serif;
+  text-align: left;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Cubes_avec_des_valeurs_communes_pour_perspective-origin', 620, 800)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}{{Spec2('CSS Transforms 2')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.perspective-origin")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/perspective/index.html b/files/fr/web/css/perspective/index.html new file mode 100644 index 0000000000..6569ee0add --- /dev/null +++ b/files/fr/web/css/perspective/index.html @@ -0,0 +1,249 @@ +--- +title: perspective +slug: Web/CSS/perspective +tags: + - CSS + - Propriétés + - Reference + - Transformations CSS +translation_of: Web/CSS/perspective +--- +
{{CSSRef}}
+ +

La propriété perspective détermine la distance entre le plan d'équation z = 0 et la position de l'utilisateur afin de donner une perspective aux objets positionnés dans l'espace 3D. Chaque élément pour lequel la côte (z) est positif sera plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La force de cet effet est déterminée par la valeur de cette propriété.

+ +
{{EmbedInteractiveExample("pages/css/perspective.html")}}
+ + + +

Les parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriété perspective) ne sont pas dessiné.

+ +

Par défaut, le point de fuite est placé au centre de l'élément mais il peut être déplacé grâce à la propriété {{cssxref("perspective-origin")}}.

+ +

Si on utilise cette propriété avec une valeur différente de 0 ou none, cela créera un nouveau contexte d'empilement. Et l'objet joue alors le rôle de bloc englobant pour les éléments qu'il contient et qui ont position: fixed ou position: absolute

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+perspective: none;
+
+/* Valeurs de longueur */
+/* Type <length>       */
+perspective: 20px;
+perspective: 3.5em;
+
+/* Valeurs globales */
+perspective: inherit;
+perspective: initial;
+perspective: unset;
+
+ +

Valeurs

+ +
+
none
+
Un mot-clé qui indique qu'on n'applique aucune perspective.
+
<length>
+
Une longueur (une valeur de type {{cssxref("<length>")}}) qui indique la distance entre l'utilisateur et le plan d'équation z = 0. Elle est utilisée pour appliquer une perspective à l'élément et à son contenu. Si elle vaut 0 ou qu'elle est négative, aucune transformation de perspective ne sera appliquée.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Trois cubes

+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <th><code>perspective: 250px;</code>
+      </th>
+      <th><code>perspective: 350px;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pers250">
+            <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>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pers350">
+            <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>
+      </td>
+    </tr>
+    <tr>
+      <th><code>perspective: 500px;</code>
+      </th>
+      <th><code>perspective: 650px;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pers500">
+            <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>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pers650">
+            <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>
+      </td>
+    </tr>
+  </tbody>
+</table>
+ +

CSS

+ +
/* Des classes pour les différentes valeurs */
+.pers250 {
+    perspective: 250px;
+}
+.pers350 {
+    perspective: 350px;
+}
+.pers500 {
+    perspective: 500px;
+}
+.pers650 {
+    perspective: 650px;
+}
+
+/* On définit le div pour le conteneur, */
+/* le cube, ainsi qu'une face générique */
+ .container {
+   width: 200px;
+   height: 200px;
+   margin: 75px 0 0 75px;
+   border: none;
+}
+
+.cube {
+   width: 100%;
+   height: 100%;
+   backface-visibility: visible;
+   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 chaque face en fonction de sa direction */
+ .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 légèrement le tableau */
+th, p, td {
+   background-color: #EEEEEE;
+   padding: 10px;
+   font-family: sans-serif;
+   text-align: left;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Trois_cubes', 660, 700)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}}{{Spec2('CSS Transforms 2')}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.perspective")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/place-content/index.html b/files/fr/web/css/place-content/index.html new file mode 100644 index 0000000000..d1817fbb81 --- /dev/null +++ b/files/fr/web/css/place-content/index.html @@ -0,0 +1,247 @@ +--- +title: place-content +slug: Web/CSS/place-content +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/place-content +--- +
{{CSSRef}}
+ +

La propriété raccourcie place-content permet de définir les valeurs des propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. Elle peut être utilisée pour n'importe quelle méthode de disposition (boîtes flexibles, grilles, etc;) qui prend en charge ces deux propriétés d'alignement.

+ +
{{EmbedInteractiveExample("pages/css/place-content.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs décrivant l'alignement */
+/* Note : align-content ne gère pas les valeurs left et right */
+place-content: center start;
+place-content: start center;
+place-content: end left;
+place-content: flex-start center;
+place-content: flex-end center;
+
+/* Valeurs décrivant l'alignement par rapport à la ligne de base */
+/* Note : justify-content ne gère pas les valeurs liées à la ligne de base */
+place-content: baseline center;
+place-content: first baseline space-evenly;
+place-content: last baseline right;
+
+/* Valeurs décrivant la distribution de l'alignment */
+place-content: space-between space-evenly;
+place-content: space-around space-evenly;
+place-content: space-evenly stretch;
+place-content: stretch space-evenly;
+
+/* Valeurs globales */
+place-content: inherit;
+place-content: initial;
+place-content: unset;
+ +

La première valeur utilisée sera celle qui correspond à {{cssxref("align-content")}} et la seconde valeur correspondra à {{cssxref("justify-content")}}. Si la deuxième valeur n'est pas présente, la première valeur indiquée sera également utilisée pour justify-content.

+ +
+

Attention ! Si une seule valeur est fournie et que celle-ci est invalide pour l'une ou l'autre des propriétés détaillées, c'est la déclaration entière qui sera invalide.

+
+ +

Valeurs

+ +
+
start
+
Les éléments sont alignés vers le début du conteneur pour l'axe correspondant.
+
end
+
Les éléments sont alignés vers la fin du conteneur pour l'axe correspondant.
+
flex-start
+
Les éléments sont alignés vers le début du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de start.
+
flex-end
+
Les éléments sont alignés vers la fin du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de end.
+
center
+
Les éléments sont alignés au centre du conteneur dans l'axe correspondant.
+
left
+
Les éléments sont alignés vers le bord gauche du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (inline axis), cette valeur sera synonyme de start.
+
right
+
Les éléments sont alignés vers le bord droit du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (inline axis), cette valeur sera synonyme de start.
+
space-between
+
Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. Ainsi, l'espace entre chaque élément adjacent sera le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est également aligné sur le bord du conteneur à la fin de l'axe.
+
baseline
+ first baseline
+ last baseline
+
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
+ The fallback alignment for first baseline is start, the one for last baseline is end.
+
space-around
+
Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même. L'espace entre le bord du conteneur et le premier élément sera la moitié de l'espace utilisé entre chaque élément. L'espace entre le dernier élément et le bord du conteneur sera la moitié de l'espace utilisé entre chaque élément.
+
space-evenly
+
Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même, ce sera également cet espace qui sera utilisé entre le bord du conteneur et le premier élément 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 correspondant, tous les éléments dimensionnés automatiquement seront étirés de la même façon (et pas de façon proportionnelle) tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes) afin que la taille de l'ensemble des éléments soit exactement celle du conteneur.
+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

CSS

+ +
#container {
+  display: flex;
+  height:240px;
+  width: 240px;
+  flex-wrap: wrap;
+  background-color: #8c8c8c;
+  writing-mode: horizontal-tb; /* Cette valeur peut être modifiée dans l'exemple */
+  direction: ltr; /* Cette valeur peut être modifiée dans l'exemple */
+  place-content: flex-end center; /* Cette valeur peut être modifiée dans l'exemple */
+}
+
+div > div {
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  background-color: #a0c8ff;
+}
+
+.small {
+  font-size: 12px;
+  height: 40px;
+}
+
+.large {
+  font-size: 14px;
+  height: 50px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div class="small">Lorem</div>
+  <div class="small">Lorem<br/>ipsum</div>
+  <div class="large">Lorem</div>
+  <div class="large">Lorem<br/>impsum</div>
+  <div class="large"></div>
+  <div class="large"></div>
+</div>
+
+ + + + + +

Résultat

+ +

{{EmbedLiveSample("Exemples", "370", "300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-place-content", "place content")}}{{Spec2("CSS3 Box Alignment")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.place-content")}}

+ +

Prise en charge pour les dispositions flexibles

+ +

{{Compat("css.properties.place-content.flex_context")}}

+ +

Prise en charge pour les grilles

+ +

{{Compat("css.properties.place-content.grid_context")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/place-items/index.html b/files/fr/web/css/place-items/index.html new file mode 100644 index 0000000000..b9a2608334 --- /dev/null +++ b/files/fr/web/css/place-items/index.html @@ -0,0 +1,281 @@ +--- +title: place-items +slug: Web/CSS/place-items +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/place-items +--- +
{{CSSRef}}
+ +

La propriété raccourcie place-items définit les valeurs utilisées pour les propriétés {{cssxref("align-items")}} et {{cssxref("justify-items")}}. La première valeur fournie est utilisée pour align-items et la seconde est utilisée pour justify-items. S'il n'y a pas de seconde valeur fournie, c'est la première qui est reprise pour justify-items.

+ +
{{EmbedInteractiveExample("pages/css/place-items.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+place-items: auto center;
+place-items: normal start;
+
+/* Alignement géométrique */
+place-items: center normal;
+place-items: start auto;
+place-items: end normal;
+place-items: self-start auto;
+place-items: self-end normal;
+place-items: flex-start auto;
+place-items: flex-end normal;
+place-items: left auto;
+place-items: right normal;
+
+/* Alignement par rapport à la ligne de base */
+place-items: baseline normal;
+place-items: first baseline auto;
+place-items: last baseline normal;
+place-items: stretch auto;
+
+/* Valeurs globales */
+place-items: inherit;
+place-items: initial;
+place-items: unset;
+
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée est celle de justify-items pour l'élément parent sauf si l'élément n'a pas de parent ou qu'il est positionné de façon absolue auquel cas auto sera synonyme de normal.
+
normal
+
L'effet de ce mot-clé depend du mode de disposition utilisé : +
    +
  • Pour les dispositions en bloc, ce mot-clé est synonyme de start.
    • +
  • Pour les dispositions absolues, ce mot-clé se comporte comme start pour les éléments remplacés ou comme stretch pour tous les autres éléments.
    • +
  • Pour les cellules de tableaux, ce mot-clé n'a pas de sens et cette propriété est ignorée.
    • +
  • Pour les dispositions utilisant des boîtes flexibles, ce mot-clé n'a pas de sens et cette propriété est ignorée.
    • +
  • Pour les dispositions en grille, ce mot-clé se comporte comme stretch sauf pour les éléments qui ont des dimensions intrinsèques ou des contraintes de ratio, auquel cas cette valeur est synonyme de start.
    • +
+
+
start
+
L'élément est aligné au début de l'axe dans la direction correspondante.
+
end
+
L'élément est aligné à la fin de l'axe dans la direction correspondante.
+
flex-start
+
Les éléments sont regroupés vers le début du conteneur flexible pour l'axe correspondant.
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à start.
+
flex-end
+
Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe correspondant.
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à end.
+
self-start
+
Les éléments sont alignés sur le bord de leur boîte vers le début de l'axe correspondant.
+
self-end
+
Les éléments sont alignés sur le bord de leur boîte vers la fin de l'axe correspondant.
+
center
+
L'élément est centré le long de l'axe correspondant.
+
left
+
L'élément est aligné sur le bord gauche du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme start.
+
right
+
L'élément est aligné sur le bord droit du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme start.
+
baseline
+ first baseline
+ last baseline
+
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.
+
stretch
+
Si la somme des tailles des éléments est inférieure à la taille du conteneur, 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.
+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  place-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);
+}
+
+ + + +

Résultat

+ +

{{EmbedLiveSample("Exemples", 260, 290)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}}{{Spec2('CSS3 Box Alignment')}}Définition initiale.
+ +

{{CSSInfo}}

+ +

Compatibilité des navigateurs

+ + + +

Prise en charge pour les dispositions flexibles

+ +

{{Compat("css.properties.place-items.flex_context")}}

+ +

Prise en charge pour les grilles

+ +

{{Compat("css.properties.place-items.grid_context")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/place-self/index.html b/files/fr/web/css/place-self/index.html new file mode 100644 index 0000000000..d7d96613fd --- /dev/null +++ b/files/fr/web/css/place-self/index.html @@ -0,0 +1,132 @@ +--- +title: place-self +slug: Web/CSS/place-self +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/place-self +--- +
{{CSSRef}}
+ +

La propriété place-self est une propriété raccourcie qui permet de paramétrer les valeurs des propriétés {{cssxref("align-self")}} et  {{cssxref("justify-self")}}. La première valeur sera utilisée pour align-self et la seconde pour justify-self. S'il n'y a pas de seconde valeur, la première sera également utilisée pour justify-self.

+ +
{{EmbedInteractiveExample("pages/css/place-self.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+place-self: auto center;
+place-self: normal start;
+
+/* Alignement géométrique */
+place-self: center normal;
+place-self: start auto;
+place-self: end normal;
+place-self: self-start auto;
+place-self: self-end normal;
+place-self: flex-start auto;
+place-self: flex-end normal;
+place-self: left auto;
+place-self: right normal;
+
+/* Alignement relatif à la ligne de base */
+place-self: baseline normal;
+place-self: first baseline auto;
+place-self: last baseline normal;
+place-self: stretch auto;
+
+/* Valeurs globales */
+place-self: inherit;
+place-self: initial;
+place-self: unset;
+ +

Valeurs

+ +
+
auto
+
La valeur utilise celle de {{cssxref("align-items")}} pour l'élément parent.
+
normal
+
Ce mot-clé aura un sens différent selon le mode de disposition utilisé : +
    +
  • Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme start pour les boîtes des éléments remplacés ou comme stretch pour les autres boîtes positionnées de façon absolue.
    • +
  • Pour les éléments positionnés de façon statique au sein d'une disposition absolue, ce mot-clé agira comme stretch
    • +
  • Pour les cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.
    • +
  • Pour les éléments disposés en blocs, cette propriété est ignorée.
    • +
  • Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée.
    • +
  • Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de stretch, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de start.
    • +
+
+
self-start
+
Les éléments sont alignés sur le bord du conteneur vers le début de l'axe en bloc.
+
self-end
+
Les éléments sont alignés sur le bord du conteneur vers la fin de l'axe en bloc.
+
flex-start
+
Le bord de l'élément flexible au début de l'axe en bloc est aligné avec le début de l'axe en bloc sur la ligne.
+
flex-end
+
Le bord de l'élément flexible à la fin de l'axe en bloc est aligné avec la fin de l'axe en bloc sur la ligne.
+
center
+
La boîte de marge de l'élément flexible est centrée sur la ligne par rapport à l'axe en bloc. Si la taille de l'élément est supérieure à celle du conteneur flexible, l'élément dépasse également dans chaque direction.
+
baseline
+ first baseline
+ last baseline
+
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.
+
stretch
+
Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, 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.
+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#place-self-property", "place-self")}}{{Spec2("CSS3 Box Alignment")}}Définition initiale.
+ +

{{CSSInfo}}

+ +

Compatibilité des navigateurs

+ + + +

Prise en charge pour les dispositions flexibles

+ +

{{Compat("css.properties.place-self.flex_context")}}

+ +

Prise en charge pour les grilles

+ +

{{Compat("css.properties.place-self.grid_context")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/pointer-events/index.html b/files/fr/web/css/pointer-events/index.html new file mode 100644 index 0000000000..8d2b91dc73 --- /dev/null +++ b/files/fr/web/css/pointer-events/index.html @@ -0,0 +1,146 @@ +--- +title: pointer-events +slug: Web/CSS/pointer-events +tags: + - CSS + - Propriété + - Reference + - SVG +translation_of: Web/CSS/pointer-events +--- +
{{CSSRef}}
+ +

La propriété CSS pointer-events permet aux auteurs de contrôler les circonstances dans lesquelles un élément graphique peut être une cible, c'est-à-dire recevoir des événements de la souris, du pointeur ou du doigt.

+ +
{{EmbedInteractiveExample("pages/css/pointer-events.html")}}
+ + + +

Lorsque cette propriété n'est pas définie,  pour le contenu SVG, on aura le même effet qu'avec la valeur visiblePainted. Lorsqu'on utilise la valeur none, cela indique que l'élément ne peut pas recevoir d'événement de pointeur mais cela indique également qu'on peut passer « au travers » de l'élément pour atteindre des contrôles qui pourraient être en-dessous/derrière.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted; /* SVG uniquement */
+pointer-events: visibleFill;    /* SVG uniquement */
+pointer-events: visibleStroke;  /* SVG uniquement */
+pointer-events: visible;        /* SVG uniquement */
+pointer-events: painted;        /* SVG uniquement */
+pointer-events: fill;           /* SVG uniquement */
+pointer-events: stroke;         /* SVG uniquement */
+pointer-events: all;            /* SVG uniquement */
+
+/* Valeurs globales */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+
+ +

La propriété pointer-events est définie grâce à un mot-clé parmi ceux de la liste suivante.

+ +

Valeurs

+ +
+
auto
+
L'élément se comporte comme si la propriété pointer-events n'était pas spécifiée. Pour le contenu SVG, cette valeur et la valeur visiblePainted ont le même effet.
+
none
+
L'élément ne sera jamais la cible d'événements de pointeur. Toutefois, les événements peuvent atteindre les éléments qui sont des descendants si ceux-ci ont une autre valeur pour pointer-events. Sous ces circonstances, les événements déclencheront les gestionnaires d'événement sur l'élément parent jusqu'à/depuis l'élément descendant lors de la phase de capture/bouillonnement de l'événement.
+
+ +

Valeurs uniquement utilisables avec SVG

+ +
+
visiblePainted
+
L'élément ne peut être la cible d'un événement de pointeur que si la propriété visibility vaut visible et lorsque le pointeur est au-dessus de l'intérieur de l'élément et que la valeur de la propriété fill n'est pas none ou lorsque le pointeur de la souris est au-dessus du contour de l'élément et que la valeur de la propriété stroke n'est pas none.
+
visibleFill
+
L'élément ne peut être la cible d'un événement de pointeur que si la propriété visibility vaut visible et lorsque le pointeur est au-dessus de l'intérieur de l'élément. La valeur de la propriété fill n'a pas d'impact sur le traitement des événements.
+
visibleStroke
+
L'élément ne peut être la cible d'un événement de pointeur que si la propriété visibility vaut visible et lorsque le pointeur de la souris est au-dessus du contour de l'élément. La valeur de la propriété stroke n'a pas d'impact sur le traitement des événements.
+
visible
+
L'élément ne peut être la cible d'un événement de pointeur que si la propriété visibility vaut visible et lorsque le pointeur est au-dessus de l'intérieur de l'élément ou lorsque le pointeur de la souris est au-dessus du contour de l'élément. Les valeurs de fill et stroke n'ont pas d'impact sur le traitement des événements.
+
painted
+
L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément et que la valeur de la propriété fill n'est pas none ou lorsque le pointeur de la souris est au-dessus du contour de l'élément et que la valeur de la propriété stroke n'est pas none. La valeur de visibility n'a pas d'impact sur le traitement des événements.
+
fill
+
L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément. Les valeurs de fill et de visibility n'ont pas d'impact sur le traitement des événements.
+
stroke
+
L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus du contour de l'élément. Les valeurs de stroke et de visibility n'ont pas d'impact sur le traitement des événements.
+
all
+
L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément ou lorsque le pointeur de la souris est au-dessus du contour de l'élément. Les valeurs de fill, stroke et de visibility n'ont pas d'impact sur le traitement des événements.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Dans l'exemple qui suit, on rend le lien http://exemple.com inactif.

+ +

HTML

+ +
<ul>
+  <li><a href="https://developer.mozilla.org">MDN</a></li>
+  <li><a href="http://exemple.com">exemple.com</a></li>
+</ul>
+ +

CSS

+ +
a[href="http://exemple.com"] {
+  pointer-events: none;
+}
+ +

Résultat

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

Notes

+ +

L'utilisation de pointer-events peut empêcher que des événements soient directement déclenchés sur l'élément avec les pointeurs. Cela ne signifie en aucun cas que les gestionnaires d'événement de cet élément ne pourront pas être déclenchés ! Si l'un des éléments descendants possède une valeur explicite de pointer-events qui lui permet de recevoir des événements de pointeur, les événements qui parcourent les ancêtres pourront déclencher les gestionnaires d'événements associés. Bien entendu, tout pointage, qui a lieu sur un endroit de l'écran qui est couvert par le parent mais pas par l'élément descendant, ne déclenchera d'événement. L'événement passera au travers du parent et ciblera le contenu qui est en-dessous.

+ +

Les éléments avec pointer-events: none continueront de recevoir le focus via la navigation au clavier avec la touche Tab.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG1.1')}}
{{SpecName('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG2')}}
+ +

L'extension de cette propriété aux éléments HTML, bien qu'elle fut présente dans les premiers brouillons de la spécification CSS Basic User Interface Module Level 3, a été remise à la spécification de niveau 4.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.pointer-events")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/position/index.html b/files/fr/web/css/position/index.html new file mode 100644 index 0000000000..d1ab95d2ec --- /dev/null +++ b/files/fr/web/css/position/index.html @@ -0,0 +1,344 @@ +--- +title: position +slug: Web/CSS/position +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/position +--- +
{{CSSRef}}
+ +

La propriété position définit la façon dont un élément est positionné dans un document. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}} déterminent l'emplacement final de l'élément positionné.

+ +
{{EmbedInteractiveExample("pages/css/position.html")}}
+ + + +

Types de positionnement

+ +
    +
  • Un élément positionné est un élément dont la propriété de position calculée est relative, absolute, fixed ou sticky.
    • +
  • Un élément positionné de façon relative est un élément dont la propriété de position calculée est relative. Dans ce cas, les propriétés {{cssxref("top")}} ou {{cssxref("bottom")}} indiquent le décalage vertical à appliquer et {{cssxref("left")}} ou {{cssxref("right")}} indiquent le décalage horizontal.
    • +
  • Un élément positionné de façon absolue est un élément dont la propriété de position calculée est absolute ou fixed. Dans ce cas, les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("right")}} et {{cssxref("left")}} indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages.
    • +
  • Un élément positionné en adhérence est un élément dont la propriété de position calculée vaut sticky. Un tel élément se comporte comme un élément positionné de façon relative jusqu'à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de {{cssxref("top")}}) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu'à atteindre le bord opposé du bloc englobant.
    • +
+ +

La plupart du temps, les éléments positionnés de façon absolue ont leurs propriétés {{cssxref("height")}} et {{cssxref("width")}} qui valent auto afin que le contenu ait suffisamment d'espace. Toutefois, les éléments positionnés de façon absolue et qui ne sont pas des éléments remplacés peuvent remplir l'espace vertical en utilisant {{cssxref("top")}} et {{cssxref("bottom")}} tout en laissant {{cssxref("height")}} indéfini (c'est-à-dire avec la valeur auto). On pourra faire de même pour l'espace horizontal avec les propriétés {{cssxref("left")}} et {{cssxref("right")}}.

+ +

Sauf dans le cas précédemment énoncé des éléments positionnés de façon absolue et qui remplissent l'espace :

+ +
    +
  • Si top et bottom sont tous les deux définis (enfin, s'ils ne valent pas auto), c'est top qui aura la priorité
    • +
  • Si left et right sont tous les deux définis, c'est left qui aura la priorité si la direction du texte est de gauche à droite (LTR) et right qui aura la priorité si la direction du texte est de droite à gauche (RTL) (par exemple en perse, arabe, hébreu).
    • +
+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+position: static;
+position: relative;
+position: absolute;
+position: fixed;
+position: sticky;
+
+/* Valeurs globales*/
+position: inherit;
+position: initial;
+position: unset;
+
+ +

La propriété position peut être définie avec l'un des mots-clés de la liste suivante.

+ +

Valeurs

+ +
+
static
+
Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("z-index")}} ne s'appliquent pas.
+
relative
+
L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par top, right, bottom et left. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec static.
+
Cette valeur crée un nouveau contexte d'empilement lorsque z-index ne vaut pas auto. L'effet de cette valeur n'est pas défini pour les éléments table-*-group, table-row, table-column, table-cell et table-caption.
+
absolute
+
L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de top, right, bottom et left.
+
Cette valeur crée un nouveau contexte d'empilement lorsque z-index ne vaut pas auto. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.
+
fixed
+
L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (viewport), sauf si un des ancêtres a une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de none (voir la spécification sur les transformations CSS) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour chaque page). Cette valeur crée toujours un nouveau contexte d'empilement. Certains incohérences existent entre les navigateurs quant au rôle de perspective et filter pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de top, right, bottom et left.
+
Cette valeur crée toujours un nouveau contexte d'empilement. Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour chacune des pages.
+
sticky
+
La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à son bloc englobant selon les valeurs de top, right, bottom et left. Dans tous les cas, y compris avec les éléments table, cela n'affecte pas la position des autres éléments.
+
Cette valeur entraîne toujours la création d'un nouveau contexte d'empilement. On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand overflow vaut hidden, scroll, auto ou overlay) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut overflow: hidden ou auto (cf.: cette issue GitHub).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Positionnement relatif

+ +

HTML

+ +
<div class="box" id="un">Un</div>
+<div class="box" id="deux">Deux</div>
+<div class="box" id="trois">Trois</div>
+<div class="box" id="quatre">Quatre</div>
+
+ +

CSS

+ +
.box {
+   display: inline-block;
+   background: red;
+   width: 100px;
+   height: 100px;
+   color: white;
+}
+
+#deux {
+   position: relative;
+   top: 20px;
+   left: 20px;
+}
+
+ +

Résultat

+ +

Dans cet exemple, on voit comment les autres éléments sont positionnés, comme si « Deux » prenait l'espace de sa position normale.

+ +

{{EmbedLiveSample('Positionnement_relatif', '600px', '200px')}}

+ +

Positionnement absolu

+ +

Les éléments qui sont positionnés de façon relatives sont toujours pris en compte dans le flux normal des éléments du document. En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments. Un élément positionné de façon absolu est positionné par rapport à son plus proche ancêtre positionné. S'il n'y a pas de tel ancêtre, c'est le conteneur initial, le bloc englobant la racine du document, qui est utilisé (voir la définition du W3C).

+ +

Dans l'exemple qui suit, on n'a pas d'ancêtre positionné et la boîte « Trois » est positionnée de façon absolue par rapport à l'ancêtre immédiat (l'élément <body> de l'iframe générée ici) :

+ +

HTML

+ +
<h1>Positionnement absolu</h1>
+<p>Un élément de bloc simple. Les éléments de bloc adjacents sont sur de nouvelles lignes en-dessous.</p>
+<p class="positioned">Par défaut, on occupe 100% de la largeur de l'élément parent et on est aussi grand que notre contenu.</p>
+<p>Nous sommes séparés par nos marges (une seule marge en raison de la fusion des marges).</p>
+<p>Les éléments <em>inline</em> <span>comme celui-ci</span> et <span>celui-là</span> se situent sur la même ligne avec également les noeuds texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent <span>passent à la ligne si possible — comme pour ce texte.</span> ou cette image <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +

CSS

+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Positionnement_absolu', '100%', 420)}}

+ +

Positionnement fixe

+ +

Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bloc englobant correspond au viewport si aucun ancêtre de l'élément ne possède une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de none. On utilise souvent ce positionnement pour créer un élément flottant qui reste à la même position, même lorsqu'on fait défiler la page. Dans l'exemple qui suit, la boîte « Un » est fixée à 80 pixels du haut de la page et à 20 pixels du bord gauche.

+ +

HTML

+ +
<div class="outer">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <div class="box" id="un">Un</div>
+</div>
+
+ +

CSS

+ +
.box {
+  background: red;
+  width: 100px;
+  height: 100px;
+  margin: 20px;
+  color: white;
+}
+#un {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+}
+.outer {
+  width: 500px;
+  height: 300px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+
+ +

Résultat

+ +

Lorsqu'on regarde le haut de la page, la boîte apparaît en haut à gauche, même après avoir défilé, elle reste à la même place par rapport au viewport :

+ +

{{EmbedLiveSample('Positionnement_fixe', '800px', '300px')}}

+ +

Positionnement adhérent (sticky)

+ +

Le positionnement adhérent est un mélange de positionnement relatif et de positionnement fixe. L'élément est considéré comme positionné de façon relative, jusqu'à ce qu'un seuil soit franchi. À partir de ce seuil, l'élément est positionné de façon fixe. Par exemple :

+ +
#un {
+  position: sticky;
+  top: 10px;
+}
+ +

se comportera comme un élément positionné de façon relative jusqu'à ce que le viewport défile au point où l'élément est à moins de 10 pixels du haut. Ensuite, il sera fixé à 10 pixels du haut, jusqu'à ce que le viewport redéfile jusqu'avant ce seuil.

+ +

Le positionnement adhérent est souvent utilisé pour gérer les niveaux de titre dans les listes alphabétiques. Le titre pour B apparaîtra sous les éléments commençant par A jusqu'à ce que ceux-ci disparaissent de l'écran. Plutôt que de défiler avec le reste de l'écran, la lettre B restera affichée en haut du viewport jusqu'à ce que tous les éléments commençant par B aient défilés sur l'écran (ce sera ensuite le tour de la lettre C et ainsi de suite).

+ +

Il faut définir un seuil avec au moins {{cssxref("top")}} ou {{cssxref("right")}} ou {{cssxref("bottom")}} ou {{cssxref("left")}} pour que le positionnement adhérent fonctionne comme attendu. Sinon, on ne pourra pas le distinguer du positionnement relatif.

+ +

HTML

+ +
<dl>
+  <div>
+    <dt>A</dt>
+    <dd>Andrew W.K.</dd>
+    <dd>Apparat</dd>
+    <dd>Arcade Fire</dd>
+    <dd>At The Drive-In</dd>
+    <dd>Aziz Ansari</dd>
+  </div>
+  <div>
+    <dt>C</dt>
+    <dd>Chromeo</dd>
+    <dd>Common</dd>
+    <dd>Converge</dd>
+    <dd>Crystal Castles</dd>
+    <dd>Cursive</dd>
+  </div>
+  <div>
+    <dt>E</dt>
+    <dd>Explosions In The Sky</dd>
+  </div>
+  <div>
+    <dt>T</dt>
+    <dd>Ted Leo & The Pharmacists</dd>
+    <dd>T-Pain</dd>
+    <dd>Thrice</dd>
+    <dd>TV On The Radio</dd>
+    <dd>Two Gallants</dd>
+  </div>
+</dl>
+
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+dl > div {
+  margin: 0;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  width: 99%;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Positionnement_adhérent_(sticky)', '500px', '300px')}}

+ +

Accessibilité

+ +

Il faut s'assurer que les éléments positionnés avec absolute ou fixed ne masquent pas d'autre contenu sur la page lorsqu'on zoome sur la page afin d'augmenter la taille du texte.

+ + + +

Performance et accessibilité

+ +

Les éléments qui défilent avec du contenu utilisant fixed ou sticky peuvent entraîner des problèmes de performance et d'accessibilité. Lorsque l'utilisateur fait défiler le contenu, le navigateur doit « repeindre » le contenu adhérant ou fixé à un nouvel emplacement. Selon le contenu qui doit être repeint, les performances du navigateur et celles de l'appareil, il est possible que le contenu ne soit pas affiché de façon fluide (60fps), créant ainsi des saccades. Une solution consiste à ajouter will-change: transform (cf. {{cssxref("will-change")}}) aux éléments positionnés afin que le rendu de l'élément soit géré à part, améliorant ainsi les performances et l'accessibilité.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS3 Positioning','#position-property','position')}}{{Spec2('CSS3 Positioning')}}Ajout de la valeur sticky
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.position")}}

diff --git "a/files/fr/web/css/propri\303\251t\303\251s_raccourcies/index.html" "b/files/fr/web/css/propri\303\251t\303\251s_raccourcies/index.html" new file mode 100644 index 0000000000..6c390b9dc8 --- /dev/null +++ "b/files/fr/web/css/propri\303\251t\303\251s_raccourcies/index.html" @@ -0,0 +1,155 @@ +--- +title: Propriétés raccourcies +slug: Web/CSS/Propriétés_raccourcies +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/Shorthand_properties +--- +
{{CSSRef}}
+ +

Les propriétés raccourcies sont des propriétés CSS qui permettent de définir la valeur de plusieurs propriétés via une seule déclaration. En manipulant des propriétés raccourcies, un développeur web peut créer des feuilles de style plus concises et plus lisibles, améliorant ainsi la maintenabilité.

+ +

La spécification CSS définit les propriétés raccourcies en regroupant la définition des propriétés agissant sur le même aspect de l'élément. Ainsi, la propriété {{cssxref("background")}} est une propriété raccourcie qui permettra de définir {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}} et {{cssxref("background-position")}}. De même, les propriétés fréquemment utilisées pour la mise en forme des polices de caractères (font) peuvent être définies via la propriété raccourcie {{cssxref("font")}} et celles qui concernent la marge avec la propriété raccourcie {{cssxref("margin")}}.

+ +

Quelques cas aux limites épineux

+ +

Bien que les propriétés raccourcies soient pratiques à utiliser. Il est nécessaire de noter certains éléments pour parer aux cas étranges qui peuvent survenir :

+ +
    +
  1. Une valeur qui n'est pas définie pour la propriété raccourcie sera réinitialisée avec sa valeur initiale. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi : + + 
    background-color: red;
+background: url(images/bg.gif) no-repeat top right;
+
    + ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} transparent car la deuxième déclaration prend le pas sur la première.
    2. +
  2. L'héritage des propriétés ne peut avoir lieu qu'avec les propriétés individuelles . En effet, les valeurs absentes sont remplacées par leurs valeurs initiales et il est donc impossible d'hériter des valeurs en les omettant. Le mot-clé {{cssxref("inherit")}} pourra être appliqué à une propriété mais ce sera sur l'ensemble et non pour une valeur donnée ou une autre. Ainsi, pour utiliser une valeur héritée sur une propriété spécifique, il faudra utiliser cette propriété « longue » avec le mot-clé inherit.
    3. +
  3. Les propriétés raccourcies n'ont pas d'ordre spécifique pour trier les valeurs des propriétés détaillées qu'elles remplacent. Cela fonctionne sans problème lorsque les différentes propriétés utilisent différents types de valeurs car l'ordre n'a alors aucune importance. Toutefois, lorsque les différentes propriétés peuvent prendre les mêmes valeurs, cela n'est pas si simple. On peut regrouper les différents cas en deux catégories distinctes : +
      +
    1. Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : + + + + + + + + + + + + + + + + + + + +
      border1.png1 valeur : border-width: 1em — La valeur unique s'adresse à tous les côtés.
      border2.png2 valeurs : border-width: 1em 2em — La première valeur représente les côtés horizontaux en haut et en bas. La seconde valeur représente les côtés verticaux, à gauche et à droite.
      border3.png3 valeurs : border-width: 1em 2em 3em — La première valeur représente le côté haut, la deuxième les côtés gauche et droit et la troisième représente le côté bas.
      border4.png +

      4 valeurs : border-width: 1em 2em 3em 4em — Les quatre valeurs représentent respectivement le côté haut, le côté droit, le côté bas et le côté haut, toujours dans cet ordre (le sens horaire).

      +
      +
      2. +
    2. De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : + + + + + + + + + + + + + + + + + + + +
      corner1.png1 valeur : border-radius: 1em — La valeur s'applique à tous les coins.
      corner2.png2 valeurs : border-radius: 1em 2em — La première valeur s'applique aux coins en haut à gauche et en bas à droite et la deuxième s'applique aux coins en haut à droite et en bas à gauche.
      corner3.png3 valeurs : border-radius: 1em 2em 3em — La première valeur représente le coin en haut à gauche, la deuxième représente les coins en haut à droite et en bas à gauche et la troisième valeur représente le coin en bas à droite.
      corner4.png +

      4 valeurs : border-radius: 1em 2em 3em 4em — Les quatre valeurs s'appliquent respectivement au coin en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, toujours dans cet ordre (le sens horaire).

      +
      +
      3. +
    +
    4. +
+ +

Les propriétés concernant l'arrière-plan

+ +

Lorsqu'on décrit un arrière-plan avec les propriétés suivantes :

+ +
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;
+ +

On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent :

+ +
background: #000 url(images/bg.gif) no-repeat top right;
+ +
+

Note : Pour être tout à fait précis, la forme raccourcie présentée juste avant est équivalente aux propriétés détaillées qui précèdent auxquelles on ajoute background-attachment: scroll et d'autres propriétés avec CSS3).

+
+ +

Pour plus d'informations, voir {{cssxref("background")}}.

+ +

Les propriétés liées à la police (font)

+ +

Les déclarations suivantes :

+ +
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;
+ +

Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :

+ +
font: italic bold .8em/1.2 Arial, sans-serif;
+ +
+

Note : Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera font-variant: normal et font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

+
+ +

Les propriétés liées aux bordures

+ +

Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple,

+ +
border-width: 1px;
+border-style: solid;
+border-color: #000;
+ +

peut être écrit ainsi :

+ +
border: 1px solid #000;
+ +

Les propriétés liées à la marge et au remplissage (padding)

+ +

Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (padding) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes :

+ +
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;
+ +

sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à trouble) :

+ +
margin: 10px 5px 10px 5px;
+ +

La propriété raccourcie universelle

+ +

CSS fournit une propriété raccourcie qui permet d'appliquer une même valeur à l'ensemble des propriétés du document : {{cssxref("all")}}.

+ +

Voir l'article sur la cascade et l'héritage pour plus d'informations sur le fonctionnement de l'héritage.

+ +

Voir aussi

+ +
    +
  • La référence CSS
    • +
  • Les propriétés raccourcies : {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}
    • +
diff --git a/files/fr/web/css/pseudo-classes/index.html b/files/fr/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..8c7425003c --- /dev/null +++ b/files/fr/web/css/pseudo-classes/index.html @@ -0,0 +1,205 @@ +--- +title: Pseudo-classes +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Intermédiaire + - Pseudo-classe + - Reference + - Sélecteur +translation_of: Web/CSS/Pseudo-classes +--- +
{{CSSRef}}
+ +

Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe {{cssxref(":hover")}}, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).

+ +
div:hover {
+  background-color: #F89B4D;
+}
+ +

Les pseudo-classes permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec {{cssxref(":visited")}} ; le statut du contenu avec {{cssxref(":checked")}} ; la position de la souris {{cssxref(":hover")}}).

+ +
+

Note: À la différence des pseudo-classes, les pseudo-éléments peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.

+
+ +

Syntaxe

+ +
sélecteur:pseudo-classe {
+  propriété: valeur;
+}
+
+ +

À l'instar des classes, on peut chaîner plusieurs pseudo-classes au sein d'un sélecteur.

+ +

Liste des pseudo-classes standards

+ +
+
    +
  • {{CSSxRef(":active")}}
    • +
  • {{CSSxRef(":any-link")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":blank")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":checked")}}
    • +
  • {{CSSxRef(":current")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":default")}}
    • +
  • {{CSSxRef(":defined")}}
    • +
  • {{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":disabled")}}
    • +
  • {{CSSxRef(":drop")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":empty")}}
    • +
  • {{CSSxRef(":enabled")}}
    • +
  • {{CSSxRef(":first")}}
    • +
  • {{CSSxRef(":first-child")}}
    • +
  • {{CSSxRef(":first-of-type")}}
    • +
  • {{CSSxRef(":fullscreen")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":future")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":focus")}}
    • +
  • {{CSSxRef(":focus-visible")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":focus-within")}}
    • +
  • {{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":host")}}
    • +
  • {{CSSxRef(":host()")}}
    • +
  • {{CSSxRef(":host-context()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":hover")}}
    • +
  • {{CSSxRef(":indeterminate")}}
    • +
  • {{CSSxRef(":in-range")}}
    • +
  • {{CSSxRef(":invalid")}}
    • +
  • {{CSSxRef(":is")}} {{Experimental_inline}}
    • +
  • {{CSSxRef(":lang", ":lang()")}}
    • +
  • {{CSSxRef(":last-child")}}
    • +
  • {{CSSxRef(":last-of-type")}}
    • +
  • {{CSSxRef(":left")}}
    • +
  • {{CSSxRef(":link")}}
    • +
  • {{CSSxRef(":local-link")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":not", ":not()")}}
    • +
  • {{CSSxRef(":nth-child", ":nth-child()")}}
    • +
  • {{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":nth-last-child", ":nth-last-child()")}}
    • +
  • {{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}
    • +
  • {{CSSxRef(":nth-of-type", ":nth-of-type()")}}
    • +
  • {{CSSxRef(":only-child")}}
    • +
  • {{CSSxRef(":only-of-type")}}
    • +
  • {{CSSxRef(":optional")}}
    • +
  • {{CSSxRef(":out-of-range")}}
    • +
  • {{CSSxRef(":past")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":read-only")}}
    • +
  • {{CSSxRef(":read-write")}}
    • +
  • {{CSSxRef(":required")}}
    • +
  • {{CSSxRef(":right")}}
    • +
  • {{CSSxRef(":root")}}
    • +
  • {{CSSxRef(":scope")}}
    • +
  • {{CSSxRef(":target")}}
    • +
  • {{CSSxRef(":target-within")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":user-invalid")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":valid")}}
    • +
  • {{CSSxRef(":visited")}}
    • +
  • {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}
    • +
+
+ +

Exemples

+ +

CSS

+ +
.survol:hover {
+  background-color: palegreen;
+}
+
+p:nth-child(2n+1) {
+  background-color: lime;
+}
+ +

HTML

+ +
<div>
+  <p class="survol">
+    La Reine devint pourpre de colère ; et après
+    l’avoir considérée un moment avec des yeux
+    flamboyants comme ceux d’une bête fauve, elle
+    se mit à crier : « Qu’on lui coupe la tête ! »
+  </p>
+  <p>
+    « Quelle idée ! » dit Alice très-haut et d’un
+    ton décidé. La Reine se tut.
+  </p>
+  <p>
+    Le Roi lui posa la main sur le bras, et lui
+    dit timidement : « Considérez donc, ma chère
+    amie, que ce n’est qu’une enfant. »
+  </p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","250","350")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Fullscreen')}}{{Spec2('Fullscreen')}}Définition de :fullscreen.
{{SpecName('HTML WHATWG', '#pseudo-classes')}}{{Spec2('HTML WHATWG')}}Définit lorsque des sélecteurs particuliers correspondent à des éléments HTML.
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}} +

Définition de :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column() et :matches().

+ +

Changement afin que :empty se comporte comme {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.

+ +

Aucune modification significative pour les pseudo-classes définies avec {{SpecName('CSS3 Selectors')}} et {{SpecName('HTML5 W3C')}}.

+
{{SpecName('HTML5 W3C')}}{{Spec2('HTML5 W3C')}}Copie les éléments pertinents de la spécification HTML WHATWG
{{SpecName('CSS3 Basic UI')}}{{Spec2('CSS3 Basic UI')}}Définition de :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only et :read-write, mais sans la sémantique associée.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Définition de :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty et :not().
+ Définition de la syntaxe pour :enabled, :disabled, :checked et :indeterminate, mais sans la sémantique associée.
+ Pas de modification significative pour les pseudo-classes définies avec {{SpecName('CSS2.1')}}.
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}Définition de :lang(), :first-child, :hover et :focus.
+ Aucune modification significative pour les pseudo-classes définies avec  {{SpecName('CSS1')}}.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition de :link, :visited et :active, mais sans la sémantique associée.
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/pseudo-\303\251l\303\251ments/index.html" "b/files/fr/web/css/pseudo-\303\251l\303\251ments/index.html" new file mode 100644 index 0000000000..4f9ce9eeb9 --- /dev/null +++ "b/files/fr/web/css/pseudo-\303\251l\303\251ments/index.html" @@ -0,0 +1,132 @@ +--- +title: Pseudo-éléments +slug: Web/CSS/Pseudo-éléments +tags: + - CSS + - Pseudo-element + - Reference + - Sélecteur +translation_of: Web/CSS/Pseudo-elements +--- +
{{CSSRef}}
+ +

Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle. Ainsi, le pseudo-élément {{cssxref("::first-line")}} permettra de ne cibler que la première ligne d'un élément visé par le sélecteur.

+ +
/* La première ligne de chaque élément <p>. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+
+ + + +
+

Note: À la différence des pseudo-éléments, les pseudo-classes peuvent être utilisées afin de mettre en forme un élément en fonction de son état.

+
+ +

Syntaxe

+ +
sélecteur::pseudo-élément {
+  propriété: valeur;
+}
+ +

On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur. Le pseudo-élément doit apparaître après les sélecteurs simple de la déclaration

+ +

Depuis CSS3, on utilise deux fois le caractère deux-points (:) pour préfixer les pseudo-éléments (afin de pouvoir les différencier des pseudo-classes). Toutefois, la plupart des navigateurs prennent en charge les pseudo-éléments pour lesquels le préfixe n'est formé que d'un seul « : ».

+ +

Liste des pseudo-éléments

+ +
+
    +
  • {{CSSxRef("::after", "::after (:after)")}}
    • +
  • {{CSSxRef("::backdrop")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::before", "::before (:before)")}}
    • +
  • {{CSSxRef("::cue", "::cue (:cue)")}}
    • +
  • {{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}
    • +
  • {{CSSxRef("::first-line", "::first-line (:first-line)")}}
    • +
  • {{CSSxRef("::grammar-error")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::marker")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::part")}} {{Experimental_inline}}
    • +
  • {{CSSxRef("::placeholder")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::selection")}}
    • +
  • {{CSSxRef("::slotted", "::slotted()")}}
    • +
  • {{CSSxRef("::spelling-error")}} {{Experimental_Inline}}
    • +
+
+ +

Exemples

+ +

CSS

+ +
p::first-line {
+  color: blue;
+}
+ +

HTML

+ +
<p>
+  C’était le Lapin Blanc qui revenait en trottinant,
+  et qui cherchait de tous côtés, d’un air inquiet,
+  comme s’il avait perdu quelque chose ; Alice
+  l’entendit qui marmottait : « La Duchesse ! La
+  Duchesse ! Oh ! mes pauvres pattes ; oh ! ma robe
+  et mes moustaches ! Elle me fera guillotiner aussi
+  vrai que des furets sont des furets ! Où pourrais-je
+  bien les avoir perdus ? » Alice devina tout de suite
+  qu’il cherchait l’éventail et la paire de gants paille,
+  et, comme elle avait bon cœur, elle se mit à les
+  chercher aussi ; mais pas moyen de les trouver.
+</p>
+ +

Résultat

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurVersion minimalePrise en charge de :
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/quotes/index.html b/files/fr/web/css/quotes/index.html new file mode 100644 index 0000000000..00bc1a176b --- /dev/null +++ b/files/fr/web/css/quotes/index.html @@ -0,0 +1,109 @@ +--- +title: quotes +slug: Web/CSS/quotes +tags: + - CSS + - Propriété + - Reference + - Web +translation_of: Web/CSS/quotes +--- +
{{CSSRef}}
+ +

La propriété quotes indique la façon dont les marques de citation sont affichées.

+ +
{{EmbedInteractiveExample("pages/css/quotes.html")}}
+ + + +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+quotes: none;
+
+/* Chaînes de caractères */
+/* Type <string>         */
+quotes: "«" "»";           /* On utilise les guillemets français
+                              pour ouvrir et fermer une citation  */
+quotes: "«" "»" "‹" "›";   /* On définit deux niveaux de citation */
+
+/* Valeurs globales */
+quotes: inherit;
+quotes: initial;
+quotes: unset;
+
+ +

Valeurs

+ +
+
none
+
Les valeurs open-quote et close-quote de la propriété {{cssxref("content")}} n'entraînent aucune marque de citation.
+
[<string> <string>]+
+
Une ou plusieurs paires de {{cssxref("<string>")}} pour les valeurs open-quote et close-quote. La première paire représente les symboles utilisés pour les citations de plus haut niveau, la deuxième indique comment délimiter une citation dans une citation, la troisième paire permet d'ajouter un niveau d'imbrication supplémentaire et ainsi de suite.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p>
+  <q>Bientôt le Lapin aperçut Alice qui furetait ;
+  il lui cria d’un ton d’impatience :
+    <q>Eh bien ! Marianne, que faites-vous ici ?
+    Courez vite à la maison me chercher une paire
+    de gants et un éventail ! Allons, dépêchons-nous.
+    </q>
+  </q>
+</p>
+ +

CSS

+ +
q {
+  quotes : "«" "»" '"' '"';
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Content", "#quotes", "quotes")}}{{Spec2("CSS3 Content")}} 
{{SpecName('CSS2.1', 'generate.html#quotes', 'quotes')}}{{Spec2('CSS2.1')}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.quotes")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("content")}}
    • +
diff --git a/files/fr/web/css/radial-gradient()/index.html b/files/fr/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..bb6cb5951d --- /dev/null +++ b/files/fr/web/css/radial-gradient()/index.html @@ -0,0 +1,225 @@ +--- +title: radial-gradient +slug: Web/CSS/radial-gradient() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/radial-gradient() +--- +
{{CSSRef}}
+ +

La fonction radial-gradient() permet de créer une {{cssxref("<image>")}} CSS représentant un dégradé de couleur. Ce dégradé diffuse depuis une origine, le centre du gradient. La valeur renvoyée par cette fonction est un objet CSS de type {{cssxref("<gradient>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}
+ + + +

De façon analogue aux autres types de dégradés, un dégradé radial n'est pas une couleur ({{cssxref("<color>")}}) CSS mais une image sans dimension intrinsèque (c'est-à-dire que celle-ci ne possède pas de taille naturelle ou préférée ni de proportion). Sa taille réelle correspondra à la taille de l'élément auquel le gradient s'applique.

+ +
+

Note : La fonction radial-gradient ne permet pas d'obtenir des dégradés radiaux répétés. Pour obtenir un tel effet concentrique, on pourra utiliser la fonction CSS {{cssxref("repeating-radial-gradient")}}.

+
+ +
+

Note : Une valeur de type <gradient> est également une valeur de type <image>. On peut donc utiliser des dégradés à n'importe quel endroit où on peut utiliser des images. En revanche, un dégradé n'est pas une valeur de type {{cssxref("<color>")}} et ne peut donc pas être utilisé avec les propriétés manipulant ces valeurs (par exemple {{cssxref("background-color")}}).

+
+ +

Composition d'un dégradé radial

+ +

+ +

Les dégradés radiaux sont définis par trois notions :

+ +
    +
  • Le centre,
    • +
  • La forme de terminaison : le contour et sa position,
    • +
  • Les points de couleur (color stops).
    • +
+ +

Pour obtenir un dégradé radial, on trace des formes uniformes concentriques, identiques à la formes de terminaison en partant du centre. Les points de couleur sont positionnés sur un rayon virtuel qui s'étend horizontalement depuis le centre et vers la droite. Lorsqu'on positionne ces points avec des pourcentages, la valeur sera relative au rayon total qui est la distance entre le centre et la forme de terminaison. Chaque forme a une seule couleur qui est déterminée par la couleur du point d'intersection entre le rayon et la forme.

+ +

Les formes de terminaisons peuvent prendre deux formes :

+ +
    +
  • circulaire (avec le mot-clé circle)
    • +
  • elliptique (avec le mot-clé ellipse).
    • +
+ +

Syntaxe

+ +
/* Un dégradé qui part du centre du conteneur,
+   qui commence en rouge, passe par du bleu
+   et finit en vert. */
+radial-gradient(circle at center, red 0, blue, green 100%)
+ +

Valeurs

+ +
+
<position>
+
Une {{cssxref("<position>")}} CSS qui est interprétée de la même façon que pour les propriétés {{cssxref("background-position")}} ou {{cssxref("transform-origin")}}. La valeur par défaut est center.
+
<shape>
+
La forme du gradient. Elle vaut soit circle (la forme du dégradé sera un cercle de rayon constant) ou ellipse (la forme est une ellipse alignée sur les axes). La valeur par défaut est ellipse.
+
<linear-color-stop>
+
Ces valeurs indiquent qu'une couleur donnée doit être utilisée à un endroit spécifique du dégradé. Cette valeur se compose d'une valeur {{cssxref("<color>")}} éventuellement suivie d'une position définie par une pourcentage ({{cssxref("<percentage>")}}) ou une longueur ({{cssxref("<length>")}}) selon le rayon virtuel du gradient. Un pourcentage ou une longueur nulle (0% ou 0) indiquera le centre du dégradé. La valeur 100% correspondra à l'intersection entre la forme de terminaison et le rayon virtuel. Les valeurs intermédiaires seront situées de façon proportionnelle.
+
<color-hint>
+
Une indication pour définir la progression de l'interpolation entre les deux points d'arrêt de couleur adjacents. La longueur définit l'emplacement auquel la transition aurait été effectuée à moitié entre les deux couleurs.
+
<extent-keyword>
+
Des mots-clés qui permettent de décrire la taille de la forme de terminaison. Les valeurs possibles sont :
+
+ + + + + + + + + + + + + + + + + + + + + + + +
ConstanteDescription
closest-sideLa forme de terminaison du dégradé touche le côté de la boîte le plus proche du centre (pour les cercles) ou touche les côtés horizontaux et verticaux les plus proches du centre (pour les ellipses).
closest-cornerLa forme de terminaison du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre.
farthest-sideCette valeur fonctionne de façon semblable à closest-side, sauf que ce seront les côtés les plus éloignés qui seront utilisés.
farthest-cornerLa valeur par défaut. Cette valeur fonctionne de façon semblable à closest-corner, sauf que ce sera le coin le plus éloigné qui sera utilisé.
+ D'anciens brouillons de la spécification indiquaient d'autres mots-clés, cover et contain, respectivement synonymes des valeurs standards farthest-corner et closest-side. Seules les valeurs standards doivent être utilisées, certaines implémentations ont d'ailleurs déjà retirées les anciennes formes.
+
+ +

Syntaxe formelle

+ +
radial-gradient(   [ circle || {{cssxref("<length>")}} ] [ at {{cssxref("<position>")}} ]? ,
+                 | [ ellipse || [ {{cssxref("<length>")}}  |  {{cssxref("<percentage>")}}  ]{2}] [ at  {{cssxref("<position>")}}  ]? ,
+                 | [ [ circle | ellipse ] || <extent-keyword> ] [ at  {{cssxref("<position>")}}  ]? ,
+                 | at  {{cssxref("<position>")}}  ,
+                 <color-stop-list> [ , <color-stop-list> ]+ )
+avec <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+  et <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+  et <linear-color-stop> = <color> [ <color-stop-length> ]?
+  et <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  et <color-hint> = [ <percentage> | <length> ]
+ +

Exemples

+ +

Une ellipse avec farthest-corner

+ +

CSS

+ +
.exemple {
+  height: 100vh;
+  width: 200vh;
+  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
+}
+ +

HTML

+ +
<p class="exemple">
+  Yop
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Une_ellipse_avec_farthest-corner","250","150")}}

+ +

Un cercle de 16 pixels

+ +

CSS

+ +
.exemple {
+  height: 100vh;
+  width: 100vh;
+  background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
+}
+ +

HTML

+ +
<p class="exemple">
+  Yop
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Un_cercle_de_16_pixels","250","150")}}

+ +

Un dégradé simple

+ +
<div class="radial-gradient"></div>
+
+ +
.radial-gradient {
+  width: 240px;
+  height: 120px;
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+}
+ +

{{EmbedLiveSample('Un_dégradé_simple', 120, 120)}}

+ +

Un dégradé non-centré

+ +
<div class="radial-gradient"></div>
+
+ +
.radial-gradient {
+  width: 240px;
+  height: 120px;
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}
+ +

{{EmbedLiveSample('Un_dégradé_non-centré', 240, 120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image.gradient.radial-gradient")}}

+ +

Notes relatives à Quantum (Firefox)

+ +
    +
  • Gecko possède un bug qui fait que radial-gradient(circle  gold, red) fonctionne bien que la virgule entre circle et gold soit absente (cf. {{bug("1383323")}}). Le nouveau moteur de rendu CSS, Stylo, prévu pour Firefox 57, corrige ce bug.
    • +
  • De plus, les expressions utilisant {{cssxref("calc")}} sont rejetées lorsqu'elles sont utilisées pour définit le rayon dans radial-gradient(), la valeur obtenue étant alors considérée comme invalide (cf. {{bug(1376019)}}). Ce point a également été corrigé avec Stylo.
    • +
+ +

Voir aussi

+ +
    +
  • Manipuler les dégradés CSS,
    • +
  • {{cssxref("repeating-radial-gradient")}},
    • +
  • {{cssxref("linear-gradient")}}
    • +
  • {{cssxref("repeating-linear-gradient")}}
    • +
  • {{cssxref("conic-gradient")}}
    • +
  • {{cssxref("repeating-conic-gradient")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("_image","image()")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("image-set","image-set()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git a/files/fr/web/css/ratio/index.html b/files/fr/web/css/ratio/index.html new file mode 100644 index 0000000000..51d9786b28 --- /dev/null +++ b/files/fr/web/css/ratio/index.html @@ -0,0 +1,110 @@ +--- +title: +slug: Web/CSS/ratio +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/ratio +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <ratio> permet de décrire les proportions dans les media queries (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.

+ +

Syntaxe

+ +

Une valeur de ce type se compose d'un entier strictement positif (type {{cssxref("<integer>")}}, suivi d'une barre oblique ('/', Unicode U+002F SOLIDUS) puis d'un second entier strictement positif (type {{cssxref("<integer>")}}). Il est possible d'avoir des espaces avant et après la barre oblique.

+ +

Exemples

+ +

Utiliser dans une media query

+ +
@media screen and (min-aspect-ratio: 16/9) { … }
+ +

Ratios fréquemment utilisés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 RatioUtilisation
Ratio4_3.png4/3Format traditionnel utilisé par les télévisions au XXe siècle.
Ratio16_9.png16/9Format « moderne » des télévisions.
Ratio1_1.85.png185/100 = 91/50
+ (les numérateurs et dénominateurs décimaux ne sont pas autorisés)		Le format le plus utilisé pour la projection de films depuis les années 1960.
Ratio1_2.39.png239/100
+ (les numérateurs et dénominateurs décimaux ne sont pas autorisés)		Le format « large » utilisé pour projeter certains films (on parle de format anamorphique).
+ +

Exemple appliqué

+ +

CSS

+ +
@media screen and (min-aspect-ratio: 1/1) {
+  .exemple {
+    background-color: palegreen;
+  }
+}
+ +

HTML

+ +
<p class="exemple">
+  Essayez de m'étirer en longueur ou de me réduire en largeur
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_appliqué","300","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Media Queries', '#values', '<ratio>')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.ratio")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/redimensionnement_arri\303\250re-plans_svg/index.html" "b/files/fr/web/css/redimensionnement_arri\303\250re-plans_svg/index.html" new file mode 100644 index 0000000000..ecd528838c --- /dev/null +++ "b/files/fr/web/css/redimensionnement_arri\303\250re-plans_svg/index.html" @@ -0,0 +1,331 @@ +--- +title: Redimensionnement d'arrière-plans SVG +slug: Web/CSS/Redimensionnement_arrière-plans_SVG +tags: + - CSS + - Guide + - SVG +translation_of: Web/CSS/Scaling_of_SVG_backgrounds +--- +

Les images SVG sont très flexibles et lorsqu'on les utilise en CSS avec les propriétés {{cssxref("background-image")}} et {{cssxref("background-size")}}, il faut s'assurer de considérer les différents aspects qui leurs sont propres. Dans cet article, on décrit comment les images SVG sont redimensionnées grâce à ces propriétés.

+ +

Un algorithme simple

+ +

Dans la plupart des cas, l'algorithme utilisé pourra être réduit à ces quatre règles. Ces règles ne sont pas exhaustives et ne couvrent pas certains cas aux limites mais cela sera suffisant ici :

+ +
    +
  1. Si {{cssxref("background-size")}} définit une dimension fixe (des pourcentages ou des unités relatives fixées par le contexte), cette dimension l'emporte.
    2. +
  2. Si l'image possède des proportions intrinsèques (autrement dit, si le ratio largeur/hauteur est constant : 16:9, 4:3, 2.39:1, 1:1), l'arrière-plan sera affiché en conservant ces proportions.
    3. +
  3. Si l'image définit une taille et que celle-ci n'est pas modifiée par une contrainte quelconque, cette taille l'emporte.
    4. +
  4. Dans tous les autres cas, l'image est affichée avec la taille de la zone dédiée à l'arrière-plan.
    5. +
+ +

On notera ici que l'algorithme ne prend en cas que les dimensions et/ou les proportions de l'image (leur absence éventullement). Ainsi, une image SVG dont les dimensions sont fixées sera traitée comme une image matricielle de la même taille.

+ +

Fichiers d'exemples

+ +

Avant d'aller plus loin dans l'exploration des résultats avec {{cssxref("background-size")}}, il serait judicieux de disposer de différentes images sources avec différents paramètres de dimensions, proportions, etc.

+ +

Pour chaque cas d'exemple fourni ci-après, l'image est affichée dans une boîte carrée de 150 pixels et un lien est fourni vers le fichier SVG correspondant.

+ +

Image sans dimension ni proportion

+ +

Cette image ne possède ni dimension ni proportion. Quelle que soit sa taille, il n'y aura pas de ratio largeur/hauteur particulier. On a ici une image qui forme un dégradé, quelles que soient les dimensions et la proportion de l'écran.

+ +

no-dimensions-or-ratio.png

+ +

Fichier source SVG

+ +

Image sans proportion avec une dimension fixée

+ +

Cette image mesure 100 pixels de large mais n'a pas de hauteur ni de proportion intrinsèque. On a ainsi une bande d'arrière-plan qui peut être étirée sur toute la hauteur d'un bloc.

+ +

100px-wide-no-height-or-ratio.png

+ +

Fichier source SVG

+ +

Image avec une dimension fixée et des proportions intrinsèques

+ +

Cette image mesure 100 pixels de haut mais n'a pas de largeur fixée. Elle définit également une proportion de 3:4. Ainsi, le rapport largeur/hauteur sera toujours 3/4.

+ +

On a ici un cas très proche de l'image pour laquelle on définit une largeur et une hauteur car, une fois qu'on a une dimension et une proportion, la deuxième dimension est implicite. Cela n'en reste pas moins un exemple utile.

+ +

100px-height-3x4-ratio.png

+ +

Fichier source SVG

+ +

Image sans largeur ni hauteur mais avec des proportions intrinsèques

+ +

Cette image n'indique pas de hauteur ou de largeur mais un ratio intrinsèque de 1:1. On obtiendra toujours un carré (qui pourra être utilisé comme une icône) pour n'importe quelle taille : 32x32, 128x128, or 512x512.

+ +

no-dimensions-1x1-ratio.png

+ +

Fichier source SVG

+ +

Exemples de redimensionnement

+ +

Appliquons maintenant différents redimensionnements sur ces images. Pour chacun des exemples qui suivent, les rectangles dessinés font 300 pixels de large et 200 pixels de haut. De plus, on utilise {{cssxref("background-repeat")}} avec no-repeat pour plus de clarté..

+ +
Note : Les images montrées ci-après illustrent le rendu attendu. Les navigateurs peuvent ne pas produire le bon résultat.
+ +

Indiquer des dimensions fixées sur les deux axes

+ +

Si on utilise {{cssxref("background-size")}} pour indiquer la longueur et la largeur de l'image, celles-ci seront toujours utilisées (cf. la règle n°1 précédemment énoncée). Autrement dit, l'image sera toujours étirée pour obtenir ces dimensions, quelles que soient les dimensions initiales de l'image ou ses proportions.

+ +

SVG source : Aucune dimension ni proportion

+ +

Avec ces déclarations CSS :

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: 125px 175px;
+
+ +

On doit obtenir un résultat semblable à :

+ +

fixed-no-dimensions-or-ratio.png

+ +

SVG source : Une dimension définie et aucune proportion

+ +

Avec ces déclarations CSS :

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: 250px 150px;
+
+ +

On doit obtenir un résultat semblable à :

+ +

fixed-100px-wide-no-height-or-ratio.png

+ +

SVG source : Une dimension définie et des proportions intrinsèques

+ +

Avec ces déclarations CSS :

+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: 275px 125px;
+
+ +

On doit obtenir un résultat semblable à :

+ +

fixed-100px-height-3x4-ratio.png

+ +

SVG source : Aucune largeur ni hauteur définie mais des proportions intrinsèques

+ +

Avec ces déclarations CSS :

+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: 250px 100px;
+
+ +

On doit obtenir un résultat semblable à :

+ +

fixed-no-dimensions-1x1-ratio.png

+ +

Utiliser contain ou cover

+ +

En utilisant la valeur cover pour {{cssxref("background-size")}}, l'image sera réduite au maximum pour couvrir toute la zone de l'arrière-plan. contain fonctionne de façon symétrique, l'image est agrandie autant que possible sans être rognée par la zone de l'arrière-plan.

+ +

Pour une image avec des proportions intrinsèques, une seule dimension suffira à déterminer la taille pour cover/contain. En revanche, sans ratio, ce n'est pas suffisant et il faut donc utiliser les contraintes de la zone de l'arrière-plan.

+ +

SVG source : Aucune dimension ni proportion

+ +

Si une image n'a ni dimensions définie, ni proportions définies, les règles 2 ou 3 ne pourront pas s'appliquer. La règle 4 est donc utilisée et l'image couvre toute la zone (ce qui satisfait d'ailleurs les différentes contraintes).

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: contain;
+
+ +

Le résultat obtenu sera :

+ +

no-dimensions-or-ratio-contain.png

+ +

SVG source : Une dimension définie et aucune proportion

+ +

De même si l'image possède une dimension mais aucune proportion, la règle 4 sera appliquée : l'image est ainsi redimensionnée pour couvrir toute la zone.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: contain;
+
+ +

Le résultat obtenu sera :

+ +

100px-wide-no-height-or-ratio-contain.png

+ +

SVG source : Une dimension définie et des proportions intrinsèques

+ +

Ici, on a des proportions intrinsèques. Dans ce cas, la règle 1 n'est pas pertinente et on utilise donc la règle 2 : le ratio est conservé (tout en respectant les consignes de contain ou cover). Ainsi, avec contain, la boîte de 300x200 et le ratio de 3:4 entraîneront le dessin d'un arrière-plan de 150x200.

+ +
contain
+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: contain;
+
+ +

Le résultat obtenu sera :

+ +

100px-height-3x4-ratio-contain.png

+ +

On voit ici que toute l'image est affichée et est contenue dans la boîte sans être rognée.

+ +
cover
+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: cover;
+
+ +

Le résultat obtenu sera :

+ +

100px-height-3x4-ratio-cover.png

+ +

Dans ce cas, le ratio 3:4 est conservé et l'image est étirée Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.

+ +

SVG source : Aucune dimension mais des proportions intrinsèques

+ +

On obtient des résultats analogues lorsqu'on manipule une image sans dimension intrinsèque mais avec des proportions intrinsèques.

+ +
contain
+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: contain;
+
+ +

Le résultat ressemblera à :

+ +

no-dimensions-1x1-ratio-contain.png

+ +

On voit ici que l'image est redimensionnée à la plus petite taille tout en conservant le ratio 1:1.

+ +
cover
+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: cover;
+
+ +

Le résultat ressemblera à :

+ +

no-dimensions-1x1-ratio-cover.png

+ +

Ici, l'image est dimensionnée afin de couvrir la plus grande surface avec le ratio 1:1.

+ +

Utiliser auto pour les deux axes

+ +

Si {{cssxref("background-size")}} vaut auto ou auto auto, ce sera la règle n°2 qui s'appliquera : les proportions intrinsèques devront être conservées.

+ +

SVG source : Aucune dimension ni proportion intrinsèque

+ +

Lorsque l'image n'a aucune proportion ni dimension, ce sera la dernière règle qui s'appliquera : l'image couvrira toute la surface de la zone.

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: auto auto;
+
+ +

Voici le résultat obtenu :

+ +

auto-no-dimensions-or-ratio.png

+ +

SVG source : une dimension mais aucune proportion intrinsèque

+ +

S'il n'y a aucune proportion définie mais qu'une dimension est fournie, la règle n°3 s'appliquera et l'image sera affichée avec ces dimensions.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: auto auto;
+
+ +

Voici le résultat obtenu :

+ +

auto-100px-wide-no-height-or-ratio.png

+ +

Ici, on voit que la largeur définie par le fichier SVG (100 pixels) est respectée. L'image s'étend sur toute la hauteur de la zone de l'arrière-plan car elle n'est pas définie (explicitement dans les déclarations ou intrinsèquement via l'image).

+ +

SVG source : une dimension et des proportions intrinsèques

+ +

Si on dispose de proportions intrinsèques et d'une dimension fixée, les deux dimensions sont alors définies.

+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: auto auto;
+
+ +

Le résultat sera le suivant :

+ +

auto-100px-height-3x4-ratio.png

+ +

Cette image mesure 100 pixels de haut et possède des proportions intrinsèques avec un ratio de 3:4. La largeur vaut donc 75 pixels et c'est ainsi qu'elle est affichée avec auto.

+ +

SVG source : Aucune dimension définie mais des proportions intrinsèques

+ +

Lorsqu'un ratio s'applique sans dimension, c'est la règle n°2 qui s'applique. L'image est affichée comme pour contain.

+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: auto auto;
+
+ +

Le résultat ressemblera à :

+ +

auto-no-dimensions-1x1-ratio.png

+ +

Utiliser auto et une dimension fixée

+ +

Avec la première règle, les dimensions définies sont toujours utilisées et il faut donc utiliser les autres règles pour déterminer la seconde dimension.

+ +

SVG source : aucune dimension ni proportion intrinsèque

+ +

Si l'image ne possède ni dimension ni proportion intrinsèque, c'est la règle 4 qui s'applique et les dimensions de la zone pour l'arrière-plan seront utilisées pour auto.

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: auto 140px;
+
+ +

1auto-no-dimensions-or-ratio.png

+ +

Ici, la largeur est déterminée grâce à la zone dédiée à l'arrière-plan (règle n°4) et la hauteur est indiquée via la feuille de style (140px).

+ +

SVG source : une dimension intrinsèque mais pas de proportion intrinsèque

+ +

Si l'image possède une dimension implicite mais pas de ratio, la dimension définie sera utilisée selon la règle n°3 si elle vaut auto dans le code CSS.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: 200px auto;
+
+ +

100px-wide-no-height-or-ratio-length-auto.png

+ +

Ici, la valeur de 200px fournie dans la feuille de style surcharge la valeur de 100px définie dans le fichier SVG. Puisqu'il n'y a aucune proportion intrinsèque ni hauteur de définie et qu'on utilise la valeur auto, l'image fera la même hauteur que la zone pour l'arrière-plan.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: auto 125px;
+
+ +

100px-wide-no-height-or-ratio-auto-length.png

+ +

Ici, c'est la largeur qui vaut auto et ce sera donc la valeur définie dans l'image SVG (100px) qui sera utilisée. La hauteur est fixée à 125 pixels via la feuille de style.

+ +

SVG source : une dimension définie et des proportions intrinsèques

+ +

Lorsqu'une dimension est indiquée, la première règle s'applique et la dimension du fichier SVG est utilisée sauf si le CSS la redéfinit. Lorsqu'un ratio est indiqué, celui-ci est utilisé pour déterminer la deuxième dimension.

+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: 150px auto;
+
+ +

1auto-100px-height-3x4-ratio.png

+ +

Ici, la hauteur de l'image a été surchargée pour valoir 150px. Les proportions intrinsèques permettent ensuite de définir la largeur (auto dans la feuille de style).

+ +

SVG source : aucune dimension mais des proportions intrinsèques

+ +

Si aucune dimension n'est définie dans l'image SVG, ce sera celle du CSS qui sera appliquée. Les proportions intrinsèques sont ensuite utilisées pour déterminer l'autre dimension (selon la rgèle n°2).

+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: 150px auto;
+
+ +

1auto-no-dimensions-1x1-ratio.png

+ +

La largeur est définie à 150 pixels via la feuille de style et la hauteur est calculée à partir de cette largeur en utilisant le ratio 1:1, elle vaudra donc 150px ce qui donnera le résultat ci-dessus.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/reference/index.html b/files/fr/web/css/reference/index.html new file mode 100644 index 0000000000..8aa4af3b7a --- /dev/null +++ b/files/fr/web/css/reference/index.html @@ -0,0 +1,193 @@ +--- +title: Référence CSS +slug: Web/CSS/Reference +tags: + - CSS + - CSS Data Types + - 'I10n:priority' + - Overview + - Reference + - Types CSS +translation_of: Web/CSS/Reference +--- +
{{CSSRef}}
+ +

Cette référence CSS fournit un index alphabétique de toutes les propriétés CSS standards, des pseudo-classes, des pseudo-éléments, des types de données et des règles @. Vous pouvez également trouver une liste alphabétique de tous les sélecteurs CSS par type et une liste des concepts clés de CSS. Enfin est inclus un bref sommaire de référence sur DOM-CSS / CSSOM.

+ +

Syntaxe de règle basique

+ +

Syntaxe de style basique

+ +
règle-de-style-basique ::=
+    liste-de-sélecteurs {
+      liste-de-propriétés
+    }
+
+ +

... où :

+ +
liste-de-sélecteurs ::=
+    sélecteur[:pseudo-classe] [::pseudo-élément]
+    [, liste-de-sélecteurs]
+
+liste-de-propriétés ::=
+    [propriété : valeur] [; liste-de-propriétés]
+
+ +

Voir aussi les sélecteurs, pseudo-classes, et pseudo-éléments listés ci-dessous. La syntaxe des valeurs dépend du type de données attendu pour chaque propriété indiquée.

+ +

Exemples de règle de style

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Pour une introduction à la syntaxe des sélecteurs CSS, consultez ce tutoriel. Soyez conscient que n’importe quelle erreur de syntaxe CSS dans une définition de règle l’invalide entièrement. Les règles non validées sont ignorées par le navigateur. Note : les définitions de règles CSS sont intégralement basées sur du texte (ASCII) alors que DOM-CSS / CSSOM (le système de gestion des règles) est basé sur des objets.

+ +

Syntaxe des règles @

+ +

Comme la structure des règles @ varie grandement, veuillez consulter règle @ pour trouver la syntaxe que vous souhaitez.

+ +

Index des mots-clés

+ +
+

Note : Les noms de propriétés de cet index n’incluent pas les noms de l’API DOM JavaScript lorsqu’ils sont différents des noms standards CSS.

+
+ +

{{CSS_Ref}}

+ +

Sélecteurs

+ +

Sont indiqués dans ce qui suit les divers sélecteurs, qui permettent aux styles d'être appliqués de façon conditionnelle selon diverses caractéristiques des éléments présents dans le DOM.

+ +

Sélecteurs simples

+ +

Les sélecteurs simples sont des sélecteurs fondamentaux. Ce sont les sélecteurs les plus élémentaires qui sont fréquemment combinés pour créer d'autres sélecteurs plus complexes.

+ + + +

Sélecteur de groupe

+ +
+
Sélecteur de conjonction A, B
+
Indique que les éléments des sélecteurs A et B doivent être sélectionnés. Il s'agit d'une méthode de groupement pour sélectionner des éléments selon plusieurs critères.
+
+ +

Combinateurs

+ +

Les combinateurs sont des sélecteurs qui établissent une relation entre deux sélecteurs ou plus, tel que "A est un enfant de B" ou "A est adjacent à B".

+ +
+
Combinateur de voisin direct A + B
+
Indique que les éléments sélectionnés par A et par B ont le même parent et que celui sélectionné par B suit immédiatement celui sélectionné par A.
+
Combinateur de voisin général A ~ B
+
Indique que les éléments sélectionnés par A et par B ont le même parent et que celui sélectionné par B suit celui sélectionné par A, mais pas nécessairement immédiatement après lui.
+
Combinateur d’enfant A > B
+
Indique que l’élément sélectionné par B est un enfant direct de l’élément sélectionné par A.
+
Combinateur de descendant A B
+
Indique que l’élément sélectionné par B est un descendant de l’élément sélectionné par A, mais n’en est pas nécessairement un enfant direct.
+
Combinateur de colonne A || B {{Experimental_Inline}}
+
Indique que l’élément sélectionné par B est situé dans la colonne de table indiquée par A. Les éléments qui s’étendent sur des colonnes multiples sont considérés comme étant membres de chacune de ces colonnes.
+
+ +

Pseudo-classes

+ +
+
    + +
+
+ +

Pseudo-éléments

+ +
+
    + +
+
+ +
+

Note : Une liste complète des sélecteurs existe dans le module de spécification Selectors de niveau 4.

+
+ +

Concepts

+ +

Syntaxe et sémantique

+ + + +

Valeurs

+ + + +

Disposition

+ + + +

DOM-CSS / CSSOM

+ +

Principaux types d'objets

+ +
    +
  • {{DOMxRef("DocumentOrShadowRoot.styleSheets")}}
    • +
  • {{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}
    • +
  • cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}} (sélecteur et style)
    • +
  • cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}
    • +
  • {{DOMxRef("HTMLElement.style")}}
    • +
  • HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}} (style uniquement)
    • +
  • {{DOMxRef("Element.className")}}
    • +
  • {{DOMxRef("Element.classList")}}
    • +
+ +

Méthodes importantes

+ +
    +
  • {{DOMxRef("CSSStyleSheet.insertRule()")}}
    • +
  • {{DOMxRef("CSSStyleSheet.deleteRule()")}}
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/repeat()/index.html b/files/fr/web/css/repeat()/index.html new file mode 100644 index 0000000000..17ef02d2f8 --- /dev/null +++ b/files/fr/web/css/repeat()/index.html @@ -0,0 +1,149 @@ +--- +title: repeat() +slug: Web/CSS/repeat() +tags: + - CSS + - Fonction + - Grille CSS + - Reference + - Web +translation_of: Web/CSS/repeat() +--- +
{{CSSRef}}
+ +

La fonction CSS repeat() permet de répéter un fragment d'une liste de pistes. Autrement dit, lorsqu'on a une grille avec de nombreuses lignes/colonnes, cela permet de réutiliser un même motif sur la grille. On a alors des règles plus concises.

+ +

Cette fonction peut être utilisée par les propriétés CSS {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} relatives aux grilles.

+ +
/* Valeurs de type <track-repeat> */
+repeat(4, 1fr)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] 1fr [col-end])
+repeat(4, [col-start] min-content [col-end])
+repeat(4, [col-start] max-content [col-end])
+repeat(4, [col-start] auto [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
+repeat(4, [col-start] min-content [col-middle] max-content [col-end])
+
+/* Valeurs de type <auto-repeat> */
+repeat(auto-fill, 250px)
+repeat(auto-fit, 250px)
+repeat(auto-fill, [col-start] 250px [col-end])
+repeat(auto-fit, [col-start] 250px [col-end])
+repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
+repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+/* Valeurs de type <fixed-repeat> */
+repeat(4, 250px)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
<length>
+
Une longueur positive (cf. le type {{cssxref("<length>")}}).
+
<percentage>
+
Un pourcentage (cf. le type {{cssxref("<percentage>")}}) positif qui indique la proportion par rapport à la taille en ligne (c'est-à-dire la dimension qui suit l'axe de lecture) pour les colonnes et par rapport à la taille en bloc (l'axe orthogonal) pour les lignes. Si la taille de la grille est calculée en fonction de la taille des pistes qu'elle contient, <percentage> devra être interprété comme auto. L'agent utilisateur peut ajuster les tailles intrinsèques des pistes pour qu'elles remplissent exactement le conteneur et acroître le moins possible la taille finale de la piste pour qu'elle se rapproche du pourcentage souhaité.
+
<flex>
+
Une dimension positive, exprimée en fr, qui indique le facteur de flexibilité de la piste (cf. le type {{cssxref("<flex>")}}). Chaque piste flexible partage l'espace de façon proportionnelle avec les autres pistes flexibles.
+
max-content
+
Cette valeur représente la contribution maximale des éléments qui occupent la piste.
+
min-content
+
Cette valeur représente la contribution minimale des éléments qui occupent la piste.
+
auto
+
Utilisée comme maximum, cette valeur se comporte comme max-content. Utilisée comme minimum, elle représente la plus grande taille minimale (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}}) des éléments qui occupent la piste.
+
auto-fill
+
Si le conteneur de la grille possède une taille définie ou maximale sur cet axe, alors le moteur répètera autant que possible le motif pour ne pas déborder de la grille. Si répéter le motif implique de déborder de la grille, il n'est répété qu'une fois. Sinon, si le conteneur de la grille possède une taille minimale sur cet axe, on utilisera le moins de répétitions possible pour atteindre ce minimum. Sinon, la liste de piste n'est répétée qu'une seule fois.
+
auto-fit
+
+

Cette valeur se comporte comme auto-fill mais, une fois que les objets sont placés, toutes les pistes répétées qui sont vides sont repliées. Une piste vide est une piste qui ne contient aucun élément ou sur laquelle aucun élément n'intersecte. Toutes les pistes peuvent être repliées si elles sont toutes vides.

+ +

Une piste repliée est traitée comme si elle avait une taille de piste de 0px (les gouttières sont également repliées de chaque côté).

+ +

Afin de calculer le nombre de pistes automatiquement répétées, l'agent utilisateur arrondit la taille de la piste à une valeur non nulle, propre à l'agent utilisateur (par exemple 1 px), afin d'éviter les divisions par zéros.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: repeat(2, 50px 1fr) 100px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>
+    Un élément qui mesure 50 pixels de large.
+  </div>
+  <div>
+    Un élément avec une largeur flexible.
+  </div>
+  <div>
+    Un élément qui mesure 50 pixels de large.
+  </div>
+  <div>
+    Un élément avec une largeur flexible.
+  </div>
+  <div>
+    Un élément non-flexible qui mesure 100 pixels de large.
+  </div>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Example", "100%", 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-template-columns.repeat")}}

diff --git a/files/fr/web/css/repeating-conic-gradient()/index.html b/files/fr/web/css/repeating-conic-gradient()/index.html new file mode 100644 index 0000000000..8e08d42e5a --- /dev/null +++ b/files/fr/web/css/repeating-conic-gradient()/index.html @@ -0,0 +1,207 @@ +--- +title: repeating-conic-gradient() +slug: Web/CSS/repeating-conic-gradient() +tags: + - CSS + - Dégradé + - Fonction + - Reference +translation_of: Web/CSS/repeating-conic-gradient() +--- +
{{draft}} {{CSSRef}}
+ +

La fonction CSS repeating-conic-gradient() crée une image composée d'un dégradé conique répété. Elle permet d'avoir un motif répété qu'on pourrait décrire avec une seule itération grâce à {{cssxref('conic-gradient')}}. Le résultat fourni par la fonction repeating-conic-gradient() est une valeur de type {{CSSxRef("<gradient>")}} qui est un sous-type du type{{CSSxRef("<image>")}}.

+ +

Si le premier ou le dernier arrêt de couleur inclut un angle supérieur à 0deg ou inférieur à 360deg, le dégradé conique ne sera pas répété.

+ +
{{EmbedInteractiveExample("pages/css/function-repeating-conic-gradient.html")}}
+ + + +

À l'instar des autres dégradés, les dégradés coniques répétés n'ont pas de dimensions intrinsèques (c'est-à-dire pas de taille naturelle ou préférée et pas de proportion préférée). La taille finale du dégradé sera la taille de l'élément sur lequel il est appliqué ou la taille indiquée par d'autres propriétés.

+ +

Le type de donnée <gradient>s étant un sous-type d'<image>, on pourra utiliser les dégradés coniques répétés là où des valeurs de type <image> sont attendues. Ainsi, repeating-conic-gradient() ne fonctionnera pas pour la propriété {{CSSxRef("background-color")}} car celle-ci attend une valeur de type {{CSSxRef("<color>")}}.

+ +
+

Note : Afin de créer un dégradé conique qui ne se répète pas, on pourra utiliser la notation fonctionnelle {{CSSxRef("conic-gradient")}}.

+
+ +

Comprendre les dégradés coniques répétés

+ +

La syntaxe pour repeating-conic-gradient est semblable à celle de {{CSSxRef("conic-gradient")}} et à celle de {{CSSxRef("repeating-radial-gradient")}}. À l'instar du dégradé conique unitaire, les arrêts de couleur sont placés autour d'un arc. Comme pour les dégradés radiaux répétés, la taille de la portion répétée correspond au premier arrêt de couleur auquel on a soustrait l'angle du dernier arrêt de couleur.

+ +

Comparison of the color stops for repeating and non-repeating conic and radial gradients

+ +

Les dégradés ci-dessus sont définis avec un tiers de bleu, un tiers de rouge et un tiers de jaune.

+ +
repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);
+
+repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);
+
+conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);
+
+radial-gradient(red 33%, yellow 33% 66%, blue 66%);
+
+ +

Pour un dégradé répété, on définit le premier et le dernier arrêt de couleur. Si les valeurs ne sont pas explicitement définies, elles correspondent respectivement aux angles 0 et 360deg. Lorsque ces valeurs sont utilisées par défaut, l'arc qui est répété occupe 360 degrés et il n'y a donc pas de répétition.

+ +

Les arrêts de couleur sont placés autour d'un arc (et non sur une ligne qui s'écarte du centre). L'arc progresse dans le sens horaire.

+ +

Un dégradé conique répété est défini en indiquant un angle de rotation, le centre du dégradé et une liste d'arrêts de couleur. Les arrêts de couleur sont définis avec un angle (type CSS {{cssxref('angle')}}). Les unités qui permettent de déclarer un angle sont deg (pour les degrés), grad (pour les grades), rad (pour les radians) et turn (pour les tours). Un cercle se compose de 360 degrés, 400 grade, 2π radians et d'un tour.

+ +

Les navigateurs qui prennent en charge ces dégradés permettent également d'utiliser des valeurs en pourcentages (où 100% correspond à 360 degrés). Toutefois, ce comportement n'est pas décrit dans la spécification.

+ +

La syntaxe de définition permet de placer le centre du dégradé à l'intérieur ou encore à l'extérieur de l'image. Les valeurs permettant de définir la position du centre s'écrivent comme la syntaxe à deux valeurs de  {{cssxref('background-position')}}.

+ +

Personnaliser des dégradés

+ +

En ajoutant des arrêts de couleur à l'arc du dégradé, il est possible de créer des dégradés sur mesures. La position d'un arrêt de couleur se définit via un {{CSSxRef("<angle>")}}. Si on n'indique pas de position pour un arrêt, celui-ci est placé à mi-parcours entre le précédent et le suivant. Si la position du premier ou du dernier arrêt ne sont pas définies, par défaut, ils seront placés à 0deg et à 360deg respectivement.

+ +

Attention, lorsque ces valeurs par défaut sont utilisées, l'arc occupe tout le cercle et le dégradé n'est donc pas répété.

+ +

Les deux formulations suivantes sont équivalentes :

+ +
repeating-conic-gradient(red, orange, yellow, green, blue 50%);
+repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)
+ +

Par défaut, les couleurs évoluent progressivement entre chaque arrêt et le milieur de l'arc correspondra à la moyenne des couleurs. Il est possible de déplacer ce point intermédiaire en fournissant une indication quant à l'emplacement du milieu de la transition.

+ +

Si deux (voire plusieurs) couleurs sont au même emplacement, la transition sera une ligne brutale entre la première et la dernière couleur déclarées à cet emplacement.

+ +

Bien qu'il soit possible de mélanger et de combiner différentes unités pour les angles, il est préférable d'éviter par souci de lisibilité / maintenabilité.

+ +

Syntaxe

+ +
background: repeating-conic-gradient(
+    from 3deg at 25% 25%,
+    hsl(200, 100%, 50%) 0deg 15deg,
+    hsl(200, 100%, 60%) 10deg 30deg);
+);
+ +

Values

+ +
+
{{CSSxRef("<angle>")}}
+
Lorsque cet angle est précédé du mot-clé from, cela définit la rotation du dégradé dans le sens horaire.
+
<position>
+
Une position définie avec la même syntaxe que la propriété {{cssxref("background-position")}}. Cette position définit le centre du dégradé. Lorsque cette valeur est absente, la valeur utilisée par défaut est center, ce qui indique que le dégradé est centré.
+
<angular-color-stop>
+
Une valeur {{CSSxRef("<color>")}} pour un arrêt de couleur, suivie par une ou plusieurs positions d'arrêt (données par un {{CSSxRef("<angle>")}} le long de l'arc). La taille de l'arc répété pour le dégradé est donné par l'angle du dernier arrêt de couleur auquel on a soustrait l'angle du premier arrêt de couleur.
+
<color-hint>
+
Une indication d'interpolation qui définit la façon dont le dégradé progresse entre deux arrêts de couleurs adjacents. Cette indication indique l'emplacement où la couleur doit être la couleur intermédiaire entre les deux arrêts environnant. Si cette valeur est absente, la moitié de la transition entre les couleurs sera atteinte à la moitié de l'arc entre les deux arrêts.
+
+
+

Note : Le rendu des arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui des arrêts de couleur pour les dégradés SVG.

+
+
+
+ +

Syntaxe formelle

+ +
repeating-conic-gradient(
+  [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
+  \---------------------------------/ \----------------------------/
+        Définition du dégradé            Liste d'arrêts de couleur
+
+where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
+  and <angular-color-stop> = <color> && <color-stop-angle>?
+  and <angular-color-hint> = <angle-percentage>
+  and <color-stop-angle> = <angle-percentage>{1,2}
+ +

Exemples

+ +
+

Noir et blanc

+ + + +
div {
+  background-image:
+     repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
+}
+
+ +

{{EmbedLiveSample("Noir_et_blanc", 220, 220)}}

+
+ +
+

Dégradé désaxé

+ + + +
div {
+  background: repeating-conic-gradient(
+    from 3deg at 25% 25%,
+    green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg);
+}
+ +

{{EmbedLiveSample("Dégradé_désaxé", 220, 220)}}

+ +

Le degradé est répété 18 fois mais on en voit que la moitié droite et on voit donc 9 répétitions.

+
+ +
+

Note : Voir la page Utiliser les dégradés en CSS pour plus d'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. Bien qu'il soit possible de créer des camemberts, damiers, etc. avec CSS, 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('CSS4 Images', '#repeating-gradients', 'repeating-conic-gradient()')}}{{Spec2('CSS4 Images')}}
+ +

Compatibilité des navigateurs

+ + + +
{{Compat("css.types.image.gradient.conic-gradient")}}
+ +

Voir aussi

+ +
    +
  • Manipuler les dégradés en CSS
    • +
  • Les autres fonctions relatives aux dégradés : {{CSSxRef("conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("_image","image()")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("image-set","image-set()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git a/files/fr/web/css/repeating-linear-gradient()/index.html b/files/fr/web/css/repeating-linear-gradient()/index.html new file mode 100644 index 0000000000..0e6c63df58 --- /dev/null +++ b/files/fr/web/css/repeating-linear-gradient()/index.html @@ -0,0 +1,174 @@ +--- +title: repeating-linear-gradient +slug: Web/CSS/repeating-linear-gradient() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/repeating-linear-gradient() +--- +
{{CSSRef}}
+ +

La fonction CSS repeating-linear-gradient créé une {{cssxref("<image>")}} composée de dégradés qui se répètent. Cela fonctionne de manière similaire aux dégradés linéaires simples décrits les mêmes arguments que les dégradés linéaires basiques représentés avec {{cssxref("linear-gradient")}} mais les points d'arrêt des couleurs sont automatiquement répétés, indéfiniment, dans les deux directions (les points d'arrêt sont répétés d'autant que la distance qui sépare le premier et le dernier point d'arrêt).

+ +
{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}
+ + + +

Par conséquent, la ligne de la couleur de fin coïncide toujours avec la ligne de la couleur de début. Si les deux ne sont pas identiques, on obtiendra alors une transition abrupte.

+ +

Comme pour les autres dégradés, un dégradé linéaire répété n'est pas une couleur (type {{cssxref("<color>")}}) CSS mais une image (type {{cssxref("<image>")}}) sans dimension intrinsèque ; c'est-à-dire, qu'il n'a ni taille naturelle ni taille préférée. Sa taille réelle s'adapte à l'élément auquel il s'applique.

+ +
+

Note : Le type <gradient> est un sous-type du type  <image>. À ce titre, repeating-linear-gradient() ne fonctionnera pas pour {{cssxref("background-color")}} et les autres propriétés qui utilisent le type de données {{cssxref("<color>")}}.

+
+ +

Syntaxe

+ +
/* Un dégradé répétitif sur un axe à 45 degrés */
+/* débutant bleu et finissant rouge, répété 3 fois */
+repeating-linear-gradient( 45deg, blue, red 33.3% );
+
+/* Un dégradé répétitif allant du coin inférieur droit */
+/* à coin supérieur gauche débutant bleu et finissant rouge */
+/* et répété tous les 20 pixels */
+repeating-linear-gradient( to left top, blue, red 20px);
+
+/* Un dégradé répétitif allant du bas vers le haut, */
+/* débutant bleu, étant vert après 40% et finissant rouge */
+repeating-linear-gradient( 0deg, blue, green 40%, red );
+
+/* Un dégradé répété cinq fois, progressant de gauche à
+   droite, commençant en rouge, passant en vert puis à
+   nouveau en rouge */
+repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
+ +

Valeurs

+ +
+
<side-or-corner>
+
Représente la position du point de départ de la ligne de dégradé. Cette valeur comprends deux mots-clés : le premier indique le côté sur une ligne horizontale, left ou right, le second indique le côté sur une ligne verticale, top ou bottom. L'ordre n'a pas d'influence et chacun des mots-clés est optionnel.
+ Les valeurs to top, to bottom, to left et to right sont respectivement traduites vers les angles 0deg, 180deg, 270deg, 90deg. Les autres sont traduites vers des angles qui permettent au point de départ d'être dans le même quadrant que le coin décrit et que la ligne définie par le point de départ et le coin soit perpendiculaire à la ligne de dégradé. De cette manière, la couleur décrite par le point d'arrêt sera exactement celle du coin. Ceci est parfois appelé la propriété du « coin magique ». Le point de fin de la ligne de dégradé est le point symétrique de du point de départ dans l'autre direction par rapport au centre de la boîte.
+
<angle>
+
Un angle pour la direction du dégradé. L'angle démarre à 0deg (ce qui est équivalent à to top) et progresse dans le sens des aiguilles d'une montre. Voir {{cssxref("<angle>")}}.
+
<linear-color-stop>
+
Cette valeur est composée d'une valeur de  couleur (type {{cssxref("<color>")}}), suivie d'une position d'arrêt optionnelle (soit un pourcentage entre 0% et 100% ou une longueur (type {{cssxref("<length>")}}) mesurée le long de l'axe du dégradé).
+
<color-hint>
+
L'indication de couleur est une indication pour l'interpolation des couleurs le long du dégradé et entre deux points d'arrêt de couleur. La longueur définit l'emplacement où la transition entre les deux couleurs est appliquée à moitié. Si cette valeur est absente, le niveau intermédiaire de la transition se situera à équidistance des deux points d'arrêt de couleur.
+
Le rendu des points d'arrêt en CSS suit les mêmes règles que les dégradés en SVG.
+
+ +

Syntaxe formelle

+ +
repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
+                            \---------------------------------/ \---------------/
+                              Définition de la ligne du dégradé Liste des points d'arrêt
+
+où <side-or-corner> = [left | right] || [top | bottom]
+  et <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+  et <linear-color-stop> = <color> [ <color-stop-length> ]?
+  et <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  et <color-hint> = [ <percentage> | <length> ]
+
+ +

Exemples

+ +

Bandes zébrées

+ + + +
body {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 20px,
+      black 20px,
+      black 40px);
+  /* avec plusieurs longueurs pour les points d'arrêt */
+  background-image: repeating-linear-gradient(-45deg,
+      transparent 0 20px,
+      black 20px 40px);
+}
+
+ +

{{EmbedLiveSample('Bandes_zébrées', 120, 120)}}

+ +

Dix barres horizontales répétées

+ + + +
body {
+  background-image: repeating-linear-gradient(to bottom,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+
+ +

{{EmbedLiveSample('Dix_barres_horizontales_répétées', 120, 120)}}

+ +

Comme le dernier point d'arrêt est situé à 10% et que le dégradé est vertical, chaque dégradé occupera 10% de la hauteur et on aura donc au total dix barres horizontales.

+ +
+

Note : Voir la page Manipuler les dégradés CSS pour plus d'exemples.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image.gradient.repeating-linear-gradient")}}

+ +

Voir aussi

+ +
    +
  • Manipuler les dégradés CSS
    • +
  • Les propriétés liées aux dégradés : +
      +
    • {{cssxref("radial-gradient", "radial-gradient()")}},
      • +
    • {{cssxref("linear-gradient", "linear-gradient()")}},
      • +
    • {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}
      • +
    • {{cssxref("conic-gradient")}}
      • +
    • {{cssxref("repeating-conic-gradient")}}
      • +
    +
    • +
  • Les propriétés où ces fonctions peuvent être utilisées : +
      +
    • {{cssxref("background-image")}},{{cssxref("background")}}.
      • +
    +
    • +
  • Un dégradé CSS interactif
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("_image","image()")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("image-set","image-set()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git a/files/fr/web/css/repeating-radial-gradient()/index.html b/files/fr/web/css/repeating-radial-gradient()/index.html new file mode 100644 index 0000000000..eae482b540 --- /dev/null +++ b/files/fr/web/css/repeating-radial-gradient()/index.html @@ -0,0 +1,165 @@ +--- +title: repeating-radial-gradient() +slug: Web/CSS/repeating-radial-gradient() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/repeating-radial-gradient() +--- +
{{CSSRef}}
+ +

La fonction repeating-radial-gradient() fonctionne de façon similaire à {{cssxref("radial-gradient")}} mais répète les couleurs de façon infinie dans les deux directions avec des répétitions formant des bandes de gradient (de façon analogue à {{cssxref("repeating-linear-gradient")}} qui permet de répéter un dégradé linéaire ({{cssxref("linear-gradient")}}).

+ +
{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}
+ + + +

Comme pour les autres gradients, un gradient radial répété n'est pas une couleur CSS : ce n'est pas une valeur de type {{cssxref("<color>")}} mais une image (type {{cssxref("<image>")}}) sans dimension intrinsèque : elle n'a pas de taille naturelle ou préférée ni de proportion. Sa taille réelle correspondra à celle de l'élément où est appliqué le gradient.

+ +
+

Note : En CSS, un dégradé est une image (type de données {{cssxref("<image>")}} et une telle valeur ne peut être utilisée qu'avec les propriétés qui gèrent des images. Ainsi, repeating-radial-gradient() ne fonctionnera pas avec {{cssxref("background-color")}} ou avec les autres propriétés qui acceptent des couleurs (type de données {{cssxref("<color>")}}).

+
+ +

Syntaxe

+ +
/* Un dégradé répété qui part du centre de son conteneur,
+   en commençant par du rouge, passant par du bleu puis,
+   finissant par du vert */
+repeating-radial-gradient(circle at center, red 0, blue, green 30px);
+
+/* Un dégradé elliptique qui commence dans le coin supérieur gauche
+   en commençant rouge puis en passant au vert, cinq fois entre le
+   centre et le coin inférieur droit et une seule fois entre le
+   centre et le coin supérieur gauche */
+repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
+
+ +

Valeurs

+ +
+
<position>
+
Une position CSS ({{cssxref("<position>")}}) qui sera interprétée de la même façon que {{cssxref("background-position")}} ou {{cssxref("transform-origin")}}. La valeur par défaut est center.
+
<shape>
+
La forme du gradient employé. C'est un mot-clé parmi circle (le dégradé est circulaire avec un rayon constant) ou ellipse (la forme est elliptique et l'axe est aligné avec la direction indiquée). La valeur par défaut est ellipse.
+
<size>
+
La taille du gradient (cf. la section sur les constantes dimensionnelles ci-après).
+
<color-stop>
+
Cette valeur représente une couleur fixe à une position donnée. Cette valeur est composée d'une valeur {{cssxref("<color>")}} éventuellement suivie d'une position d'arrêt (une valeur {{cssxref("<percentage>")}} ou {{cssxref("<length>")}} représentant l'emplacement sur la ligne du gradient). Une valeur de 0% ou 0 représentera le centre du gradient et la valeur de 100% représentera la fin de la forme qu'occupe le dégradé. Les valeurs intermédiaires sont positionnées de façon proportionnelles sur le rayon.
+
<extent-keyword>
+
Des mots-clés qui déterminent la taille de la forme. Les valeurs possibles sont :
+
+ + + + + + + + + + + + + + + + + + + + + + + +
ConstanteDescription
closest-sideLa forme du gradient est délimitée par les côtés de la boîtes qui sont le plus proche du centre dans le cas des cercles. Dans le cas des ellipses, elle est délimitée par les côtés horizontaux et verticaux de la boîte.
closest-cornerLa forme du gradient est dimensionnée afin d'atteindre exactement le coin de la boîte le plus proche du centre.
farthest-sideFonctionne de façon similaire à closest-side mais cette fois, ce sont les côtés les plus éloignés du centre qui servent de délimitation.
farthest-cornerFonctionne de façon similaire à closest-corner mais dans ce cas, c'est le coin le plus éloigné du centre qui est utilisé comme délimitation.
+ Les premières versions du brouillon utilisaient d'autres termes comme cover et contain, respectivement synonymes de farthest-corner et closest-side. Certaines implémentations ont abandonné ces termes et on préfèrera donc utiliser les mots-clés précédemment listés.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Dégradé noir et blanc

+ +

HTML

+ +
<div class="radial-gradient"></div>
+
+ +

CSS

+ +
.radial-gradient {
+  width: 120px;
+  height: 120px;
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Dégradé_noir_et_blanc', 120, 120)}}

+ +

Utilisation de farthest-corner

+ +

HTML

+ +
<div class="radial-gradient"></div>
+
+ +

CSS

+ +
.radial-gradient {
+  width: 120px;
+  height: 120px;
+  background: repeating-radial-gradient(ellipse farthest-corner,
+      red, black 5%, blue 5%, green 10%);
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Utilisation_de_farthest-corner', 120, 120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}{{Spec2('CSS3 Images')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image.gradient.repeating-radial-gradient")}}

+ +

Voir aussi

+ +
    +
  • Utiliser les gradients CSS
    • +
  • {{cssxref("repeating-linear-gradient")}}
    • +
  • {{cssxref("radial-gradient")}}
    • +
  • {{cssxref("repeating-linear-gradient")}}
    • +
  • {{cssxref("conic-gradient")}}
    • +
  • {{cssxref("repeating-conic-gradient")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("_image","image()")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("image-set","image-set()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git "a/files/fr/web/css/requ\303\252tes_m\303\251dia/index.html" "b/files/fr/web/css/requ\303\252tes_m\303\251dia/index.html" new file mode 100644 index 0000000000..58c6cdc73e --- /dev/null +++ "b/files/fr/web/css/requ\303\252tes_m\303\251dia/index.html" @@ -0,0 +1,86 @@ +--- +title: Media queries +slug: Web/CSS/Requêtes_média +tags: + - Aperçu + - CSS + - CSS Media Queries + - Reference +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef}}
+ +

Les requêtes média, plus souvent appelées media queries, sont un outil de responsive design qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou at-rule) {{cssxref("@media")}} est utilisée afin d'appliquer les styles de façon conditionnelle.

+ +

De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut {{htmlattrxref("media", "source")}} de l'élément {{HTMLElement("source")}} qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML {{HTMLElement("picture")}}.

+ +

De plus, la méthode du DOM {{domxref("Window.matchMedia()")}} peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode {{domxref("MediaQueryList.addListener()")}} afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état.

+ +

Vous pouvez en découvrir plus dans l'article Tester des requêtes media.

+ +

Référence

+ +

Règles @

+ +
+
    +
  • {{cssxref("@import")}}
    • +
  • {{cssxref("@media")}}
    • +
+
+ +

Guides

+ +
+
Manipuler les requêtes média
+
Cet article présente les requêtes média, ce qu'elles font, et explique les différentes expressions qu'il est possible d'utiliser.
+
Tester les requêtes média
+
Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié lorsque les résultats d'une requête média évoluent (par exemple lorsqu'un utilisateur tourne son appareil).
+
Utiliser des requêtes média pour l'accessibilité
+
Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}} 
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Voir aussi

+ +
    +
  • La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme srlon que l'agent utilisateur prend ou non en charge certaines technologies CSS.
    • +
diff --git "a/files/fr/web/css/requ\303\252tes_m\303\251dia/tester_les_media_queries/index.html" "b/files/fr/web/css/requ\303\252tes_m\303\251dia/tester_les_media_queries/index.html" new file mode 100644 index 0000000000..39539a5749 --- /dev/null +++ "b/files/fr/web/css/requ\303\252tes_m\303\251dia/tester_les_media_queries/index.html" @@ -0,0 +1,79 @@ +--- +title: Tester les requêtes média en JavaScript +slug: Web/CSS/Requêtes_média/Tester_les_media_queries +tags: + - Avancé + - CSS + - DOM + - Guide +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +
{{CSSRef}}
+ +

Le {{Glossary("DOM")}} fournit un certain nombre de fonctionnalités qui permettent de tester les résultats d'une requête média (media query) avec un script. Pour cela, on utilise l'interface {{domxref("MediaQueryList")}} ainsi que ses méthodes et ses propriétés. Une fois qu'on a créé un objet {{domxref("MediaQueryList") }}, on peut vérifier le résultat de la requête ou également recevoir des notifications automatiques lorsque le résultat de la requête change.

+ +

Créer une liste de requêtes média

+ +

Avant d'évaluer les résultats d'une requête, on doit créer un objet {{domxref("MediaQueryList")}} qui représente la requête média. Pour cela, on utilisera la méthode {{domxref("window.matchMedia")}}.

+ +

Ainsi, si on veut avoir une liste de requête qui détermine si l'appareil utilisé est orienté en portrait ou en paysage, on pourra écrire :

+ +
var mql = window.matchMedia("(orientation: portrait)");
+
+ +

Vérifier le résultat d'une requête

+ +

Une fois que la liste de requêtes média a été créée, on peut vérifier le résultat de la requête grâce à la propriété matches qui représente les résultat de la requête :

+ +
if (mql.matches) {
+  /* La zone d'affichage/viewport est en portrait */
+} else {
+  /* La zone d'affichage/viewport est en paysage */
+}
+
+ +

Recevoir des notifications liées à la requête

+ +

Afin de savoir lorsque l'évaluation d'une requête a changé, il sera plus efficace de déclarer un listener plutôt que d'interroger sans cesse le résultat. Pour cela, on pourra utiliser la méthode addListener() sur l'objet {{domxref("MediaQueryList")}} et définir un observateur qui implémente l'interface {{domxref("MediaQueryListListener")}} :

+ +
var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(handleOrientationChange);
+handleOrientationChange(mql);
+
+ +

Ce code crée la liste de requêtes média qui teste l'orientation (l'objet mql) puis ajoute un listener. Une fois qu'on a ajouté le listener, on l'invoque une fois. Cela permet d'ajuster l'état initial du listener selon l'orientation de l'appareil (sinon, le code aurait considéré que l'appareil était en portrait par défaut même si ce dernier était en paysage, ce qui aurait engendré des incohérences).

+ +

La méthode handleOrientationChange() qu'on implémente ensuite consulte le résultat de la requête et gère le cas où l'orientation est modifiée :

+ +
function handleOrientationChange(mql) {
+  if (mql.matches) {
+    /* La zone d'affichage/viewport est en portrait */
+  } else {
+    /* La zone d'affichage/viewport est en paysage */
+  }
+}
+
+ +

Terminer la réception des notifications

+ +

Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser removeListener() sur l'objet  {{domxref("MediaQueryList") }} :

+ +
mql.removeListener(handleOrientationChange);
+
+ +

Compatibilité des navigateurs

+ +

Interface MediaQueryList

+ + + +

{{Compat("api.MediaQueryList")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/requ\303\252tes_m\303\251dia/utilisation_requ\303\252tes_media_accessibilit\303\251/index.html" "b/files/fr/web/css/requ\303\252tes_m\303\251dia/utilisation_requ\303\252tes_media_accessibilit\303\251/index.html" new file mode 100644 index 0000000000..3ff2740bd8 --- /dev/null +++ "b/files/fr/web/css/requ\303\252tes_m\303\251dia/utilisation_requ\303\252tes_media_accessibilit\303\251/index.html" @@ -0,0 +1,96 @@ +--- +title: Utilisation des requêtes média pour l'accessibilité +slug: Web/CSS/Requêtes_média/Utilisation_requêtes_media_accessibilité +tags: + - '@media' + - Accessibilité + - CSS +translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +--- +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/Requêtes_média/")}}
+ +

Les requêtes média (media queries) peuvent être utilisées afin d'améliorer l'accessibilité d'un site web.

+ +

Réduction de mouvement - prefers-reduced-motion

+ +

Le clignotement ou les animations rapides peuvent poser problème, notamment pour les personnes souffrant de troubles tels que le troubles de déficit de l'attention ou d'epilepsie, de migraines, etc.

+ +

Cette méthode peut également améliorer l'expérience des utilisateurs en économisant l'énergie nécessaire à l'affichage de la page (avec une amélioration sensible pour les appareils avec une batterie faible ou qui ne sont pas particulièrement récents).

+ +

Syntaxe

+ +
+
no-preference
+
Cette valeur indique que l'utilisateur n'a pas indiqué de préférence particulière dans le système.
+
reduce
+
Cette valeur indique que l'utilisateur a signalé au système qu'il préférait une interface minimisant la quantité de mouvement ou d'animation. Idéalement, tous les mouvements qui ne sont pas essentiles doivent être retirés.
+
+ +

Exemple

+ +

Cet exemple illustre comment éviter les animations inutiles en activant une préférence pour réduire les mouvements à l'écran.

+ +

HTML

+ +
<div class="animation">animated box</div>
+
+ +

CSS

+ +
.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +

Mode de contraste élevé{{Non-standard_inline}}

+ +

La caractéristique média -ms-high-contrast est spécifique à Microsoft mais permet d'indiquer si l'application est affichée avec un mode de contraste élevé et, si c'est le cas, quelle variation de couleur est utilisée.

+ +

Cela ne bénéficie pas seulement aux utilisateurs souffrant de troubles de la vision mais aussi aux personnes qui consultent le document avec une lumière ambiante importante (ex. sur un écran faiblement éclairé et en plein soleil).

+ +

Syntaxe

+ +

La caractéristique média -ms-high-contrast peut être définie avec l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
active
+
+

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé, quelle que soit la variation de couleurs.

+
+
black-on-white
+
+

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante noir sur blanc.

+
+
white-on-black
+
+

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante blanc sur noir.

+
+
+ +

Exemple

+ +

Les déclarations suivantes s'appliqueront respectivement aux applications qui sont affichées avec un mode de contraste élevé, quelle que soit la variation de couleur (1), avec une dominante noir sur blanc (2), avec une dominante blanc sur noir (3).

+ +
@media screen and (-ms-high-contrast: active) {
+  /* Toutes les règles appliquées en contraste élevé */
+}
+@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'); }
+}
+
diff --git "a/files/fr/web/css/requ\303\252tes_m\303\251dia/utiliser_les_media_queries/index.html" "b/files/fr/web/css/requ\303\252tes_m\303\251dia/utiliser_les_media_queries/index.html" new file mode 100644 index 0000000000..4dc71551de --- /dev/null +++ "b/files/fr/web/css/requ\303\252tes_m\303\251dia/utiliser_les_media_queries/index.html" @@ -0,0 +1,384 @@ +--- +title: Media queries +slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries +tags: + - Avancé + - CSS + - CSS3 + - Guide + - Media Queries + - Requêtes média + - Responsive Design +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +
{{CSSRef}}
+ +

Les requêtes média (media queries) permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (viewport) par exemple).

+ +

Les requêtes média sont utilisées afin :

+ +
    +
  • D'appliquer certains styles de façon conditionnelle grâce aux règles @ {{cssxref("@media")}} et {{cssxref("@import")}}.
    • +
  • De cibler certains médias pour les éléments {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}} et d'autres éléments HTML grâce à l'attribut media=.
    • +
  • De tester et surveiller l'état d'un média grâce aux méthodes {{domxref("Window.matchMedia()")}} et {{domxref("MediaQueryList.addListener()")}}.
    • +
+ +
+

Note : Les exemples de cet article utilisent @media à des fins d'illustration. Toutefois, la syntaxe est la même pour les différents types de requêtes média.

+
+ +

Syntaxe

+ +

Une requête média se compose d'un type de média optionnel et d'une ou plusieurs expressions de caractéristiques de média. Plusieurs requêtes peuvent être combinées entre elles grâce à des opérateurs logiques. Les requêtes média ne sont pas sensibles à la casse.

+ +

Une requête média vaut true si le type de média correspond à l'appareil utilisé pour l'affichage du document et si toutes les expressions relatives aux caractéristiques sont vraies. Les requêtes qui utilisent des types de média inconnus valent toujours false.

+ +
+

Note : Lorsqu'une feuille de style est attachée à un élément {{HTMLElement("link")}} comportant une requếte média, cette feuille de style sera toujours téléchargée, même si la requête renvoie false. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas true.

+
+ +

Types de média

+ +

Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques not ou only. Par défaut, le type de média utilisé est all.

+ +
+
all
+
Correspond pour tous les appareils.
+
print
+
Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur les média paginés.
+
screen
+
Correspond aux appareils dotés d'un écran.
+
speech
+
Correspond aux outils de synthèse vocale.
+
+ +
Note : Les types de média dépréciés CSS2.1 et Media Queries 3 ont défini plusieurs types additionnels (tty, tv, projection, handheld, braille, embossed, and aural) qui ont ensuite été dépréciés avec Media Queries 4. Ces types ne doivent donc plus être utilisés. Le type aural a été remplacé par le type speech.
+ +

Caractéristiques média (media features)

+ +

Les caractéristiques média décrivent certaines caractéristiques spécifiques de l'agent utilisateur, de l'appareil d'affichage ou de l'environnement. Les expressions de caractéristique média testent leur présence ou leur valeur. Chaque expression de caractéristique doit être entourée de parenthèses.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomRésuméNotes
{{cssxref("@media/width","width")}}La largeur de la zone d'affichage (viewport)
{{cssxref("@media/height","height")}}La hauteur de la zone d'affichage
{{cssxref("@media/aspect-ratio","aspect-ratio")}}Le rapport largeur/hauteur de la zone d'affichage
{{cssxref("@media/orientation","orientation")}}L'orientation la zone d'affichage
{{cssxref("@media/resolution","resolution")}}La densité de pixel pour l'appareil d'affichage
{{cssxref("@media/scan","scan")}}Le processus de scan de l'appareil d'affichage
{{cssxref("@media/grid","grid")}}Le type d'écran de l'appareil : matriciel ou grille ?
{{cssxref("@media/update-frequency","update")}}La fréquence de modification du contenu par l'appareil d'affichageAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/overflow-block","overflow-block")}}La façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage selon l'axe de blocAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/overflow-inline","overflow-inline")}}La possibilité de faire défiler (scroll) le contenu qui dépasse de la zone d'affichage sur l'axe en ligneAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/color","color")}}Le nombre de bits pour chaque composante de couleur pour l'appareil d'affichage (ou 0 si l'appareil ne gère pas les couleurs)
{{cssxref("@media/color-gamut","color-gamut")}}Un intervalle approximatif des couleurs prises en charge par l'agent utilisateur et l'appareil d'affichageAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/color-index","color-index")}}Le nombre d'éléments dans le tableau des couleurs de l'appareil d'affichage (ou 0 si l'appareil ne dispose pas d'un tel tableau)
{{cssxref("@media/display-mode","display-mode")}}Le mode d'affichage de l'application, tel qu'indiqué par la propriété display du manifesteDéfinie dans la spécification pour les manifestes des applications web.
{{cssxref("@media/monochrome","monochrome")}}Le nombre de bits par pixel pour le frame buffer monochrome de l'appareil d'affichage ou 0 si l'appareil n'est pas monochrome
{{cssxref("@media/inverted-colors","inverted-colors")}}L'inversion (ou non) des couleurs par l'agent utilisateur ou le système d'exploitationReportée au niveau 5 du module de spécification Media Queries.
{{cssxref("@media/pointer","pointer")}}La présence d'un appareil de pointage comme mécanisme de saisie principal et sa précisionAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/hover","hover")}}La capacité du mécanisme de saisie principal à survoler les élémentsAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/any-pointer","any-pointer")}}La présence d'un appareil de pointage parmi les mécanismes de saisie et sa précisionAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/any-hover","any-hover")}}La capacité d'un des mécanismes de saisie à survoler les élémentsAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/light-level","light-level")}}Le niveau de luminosité de l'environnementAjoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}L'utilisateur préfère que la quantité de mouvement sur la page soit réduite.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}L'utilisateur préfère que la transparence utilisée sur la page soit réduite.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-contrast", "prefers-contrast")}}L'utilisateur préfère que la contraste soit augmenté ou réduit entre des couleurs proches.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}L'utilisateur préfère utiliser un thème clair ou un thème sombre.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/forced-colors", "forced-colors")}}Détecte si l'agent utilisateur restreint la palette de couleurs.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/scripting","scripting")}}La disponibilité des fonctions de script (JavaScript par exemple)Reportée au niveau 5 du module de spécification Media Queries.
{{cssxref("@media/device-width","device-width")}} {{obsolete_inline}}La largeur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/device-height","device-height")}} {{obsolete_inline}}La hauteur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/device-aspect-ratio","device-aspect-ratio")}} {{obsolete_inline}}Le rapport largeur/hauteur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
+ +

Opérateurs logiques

+ +

Les opérateurs logiques not, and et only peuvent être utilisés afin de construire une requête média complexe. Il est aussi possible de combiner plusieurs requêtes média en les séparant par des virgules.

+ +

and

+ +

L'opérateur and permet de combiner plusieurs requêtes média en une seule. Pour que la requête résultante soit vraie, il faut que chacune des sous-requêtes soit vraie. Cet opérateur est également utilisé afin de relier des caractéristiques média avec des types de média.

+ +

not

+ +

L'opérateur not est utilisé afin d'obtenir le résultat opposé d'une requête média (il renvoie true si l'opérande renvoie false). S'il est utilisé dans une liste de requêtes séparées par des virgules, il ne nie que la requête sur laquelle il est appliqué. Si l'opérateur not est utilisé, la requête doit nécessairement contenir un type de média.

+ +
+

Note : Pour la spécification de niveau 3, l'opérateur not ne peut pas être utilisé afin de prendre l'opposé d'une expression de caractéristique de média, il ne peut servir qu'à l'échelle d'une requête média entière.

+
+ +

only

+ +

L'opérateur only est utilisé afin d'appliquer un style uniquement si l'intégralité de la requête est vérifiée. Il permet d'empêcher les anciens navigateurs d'appliquer les styles concernés. Si on utilise pas only, un ancien navigateur interprètera screen and (max-width: 500px) comme screen uniquement (appliquant ainsi le style à tous les écrans). Si l'opérateur only est utilisé, la requête doit nécessairement contenir un type de média.

+ +

, (virgule)

+ +

Les virgules permettent de combiner plusieurs requêtes en une. Chaque requête est traitée séparément. Autrement dit, si une des requêtes de la liste renvoie true, toute la requête combinée renverra true. En ce sens, l'opérateur , agit comme un opérateur booléen or.

+ +

Cibler des types de média

+ +

Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possibles d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :

+ +
@media print { ... }
+ +

Il est possible de cibler plusieurs types à la fois. La règle suivante permet de cibler les écrans et les appareils d'impression :

+ +
@media screen, print { ... }
+ +

Pour une liste complète des types de média, voir ci-avant. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.

+ +

Cibler des caractéristiques média

+ +

Les caractéristiques média décrivent les caractéristiques spécifiques d'un agent utilisateur, d'un appareil d'affichage ou de l'environnement. On peut ainsi cibler différents styles pour les écrans larges, pour les ordinateurs qui disposent d'une souris ou pour les appareils utilisés dans une faible luminosité. Dans l'exemple qui suit, on a une requête qui vérifie si le mécanisme de saisie principal de l'appareil peut survoler les éléments :

+ +
@media (hover: hover) { ... }
+ +

De nombreuses caractéristiques média sont des caractéristiques portant sur un intervalle et peuvent être préfixées par min- ou max- afin d'exprimer des seuils de valeurs. Par exemple, la requête suivante permet d'appliquer des styles à condition que la largeur de la zone d'affichage (viewport) soit inférieure à 1250px :

+ +
@media (max-width: 1250px) { ... }
+ +
+

Selon la spécification du W3C, les barres de défilement font parties des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.

+
+ +

Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou none pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :

+ +
@media (color) { ... }
+ +

Si une caractéristique ne s'applique pas à l'appareil, les expressions utilisant cette caractéristique renverront false. Ainsi, la requête suivante aura toujours la valeur false car aucun appareil de synthèse vocale ne possède de caractéristique relative à ses proportions d'écran :

+ +
@media speech and (aspect-ratio: 11/5) { ... }
+ +

Pour plus d'exemples, voir les pages de référence de chacune de ces caractéristiques depuis le tableau ci-dessus.

+ +

Créer des requêtes média complexes

+ +

Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiiliser les opérateurs logiques : not, and, only et la virgule (,) afin de combiner plusieurs requêtes média.

+ +

Dans l'exemple précédent, on a utilisé l'opérateur and afin de combiner un type de média et une caractéristique média. Cet opérateur peut également servir à assembler plusieurs requêtes média pour en former la conjonction logique. L'opérateur not permet d'obtenir la négation d'une requête média tandis que l'opérateur only empêche les anciens navigateurs d'appliquer les styles qu'une requête contient.

+ +
+

Note : Dans la plupart des cas, le type de média all est utilisé par défaut si aucun autre type n'est fourni. Toutefois, lorsqu'on utilise les opérateurs not ou only, il est nécessaire de fournir un type de média explicite.

+
+ +

Combiner plusieurs types ou caractéristiques

+ +

Le mot-clé and permet de combiner une caractéristique média avec un type de média ou avec d'autres caractéristiques média. L'exemple suivant permet de restreindre l'application d'un style aux appareils orientés en mode paysage et dont la largeur mesure au moins 30ems :

+ +
@media (min-width: 30em) and (orientation: landscape) { ... }
+ +

Si on souhaite restreindre ces règles aux écrans, on pourra ajouter une clause avec le type de média screen :

+ +
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
+ +

Tester plusieurs requêtes

+ +

La virgule peut être utilisée afin de créer une disjonction (un OU logique) sur différentes clauses (types de média, caractéristiques ou états). Dans l'exemple qui suit, les styles de la requête sont appliqués si l'appareil possède une hauteur supérieure ou égale à 680 pixels ou si l'écran est en mode portrait :

+ +
@media (min-height: 680px), screen and (orientation: portrait) { ... }
+ +

Avec cet exemple, si l'utilisateur utilise une imprimante et que la page mesure 800 pixels de haut, la requête média aurait été vérifiée. Il en aurait été de même si l'utilisateur avait utilisé un smartphone avec une zone d'affichage haute de 480 pixels en portrait car la deuxième clause aurait renvoyée true.

+ +

Opérer une négation

+ +

Le mot-clé not permet d'inverser le résultat d'une requête. Il inversera uniquement la requête sur laquelle il est appliqué (et non la liste des requêtes s'il est utilisé au sein de requêtes séparées par des virgules). Le mot-clé not ne peut pas être utilisé afin d'inverser une caractéristique média, il peut uniquement être utilisé pour une requête média complète. Dans la requête qui suit, l'opérateur not est évalué en dernier :

+ +
@media not all and (monochrome) { ... }
+
+ +

La requête précédente est donc équivalente à :

+ +
@media not (all and (monochrome)) { ... }
+
+ +

Mais elle n'est pas équivalente à :

+ +
@media (not all) and (monochrome) { ... }
+ +

De même :

+ +
@media not screen and (color), print and (color) { ... }
+
+ +

sera évaluée comme :

+ +
@media (not (screen and (color))), print and (color) { ... }
+ +

Améliorer la compatibilité avec les anciens navigateurs

+ +

Le mot-clé only empêche les navigateurs qui ne prennent pas en charge les requêtes média avec les caractéristiques média d'appliquer les styles concernés. Cet opérateur n'a aucun effet pour les navigateurs modernes.

+ +
@media only screen and (color) { ... }
+
+ +

Améliorations syntaxiques avec la spécification de niveau 4

+ +

La spécification de niveau 4 pour les requêtes média ajoute des améliorations syntaxiques pour les requêtes média qui portent sur un intervalle (par exemple les critères de largeur et de hauteur). On peut par exemple utiliser le préfixe max- pour les largeurs et écrire :

+ +
@media (max-width: 30em) { ... }
+ +

Avec les requêtes média de niveau 4, on peut écrire :

+ +
@media (width <= 30em) { ... }
+ +

Si on utilise min- et max- conjointement, on peut tester l'appartenance d'une valeur à un intervalle :

+ +
@media (min-width: 30em) and (max-width: 50em) { ... }
+ +

Avec les requêtes média de niveau 4, on peut écrire :

+ +
@media (30em <= width <= 50em ) { ... }
+
+ +

Les requêtes média de niveau 4 permettent également d'utiliser une logique booléenne avec les opérateurs and, not et or.

+ +

Tester l'absence d'une caractéristique avec not

+ +

On peut utiliser l'opérateur not() autour d'une caractéristique média afin de tester l'absence de cette caractéristique. Ainsi, on peut not(hover) pour cibler les appareils qui ne permettent pas le survol d'un élément :

+ +
@media (not(hover)) { ... }
+ +

Tester plusieurs caractéristiques avec or

+ +

Il est possible d'utiliser l'opérateur or pour tester une correspondance sur plus d'une caractéristique. Dans l'exemple suivant, on cible les appareils qui ont un affichage monochrome (not (color)) ou qui permettent de survoler les éléments (hover) :

+ +
@media (not (color)) or (hover) { ... }
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/resize/index.html b/files/fr/web/css/resize/index.html new file mode 100644 index 0000000000..3b215af7ef --- /dev/null +++ b/files/fr/web/css/resize/index.html @@ -0,0 +1,153 @@ +--- +title: resize +slug: Web/CSS/resize +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/resize +--- +
{{CSSRef}}
+ +

La propriété resize permet de contrôler le caractère redimensionnable d'un élément et notamment la direction dans laquelle celui-ci peut être redimensionné.

+ +
{{EmbedInteractiveExample("pages/css/resize.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* Valeurs globales */
+resize: inherit;
+resize: initial;
+resize: unset;
+
+ +

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

+ +

Valeurs

+ +
+
none
+
L'élément n'offre aucune méthode à l'utilisateur pour que celui-ci le redimensionne.
+
both
+
L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner, horizontalement et verticalement.
+
horizontal
+
L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner horizontalement (pas de redimensionnement vertical).
+
vertical
+
L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner verticalement (pas de redimensionnement horizontal).
+
block {{experimental_inline}}
+
Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du bloc.
+
inline {{experimental_inline}}
+
Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.
+
+ +
Note : resize ne s'applique pas aux blocs dont la propriété {{cssxref("overflow")}} vaut visible.
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Désactiver le redimensionnement des éléments textarea

+ +

CSS

+ +

Par défaut, les éléments {{HTMLElement("textarea")}} peuvent être redimensionnés. Ce comportement peut être modifié grâce à ce fragment CSS :

+ +
textarea.exemple {
+  resize: none;
+}
+
+ +

HTML

+ +
<textarea class="exemple">Saisir du texte ici.</textarea>
+ +

Résultat

+ +

{{EmbedLiveSample("Désactiver_le_redimensionnement_des_éléments_textarea","200","100")}}

+ +

Utiliser resize sur des éléments quelconques

+ +

La propriété resize peut être utilisée afin de pouvoir redimensionner n'importe quel élément. Dans l'exemple qui suit, on a une boîte {{HTMLElement("div")}} redimensionnable qui contient un paragraphe (({{HTMLElement("p")}}) lui-même redimensionnable) :

+ +

CSS

+ +
.redimensionnable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}
+
+ +

HTML

+ +
<div class="redimensionnable">
+  <p class="redimensionnable">
+    Ce paragraphe peut être redimensionné car la propriété
+    CSS resize vaut 'both' sur cet élément.
+  </p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Utiliser_resize_sur_des_éléments_quelconques","450","450")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS Logical Properties', '#resize', 'resize')}}{{Spec2('CSS Logical Properties')}}Ajout des valeurs block et inline.
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.resize")}}

+ +

Voir aussi

+ +
    +
  • {{HTMLElement("textarea")}}
    • +
diff --git a/files/fr/web/css/resolution/index.html b/files/fr/web/css/resolution/index.html new file mode 100644 index 0000000000..4af732acb5 --- /dev/null +++ b/files/fr/web/css/resolution/index.html @@ -0,0 +1,127 @@ +--- +title: +slug: Web/CSS/resolution +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/resolution +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <resolution>, utilisé dans les media queries, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.

+ +

Les dimensions font référence aux unités CSS (un pixel CSS, un centimètre CSS, etc.) et non aux dimensions physiques.

+ +

Syntaxe

+ +

Une valeur de ce type sera composée d'un nombre (une valeur de type {{cssxref("<number>")}}) immédiatement suivi d'une unité de résolution (dpi, dpcm, …). Comme pour les autres dimensions CSS, il n'y a aucun espace entre la valeur numérique et l'unité.

+ +

Bien que toutes les unités représentent la même chose pour la valeur 0, l'unité ne peut être omise dans ce cas puisque ce n'est pas une donnée de type {{cssxref("<length>")}} : 0 est invalide et ne représente pas 0dpi, 0dpcm, ni 0dppx.

+ +

Unités

+ +
+
dpi
+
Cette unité représente le nombre de points par pouce. Un écran compte habituellement 72 ou 96 ppi (dpi), tandis qu'un document imprimé en compte généralement un nombre beaucoup plus élevé. Puisque 1 pouce équivaut à 2,54 cm, 1 dpi ≈ 0,39 dpcm.
+
dpcm
+
Cette unité représente le nombre de points par centimètre. Puisque 1 pouce équivaut à 2.54 cm, 1dpcm ≈ 2,54 dpi.
+
dppx
+
Cette unité représente le nombre de points par unité CSS px. Puisque le ratio entre les unités CSS in et CSS px vaut 1:96, 1 dppx est équivalent à 96 dpi, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par {{cssxref("image-resolution")}}.
+
x
+
Un alias pour dppx.
+
+ +
+

Note : Bien que le nombre 0 représente la même mesure pour ces différentes unités. Si la valeur est écrite sans unité, elle sera considérée comme invalide. Autrement dit, 0 est invalide et ne représente pas 0dpi, 0dpcm ou 0dppx.

+
+ +

Exemples

+ +

Usage correct

+ +

Voici quelques exemples d'utilisation correcte de données de type <resolution> :

+ +
96dpi                                              Usage correct : un {{cssxref("<number>")}} (ici un {{cssxref("<integer>")}}) suivi d'une unité.
+@media print and (min-resolution: 300dpi) { ... }  Usage correct dans le contexte d'une media query.
+
+ +

Usages incorrects

+ +
72 dpi    Incorrect : les espaces ne sont pas acceptés entre le {{cssxref("<number>")}} et l'unité.
+ten dpi   Incorrect : seules des expressions numériques sont acceptées.
+0         Incorrect : l'unité ne peut être omise que pour l'expression de la valeur 0 de type {{cssxref("<length>")}}.
+
+ +

Exemple appliqué

+ +

CSS

+ +
/* Saurez-vous trouver votre résolution en dpi */
+/* via l'exemple live ?                        */
+@media screen and (min-resolution: 100dpi) {
+  .exemple {
+    background-color: palegreen;
+  }
+}
+
+@media screen and (max-resolution: 99dpi) {
+  .exemple {
+    background-color: orange;
+  }
+}
+
+ +

HTML

+ +
<p class="exemple">
+  À ces mots le Chapelier ouvrit de grands yeux ; mais
+  il se contenta de dire : « Pourquoi une pie
+  ressemble-t-elle à un pupitre ? »
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_appliqué","200","200")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#resolution', '<resolution>')}}{{Spec2('CSS4 Values')}}Ajout de l'unité x.
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}Ajout de l'unité dppx.
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.resolution")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/revert/index.html b/files/fr/web/css/revert/index.html new file mode 100644 index 0000000000..2ddf16c775 --- /dev/null +++ b/files/fr/web/css/revert/index.html @@ -0,0 +1,200 @@ +--- +title: revert +slug: Web/CSS/revert +tags: + - CSS + - Cascade + - Mot-clé + - Reference +translation_of: Web/CSS/revert +--- +
{{CSSRef}}
+ +

Le mot-clé revert permet de remonter la cascade afin que la propriété puisse prendre la valeur qui aurait été utilisée sans mise en forme particulière (la valeur qu'elle aurait eu sans mise en forme appliquée par la feuille de style de l'auteur, de l'utilisateur ou de l'agent utilisateur). Ainsi, si la propriété hérite de son parent, elle prendra la valeur héritée et sinon la valeur par défaut de l'agent utilisateur (ou de la feuille de style utilisateur).

+ +

Cette valeur peut être utilisée pour n'importe quelle propriété CSS, y compris la propriété raccourcie {{cssxref("all")}}.

+ +

La remontée de la cascade sera plus ou moins prononcée selon l'endroit où est utilisé revert :

+ +
    +
  • Si revert est utilisé dans une feuille de style d'un site, ce sera la valeur définie dans la feuille de style de l'utilisateur qui sera utilisée ou celle de l'agent utilisateur par défaut sinon.
    • +
  • Si revert est utilisé dans une feuille de style utilisateur ou si le style a été appliqué par l'utilisateur, revert entraînera l'utilisation de la valeur par défaut de l'agent utilisateur.
    • +
  • Si revert est utilisé comme style par défaut de l'agent utilisateur, il aura un comportement équivalent à {{cssxref("unset")}}
    • +
+ +

Le mot-clé revert fonctionne comme unset pour de nombreux cas. Les seules différences observables se produisent quand les valeurs sont définies par le navigateur ou dans une feuille de style utilisateur.

+ +

revert n'aura pas d'effet sur les éléments fils de l'élément ciblé (mais supprimera l'effet d'une règle du parent qui s'appliquerait indirectement aux enfants).

+ +
+

Note : revert est une simple valeur, il est toujours possible de la surcharger par une autre avec une règle d'une spécificité supérieure.

+
+ +
+

Note : Le mot-clé revert est différent de {{cssxref("initial")}} et ne doit pas être confondu avec ce dernier. {{cssxref("initial")}} utilise la valeur initiale, définie pour chaque propriété par les spécifications CSS. En revanche, les feuilles de style des agents utilisateurs définissent des valeurs par défaut selon les sélecteurs CSS. Par exemple, la valeur initiale de {{cssxref("display")}} est inline mais un agent utilisateur pourra définir les valeurs par défaut suivante dans sa feuille de style : block pour {{HTMLElement("div")}}, table pour {{HTMLElement("table")}} etc.

+
+ +

Exemples

+ +

Exemple simple

+ +

HTML

+ +
<section>
+  <p>Voici une section !</p>
+
+  <aside class="widget">
+    <p>Et un petit widget.</p>
+  </aside>
+</section>
+
+ +

CSS

+ +
section p {
+  color: blue;
+  font-family: sans-serif;
+  font-weight: bold;
+}
+
+.widget p {
+  all: revert;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple_simple')}}

+ +

revert et unset

+ +

Bien que revert et unset soient semblables, il y a quelques différences pour certaines propriétés de certains éléments.

+ +

Dans l'exemple qui suit, on indique une valeur spécifique pour font-weight au niveau de la feuille de style globale sur laquelle on revient avec unset et revert. unset conservera un texte normal car c'est la valeur initiale pour font-weight tandis que revert rendra le texte en gras car c'est la valeur par défaut pour les titres pour la plupart des navigateurs.

+ +

CSS

+ +
h3 {
+  font-weight: normal;
+  color: blue;
+}
+ +

HTML

+ +
<h3 style="font-weight: unset; color: unset;">
+  Ceci aura toujours font-weight: normal mais color: black
+</h3>
+<p>
+  Juste un peu de texte
+</p>
+<h3 style="font-weight: revert; color: revert;">
+  Ceci devrait avoir font-weight: bold (la valeur originale)
+  et color: black
+</h3>
+<p>
+ Juste un peu de texte
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample('revert_et_unset')}}

+ +

all

+ +

Revenir sur toutes les valeurs peut s'avérer utile lorsqu'on veut annuler l'effet de modifications lourdes. Si on poursuit avec l'exemple précédent, plutôt que de revenir séparément sur font-weight et color, on utilise all à la place.

+ +

CSS

+ +
h3 {
+  font-weight: normal;
+  color: blue;
+  border-bottom: 1px solid grey;
+}
+ +

HTML

+ +
<h3>
+  Un style spécifique
+</h3>
+<p>
+  Juste un peu de texte
+</p>
+<h3 style="all: revert">
+  Retour aux réglages par défaut pour toutes les propriétés
+</h3>
+<p>
+  Juste un peu de texte
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample('all')}}

+ +

Revenir sur une propriété du parent

+ +

Utiliser revert annule la valeur d'une propriété pour le seul élément ciblé. Pour illustrer ce principe, nous utiliserons une couleur verte pour une section et rouge pour un paragraphe.

+ +

CSS

+ +
section {
+  color: darkgreen;
+}
+p {
+  color: red;
+}
+section.with-revert {
+  color: revert;
+}
+
+ +

HTML

+ +
<section>
+  <h3>Ce texte sera vert foncé</h3>
+  <p>Ce texte sera rouge.</p>
+  Ce texte sera aussi vert.
+</section>
+<section class="with-revert">
+  <h3>Ce texte sera noir</h3>
+  <p>Ce texte sera rouge.</p>
+  Ce texte sera aussi noir.
+</section>
+ +

On voit ici que le paragraphe reste en rouge malgré l'utilisation de revert pour la section. On voit également que le titre et le nœud texte de la deuxième section sont en noir : comme si section { color: darkgreen } n'existait pas pour cette section.

+ +

Résultat

+ +

{{EmbedLiveSample('Revenir_sur_une_propriété_du_parent')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS4 Cascade', '#default', 'revert')}}{{Spec2('CSS4 Cascade')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.global_keywords.revert")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("initial")}}
    • +
  • {{cssxref("inherit")}}
    • +
  • {{cssxref("unset")}}
    • +
  • La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou par défaut.
    • +
diff --git a/files/fr/web/css/right/index.html b/files/fr/web/css/right/index.html new file mode 100644 index 0000000000..f0dc4cbc85 --- /dev/null +++ b/files/fr/web/css/right/index.html @@ -0,0 +1,152 @@ +--- +title: right +slug: Web/CSS/right +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/right +--- +
{{CSSRef}}
+ +

La propriété right définit, en partie, la position des éléments positionnés. La propriété right n'a aucun effet sur les éléments non-positionnés.

+ +
{{EmbedInteractiveExample("pages/css/right.html")}}
+ + + +

L'effet de la propriété right dépend de la façon dont l'élément est positionné (c'est-à-dire de la valeur de la propriété {{cssxref("position")}}) :

+ +
    +
  • Quand position vaut absolute ou fixed, right indique la distance entre le bord droit de l'élément et le bord droit du bloc englobant.
    • +
  • Quand position vaut relative, right indique la distance de laquelle le bord droit de l'élément est décalé vers la gauche par rapport à sa position normale.
    • +
  • Quand position vaut sticky, right se comporte comme relative lorsque l'élément est à l'intérieur de la zone d'affichage (viewport) et comme fixed lorsque l'élément est en dehors de la zone d'affichage.
    • +
  • Quand position vaut static, right n'a aucun effet.
    • +
+ +

Lorsque les propriétés right et {{cssxref("left")}} sont définies toutes les deux et que l'élément ne peut pas s'étendre afin de satisfaire ces deux contraintes, la position de l'élément est sur-définie. Dans ce cas, la valeur de {{cssxref("left")}} est prioritaire lorsque le contenant est disposé en lecture de gauche à droite (la valeur calculée de right sera -left), et la valeur de right est prioritaire lorsque le contenant est disposé en lecture de droite à gauche (la valeur calculée de {{cssxref("left")}} sera -right).

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+right: 3px;
+right: 2.4em;
+
+/* Valeurs de pourcentage */
+/* Type <percentage>      */
+right: 10%;
+
+/* Valeur avec un mot-clé */
+right: auto;
+
+/* Valeurs globales */
+right: inherit;
+right: initial;
+right: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Une valeur de type {{cssxref("<length>")}} qui peut être négative, positive ou nulle et représente : +
    +
  • pour les éléments à positionnement absolu : la distance jusqu'au bord droit du bloc englobant.
    • +
  • pour les éléments à positionnement relatif : le décalage à droite que l'élément subit par rapport à sa position dans le flux normal s'il n'était pas positionné.
    • +
+
+
<percentage>
+
Une valeur de type {{cssxref("<percentage>")}} représentant le pourcentage de la largeur du bloc englobant.
+
auto
+
Un mot-clé qui représente : +
    +
  • pour les éléments à positionnement absolu : la position de l'élément fondé sur la propriété {{cssxref("left")}} et considère width: auto comme une largeur fondée sur le contenu ; ou, si left vaut aussi auto, l'élément serait positionné horizontalement comme s'il avait été un élément statique.
    • +
  • pour les éléments à positionnement relatif : le décalage à droite de l'élément par rapport à sa position originale fondé sur la propriété {{cssxref("left")}} ou, si left vaut également auto, aucun décalage.
    • +
+
+
inherit
+
Un mot-clé indiquant que la valeur est identique à la valeur calculée de l'élément parent (qui peut ne pas être sont bloc contenant). Cette valeur calculée est manipulée comme si elle était de type {{cssxref("<length>")}}, {{cssxref("<percentage>")}} ou comme si elle était le mot-clé auto.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#exemple_3 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFC7E4;
+  position: relative;
+  top: 20px;
+  left: 20px;
+}
+
+#exemple_4 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFD7C2;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+}
+ +

HTML

+ +
<div id="exemple_3">Exemple 3</div>
+<div id="exemple_4">Exemple 4</div>
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}{{Spec2('CSS3 Transitions')}}Définit right comme pouvant être animée.
{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}{{Spec2('CSS3 Positioning')}}Description du comportement pour le comportement adhérent (sticky).
{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.right")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("position")}},
    • +
  • {{cssxref("left")}},
    • +
  • {{cssxref("top")}},
    • +
  • {{cssxref("bottom")}}
    • +
diff --git a/files/fr/web/css/rotate/index.html b/files/fr/web/css/rotate/index.html new file mode 100644 index 0000000000..66b5d0819b --- /dev/null +++ b/files/fr/web/css/rotate/index.html @@ -0,0 +1,126 @@ +--- +title: rotate +slug: Web/CSS/rotate +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/rotate +--- +
{{CSSRef}}{{seecompattable}}
+ +

La propriété rotate permet d'indiquer des rotations individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour transform.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+rotate: none;
+
+/* Valeur angulaire */
+rotate: 90deg;
+rotate: 0.25turn;
+rotate: 1.57rad;
+
+/* Un axe x, y, z et l'angle associé */
+rotate: x 90deg;
+rotate: y 0.25turn;
+rotate: z 1.57rad;
+
+/* Un vector et l'angle associé */
+rotate: 1 1 1 90deg;
+ +

Valeurs

+ +
+
Valeur angulaire
+
Une valeur {{cssxref("<angle>")}} qui indique l'angle à utiliser, autour de l'axe Z, pour tourner les éléments. Cela est équivalent à la fonction rotate().
+
Le nom de l'axe et l'angle associé
+
Le nom de l'axe par rapport auquel on souhaite effectuer la rotation ("x", "y" ou "z"), puis une valeur {{cssxref("<angle>")}} qui indique l'angle à appliquer pour la rotation. Cela est équivalent à l'une des fonctions rotateX()/rotateY()/rotateZ().
+
Un vecteur et l'angle associé
+
Trois nombres (valeurs {{cssxref("<number>")}}) qui représentent une vecteur centré sur l'origine qui définit la ligne autour de laquelle on souhaite faire tourner l'élément puis une valeur {{cssxref("<angle>")}} qui indique l'angle de rotation. Cela est équivalent à la fonction rotate3d().
+
none
+
Cette valeur indique qu'aucune rotation ne devrait être appliquée.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <p class="rotate">Rotation</p>
+</div>
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.rotate {
+  transition: rotate 1s;
+}
+
+div:hover .rotate {
+  rotate: 1 -0.5 1 180deg;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.rotate")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref('translate')}}
    • +
  • {{cssxref('scale')}}
    • +
  • {{cssxref('transform')}}
    • +
diff --git a/files/fr/web/css/row-gap/index.html b/files/fr/web/css/row-gap/index.html new file mode 100644 index 0000000000..b4f88ab37e --- /dev/null +++ b/files/fr/web/css/row-gap/index.html @@ -0,0 +1,169 @@ +--- +title: row-gap (grid-row-gap) +slug: Web/CSS/row-gap +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/row-gap +--- +
{{CSSRef}}
+ +

La propriété row-gap définit la taille des gouttières entre les lignes d'un élément.

+ +
{{EmbedInteractiveExample("pages/css/grid-row-gap.html")}}
+ + + +
+

Note : La propriété {{cssxref("grid-row-gap")}} a d'abord été définie avec le module de spécification CSS Grid Layout. Cette propriété préfixée a ensuite été remplacée par row-gap dans le module CSS Alignment afin d'être généralisée à d'autres modes de disposition. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.

+
+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <largeur>      */
+row-gap: 20px;
+row-gap: 1em;
+row-gap: 3vmin;
+row-gap: 0.5cm;
+
+/* Valeurs proportionnelles */
+/* Type <pourcentage> */
+row-gap: 10%;
+
+/* Valeurs globales */
+row-gap: inherit;
+row-gap: initial;
+row-gap: unset;
+
+ +

Valeurs

+ +
+
<pourcentage-largeur>
+
La largeur de la « gouttière » placée entre les lignes de la grille. Les valeurs exprimées en pourcentages sont relatives aux dimensions de l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Disposition flexible

+ +

{{SeeCompatTable}}

+ +

CSS

+ +
#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  row-gap: 20px;
+}
+
+#flexbox > div {
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+}
+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Disposition_flexible', "auto", "120px")}}

+ +

Disposition sur une grille

+ +

CSS

+ + + +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(3, 1fr);
+  row-gap: 20px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Disposition_sur_une_grille', 'auto', 120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}}{{Spec2("CSS3 Box Alignment")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

Prise en charge pour les dispositions flexibles

+ +

{{Compat("css.properties.row-gap.flex_context")}}

+ +

Prise en charge pour les grilles

+ +

{{Compat("css.properties.row-gap.grid_context")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/ruby-align/index.html b/files/fr/web/css/ruby-align/index.html new file mode 100644 index 0000000000..589f6a46a6 --- /dev/null +++ b/files/fr/web/css/ruby-align/index.html @@ -0,0 +1,146 @@ +--- +title: ruby-align +slug: Web/CSS/ruby-align +tags: + - CSS + - Propriété + - Reference + - Ruby +translation_of: Web/CSS/ruby-align +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété ruby-align définit la façon dont les éléments ruby sont distribués autour du texte de base.

+ +
/* Valeur avec un mot-clé */
+ruby-align: start;
+ruby-align: center;
+ruby-align: space-between;
+ruby-align: space-around;
+
+/* Valeurs globales */
+ruby-align: inherit;
+ruby-align: initial;
+ruby-align: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
start
+
Un mot-clé indiquant que les notations ruby sont alignées avec le début du texte de base.
+
center
+
Un mot-clé indiquant que les notations ruby sont alignées avec le milieu du texte de base.
+
space-between
+
Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby.
+
space-around
+
Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby et autour d'eux.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Ce fragment HTML sera affiché différemment en fonction des valeurs de ruby-align :

+ +
<ruby>
+  <rb>Un long texte pour tester</rb>
+  <rp>（</rp><rt>Un petit ruby</rt><rp>）</rp>
+</ruby>
+
+ +

Alignement par rapport au début du texte de base

+ + + +
ruby {
+  ruby-align: start;
+}
+ +

Avec ce CSS, on obtient le résultat suivant :

+ +

{{EmbedLiveSample("Alignement_par_rapport_au_début_du_texte_de_base", 180, 40)}}

+ +

Alignement par rapport au centre

+ + + +
ruby {
+  ruby-align: center;
+}
+ +

Avec ce CSS, on obtient le résultat suivant :

+ +

{{EmbedLiveSample("Alignement_par_rapport_au_centre", 180, 40)}}

+ +

Un espace supplémentaire entre les éléments ruby

+ + + +
ruby {
+  ruby-align: space-between;
+}
+ +

Avec ce CSS, on obtient le résultat suivant :

+ +

{{EmbedLiveSample("Un_espace_supplémentaire_entre_les_éléments_ruby", 180, 40)}}

+ +

Un espace supplémentaire entre et autour des éléments ruby

+ +
ruby {
+  ruby-align: space-around;
+}
+ +

Avec ce CSS, on obtient le résultat suivant :

+ +

{{EmbedLiveSample("Un_espace_supplémentaire_entre_et_autour_des_éléments_ruby", 180, 40)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}}{{Spec2('CSS3 Ruby')}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.ruby-align")}}

+ +

Voir aussi

+ +
    +
  • Les éléments HTML liés aux notations Ruby : {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} et {{HTMLElement("rtc")}}.
    • +
  • Les propriétés CSS liées aux notations Ruby : {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.
    • +
diff --git a/files/fr/web/css/ruby-position/index.html b/files/fr/web/css/ruby-position/index.html new file mode 100644 index 0000000000..bb0ec85090 --- /dev/null +++ b/files/fr/web/css/ruby-position/index.html @@ -0,0 +1,117 @@ +--- +title: ruby-position +slug: Web/CSS/ruby-position +tags: + - CSS + - Propriété + - Reference + - Ruby +translation_of: Web/CSS/ruby-position +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété ruby-position définit la position d'un élément ruby par rapport à son élément de base. L'élément ruby peut ainsi être positionné au-dessus de l'élément (over), en-dessous (under) ou entre les caractères, sur leur droite (inter-character).

+ +
/* Valeurs avec un mot-clé */
+ruby-position: over;
+ruby-position: under;
+ruby-position: inter-character;
+
+/* Valeurs globales */
+ruby-position: inherit;
+ruby-position: initial;
+ruby-position: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
over
+
Un mot-clé qui indique que les annotations ruby doivent être placée au-dessus du texte pour les scripts horizontaux et à droite pour les scripts verticaux.
+
under
+
Un mot-clé qui indique que les annotations ruby doivent être placés sous le texte pour les scripts horizontaux et à gauche pour les scripts verticaux.
+
inter-character
+
Un mot-clé qui indique que les annotations ruby doivent être placées entre les différents caractères.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Ce fragment HTML rendra un résultat différent pour chaque valeur de ruby-position :

+ +
<ruby>
+  <rb>超電磁砲</rb>
+  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
+</ruby>
+
+ +

Au-dessus du texte

+ + + +
ruby {
+    ruby-position:over;
+}
+ +

On obtiendra le résultat suivant :

+ +

{{EmbedLiveSample("Au-dessus_du_texte", 100, 40)}}

+ +

En-dessous du texte

+ + + +
ruby {
+    ruby-position:under;
+}
+ +

On obtiendra le résultat suivant :

+ +

{{EmbedLiveSample("En-dessous_du_texte", 100, 40)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Ruby', '#rubypos', 'ruby-position')}}{{Spec2('CSS3 Ruby')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.ruby-position")}}

+ +

Voir aussi

+ +
    +
  • Les éléments HTML à propos de Ruby : {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} et {{HTMLElement("rtc")}}.
    • +
  • Les propriétés CSS à propos de Ruby : {{cssxref("ruby-align")}}, {{cssxref("ruby-merge")}}.
    • +
diff --git "a/files/fr/web/css/r\303\250gles_@/index.html" "b/files/fr/web/css/r\303\250gles_@/index.html" new file mode 100644 index 0000000000..e298cf9028 --- /dev/null +++ "b/files/fr/web/css/r\303\250gles_@/index.html" @@ -0,0 +1,82 @@ +--- +title: Règles @ +slug: Web/CSS/Règles_@ +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/At-rule +--- +
{{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/scale/index.html b/files/fr/web/css/scale/index.html new file mode 100644 index 0000000000..dfece432da --- /dev/null +++ b/files/fr/web/css/scale/index.html @@ -0,0 +1,126 @@ +--- +title: scale +slug: Web/CSS/scale +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/scale +--- +
{{CSSRef}}{{seecompattable}}
+ +

La propriété scale permet de mise à l'échelle individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour transform.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scale: none;
+
+/* Une seule valeur */
+/* Les valeurs supérieures à 1 agrandissent l'élément */
+scale: 2;
+/* Les valeurs inférieures à 1 rétrécissent l'élément */
+scale: 0.5;
+
+/* Deux valeurs */
+scale: 2 0.5;
+
+/* Trois valeurs */
+scale: 2 0.5 2;
+ +

Valeurs

+ +
+
Une seule valeur de longueur/pourcentage
+
Une longueur ou un pourcentage qui définit une mise à l'échelle en deux dimensions. Le facteur utilisé est le même pour l'axe X et l'axe Y. Cela est équivalent à la fonction scale() (mise à l'échelle sur deux dimensions) avec une seule valeur.
+
Deux valeurs de longueur/pourcentage
+
Deux longueurs ou pourcentages qui définissent respectivement les composantes horizontale et verticale de l'agrandissement/rétrécissement en deux dimensions. Cela est équivalent à la fonction scale() appelée avec ces deux arguments.
+
Trois valeurs de longueur/pourcentage
+
Trois longueurs ou pourcentages qui définissent respectivement les composantes horizontale, verticale et en profondeur de la mise à l'échelle sur trois dimensions. Cela est équivalent à la fonction scale3d() appelée avec ces trois arguments.
+
none
+
Cette valeur indique qu'aucune mise à l'échelle ne devrait être appliquée.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <p class="scale">Scaling</p>
+</div>
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.scale {
+  transition: scale 1s;
+}
+
+div:hover .scale {
+  scale: 2 0.7;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Examples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scale")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref('translate')}}
    • +
  • {{cssxref('rotate')}}
    • +
  • {{cssxref('transform')}}
    • +
diff --git a/files/fr/web/css/scroll-behavior/index.html b/files/fr/web/css/scroll-behavior/index.html new file mode 100644 index 0000000000..75791bd495 --- /dev/null +++ b/files/fr/web/css/scroll-behavior/index.html @@ -0,0 +1,143 @@ +--- +title: scroll-behavior +slug: Web/CSS/scroll-behavior +tags: + - CSS + - CSSOM + - Propriété + - Reference +translation_of: Web/CSS/scroll-behavior +--- +
{{CSSRef}}
+ +

La propriété scroll-behavior définit le comportement du défilement pour une boîte de défilement lorsque celui-ci provient de la navigation ou des API CSSOM.

+ +

Pour les autres défilements, appliqués par l'utilisateur, cette propriété n'a aucun impact. Lorsque cette propriété est définie sur l'élément racine, elle s'applique à la zone d'affichage (viewport).

+ +
{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}
+ + + +

Les agents utilisateur peuvent choisir d'ignorer cette propriété. Lorsque cette propriété est indiquée sur l'élément body, elle ne se propage pas à la zone d'affichage (viewport).

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* Valeurs globales */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+
+ +

La propriété scroll-behavior est définie avec l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
auto
+
La boîte de défilement progresse de façon instantanée.
+
smooth
+
Le défilement est doux et utilise une fonction de minutage définie par l'agent utilisateur pendant une période définie par l'agent utilisateur. Les agents utilisateur doivent respecter les conventions de la plate-forme s'il y en a.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+
+ +

HTML

+ +
<nav>
+  <a href="#page-1">1</a>
+  <a href="#page-2">2</a>
+  <a href="#page-3">3</a>
+</nav>
+<scroll-container>
+  <scroll-page id="page-1">1</scroll-page>
+  <scroll-page id="page-2">2</scroll-page>
+  <scroll-page id="page-3">3</scroll-page>
+</scroll-container>
+ +

Résultat

+ +

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

+ +

Accessibilité

+ +

Les troubles du système vestibulaires peuvent être causés par la maladie, l'âge ou des blessures. Ces troubles entraînent des vertiges, fatigues et nausées suite aux mouvements.

+ +

En utilisant la caractéristique média prefers-reduced-motion, on peut désactiver le défilement instantanné pour les utilisateurs qui ont paramétré leur système/navigateur afin de réduire les animations et mouvements :

+ +
html {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}{{Spec2('CSSOM View')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-behavior")}}

diff --git a/files/fr/web/css/scroll-margin-block-end/index.html b/files/fr/web/css/scroll-margin-block-end/index.html new file mode 100644 index 0000000000..db70841cd0 --- /dev/null +++ b/files/fr/web/css/scroll-margin-block-end/index.html @@ -0,0 +1,68 @@ +--- +title: scroll-margin-block-end +slug: Web/CSS/scroll-margin-block-end +tags: + - CSS + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/scroll-margin-block-end +--- +
{{CSSRef}}
+ +

La propriété scroll-margin-block-end définit la marge de défilement de l'élément sur la fin de l'axe de bloc. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-block-end.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length> */
+scroll-margin-block-end: 10px;
+scroll-margin-block-end: 1em;
+
+/* Valeurs globales */
+scroll-margin-block-end: inherit;
+scroll-margin-block-end: initial;
+scroll-margin-block-end: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Un décalage par rapport au côté correspondant du conteneur de défilement.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block-end", "scroll-margin-block-end")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-margin-block-end")}}

diff --git a/files/fr/web/css/scroll-margin-block-start/index.html b/files/fr/web/css/scroll-margin-block-start/index.html new file mode 100644 index 0000000000..58a7dcf83a --- /dev/null +++ b/files/fr/web/css/scroll-margin-block-start/index.html @@ -0,0 +1,69 @@ +--- +title: scroll-margin-block-start +slug: Web/CSS/scroll-margin-block-start +tags: + - CSS + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/scroll-margin-block-start +--- +
{{CSSRef}}
+ +

La propriété scroll-margin-block-start définit la marge de défilement de l'élément sur le début de l'axe de bloc. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-block-start.html")}}
+ + + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length> */
+scroll-margin-block-start: 10px;
+scroll-margin-block-start: 1em;
+
+/* Valeurs globales */
+scroll-margin-block-start: inherit;
+scroll-margin-block-start: initial;
+scroll-margin-block-start: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Un décalage par rapport au côté correspondant du conteneur de défilement.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block-start", "scroll-margin-block-start")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-margin-block-start")}}

diff --git a/files/fr/web/css/scroll-margin-block/index.html b/files/fr/web/css/scroll-margin-block/index.html new file mode 100644 index 0000000000..e032413d5b --- /dev/null +++ b/files/fr/web/css/scroll-margin-block/index.html @@ -0,0 +1,71 @@ +--- +title: scroll-margin-block +slug: Web/CSS/scroll-margin-block +tags: + - CSS + - Propriété + - Propriété logique + - Propriété raccourcie + - Reference +translation_of: Web/CSS/scroll-margin-block +--- +
{{CSSRef}}
+ +

La propriété scroll-margin-block est une propriété raccourcie logique qui définit les marges de défilement sur l'axe de bloc (i.e. les propriétés logiques scroll-margin-block-start et scroll-margin-block-end).

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-block.html")}}
+ + + +

Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (snapport). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length> */
+scroll-margin-block: 10px;
+scroll-margin-block: 1em .5em;
+
+/* Valeurs globales */
+scroll-margin-block: inherit;
+scroll-margin-block: initial;
+scroll-margin-block: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Un décalage par rapport au côté correspondant du conteneur de défilement.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block", "scroll-margin-block")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-margin-block")}}

diff --git a/files/fr/web/css/scroll-margin-bottom/index.html b/files/fr/web/css/scroll-margin-bottom/index.html new file mode 100644 index 0000000000..53c85231a0 --- /dev/null +++ b/files/fr/web/css/scroll-margin-bottom/index.html @@ -0,0 +1,69 @@ +--- +title: scroll-margin-bottom +slug: Web/CSS/scroll-margin-bottom +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/scroll-margin-bottom +--- +
{{CSSRef}}
+ +

La propriété scroll-margin-bottom définit la marge de défilement de l'élément sur le côté bas. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}
+ + + + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length> */
+scroll-margin-bottom: 10px;
+scroll-margin-bottom: 1em;
+
+/* Valeurs globales */
+scroll-margin-bottom: inherit;
+scroll-margin-bottom: initial;
+scroll-margin-bottom: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Un décalage par rapport au côté correspondant du conteneur de défilement.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-bottom", "scroll-margin-bottom")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-margin-bottom")}}

diff --git a/files/fr/web/css/scroll-margin-inline-end/index.html b/files/fr/web/css/scroll-margin-inline-end/index.html new file mode 100644 index 0000000000..91062d05bf --- /dev/null +++ b/files/fr/web/css/scroll-margin-inline-end/index.html @@ -0,0 +1,69 @@ +--- +title: scroll-margin-inline-end +slug: Web/CSS/scroll-margin-inline-end +tags: + - CSS + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/scroll-margin-inline-end +--- +
{{CSSRef}}
+ +

La propriété scroll-margin-inline-end définit la marge de défilement de l'élément sur la fin de l'axe en ligne. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}
+ + + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length> */
+scroll-margin-inline-end: 10px;
+scroll-margin-inline-end: 1em;
+
+/* Valeurs globales */
+scroll-margin-inline-end: inherit;
+scroll-margin-inline-end: initial;
+scroll-margin-inline-end: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Un décalage par rapport au côté correspondant du conteneur de défilement.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-end", "scroll-margin-inline-end")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-margin-inline-end")}}

diff --git a/files/fr/web/css/scroll-margin-inline-start/index.html b/files/fr/web/css/scroll-margin-inline-start/index.html new file mode 100644 index 0000000000..eed1eb99f3 --- /dev/null +++ b/files/fr/web/css/scroll-margin-inline-start/index.html @@ -0,0 +1,69 @@ +--- +title: scroll-margin-inline-start +slug: Web/CSS/scroll-margin-inline-start +tags: + - CSS + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/scroll-margin-inline-start +--- +
{{CSSRef}}
+ +

La propriété scroll-margin-inline-start définit la marge de défilement de l'élément sur le début de l'axe en ligne. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

+ + +
{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length> */
+scroll-margin-inline-start: 10px;
+scroll-margin-inline-start: 1em;
+
+/* Valeurs globales */
+scroll-margin-inline-start: inherit;
+scroll-margin-inline-start: initial;
+scroll-margin-inline-start: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Un décalage par rapport au côté correspondant du conteneur de défilement.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-start", "scroll-margin-inline-start")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-margin-inline-start")}}

diff --git a/files/fr/web/css/scroll-margin-inline/index.html b/files/fr/web/css/scroll-margin-inline/index.html new file mode 100644 index 0000000000..2f1d7507b4 --- /dev/null +++ b/files/fr/web/css/scroll-margin-inline/index.html @@ -0,0 +1,67 @@ +--- +title: scroll-margin-inline +slug: Web/CSS/scroll-margin-inline +tags: + - CSS + - Propriété + - Propriété logique + - Propriété raccourcie + - Reference +translation_of: Web/CSS/scroll-margin-inline +--- +
{{CSSRef}}
+ +

La propriété scroll-margin-inline est une propriété raccourcie logique qui définit les marges de défilement sur l'axe de bloc (i.e. les propriétés logiques scroll-margin-inline-start et scroll-margin-inline-end).

+ +

Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (snapport). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length> */
+scroll-margin-inline: 10px;
+scroll-margin-inline: 1em .5em;
+
+/* Valeurs globales */
+scroll-margin-inline: inherit;
+scroll-margin-inline: initial;
+scroll-margin-inline: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Un décalage par rapport au côté correspondant du conteneur de défilement.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline", "scroll-margin-inline")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-margin-inline")}}

diff --git a/files/fr/web/css/scroll-margin-left/index.html b/files/fr/web/css/scroll-margin-left/index.html new file mode 100644 index 0000000000..557fc01916 --- /dev/null +++ b/files/fr/web/css/scroll-margin-left/index.html @@ -0,0 +1,68 @@ +--- +title: scroll-margin-left +slug: Web/CSS/scroll-margin-left +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/scroll-margin-left +--- +
{{CSSRef}}
+ +

La propriété scroll-margin-left définit la marge de défilement de l'élément sur le côté gauche. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}
+ + + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length> */
+scroll-margin-left: 10px;
+scroll-margin-left: 1em;
+
+/* Valeurs globales */
+scroll-margin-left: inherit;
+scroll-margin-left: initial;
+scroll-margin-left: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Un décalage par rapport au côté correspondant du conteneur de défilement.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-left", "scroll-margin-left")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-margin-left")}}

diff --git a/files/fr/web/css/scroll-margin-right/index.html b/files/fr/web/css/scroll-margin-right/index.html new file mode 100644 index 0000000000..56e7a9be1a --- /dev/null +++ b/files/fr/web/css/scroll-margin-right/index.html @@ -0,0 +1,68 @@ +--- +title: scroll-margin-right +slug: Web/CSS/scroll-margin-right +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/scroll-margin-right +--- +
{{CSSRef}}
+ +

La propriété scroll-margin-right définit la marge de défilement de l'élément sur le côté droit. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}
+ + + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length> */
+scroll-margin-right: 10px;
+scroll-margin-right: 1em;
+
+/* Valeurs globales */
+scroll-margin-right: inherit;
+scroll-margin-right: initial;
+scroll-margin-right: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Un décalage par rapport au côté correspondant du conteneur de défilement.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-right", "scroll-margin-right")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-margin-right")}}

diff --git a/files/fr/web/css/scroll-margin-top/index.html b/files/fr/web/css/scroll-margin-top/index.html new file mode 100644 index 0000000000..5e435abef0 --- /dev/null +++ b/files/fr/web/css/scroll-margin-top/index.html @@ -0,0 +1,67 @@ +--- +title: scroll-margin-top +slug: Web/CSS/scroll-margin-top +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/scroll-margin-top +--- +
{{CSSRef}}
+ +

La propriété scroll-margin-top définit la marge de défilement de l'élément sur le côté haut. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length> */
+scroll-margin-top: 10px;
+scroll-margin-top: 1em;
+
+/* Valeurs globales */
+scroll-margin-top: inherit;
+scroll-margin-top: initial;
+scroll-margin-top: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Un décalage par rapport au côté correspondant du conteneur de défilement.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-top", "scroll-margin-top")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-margin-top")}}

diff --git a/files/fr/web/css/scroll-margin/index.html b/files/fr/web/css/scroll-margin/index.html new file mode 100644 index 0000000000..007adfd400 --- /dev/null +++ b/files/fr/web/css/scroll-margin/index.html @@ -0,0 +1,70 @@ +--- +title: scroll-margin +slug: Web/CSS/scroll-margin +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/scroll-margin +--- +
{{CSSRef}}
+ +

La propriété scroll-margin est une propriété raccourcie qui permet de définir l'ensemble des propriétés scroll-margin-top, scroll-margin-left, scroll-margin-bottom et scroll-margin-right (de la même façon que la propriété margin définit les différents côtés des marges).

+
{{EmbedInteractiveExample("pages/css/scroll-margin.html")}}
+ + + + +

Les valeurs de scroll-margin correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (snapport). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

+ +

Syntaxe

+ +
/* Valeur de longueur */
+/* Type <length> */
+scroll-margin: 10px;
+scroll-margin: 1em .5em 1em 1em;
+
+/* Valeurs globales */
+scroll-margin: inherit;
+scroll-margin: initial;
+scroll-margin: unset;
+
+ +

Valeurs

+ +
+
<length>
+
Un décalage par rapport au côté correspondant pour le conteneur de défilement. Voir {{cssxref("<length>")}} pour les valeurs possibles.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin", "scroll-margin")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-margin")}}

diff --git a/files/fr/web/css/scroll-padding-block-end/index.html b/files/fr/web/css/scroll-padding-block-end/index.html new file mode 100644 index 0000000000..26d40884ff --- /dev/null +++ b/files/fr/web/css/scroll-padding-block-end/index.html @@ -0,0 +1,78 @@ +--- +title: scroll-padding-block-end +slug: Web/CSS/scroll-padding-block-end +tags: + - CSS + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/scroll-padding-block-end +--- +
{{CSSRef}}
+ +

La propriété scroll-padding-block-end est une propriété qui permet de définir le remplissage, à la fin de l'axe de bloc, entre l'élément et la zone de défilement.

+ +

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (scrollport). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}}
+ + + + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scroll-padding-block-end: auto;
+
+/* Valeurs de longueur */
+/* Type <length> */
+scroll-padding-block-end: 10px;
+scroll-padding-block-end: 1em;
+scroll-padding-block-end: 10%;
+
+/* Valeurs globales */
+scroll-padding-block-end: inherit;
+scroll-padding-block-end: initial;
+scroll-padding-block-end: unset;
+
+ +

Valeurs

+ +
+
<length-percentage>
+
Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+
auto
+
Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à 0px mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-end", "scroll-padding-block-end")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-padding-block-end")}}

diff --git a/files/fr/web/css/scroll-padding-block-start/index.html b/files/fr/web/css/scroll-padding-block-start/index.html new file mode 100644 index 0000000000..e52e1cf2af --- /dev/null +++ b/files/fr/web/css/scroll-padding-block-start/index.html @@ -0,0 +1,78 @@ +--- +title: scroll-padding-block-start +slug: Web/CSS/scroll-padding-block-start +tags: + - CSS + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/scroll-padding-block-start +--- +
{{CSSRef}}
+ +

La propriété scroll-padding-block-start est une propriété qui permet de définir le remplissage, au début de l'axe de bloc, entre l'élément et la zone de défilement.

+ +

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (scrollport). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}}
+ + + + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scroll-padding-block-start: auto;
+
+/* Valeurs de longueur */
+/* Type <length> */
+scroll-padding-block-start: 10px;
+scroll-padding-block-start: 1em;
+scroll-padding-block-start: 10%;
+
+/* Valeurs globales */
+scroll-padding-block-start: inherit;
+scroll-padding-block-start: initial;
+scroll-padding-block-start: unset;
+
+ +

Valeurs

+ +
+
<length-percentage>
+
Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+
auto
+
Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à 0px mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-start", "scroll-padding-block-start")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-padding-block-start")}}

diff --git a/files/fr/web/css/scroll-padding-block/index.html b/files/fr/web/css/scroll-padding-block/index.html new file mode 100644 index 0000000000..0537332219 --- /dev/null +++ b/files/fr/web/css/scroll-padding-block/index.html @@ -0,0 +1,77 @@ +--- +title: scroll-padding-block +slug: Web/CSS/scroll-padding-block +tags: + - CSS + - Propriété + - Propriété logique + - Propriété raccourcie + - Reference +translation_of: Web/CSS/scroll-padding-block +--- +
{{CSSRef}}
+ +

La propriété scroll-padding-block est une propriété raccourcie qui permet de définir le remplissage, sur l'axe de bloc, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir scroll-padding-block-end et scroll-padding-block-start.

+
{{EmbedInteractiveExample("pages/css/scroll-padding-block.html")}}
+ + + + +

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (scrollport). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scroll-padding-block: auto;
+
+/* Valeurs de longueur */
+/* Type <length> */
+scroll-padding-block: 10px;
+scroll-padding-block: 1em .5em;
+scroll-padding-block: 10%;
+
+/* Valeurs globales */
+scroll-padding-block: inherit;
+scroll-padding-block: initial;
+scroll-padding-block: unset;
+
+ +

Valeurs

+ +
+
<length-percentage>
+
Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+
auto
+
Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à 0px mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block", "scroll-padding-block")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-padding-block")}}

diff --git a/files/fr/web/css/scroll-padding-bottom/index.html b/files/fr/web/css/scroll-padding-bottom/index.html new file mode 100644 index 0000000000..038a5ead65 --- /dev/null +++ b/files/fr/web/css/scroll-padding-bottom/index.html @@ -0,0 +1,77 @@ +--- +title: scroll-padding-bottom +slug: Web/CSS/scroll-padding-bottom +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/scroll-padding-bottom +--- +
{{CSSRef}}
+ +

La propriété scroll-padding-bottom est une propriété qui permet de définir le remplissage sur le côté bas entre l'élément et la zone de défilement.

+ +

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (scrollport). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}}
+ + + + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scroll-padding-bottom: auto;
+
+/* Valeurs de longueur */
+/* Type <length> */
+scroll-padding-bottom: 10px;
+scroll-padding-bottom: 1em;
+scroll-padding-bottom: 10%;
+
+/* Valeurs globales */
+scroll-padding-bottom: inherit;
+scroll-padding-bottom: initial;
+scroll-padding-bottom: unset;
+
+ +

Valeurs

+ +
+
<length-percentage>
+
Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+
auto
+
Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à 0px mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-bottom", "scroll-padding-bottom")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-padding-bottom")}}

diff --git a/files/fr/web/css/scroll-padding-inline-end/index.html b/files/fr/web/css/scroll-padding-inline-end/index.html new file mode 100644 index 0000000000..610cf71fd0 --- /dev/null +++ b/files/fr/web/css/scroll-padding-inline-end/index.html @@ -0,0 +1,78 @@ +--- +title: scroll-padding-inline-end +slug: Web/CSS/scroll-padding-inline-end +tags: + - CSS + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/scroll-padding-inline-end +--- +
{{CSSRef}}
+ +

La propriété scroll-padding-inline-end est une propriété qui permet de définir le remplissage, à la fin de l'axe en ligne, entre l'élément et la zone de défilement.

+ +

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (scrollport). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

+ + +
{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}}
+ + + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scroll-padding-inline-end: auto;
+
+/* Valeurs de longueur */
+/* Type <length> */
+scroll-padding-inline-end: 10px;
+scroll-padding-inline-end: 1em;
+scroll-padding-inline-end: 10%;
+
+/* Valeurs globales */
+scroll-padding-inline-end: inherit;
+scroll-padding-inline-end: initial;
+scroll-padding-inline-end: unset;
+
+ +

Valeurs

+ +
+
<length-percentage>
+
Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+
auto
+
Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à 0px mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-end", "scroll-padding-inline-end")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-padding-inline-end")}}

diff --git a/files/fr/web/css/scroll-padding-inline-start/index.html b/files/fr/web/css/scroll-padding-inline-start/index.html new file mode 100644 index 0000000000..4c13252345 --- /dev/null +++ b/files/fr/web/css/scroll-padding-inline-start/index.html @@ -0,0 +1,78 @@ +--- +title: scroll-padding-inline-start +slug: Web/CSS/scroll-padding-inline-start +tags: + - CSS + - Propriété + - Propriété logique + - Reference +translation_of: Web/CSS/scroll-padding-inline-start +--- +
{{CSSRef}}
+ +

La propriété scroll-padding-inline-start est une propriété qui permet de définir le remplissage, au début de l'axe en ligne, entre l'élément et la zone de défilement.

+ +

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (scrollport). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}}
+ + + + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scroll-padding-inline-start: auto;
+
+/* Valeurs de longueur */
+/* Type <length> */
+scroll-padding-inline-start: 10px;
+scroll-padding-inline-start: 1em;
+scroll-padding-inline-start: 10%;
+
+/* Valeurs globales */
+scroll-padding-inline-start: inherit;
+scroll-padding-inline-start: initial;
+scroll-padding-inline-start: unset;
+
+ +

Valeurs

+ +
+
<length-percentage>
+
Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+
auto
+
Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à 0px mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-start", "scroll-padding-inline-start")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-padding-inline-start")}}

diff --git a/files/fr/web/css/scroll-padding-inline/index.html b/files/fr/web/css/scroll-padding-inline/index.html new file mode 100644 index 0000000000..642fa78f58 --- /dev/null +++ b/files/fr/web/css/scroll-padding-inline/index.html @@ -0,0 +1,78 @@ +--- +title: scroll-padding-inline +slug: Web/CSS/scroll-padding-inline +tags: + - CSS + - Propriété + - Propriété logique + - Propriété raccourcie + - Reference +translation_of: Web/CSS/scroll-padding-inline +--- +
{{CSSRef}}
+ +

La propriété scroll-padding-inline est une propriété raccourcie qui permet de définir le remplissage, sur l'axe en ligne, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir scroll-padding-inline-end et scroll-padding-inline-start.

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}}
+ + + + +

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (scrollport). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scroll-padding-inline: auto;
+
+/* Valeurs de longueur */
+/* Type <length> */
+scroll-padding-inline: 10px;
+scroll-padding-inline: 1em .5em;
+scroll-padding-inline: 10%;
+
+/* Valeurs globales */
+scroll-padding-inline: inherit;
+scroll-padding-inline: initial;
+scroll-padding-inline: unset;
+
+ +

Valeurs

+ +
+
<length-percentage>
+
Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+
auto
+
Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à 0px mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline", "scroll-padding-inline")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-padding-inline")}}

diff --git a/files/fr/web/css/scroll-padding-left/index.html b/files/fr/web/css/scroll-padding-left/index.html new file mode 100644 index 0000000000..4cd58ee8a7 --- /dev/null +++ b/files/fr/web/css/scroll-padding-left/index.html @@ -0,0 +1,77 @@ +--- +title: scroll-padding-left +slug: Web/CSS/scroll-padding-left +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/scroll-padding-left +--- +
{{CSSRef}}
+ +

La propriété scroll-padding-left est une propriété qui permet de définir le remplissage sur le côté gauche entre l'élément et la zone de défilement.

+ +

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (scrollport). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}}
+ + + + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scroll-padding-left: auto;
+
+/* Valeurs de longueur */
+/* Type <length> */
+scroll-padding-left: 10px;
+scroll-padding-left: 1em;
+scroll-padding-left: 10%;
+
+/* Valeurs globales */
+scroll-padding-left: inherit;
+scroll-padding-left: initial;
+scroll-padding-left: unset;
+
+ +

Valeurs

+ +
+
<length-percentage>
+
Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+
auto
+
Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à 0px mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-left", "scroll-padding-left")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-padding-left")}}

diff --git a/files/fr/web/css/scroll-padding-right/index.html b/files/fr/web/css/scroll-padding-right/index.html new file mode 100644 index 0000000000..135dd97e41 --- /dev/null +++ b/files/fr/web/css/scroll-padding-right/index.html @@ -0,0 +1,75 @@ +--- +title: scroll-padding-right +slug: Web/CSS/scroll-padding-right +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/scroll-padding-right +--- +
{{CSSRef}}
+ +

La propriété scroll-padding-right est une propriété qui permet de définir le remplissage sur le côté droit entre l'élément et la zone de défilement.

+ +

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (scrollport). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scroll-padding-right: auto;
+
+/* Valeurs de longueur */
+/* Type <length> */
+scroll-padding-right: 10px;
+scroll-padding-right: 1em;
+scroll-padding-right: 10%;
+
+/* Valeurs globales */
+scroll-padding-right: inherit;
+scroll-padding-right: initial;
+scroll-padding-right: unset;
+
+ +

Valeurs

+ +
+
<length-percentage>
+
Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+
auto
+
Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à 0px mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-right", "scroll-padding-right")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-padding-right")}}

diff --git a/files/fr/web/css/scroll-padding-top/index.html b/files/fr/web/css/scroll-padding-top/index.html new file mode 100644 index 0000000000..72bea4927f --- /dev/null +++ b/files/fr/web/css/scroll-padding-top/index.html @@ -0,0 +1,76 @@ +--- +title: scroll-padding-top +slug: Web/CSS/scroll-padding-top +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/scroll-padding-top +--- +
{{CSSRef}}
+ +

La propriété scroll-padding-top est une propriété qui permet de définir le remplissage sur le côté haut entre l'élément et la zone de défilement.

+ +

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (scrollport). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}}
+ + + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scroll-padding-top: auto;
+
+/* Valeurs de longueur */
+/* Type <length> */
+scroll-padding-top: 10px;
+scroll-padding-top: 1em;
+scroll-padding-top: 10%;
+
+/* Valeurs globales */
+scroll-padding-top: inherit;
+scroll-padding-top: initial;
+scroll-padding-top: unset;
+
+ +

Valeurs

+ +
+
<length-percentage>
+
Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+
auto
+
Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à 0px mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-top", "scroll-padding-top")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-padding-top")}}

diff --git a/files/fr/web/css/scroll-padding/index.html b/files/fr/web/css/scroll-padding/index.html new file mode 100644 index 0000000000..533f712e98 --- /dev/null +++ b/files/fr/web/css/scroll-padding/index.html @@ -0,0 +1,76 @@ +--- +title: scroll-padding +slug: Web/CSS/scroll-padding +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/scroll-padding +--- +
{{CSSRef}}
+ +

La propriété scroll-padding est une propriété raccourcie qui permet de définir l'ensemble des propriétés scroll-padding-top, scroll-padding-right, scroll-padding-bottom et scroll-padding-left (de la même façon que la propriété {{cssxref("padding")}} permet de définir les propriétés détaillées associées).

+ +
{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}
+ + + +

Les propriétés scroll-padding-* permettent de définir des décalages par rapport à la zone de défilement de l'élément (scrollport). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scroll-padding: auto;
+
+/* Valeurs de longueur */
+/* Type <length> */
+scroll-padding: 10px;
+scroll-padding: 1em .5em 1em 1em;
+scroll-padding: 10%;
+
+/* Valeurs globales */
+scroll-padding: inherit;
+scroll-padding: initial;
+scroll-padding: unset;
+
+ +

Valeurs

+ +
+
<length-percentage>
+
Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. Cette valeur, de type {{cssxref("<length-percentage>")}}, est une longueur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) valide.
+
auto
+
Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à 0px mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding", "scroll-padding")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-padding")}}

diff --git a/files/fr/web/css/scroll-snap-align/index.html b/files/fr/web/css/scroll-snap-align/index.html new file mode 100644 index 0000000000..e47b84f197 --- /dev/null +++ b/files/fr/web/css/scroll-snap-align/index.html @@ -0,0 +1,73 @@ +--- +title: scroll-snap-align +slug: Web/CSS/scroll-snap-align +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/scroll-snap-align +--- +
{{CSSRef}}
+ +

La propriété scroll-snap-align définit la position de la boîte d'accroche (snap positions) comme un alignement entre la zone d'accroche et le conteneur (la boîte de défilement de l'élément). Les deux valeurs fournies à cette propriété s'appliquent respectivement à l'axe de bloc et à l'axe en ligne. Lorsqu'une seule valeur est fournie, la seconde prendra par défaut la valeur de la première.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scroll-snap-align: none;
+scroll-snap-align: start end;
+scroll-snap-align: center;
+
+/* Valeurs globales */
+scroll-snap-align: inherit;
+scroll-snap-align: initial;
+scroll-snap-align: unset;
+
+ +

Valeurs

+ +
+
none
+
La boîte ne définit aucune position d'accroche sur cet axe.
+
start
+
Le point d'alignement situé au début de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.
+
end
+
Le point d'alignement situé à la fin de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.
+
center
+
Le point d'alignement situé au centre de l'axe et à l'intérieur de la boîte de défilement est une position d'accroche sur cet axe.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-align", "scroll-snap-align")}}{{Spec2("CSS Scroll Snap Points")}}Initial definition
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-snap-align")}}

+ +
+

Attention ! Pour Safari, la syntaxe utilisant les deux valeurs intervertit les deux valeurs (la première cible l'alignement en ligne et la seconde l'alignement en bloc). Voir le bug n°191865.

+
diff --git a/files/fr/web/css/scroll-snap-coordinate/index.html b/files/fr/web/css/scroll-snap-coordinate/index.html new file mode 100644 index 0000000000..dbfa4f05c3 --- /dev/null +++ b/files/fr/web/css/scroll-snap-coordinate/index.html @@ -0,0 +1,157 @@ +--- +title: scroll-snap-coordinate +slug: Web/CSS/scroll-snap-coordinate +tags: + - CSS + - Déprécié + - Propriété + - Reference +translation_of: Web/CSS/scroll-snap-coordinate +--- +
{{CSSRef}}{{deprecated_header}}
+ +

La propriété scroll-snap-coordinate définit les coordonnées horizontale et verticale, au sein de l'élément, qui s'aligneront avec les points définis par {{cssxref("scroll-snap-destination")}} dans le conteneur le plus proche en termes de parenté.

+ +

Si l'élément a été transformé, les coordonnées sont transformées de la même façon afin d'aligner le point d'accroche avec l'élément tel qu'il est affiché.

+ +
/* Valeur avec un mot-clé */
+scroll-snap-coordinate: none;
+
+/* Valeurs de <position> */
+/* Une paire de coordonnées */
+scroll-snap-coordinate: 50px 50px;
+/* Plusieurs coordonnées */
+scroll-snap-coordinate: 100px 100px, 100px bottom;
+
+/* Valeurs globales */
+scroll-snap-coordinate: inherit;
+scroll-snap-coordinate: initial;
+scroll-snap-coordinate: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
L'élément ne contribue à aucun point d'accrochage.
+
<position>
+
Définit le décalage du point d'accrochage par rapport à la boîte de bordure le l'élément. Pour chaque paire, la première valeur indique l'abscisse et la seconde, l'ordonnée. Pour plus d'informations sur les valeurs possibles, voir {{cssxref("<position>")}}.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div id="container">
+  <div>
+    <p>Coordonnées (0, 0)</p>
+    <div class="scrollContainer coordinate0">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>Coordonnées (25, 0)</p>
+    <div class="scrollContainer coordinate25">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>Coordonnées (50, 0)</p>
+    <div class="scrollContainer coordinate50">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+</div>
+
+ +

CSS

+ +
#container {
+  display: flex;
+}
+
+#container > div:nth-child(-n+2) {
+  margin-right: 20px;
+}
+
+.scrollContainer {
+  width: 100px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+.scrollContainer > div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  line-height: 100px;
+  text-align: center;
+  font-size: 50px;
+}
+
+.coordinate0 > div {
+  scroll-snap-coordinate: 0 0;
+}
+
+.coordinate25 > div {
+  scroll-snap-coordinate: 25px 0;
+}
+
+.coordinate50 > div {
+  scroll-snap-coordinate: 50px 0;
+}
+
+.scrollContainer > div:nth-child(even) {
+  background-color: #87ea87;
+}
+
+.scrollContainer > div:nth-child(odd) {
+  background-color: #87ccea;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-snap-coordinate")}}

diff --git a/files/fr/web/css/scroll-snap-destination/index.html b/files/fr/web/css/scroll-snap-destination/index.html new file mode 100644 index 0000000000..032eb7846e --- /dev/null +++ b/files/fr/web/css/scroll-snap-destination/index.html @@ -0,0 +1,149 @@ +--- +title: scroll-snap-destination +slug: Web/CSS/scroll-snap-destination +tags: + - CSS + - Déprécié + - Propriété + - Reference +translation_of: Web/CSS/scroll-snap-destination +--- +
{{CSSRef}}{{deprecated_header}}
+ +

La propriété scroll-snap-destination définit les coordonnées horizontale et verticale des points d'accroche dans le {{Glossary("viewport")}} du conteneur.

+ +
/* Valeur <position> */
+scroll-snap-destination: 400px 600px;
+
+/* Valeurs globales */
+scroll-snap-destination: inherit;
+scroll-snap-destination: initial;
+scroll-snap-destination: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
<position>
+
Définit le décalage entre le bord du viewport du conteneur et le point d'accroche à utiliser lors du défilement. La première valeur indique la coordonnée horizontale et la seconde indique la coordonnée verticale.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div id="container">
+  <div>
+    <p>Coordonnées (0, 0)</p>
+    <div class="scrollContainer destination0">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>Coordonnées (25, 0)</p>
+    <div class="scrollContainer destination25">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>Coordonnées (50, 0)</p>
+    <div class="scrollContainer destination50">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+</div>
+
+ +

CSS

+ +
#container {
+  display: flex;
+}
+
+#container > div:nth-child(-n+2) {
+  margin-right: 20px;
+}
+
+.scrollContainer {
+  width: 100px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-points-x: repeat(100%);
+  scroll-snap-type: mandatory;
+  scroll-snap-destination: 20px 0;
+  font-size: 0;
+}
+
+.destination0 {
+  scroll-snap-destination: 0 0;
+}
+
+.destination25 {
+  scroll-snap-destination: 25px 0;
+}
+
+.destination50 {
+  scroll-snap-destination: 50px 0;
+}
+
+.scrollContainer > div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  line-height: 100px;
+  text-align: center;
+  font-size: 50px;
+}
+
+.scrollContainer > div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.scrollContainer > div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-destination", "scroll-snap-destination")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-snap-destination")}}

diff --git a/files/fr/web/css/scroll-snap-points-x/index.html b/files/fr/web/css/scroll-snap-points-x/index.html new file mode 100644 index 0000000000..b7f1acea8b --- /dev/null +++ b/files/fr/web/css/scroll-snap-points-x/index.html @@ -0,0 +1,94 @@ +--- +title: scroll-snap-points-x +slug: Web/CSS/scroll-snap-points-x +tags: + - CSS + - Déprécié + - Propriété + - Reference +translation_of: Web/CSS/scroll-snap-points-x +--- +
{{CSSRef}}{{deprecated_header}}
+ +

La propriété scroll-snap-points-x définit le positionnement horizontal des points d'accroche dans le conteneur de défilement auquel ils s'appliquent.

+ +
/* Valeur avec un mot-clé */
+scroll-snap-points-x: none;
+
+/* Répétition des points d'accroche */
+scroll-snap-points-x: repeat(400px);
+
+/* Valeurs globales */
+scroll-snap-points-x: inherit;
+scroll-snap-points-x: initial;
+scroll-snap-points-x: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
Le conteneur ne possède pas de points d'accroche. Les éléments contenus à l'intérieur peuvent définir leurs propres points d'accroche.
+
repeat(<length-percentage>)
+
Cette valeur permet de définir un intervalle de répétition pour les points d'accroche, en commençant par le bord (pertinent) du conteneur. Seules les longueurs positives sont autorisées. Les pourcentages sont relatifs à la largeur du conteneur.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div id="container">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</div>
+ +

CSS

+ +
#container {
+  width: 200px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-points-x: repeat(100%);
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+#container > div {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  line-height: 200px;
+  text-align: center;
+  font-size: 100px;
+}
+
+#container > div:nth-child(even) {
+  background-color: #87ea87;
+}
+
+#container > div:nth-child(odd) {
+  background-color: #87ccea;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ +

Cette propriété avait été définie dans un brouillon de spécification pour le module CSS sur les points d'accroche mais a ensuite été retirée de la spécification pour être remplacée par l'accroche basée sur les éléments.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-snap-points-x")}}

diff --git a/files/fr/web/css/scroll-snap-points-y/index.html b/files/fr/web/css/scroll-snap-points-y/index.html new file mode 100644 index 0000000000..a7570fcd75 --- /dev/null +++ b/files/fr/web/css/scroll-snap-points-y/index.html @@ -0,0 +1,96 @@ +--- +title: scroll-snap-points-y +slug: Web/CSS/scroll-snap-points-y +tags: + - CSS + - Déprécié + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/scroll-snap-points-y +--- +
{{CSSRef}}{{deprecated_header}}
+ +

La propriété scroll-snap-points-y définit le positionnement vertical des points d'accroche dans le conteneur de défilement auquel ils s'appliquent.

+ +
/* Valeur avec un mot-clé */
+scroll-snap-points-y: none;
+
+/* Répétition des points d'accroche */
+scroll-snap-points-y: repeat(400px);
+
+/* Valeurs globales */
+scroll-snap-points-y: inherit;
+scroll-snap-points-y: initial;
+scroll-snap-points-y: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
Le conteneur ne possède pas de points d'accroche. Les éléments contenus à l'intérieur peuvent définir leurs propres points d'accroche.
+
repeat(<length-percentage>)
+
Cette valeur permet de définir un intervalle de répétition pour les points d'accroche, en commençant par le bord (pertinent) du conteneur. Seules les longueurs positives sont autorisées. Les pourcentages sont relatifs à la largeur du conteneur.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div id="container">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</div>
+ +

CSS

+ +
#container {
+  height: 200px;
+  width: 220px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-snap-points-y: repeat(200px);
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+#container > div {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  line-height: 200px;
+  text-align: center;
+  font-size: 100px;
+}
+
+#container > div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+#container > div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ +

Cette propriété avait été définie dans un brouillon de spécification pour le module CSS sur les points d'accroche mais a ensuite été retirée de la spécification pour être remplacée par l'accroche basée sur les éléments.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-snap-points-y")}}

diff --git a/files/fr/web/css/scroll-snap-stop/index.html b/files/fr/web/css/scroll-snap-stop/index.html new file mode 100644 index 0000000000..9d08d3a4d0 --- /dev/null +++ b/files/fr/web/css/scroll-snap-stop/index.html @@ -0,0 +1,224 @@ +--- +title: scroll-snap-stop +slug: Web/CSS/scroll-snap-stop +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/scroll-snap-stop +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété scroll-snap-stop définit la façon dont un conteneur de défilement peut « passer outre » certaines positions d'accroche.

+ +
/* Valeurs avec un mot-clé */
+scroll-snap-stop: normal;
+scroll-snap-stop: always;
+
+/* Valeurs globales */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
normal
+
Lorsque la zone d'affichage ({{Glossary("viewport")}}) du conteneur défile, elle peut passer sur certaines positions d'accroche.
+
always
+
Le conteneur de défilement ne peut pas passer sur une position d'accroche. Le conteneur doit « s'accrocher » dès la première position d'accroche de l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
/* setup */
+:root, body {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* definite scroll snap */
+.mandatory-scroll-snapping > div {
+  scroll-snap-stop: always;
+}
+.proximity-scroll-snapping > div {
+  scroll-snap-stop: normal;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container > div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container > div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container > div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 256px;
+}
+/* appearance fixes */
+.y.container > div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container > div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container > div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+
+ +

HTML

+ +
<div class="container x mandatory-scroll-snapping" dir="ltr">
+  <div>X Mand. LTR </div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="ltr">
+  <div>X Proximity LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="ltr">
+  <div>Y Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="ltr">
+  <div>Y Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x mandatory-scroll-snapping" dir="rtl">
+  <div>X Mandatory RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="rtl">
+  <div>X Proximity RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="rtl">
+  <div>Y Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="rtl">
+  <div>Y Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-stop", "scroll-snap-stop")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-snap-stop")}}

diff --git a/files/fr/web/css/scroll-snap-type-x/index.html b/files/fr/web/css/scroll-snap-type-x/index.html new file mode 100644 index 0000000000..f6d179979e --- /dev/null +++ b/files/fr/web/css/scroll-snap-type-x/index.html @@ -0,0 +1,55 @@ +--- +title: scroll-snap-type-x +slug: Web/CSS/scroll-snap-type-x +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/scroll-snap-type-x +--- +
{{CSSRef}}{{deprecated_header}}
+ +

La propriété scroll-snap-type-x définit la « force » avec laquelle les points d'accroche sont respectés lors d'un défilement horizontal.

+ +

La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.

+ +
/* Valeurs avec un mot-clé */
+scroll-snap-type-x: none;
+scroll-snap-type-x: mandatory;
+scroll-snap-type-x: proximity;
+
+/* Valeurs globales */
+scroll-snap-type-x: inherit;
+scroll-snap-type-x: initial;
+scroll-snap-type-x: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
Lorsque le {{Glossary("viewport")}} du conteneur défile horizontalement, on ignore les points d'accroche.
+
mandatory
+
Le viewport visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.
+
proximity
+
Le viewport visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajuster pour rester sur ce point d'accroche.
+
+ +

Syntaxe formelle

+ +
none | mandatory | proximity
+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-snap-type-x")}}

diff --git a/files/fr/web/css/scroll-snap-type-y/index.html b/files/fr/web/css/scroll-snap-type-y/index.html new file mode 100644 index 0000000000..c608ee46ca --- /dev/null +++ b/files/fr/web/css/scroll-snap-type-y/index.html @@ -0,0 +1,55 @@ +--- +title: scroll-snap-type-y +slug: Web/CSS/scroll-snap-type-y +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/scroll-snap-type-y +--- +
{{CSSRef}}{{deprecated_header}}
+ +

La propriété scroll-snap-type-y définit la « force » avec laquelle les points d'accroche sont respectés lors d'un déroulement vertical.

+ +

La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.

+ +
/* Valeurs avec un mot-clé */
+scroll-snap-type-y: none;
+scroll-snap-type-y: mandatory;
+scroll-snap-type-y: proximity;
+
+/* Valeurs globales */
+scroll-snap-type-y: inherit;
+scroll-snap-type-y: initial;
+scroll-snap-type-y: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
Lorsque le {{Glossary("viewport")}} du conteneur défile verticalement, on ignore les points d'accroche.
+
mandatory
+
Le viewport visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.
+
proximity
+
Le viewport visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajuster pour rester sur ce point d'accroche.
+
+ +

Syntaxe formelle

+ +
none | mandatory | proximity
+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-snap-type-y")}}

diff --git a/files/fr/web/css/scroll-snap-type/index.html b/files/fr/web/css/scroll-snap-type/index.html new file mode 100644 index 0000000000..d8a49404a1 --- /dev/null +++ b/files/fr/web/css/scroll-snap-type/index.html @@ -0,0 +1,252 @@ +--- +title: scroll-snap-type +slug: Web/CSS/scroll-snap-type +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/scroll-snap-type +--- +
{{CSSRef}}
+ +

La propriété scroll-snap-type définit la force d'adhérence aux points d'accroche en cas de défilement d'un conteneur.

+ +
{{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}}
+ + + + +

La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.

+ +
/* Valeur avec un mot-clé */
+scroll-snap-type: none;
+scroll-snap-type: x;
+scroll-snap-type: y;
+scroll-snap-type: block;
+scroll-snap-type: inline;
+scroll-snap-type: both;
+
+/* Ajout du mot-clé optionnel mandatory ou proximity*/
+scroll-snap-type: x mandatory;
+scroll-snap-type: y proximity;
+scroll-snap-type: both mandatory;
+/* etc. */
+
+/* Valeurs globales */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
Lorsque le {{Glossary("viewport")}} du conteneur défile, on ignore les points d'accroche.
+
x
+
Le conteneur qui défile s'accroche aux positions sur l'axe horizontal uniquement.
+
y
+
Le conteneur qui défile s'accroche aux positions sur l'axe vertical uniquement.
+
block
+
Le conteneur qui défile s'accroche aux positions sur l'axe de bloc (celui orthogonal à l'axe de lecture) uniquement.
+
inline
+
Le conteneur qui défile s'accroche aux positions sur l'axe en ligne (correspondant à au sens de lecteure) uniquement.
+
both
+
Le conteneur qui défile s'accroche aux positions sur les deux axes de façon indépendante.
+
mandatory
+
Le viewport visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.
+
proximity
+
Le viewport visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajusté pour rester sur ce point d'accroche.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
/* setup */
+html, body, .holster {
+  height: 100%;
+}
+.holster {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container > div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container > div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container > div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 100%;
+}
+/* appearance fixes */
+.y.container > div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container > div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container > div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+
+ +

HTML

+ +
<div class="holster">
+<div class="container x mandatory-scroll-snapping" dir="ltr">
+  <div>X Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="ltr">
+  <div>X Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="ltr">
+  <div>Y Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="ltr">
+  <div>Y Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x mandatory-scroll-snapping" dir="rtl">
+  <div>X Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="rtl">
+  <div>X Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="rtl">
+  <div>Y Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="rtl">
+  <div>Y Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+</div>
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}}{{Spec2("CSS Scroll Snap Points")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scroll-snap-type")}}

diff --git a/files/fr/web/css/scrollbar-color/index.html b/files/fr/web/css/scrollbar-color/index.html new file mode 100644 index 0000000000..211f21b634 --- /dev/null +++ b/files/fr/web/css/scrollbar-color/index.html @@ -0,0 +1,126 @@ +--- +title: scrollbar-color +slug: Web/CSS/scrollbar-color +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/scrollbar-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété scrollbar-color permet à un auteur de définir la couleur utilisée pour le curseur et la piste (la ligne sur laquelle se déplace le curseur) de la barre de défilement.

+ +

{{EmbedInteractiveExample("pages/css/scrollbar-color.html")}}

+ + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scrollbar-color: auto;
+scrollbar-color: dark;
+scrollbar-color: light;
+
+/* Valeur de couleur */
+/* La première cible le curseur et la seconde la piste */
+/* type <color> */
+scrollbar-color: rebeccapurple green;
+
+/* Valeurs globales */
+scrollbar-color: inherit;
+scrollbar-color: initial;
+scrollbar-color: unset;
+
+ +

Valeurs

+ +
+
<scrollbar-face-color>
+
Une valeur définissant la couleur.
+ + + + + + + + + + + + + + + + + + + + +
auto +

Utilise le rendu par défaut du système pour la piste de la barre de défilement si aucune autre couleur n'est indiquée pour la mise en forme CSS de la barre de défilement.

+
darkAffiche une barre de défilement sombre. Ce peut être la variante sombre fournie par le système sous-jacent ou une barre de défilement personnalisée avec des couleurs sombres.
lightAffiche une barre de défilement claire. Ce peut être la variante claire fournie par le système sous-jacent ou une barre de défilement personnalisée avec des couleurs claires.
<color> <color>La première couleur est appliquée au curseur et la seconde à la piste sur laquelle se déplace le curseur.
+ +
+

Note : Pour toute valeur de scrollbar-color, les agents utilisateur doivent appliquer la valeur sur l'élément racine de la zone d'affichage (viewport).

+
+ +
+

Note : Si la couleur d'une partie de la barre de défilement est indiquée, les implémentations peuvent afficher une barre de défilement simple (plutôt que celle provenant du système) afin de la colorer avec la/les couleur(s) indiquée(s).

+
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-color: rebeccapurple green;
+}
+ +

HTML

+ +
<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Accessibilité

+ +

Lorsqu'on utilise scrollbar-color avec certains couleurs spécifiques, il est nécessaire de s'assurer que le contraste entre le curseur et la piste est suffisant. Lorsque des mots-clés sont utilisés, c'est à l'agent utilisateur de s'assurer que le contraste est suffisant. Voir les techniques WCAG 2.0 G183 : Utiliser un ratio de contraste de 3:1.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}}{{Spec2("CSS Scrollbars")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +
{{Compat("css.properties.scrollbar-color")}}
diff --git a/files/fr/web/css/scrollbar-width/index.html b/files/fr/web/css/scrollbar-width/index.html new file mode 100644 index 0000000000..2cd1714b7e --- /dev/null +++ b/files/fr/web/css/scrollbar-width/index.html @@ -0,0 +1,119 @@ +--- +title: scrollbar-width +slug: Web/CSS/scrollbar-width +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/scrollbar-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété scrollbar-width permet à un auteur de définir l'épaisseur maximale à utiliser pour la barre de défilement si celle-ci est affichée.

+ +

{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}

+ + + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+scrollbar-width: auto;
+scrollbar-width: thin;
+scrollbar-width: none;
+
+/* Valeurs globales */
+scrollbar-width: inherit;
+scrollbar-width: initial;
+scrollbar-width: unset;
+
+ +

Valeurs

+ +
+
<scrollbar-width>
+
Une valeur qui définit l'épaisseur de la barre de défilement. Cette valeur est une longueur (cf. {{cssxref("<length>")}}) positive ou bien un mot-clé. Si c'est un mot-clé, ce dernier doit avoir l'une des valeurs suivantes : + + + + + + + + + + + + + + + +
autoLa largeur par défaut, fournie par le système, pour la barre de défilement.
thinUne variante plus fine de la barre de défilement plus fine dans le cas des plateformes qui fournissent une telle option ou une barre de défilement avec une largeur moindre que la largeur par défaut du système.
noneAucune barre de défilement n'est affichée mais on peut toujours faire défiler l'élément.
+ +
+

Note : Toute valeur de scrollbar-width doit être appliquée sur l'élément racine de la zone d'affichage (viewport) par les agents utilisateur.

+
+ +
+

Note : L'utilisation des longueurs pour scrollbar-width est une fonctionnalité qui sera potentiellement abandonnée de la spécification (voir l'issue 1958).

+
+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+}
+ +

HTML

+ +
<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Scrollbars", "#scrollbar-width", "scrollbar-width")}}{{Spec2("CSS Scrollbars")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.scrollbar-width")}}

+ +

Voir aussi

+ +
    +
  • {{CSSxRef("-ms-overflow-style")}}
    • +
  • {{CSSxRef("::-webkit-scrollbar")}}
    • +
diff --git a/files/fr/web/css/selector_list/index.html b/files/fr/web/css/selector_list/index.html new file mode 100644 index 0000000000..28e73a371b --- /dev/null +++ b/files/fr/web/css/selector_list/index.html @@ -0,0 +1,99 @@ +--- +title: Liste de sélecteurs +slug: Web/CSS/Selector_list +tags: + - CSS + - Sélecteur +translation_of: Web/CSS/Selector_list +--- +
{{CSSRef}}
+ +

 Une liste de sélecteurs (,) permet de cibler tous les nœuds correspondants à l'une des conditions.

+ +
/* Cible tous les éléments correspondants */
+span,
+div {
+  border: red 2px solid;
+}
+ +

Afin de réduire la taille d'une feuille de style, on peut grouper les sélecteurs dans une liste séparée par des virgules.

+ +

Syntaxe

+ +
element, element, element { propriétés de style }
+ +

Exemples

+ +

Groupement sur une seule ligne

+ +

On peut grouper les sélecteurs sur une seule ligne :

+ +
h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
+
+ +

Groupement sur plusieurs lignes

+ +

On peut grouper les sélecteurs sur plusieurs lignes :

+ +
#main,
+.content,
+article {
+  font-size: 1.1em;
+}
+
+ +

Invalidation d'une liste de sélecteurs

+ +

Un inconvénient des listes de sélecteurs est la non-équivalence des deux blocs suivants :

+ +
h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }
+ +
h1, h2:maybe-unsupported, h3 { font-family: sans-serif }
+ +

En effet, un seul sélecteur vous manque et tout est dépeuplé. Enfin, un seul sélecteur invalide rend l'ensemble de la règle invalide.

+ +

Pour éviter cet effet indésirable, on pourra utiliser le sélecteur {{CSSxRef(":is", ":is()")}} qui ignore les sélecteurs invalides parmi ses arguments. Par contre, tous les sélecteurs passés en arguments auront la même spécificité.

+ +
h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }
+ +
:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}{{Spec2("CSS4 Selectors")}}Renommage en « liste de sélecteur »
{{SpecName('CSS1', '#grouping', 'grouping')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.list")}}

+ +

Voir aussi

+ +
    +
  • Les pseudo-classes {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} et {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs.
    • +
diff --git a/files/fr/web/css/shape-box/index.html b/files/fr/web/css/shape-box/index.html new file mode 100644 index 0000000000..ebb643f4c8 --- /dev/null +++ b/files/fr/web/css/shape-box/index.html @@ -0,0 +1,168 @@ +--- +title: +slug: Web/CSS/shape-box +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/shape-outside +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <shape-box> permet de définir des formes relatives aux boîtes de l'élément (voir le modèle de boîtes), notamment pour la propriété {{cssxref("shape-outside")}}.

+ +

Valeurs

+ +
+
margin-box
+
La forme correspond à la forme dessinée par le contour extérieur de la boîte de marge. Les rayons des coins de la forme sont définis grâce aux propriétés {{cssxref("border-radius")}} et {{cssxref("margin")}}. Si le ratio border-radius / margin est supérieur ou égal à 1, le rayon du coin de la boîte sera border-radius + margin. Si le ratio border-radius / margin est inférieur à 1, le rayon du coin de la boîte sera border-radius + (margin * (1 + (ratio-1)^3)).
+
border-box
+
La forme correspond à la forme dessinée par le contour extérieur de la boîte de bordure. Elle suit donc les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).
+
padding-box
+
La forme correspond à la forme dessinée par le contour extérieur de la boîte de remplissage (padding). Elle suit les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).
+
content-box
+
La forme correspond à la forme dessinée par le contour extérieur de la boîte de contenu. Le rayon de chaque coin correspondra à la valeur maximale entre 0 et border-radius - border-width - padding.
+
+ +

Exemples

+ +

CSS

+ +
.main {
+    width: 500px;
+    height: 200px;
+}
+
+.left {
+    -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
+    float: left;
+    width: 40%;
+    height: 12ex;
+    background-color: lightgray;
+    -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
+}
+
+.right {
+    -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
+    float: right;
+    width: 40%;
+    height: 12ex;
+    background-color: lightgray;
+    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+p {
+    text-align: center;
+}
+ +

HTML

+ +
<div class="main">
+    <div class="left"></div>
+    <div class="right"></div>
+    <p>
+      Sometimes a web page's text content appears to be
+      funneling your attention towards a spot on the page
+      to drive you to follow a particular link. Sometimes
+      you don't notice.
+    </p>
+</div>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Shapes', '#typedef-shape-box', '<shape-box>')}}{{Spec2('CSS Shapes')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
\xx{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome pour AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support simple{{compatVersionUnknown}}{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
\xx{{compatVersionUnknown}}{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/shape-image-threshold/index.html b/files/fr/web/css/shape-image-threshold/index.html new file mode 100644 index 0000000000..b4a32531a6 --- /dev/null +++ b/files/fr/web/css/shape-image-threshold/index.html @@ -0,0 +1,117 @@ +--- +title: shape-image-threshold +slug: Web/CSS/shape-image-threshold +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/shape-image-threshold +--- +
{{CSSRef}}
+ +

La propriété shape-image-threshold définit le seuil, en terme de canal alpha, à utiliser pour extraire la forme d'une image. Cette forme pourra être utilisée pour {{cssxref("shape-outside")}}.

+ +
{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}
+ + + +

Touts les pixels dont la composante alpha est supérieure à ce seuil seront retenus pour délimiter les contours de la formes. Une valeur de 0.5 indiquera par exemple qu'on prend la forme qui englobe tous les pixels dont l'opacité est supérieure à 50%.

+ +

Syntaxe

+ +
/* Quantité seuil  */
+/* Valeur <number> */
+shape-image-threshold: 0.7;
+
+/* Valeurs globales */
+shape-image-threshold: inherit;
+shape-image-threshold: initial;
+shape-image-threshold: unset;
+
+ +

Valeurs

+ +
+
<number>
+
Un nombre ({{cssxref("<number>")}}) représentant le seuil utilisé pour extraire une forme d'une image. La forme est définie par les pixels dont la valeur du canal alpha est supérieur au seuil indiqué. Un seuil qui est inférieur à 0.0 (transparence totale) ou supérieur à 1.0 (opacité totale) sera ramené dans cet intervalle.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Dans cet exemple, on utilise un bloc {{HTMLElement("div")}} pour y afficher une image d'arrière-plan avec un dégradé. On retrouve ce dégradé dans une forme CSS avec la propriété shape-outside et on utilise shape-image-threshold afin de ne retenir que les pixels dont l'opacité est supérieure ou égale à 20% pour délimiter la forme.

+ +

CSS

+ +
#gradient-shape {
+  width: 150px;
+  height: 150px;
+  float: left;
+  background-image: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  shape-outside: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  shape-image-threshold: 0.2;
+}
+ +

HTML

+ +
<div id="gradient-shape"></div>
+
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
+  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
+  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat
+  adipisci, libero quae nihil porro debitis laboriosam inventore animi
+  impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque
+  a mollitia dicta repudiandae illum exercitationem aliquam repellendus
+  ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto
+  nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit
+  accusamus iusto dolore, at provident eius alias maxime pariatur non
+  deleniti ipsum sequi rem eveniet laboriosam magni expedita?
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', "600px", "230px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}{{Spec2('CSS Shapes')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.shape-image-threshold")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/shape-margin/index.html b/files/fr/web/css/shape-margin/index.html new file mode 100644 index 0000000000..aeae58a570 --- /dev/null +++ b/files/fr/web/css/shape-margin/index.html @@ -0,0 +1,118 @@ +--- +title: shape-margin +slug: Web/CSS/shape-margin +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/shape-margin +--- +
{{CSSRef}}
+ +

La propriété CSS shape-margin définit la marge autour d'une forme CSS créée avec {{cssxref("shape-outside")}}.

+ +
{{EmbedInteractiveExample("pages/css/shape-margin.html")}}
+ + + +

La marge permet d'ajuster la distance entre le contour de la forme (l'élément flottant) et le contenu autour.

+ +
/* Valeur de longueur */
+/* Type <length> */
+shape-margin: 10px;
+shape-margin: 20mm;
+
+/* Valeur proportionnelle */
+/* Type <percentage> */
+shape-margin: 60%;
+
+/* Valeurs globales */
+shape-margin: inherit;
+shape-margin: initial;
+shape-margin: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
<length-percentage>
+
Cette valeur définit la marge entre la forme et le texte alentour grâce à une longueur (cf. {{cssxref("<length>")}}) ou à un pourcentage ({{cssxref("<percentage>")}}) proportionnel à la largeur du bloc englobant de l'élément.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
section {
+  max-width: 400px;
+}
+
+.shape {
+  float: left;
+  width: 150px;
+  height: 150px;
+  background-color: maroon;
+  clip-path: polygon(0 0, 150px 150px, 0 150px);
+  shape-outside: polygon(0 0, 150px 150px, 0 150px);
+  shape-margin: 20px;
+}
+ +

HTML

+ +
<section>
+  <div class="shape"></div>
+  We are not quite sure of any one thing in biology; our knowledge of geology
+  is relatively very slight, and the economic laws of society are
+  uncertain to every one except some individual who attempts to set them
+  forth; but before the world was fashioned the square on the hypotenuse
+  was equal to the sum of the squares on the other two sides of a right
+  triangle, and it will be so after this world is dead; and the inhabitant
+  of Mars, if he exists, probably knows its truth as we know it.
+</section>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 500, 250)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Shapes', '#shape-margin-property', 'shape-margin')}}{{Spec2('CSS Shapes')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.shape-margin")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/shape-outside/index.html b/files/fr/web/css/shape-outside/index.html new file mode 100644 index 0000000000..f759a838c5 --- /dev/null +++ b/files/fr/web/css/shape-outside/index.html @@ -0,0 +1,167 @@ +--- +title: shape-outside +slug: Web/CSS/shape-outside +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/shape-outside +--- +
{{CSSRef}}
+ +

La propriété shape-outside définit une forme (qui peut ne pas être un rectangle) autour de laquelle le contenu en ligne devra « s'écouler ». Par défaut, le contenu en ligne évolue autour de la boîte de marge de l'élément flottant. La propriété shape-outside permet de personnaliser ce contour et d'obtenir un texte qui s'écoule autour d'objets plus complexes que des rectangles.

+ +
{{EmbedInteractiveExample("pages/css/shape-outside.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+shape-outside: none;
+shape-outside: margin-box;
+shape-outside: content-box;
+shape-outside: border-box;
+shape-outside: padding-box;
+
+/* Valeurs utilisant une fonction */
+shape-outside: circle();
+shape-outside: ellipse();
+shape-outside: inset(10px 10px 10px 10px);
+shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
+shape-outside: linear-gradient(45deg, rgba(255,255,255,0) 150px, red 150px);
+
+/* Valeur de type <url> */
+shape-outside: url(image.png);
+
+
+/* Valeur de type <gradient> */
+shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
+
+/* Valeurs globales */
+shape-outside: initial;
+shape-outside: inherit;
+shape-outside: unset;
+
+ +

Valeurs

+ +
+
none
+
La zone de flottement n'est pas modifiée. Le contenu en ligne épouse le contour de la boîte de marge normalement.
+
<shape-box>
+
La forme est calculée selon 'margin-box', 'border-box', 'padding-box' or 'content-box' qui correspondent chacune aux boîtes de marge, bordure, remplissage et de contenu. La boîte ainsi définie inclue les courbures induites par {{cssxref("border-radius")}}. On a un effet semblable à {{cssxref("background-clip")}}.
+
<basic-shape>
+
Une valeur de type {{cssxref("<basic-shape>")}}. La forme est calculée selon une valeur parmi inset(), circle(), ellipse(), ou polygon(). Si une valeur <shape-box> est fournie, cela définira la boîte de référence dans laquelle appliquée la forme définie avec la fonction <basic-shape>. Si <shape-box> n'est pas fournie, la valeur par défaut sera 'margin-box'.
+
<image>
+
La forme est extraite et calculée à partir du canal alpha de l'image {{cssxref("image")}} en utilisant l propriété {{cssxref("shape-image-threshold")}}.
+
Les agents utilisateurs doivent utiliser la méthode fetch, éventuellement avec CORS pour les URL utilisées dans shape-outside. Lors de l'accès à la ressource, les agents utilisateurs doivent utiliser le mode Anonymous et définir la source du referrer comme l'URL de la feuille de style, l'origine de l'URL doit être celle du document. S'il y a des erreurs réseau empêchant de récupérer l'image, l'effet sera le même que celui obtenu avec la valeur none.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Interpolation

+ +

Afin de pouvoir interpoler entre deux formes, on appliquera les règles suivantes. Les valeurs avec des fonctions sont interpolées comme une liste simple. Les valeurs d'une liste sont interpolées comme des longueurs, des pourcentages ou des valeurs calculées lorsque c'est possible. Si les valeurs de la liste n'ont pas ces types mais sont identiques (par exemple, on trouve nonzero à la même position dans les deux listes), les valeurs pourront interopérer.

+ +
    +
  • Les deux formes doivent utiliser la même boîtes de référence.
    • +
  • Si les deux formes sont du même type, que ce type est ellipse() ou circle() et 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 du type inset(), on aura une interpolation entre chaque valeur.
    • +
  • Si les deux formes sont du types polygon(), que les deux polygones ont le même nombre de côtés et utilisent la même règle <fill-rule>, on aura une interpolation entre chaque valeur.
    • +
  • Dans les autres cas, on n'a pas d'interpolation définie.
    • +
+ +

Exemples

+ +

HTML

+ +
<div class="main">
+  <div class="left"></div>
+  <div class="right"></div>
+  <p>
+    Sometimes a web page's text content appears to be
+    funneling your attention towards a spot on the page
+    to drive you to follow a particular link.  Sometimes
+    you don't notice.
+  </p>
+</div>
+ +

CSS

+ +
.main {
+  width: 530px;
+}
+
+.left,
+.right {
+  width: 40%;
+  height: 12ex;
+  background-color: lightgray;
+}
+
+.left {
+  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
+  shape-outside: polygon(0 0, 100% 100%, 0 100%);
+  float: left;
+  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
+  clip-path: polygon(0 0, 100% 100%, 0 100%);
+}
+
+.right {
+  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
+  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
+  float: right;
+  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+p {
+  text-align: center;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Shapes', '#shape-outside-property', 'shape-outside')}}{{Spec2('CSS Shapes')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.shape-outside")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/shape/index.html b/files/fr/web/css/shape/index.html new file mode 100644 index 0000000000..5475c0e6c4 --- /dev/null +++ b/files/fr/web/css/shape/index.html @@ -0,0 +1,106 @@ +--- +title: +slug: Web/CSS/shape +tags: + - CSS + - Déprécié + - Reference + - Type +translation_of: Web/CSS/shape +--- +
{{CSSRef}}{{deprecated_header}}
+ +

Le type de donnée CSS <shape> permet de représenter des formes. Ces formes (ou régions) sont utilisées pour définir les parties d'un élément sur lesquelles des propriétés comme {{cssxref("clip")}} s'appliquent. Ce type de donnée a été déprécié pour être remplacé par {{cssxref("<basic-shape>")}}.

+ +
+

Note : <shape> et rect() fonctionnent avec la propriété {{cssxref("clip")}} qui a été dépréciée pour être remplacée par {{cssxref("clip-path")}}. Il est donc préférable d'utiliser cette dernière si possible avec une valeur de type {{cssxref("<basic-shape>")}} à la place.

+
+ +

Syntaxe

+ +

Les valeurs de type <shape> sont construites grâce à la notation fonctionnelle rect() qui permet de créer une zone en forme de rectangle.

+ +
rect(haut, droite, bas, gauche)
+
+ +

Valeurs

+ +

rect.png

+ +
+
haut
+
Une valeur de type {{cssxref("<length>")}} qui représente le décalage entre le côté haut du rectangle et le côté haut de la bordure de l'élément.
+
+ +
+
droite
+
Une valeur de type {{cssxref("<length>")}} qui représente le décalage entre le côté droit du rectangle et le côté gauche de la bordure de l'élément.
+
+ +
+
bas
+
Une valeur de type {{cssxref("<length>")}} qui représente le décalage entre le côté bas du rectangle et le côté haut de la bordure de l'élément.
+
+ +
+
gauche
+
Une valeur de type {{cssxref("<length>")}} qui représente le décalage entre le côté gauche du rectangle et le côté gauche de la bordure de l'élément.
+
+ +

Interpolation

+ +

Les valeurs de type <shape> sont des rectangles qui peuvent être interpolées lors des animations. Pour ces valeurs, l'interpolation s'effectue en interpolant chacune des valeurs haut, droite, bas et gauche comme des nombres réels (à virgule flottante). La vitesse de l'interpolation est définie grâce à la fonction de temporisation associée à l'animation.

+ +

Exemples

+ +

CSS

+ +
.exemple {
+   position: absolute;
+   top: 0px;
+   left: 360px;
+   clip: rect(0px, 175px, 113px, 0px);
+}
+
+ +

HTML

+ +
<p>
+  <img class="exemple" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Rogné en haut à gauche">
+</p>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'visufx.html#value-def-shape', '<shape>')}}{{Spec2('CSS2.1')}}Définition avec la propriété {{cssxref("clip")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.shape")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("clip")}}
    • +
  • La fonction spécifique à Gecko {{cssxref("-moz-image-rect()")}}
    • +
diff --git a/files/fr/web/css/string/index.html b/files/fr/web/css/string/index.html new file mode 100644 index 0000000000..a3c01544ab --- /dev/null +++ b/files/fr/web/css/string/index.html @@ -0,0 +1,85 @@ +--- +title: +slug: Web/CSS/string +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/string +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <string> représente une chaîne de caractères. En CSS, les chaînes de caractères sont présentes dans de nombreuses propriétés comme {{cssxref("content")}}, {{cssxref("font-family")}} et {{cssxref("quotes")}}.

+ +

Syntaxe

+ +

Une chaîne de caractères CSS est formée d'un ou plusieurs caractères Unicode délimités par des quotes (') ou des doubles quotes ("). Une chaîne délimitée par des doubles quotes ne peut pas contenir de double quotes à moins qu'elles soient échappées à l'aide d'une barre oblique inversée (\). Le même principe s'applique aux chaînes délimitées par des quotes simples, qui ne peuvent contenir de quotes simples sans qu'elles soient échappés à l'aide d'une barre oblique inversée (\).

+ +

Le caractère barre oblique inversée doit être échappé afin de faire partie d'une chaîne de caractère.

+ +

Les nouvelles lignes ne sont pas acceptées, sauf si elles sont échappées à l'aide d'un caractère de saut de ligne tel que \A ou \00000a. Toutefois, des chaînes de caractères peuvent s'étendre sur plusieurs lignes. Dans ce cas, il est possible de couper la chaîne en plusieurs lignes en utilisant une barre oblique inversée (\) comme dernier caractère de chaque ligne.

+ +

Les caractères peuvent être décrits en utilisant leur point de code Unicode hexadécimal, qui doit alors être échappé à l'aide du caractère \. \27 représente par exemple le guillemet droit simple (') et \A9 le symbole du copyright ©.

+ +
+

Note : Les entités telles que &nbsp; ou &#8212; ne peuvent pas être utilisées pour les chaînes de caractères CSS.

+
+ +

Exemples

+ +
"Chaîne avec des guillemets doubles"
+"Chaîne avec plusieurs \" guillemets doubles"
+'Chaîne avec des guillemets simples'
+'Chaîne avec plusieurs \' guillemets simples'
+
+"Chaîne avec une \Anouvelle ligne"
+
+"Une grande chaîne \
+de caractères"
+"Une grande chaîne de caractères"
+
+ +
Note : on peut également échapper des doubles quotes avec \22 et les simples quotes avec \27.
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Values', '#strings', '')}}{{Spec2('CSS3 Values')}}Aucune modification significative depuis CSS Level 2 (Revision 1)
{{SpecName('CSS2.1', 'syndata.html#strings', '')}}{{Spec2('CSS2.1')}}Définition explicite. Les valeurs Unicode échappées sur 6 chiffres sont autorisées.
{{SpecName('CSS1', '', '')}}{{Spec2('CSS1')}}Définition implicite. Les valeurs Unicode échappées sur 4 chiffres sont autorisées.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.string")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/symbols()/index.html b/files/fr/web/css/symbols()/index.html new file mode 100644 index 0000000000..8e0395bae9 --- /dev/null +++ b/files/fr/web/css/symbols()/index.html @@ -0,0 +1,74 @@ +--- +title: symbols() +slug: Web/CSS/symbols() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/symbols() +--- +
{{CSSRef}}
+ +

La fonction symbols() permet de définir des styles pour les compteurs en ligne, directement comme valeur de la propriété CSS. À la différence des styles définis avec {{cssxref("@counter-style")}}, ces styles sont anonymes. La fonction symbols() ne possède pas toute la flexibilité offerte par la règle @ {{cssxref("@counter-style")}} mais peut s'avérer utile dans des cas où le style nécessaire n'est utilisé qu'une seule fois et où il n'est pas nécessaire d'utiliser toutes les options fournies par {{cssxref("@counter-style")}}.

+ +

Syntaxe

+ +
symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );
+ +

<symbols-type> est l'un des mots-clés suivants :

+ +
    +
  • cyclic : le système utilisera les différentes valeurs les unes à la suite des autres, de façon cyclique.
    • +
  • numeric : le système interprètera les valeurs fournies comme une suite numérique composant un système de numération.
    • +
  • alphabetic : le système interprètera les valeurs fournies comme les chiffres d'un système de numération alphabétique (par exemple : A, B, C, AA, AB, AC, etc.) sans zéro.
    • +
  • symbolic : le système parcourt les différentes valeurs fournies et en affiche une de plus à chaque cycle.
    • +
  • fixed : le système affiche chaque symbole une fois puis poursuit avec les chiffres arabes.
    • +
+ +

Exemples

+ +

HTML

+ +
<ol>
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ol>
+ +

CSS

+ +
ol {
+  list-style: symbols(alphabetic "*" "\2020" "\2021");
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Counter Styles', '#symbols-function', 'symbols()')}}{{Spec2('CSS3 Counter Styles')}}Définition initiale.
+ +

Voir aussi

+ +
    +
  • {{cssxref("@counter-style")}}
    • +
  • {{cssxref("list-style-type")}} et la propriété raccourcie correspondante : {{cssxref("list-style")}}.
    • +
diff --git "a/files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" "b/files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" new file mode 100644 index 0000000000..2acb4d1da7 --- /dev/null +++ "b/files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" @@ -0,0 +1,421 @@ +--- +title: Syntaxe de définition des valeurs +slug: Web/CSS/Syntaxe_de_définition_des_valeurs +tags: + - CSS + - Débutant + - Reference +translation_of: Web/CSS/Value_definition_syntax +--- +
{{CSSRef}}
+ +

La syntaxe de définition des valeurs CSS est une grammaire formelle qui définit les règles pour créer des règles CSS valides. En plus de ces règles, il peut y avoir des contraintes sémantiques (ex. un nombre doit être positif pour une propriété donnée).

+ +

La syntaxe de définition décrit les valeurs qui sont permises et les interactions entre ces valeurs. Un composant peut-être un mot-clé, un littéral, une valeur d'un type donné ou une autre propriété CSS.

+ +

Les types de composants

+ +

Les mots-clés

+ +

Les mots-clés génériques

+ +

Un mot-clé avec une signification prédéfinie, qui peut apparaître littéralement, sans apostrophes ou guillemets (ex. auto, smaller ou ease-in).

+ +

inherit, initial et unset

+ +

Toutes propriétés CSS acceptent les mots-clés inherit, initial et unset définies par la spécification CSS. Ces mots-clés ne sont pas listés dans la définition de la syntaxe et sont définies implicitement.

+ +

Les littéraux

+ +

En CSS, quelques caractères peuvent apparaître directement (ex. la barre oblique « / » ou la virgule « , ») et sont utilisés dans les définitions d'une propriété pour séparer ses composantes. La virgule est généralement utilisée pour séparer des valeurs d'une liste ou des paramètres d'une fonction. La barre oblique sépare des composantes sémantiquement différentes mais avec une syntaxe similaire. Généralement, la barre oblique est utilisée dans les propriétés raccourcies pour séparer les composants du même type mais qui sont associés aux différentes propriétés détaillées.

+ +

Ces deux symboles sont utilisés tels quels dans la définition d'une valeur.

+ +

Les types de donnée

+ +

Les types de donnée simples

+ +

Certains types de donnée sont utilisés pour différentes propriétés et sont définis pour l'ensemble des valeurs de la spécification. Ce sont les types de donnée simples et sont représentés par leur nom encadré par des chevrons (le type angle est donc représenté par : {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, et ainsi de suite).

+ +

Les types de donnée non terminaux

+ +

D'autres types de donnée, moins utilisés, sont appelés types de donné non-terminaux et sont également encadrés par des chevrons.

+ +

Les types de donnée non terminaux sont de deux sortes :

+ +
    +
  • Les types de donnée qui utilisent le même nom qu'une propriété. Dans ce cas, le type de donnée correspond à l'ensemble des valeurs utilisé par la propriété. Ceux-ci sont généralement utilisés dans les définitions des propriétés raccourcies.
    • +
  • Les types de donnée dont le nom de n'est pas celui d'une propriété. Ces types de donnée sont très proches des types simples. La seule différence est l'emplacement de leur définition : dans ce cas, la définition est généralement très proche de la définition de la propriété qui les utilise.
    • +
+ +

Les combinateurs

+ +

Les crochets

+ +

Les crochets permettent de regrouper plusieurs entités, combinateurs et multiplicateurs pour les transformer en un seul composant. Cela permet de grouper les composants afin d' appliquer des règles de priorités (supérieures aux règles de précédence).

+ +
bold [ thin && <length> ]
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold thin 2vh
    • +
  • bold 0 thin
    • +
  • bold thin 3.5em
    • +
+ +

Mais ne correspondra pas à :

+ +
    +
  • thin bold 3em car bold est juxtaposé au composant défini entre les crochets alors qu'il doit apparaître avant.
    • +
+ +

Juxtaposition

+ +

Si on place plusieurs mots-clés, littéraux ou types de donnée les uns à la suite des autres, séparés par un ou plusieurs blancs, cela indique que tous les composants sont obligatoires et doivent apparaître dans cet ordre.

+ +
bold <length> , thin
+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold 1em, thin
    • +
  • bold 0, thin
    • +
  • bold 2.5cm, thin
    • +
  • bold 3vh, thin
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • thin 1em, bold car les entités ne sont pas dans l'ordre indiqué
    • +
  • bold 1em thin car les entités sont obligatoires et la virgule qui est un littéral doit être présente
    • +
  • bold 0.5ms, thin car les valeurs ms ne sont pas des valeurs du type {{cssxref("<length>")}}
    • +
+ +

Double esperluette

+ +

Lorsqu'on sépare deux ou plusieurs composants par une double esperluette, cela signifie que toutes les entités sont obligatoires mais peuvent apparaître dans n'importe quel ordre.

+ +
bold && <length>
+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold 1em
    • +
  • bold 0
    • +
  • 2.5cm bold
    • +
  • 3vh bold
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold car les deux composants doivent apparaître.
    • +
  • bold 1em bold car les deux composants doivent apparaître exactement une fois.
    • +
+ +
Note : La juxtaposition est prioritaire par rapport à la double esperluette. bold thin && <length> est donc équivalent à [ bold thin ] && <length>. Il décrit bold thin <length> ou <length> bold thin mais pas bold <length> thin.
+ +

Double barre

+ +

Lorsque deux ou plusieurs composants sont séparés par une double barre verticale ||. Cela signifie qu'au moins un composant doit être présent et qu'ils peuvent apparaître dans n'importe quel ordre. Généralement, ceci est utilisé pour définir les différentes valeurs d'une propriété raccourcie.

+ +
<'border-width'> || <'border-style'> || <'border-color'>
+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • 1em solid blue
    • +
  • blue 1em
    • +
  • solid 1px yellow
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • blue yellow car le composant doit apparaître au plus une fois.
    • +
  • bold car le mot-clé n'est pas permis pour aucune valeur de l'entité.
    • +
+ +
Note : La double esperluette est prioritaire par rapport à la double barre. bold || thin && <length> est équivalent à bold || [ thin && <length> ] qui décrit bold, thin <length>, bold thin <length>, ou thin <length> bold mais pas <length> bold thin car bold, s'il est présent doit apparaître avant thin && <length>.
+ +

La barre verticale

+ +

Lorsqu'on sépare deux entités par une barre verticale. Cela signifie que les différentes options sont exclusives : seule une des options doit être présente. Généralement, cela permet de séparer différents mots-clés possible.

+ +
<percentage> | <length> | left | center | right | top | bottom
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • 3%
    • +
  • 0
    • +
  • 3.5em
    • +
  • left
    • +
  • center
    • +
  • right
    • +
  • top
    • +
  • bottom
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • center 3% car seul un seul des composants doit être présent.
    • +
  • 3em 4.5em car un composant doit être présent au plus une seule fois.
    • +
+ +
+

Note : La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi bold | thin || <length> est équivalent à bold | [ thin || <length> ] qui décrit bold, thin, <length>, <length> thin ou thin <length> mais pas bold <length> car seule entité peut être présente.

+
+ +

Les multiplicateurs

+ +

Un multiplicateur est un signe qui indique nombre de fois qu'une entité peut être répétée. Sans aucun multiplicateur, une entité doit apparaître exactement une fois.

+ +

L'astérisque (*)

+ +

L'astérisque indique qu'une entité peut apparaître zéro, une ou plusieurs fois.

+ +
bold smaller*
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold
    • +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller and so on.
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • +
+ +

Plus (+)

+ +

Le multiplicateur « plus » indique que l'entité peut apparaître une ou plusieurs fois.

+ +
bold smaller+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller and so on.
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold car smaller doit apparaître au moins une fois
    • +
  • smaller car bold est juxtaposé et doit apparaitre avant smaller.
    • +
+ +

Le point d'interrogation (?)

+ +

Le point d'interrogation indique que l'entité est optionnelle et doit apparaître zéro ou une fois.

+ +
bold smaller?
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold
    • +
  • bold smaller
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold smaller smaller car smaller doit apparaître au plus une fois
    • +
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller s'il est présent.
    • +
+ +

Les accolades ({ })

+ +

Les accolades encadrent deux entiers A et B, séparés par une virgule et indiquent que l'entité doit apparaître au moins A fois et au plus B fois.

+ +
bold smaller{1,3}
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold car smaller doit apparaître au moins une fois.
    • +
  • bold smaller smaller smaller smaller car smaller doit apparaître au plus trois fois.
    • +
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • +
+ +

Dièse (#)

+ +

Le symbole dièse indique qu'une entité doit être répétée une ou plusieurs fois et que chaque occurrence est séparée par une virgule.

+ +
bold smaller#
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold smaller
    • +
  • bold smaller, smaller
    • +
  • bold smaller, smaller, smaller and so on.
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold car smaller doit apparaître au moins une fois.
    • +
  • bold smaller smaller smaller car les différentes occurrences de smaller doivent être séparées par des virgules.
    • +
  • smaller car bold est juxtaposé et doit apparaître avant toute occurrence du mot-clé smaller.
    • +
+ +

Point d'exclamation (!)

+ +

Le multiplicateur point d'exclamation est utilisé après un groupe pour indiquer que celui-ci ne doit produire qu'une seule valeur. Ici, même si la grammaire des éléments du groupe indiquent que tous les composants peuvent être absents, il faut qu'il y ait au moins un composant présent.

+ +
[ bold? smaller? ]!
+
+ +

Cet exemple correspondra aux valeurs suivantes :

+ +
    +
  • bold
    • +
  • smaller
    • +
  • bold smaller
    • +
+ +

Mais pas à :

+ +
    +
  • ni bold ni smaller, car il faut au moins l'un des deux.
    • +
  • smaller bold, car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • +
  • bold smaller bold, car bold et smaller doivent apparaître au plus une fois.
    • +
+ +

Récapitulatif

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SigneNomDescriptionExemple
Combinateurs
 JuxtapositionLes composants sont obligatoires et doivent apparaître dans cet ordre.solid <length>
&&Double esperluetteLes composants sont obligatoires mais peuvent apparaître dans n'importe quel ordre.<length> && <string>
||Double barreAu moins un des composants doit être présent et ils peuvent apparaître dans n'importe quel ordre.<'border-image-outset'> || <'border-image-slice'>
|Barre simpleUn et un seul des composants doit être présent.smaller | small | normal | big | bigger
[ ]CrochetsLes composants peuvent être groupés pour avoir une priorité supérieure aux règles précédentes.bold [ thin && <length> ]
Multiplicateurs
 Aucun multiplicateurExactement 1 fois.solid
*Astérisque0 ou plus.bold smaller*
+Signe plus1 ou plus.bold smaller+
?Point d'interrogation0 ou 1 fois (autrement dit, la valeur est optionnelle)bold smaller?
{A,B}AccoladesAu moins A fois et au plus B fois.bold smaller{1,3}
#Dièse1 ou plus de fois mais chaque occurrence doit être séparée d'une autre par une virgule.bold smaller#
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatComment
{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}{{Spec2('CSS3 Values')}}Ajout du multiplicateur avec le dièse.
{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}{{Spec2('CSS2.1')}}Ajout de la double esperluette.
{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}{{Spec2('CSS1')}}Définition initiale.
diff --git "a/files/fr/web/css/s\303\251lecteurs_css/comparison_with_xpath/index.html" "b/files/fr/web/css/s\303\251lecteurs_css/comparison_with_xpath/index.html" new file mode 100644 index 0000000000..2a35cb5611 --- /dev/null +++ "b/files/fr/web/css/s\303\251lecteurs_css/comparison_with_xpath/index.html" @@ -0,0 +1,49 @@ +--- +title: Comparison entre les sélecteurs CSS et XPath +slug: Web/CSS/Sélecteurs_CSS/Comparison_with_XPath +tags: + - CSS + - Draft + - NeedsContent + - Reference + - XPath +translation_of: Web/XPath/Comparison_with_CSS_selectors +--- +
{{CSSRef("Selectors")}}{{QuickLinksWithSubpages("/fr/docs/Web/XPath")}}{{Draft}}
+ +

Dans cet article, nous listerons les différences entre les sélecteurs CSS et les fonctionnalités XPath afin que les développeurs web puissent choisir l'outil le plus pertinent.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Fonctionnalité XPathÉquivalent CSS
Axe ancestor, parent ou preceding-sibling{{CSSxRef(":has",":has()")}} selector {{experimental_inline}}
Axe attributeSélecteurs d'attribut
Axe childSélecteurs d'enfant
Axe descendantSélecteur de descendant
Axe following-siblingSélecteur de voisin général ou sélecteur de voisin direct
Axe selfSélecteur {{CSSxRef(":scope")}} ou {{CSSxRef(":host")}}
diff --git "a/files/fr/web/css/s\303\251lecteurs_css/index.html" "b/files/fr/web/css/s\303\251lecteurs_css/index.html" new file mode 100644 index 0000000000..a9d6f91d81 --- /dev/null +++ "b/files/fr/web/css/s\303\251lecteurs_css/index.html" @@ -0,0 +1,114 @@ +--- +title: Sélecteurs CSS +slug: Web/CSS/Sélecteurs_CSS +tags: + - Aperçu + - CSS + - CSS Selectors + - Reference + - Sélecteur +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.

+ +

Les sélecteurs simples

+ +
+
Les sélecteurs de type
+
Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.
+ Syntaxe : nomelement
+ Exemple : input permettra de cibler n'importe quel élément {{HTMLElement('input')}}.
+
Les sélecteurs de classe
+
Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.
+ Syntaxe : .nomclasse
+ Exemple : .index permettra de cibler n'importe quel élément qui possède la classe index (vraisemblablement définie avec un attribut class="index").
+
Les sélecteurs d'identifiant
+
Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.
+ Syntaxe : #valeurid
+ Exemple : #toc permettra de cibler l'élément qui possède l'identifiant toc (vraisemblablement défini avec un attribut id="toc").
+
Le sélecteur universel
+
Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.
+ Syntaxe : * ns|* *|*
+ Exemple : * permettra de cibler tous les éléments du document.
+
Les sélecteurs d'attribut
+
Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.
+ Syntaxe : [attr] [attr=valeur] [attr~=valeur] [attr|=valeur] [attr^=valeur] [attr$=valeur] [attr*=valeur]
+ Exemple : [autoplay] permettra de cibler tous les éléments qui possède l'attribut autoplay défini (quelle que soit sa valeur).
+
+ +

Les combinateurs

+ +
+
Les sélecteurs de voisin direct
+
Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un élément donné.
+ Syntaxe : A + B
+ Exemple : div + p permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.
+
Les sélecteurs de voisins
+
Le combinateur '~' permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.
+ Syntaxe : A ~ B
+ Exemple : p ~ span permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent.
+
Les sélecteurs d'éléments fils
+
Le combinateur '>' permet de sélectionner les nœuds qui sont des fils directs d'un élément donné.
+ Syntaxe : A > B
+ Exemple : ul > li permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.
+
Les sélecteurs d'éléments descendants
+
Le combinateur   (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des fils directs) d'un élément donné.
+ Syntaxe : A B
+ Exemple : div span permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.
+
Le combinateur de colonne{{experimental_inline}}
+
Le combinateur || sélectionne les nœuds qui appartiennent à une colonne. Syntaxe : A || B
+ Exemple : col || td permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.
+
+ +

Les pseudo-classes

+ +
+
Les pseudo-classes permettent de cibler des éléments selon une information d'état qui n'est pas stockée dans l'arbre du document.
+
Exemple: a:visited permettra de cibler l'ensemble des éléments {{HTMLElement('a')}} (des liens) ayant déjà été visités par l'utilisateur.
+
+ +

Les pseudo-éléments

+ +
+
Les pseudo-éléments représentent des entités du document qui ne sont pas décrites en HTML.
+
Exemple : p::first-line permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Ajout du combinateur de colonne (||), des sélecteurs structurels pour la  grille, des combinateurs logiques, des pseudo-classes pour la localisation, la temporisation, les états de ressources, les éléments linguistiques et les éléments relatifs à l'interface utilisateur. Ajout du modificateur de sensibilité à la casse pour les caractèes ASCII et du ciblage des attributs insensible à la casse.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Ajout du combinateur de voisin ~. Les pseudo-éléments utilisent désormais un préfixe avec deux fois deux-points (::)
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} +

Ajout des combinateurs pour les fils (>) et voisins adjacents (+).
+ Ajout du sélecteur universel et du sélecteur d'attribut.

+
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
diff --git "a/files/fr/web/css/s\303\251lecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html" "b/files/fr/web/css/s\303\251lecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html" new file mode 100644 index 0000000000..8aeae8c255 --- /dev/null +++ "b/files/fr/web/css/s\303\251lecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html" @@ -0,0 +1,63 @@ +--- +title: 'Utiliser la pseudo-classe :target dans un sélecteur' +slug: 'Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un_selecteur' +tags: + - CSS + - Guide + - Intermédiaire +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +
{{CSSRef}}
+ +

Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les sélecteurs CSS3 ont introduit la pseudo-classe {{cssxref(":target")}}.

+ +

Choisir une cible

+ +

La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple contient le fragment d'identifiant #Exemple. En HTML, les identifiants correspondent aux valeurs des attributs id et name, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document.

+ +

Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement :

+ +
h2:target {
+  font-weight: bold;
+}
+ +

On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment #Exemple, on pourra écrire :

+ +
#Exemple:target {
+  border: 1px solid black;
+}
+ +

Cibler tous les éléments

+ +

Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique :

+ +
:target {
+  color: red;
+}
+
+ +

Exemple

+ +

Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le <h1 id="un"> devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.

+ +
+
<h4 id="un">...</h4> <p id="deux">...</p>
+<div id="trois">...</div> <a id="quatre">...</a> <em id="cinq">...</em>
+
+<a href="#un">Premier</a>
+<a href="#deux">Deuxième</a>
+<a href="#trois">Troisième</a>
+<a href="#quatre">Quatrième</a>
+<a href="#cinq">Cinquième</a>
+
+ +

Conclusion

+ +

Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion.

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/s\303\251lecteurs_d_attribut/index.html" "b/files/fr/web/css/s\303\251lecteurs_d_attribut/index.html" new file mode 100644 index 0000000000..6c9e719345 --- /dev/null +++ "b/files/fr/web/css/s\303\251lecteurs_d_attribut/index.html" @@ -0,0 +1,243 @@ +--- +title: Sélecteurs d'attribut +slug: Web/CSS/Sélecteurs_d_attribut +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/Attribute_selectors +--- +
{{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/s\303\251lecteurs_d_id/index.html" "b/files/fr/web/css/s\303\251lecteurs_d_id/index.html" new file mode 100644 index 0000000000..aa9a2141bc --- /dev/null +++ "b/files/fr/web/css/s\303\251lecteurs_d_id/index.html" @@ -0,0 +1,87 @@ +--- +title: Sélecteurs d'ID +slug: Web/CSS/Sélecteurs_d_ID +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef("Selectors")}}
+ +

Un sélecteur d'identifiant (ID selector) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut {{htmlattrxref("ID")}}. Il faut que la valeur soit exactement la même que celle du sélecteur pour que l'élément soit effectivement ciblé.

+ +
/* L'élément avec l'identifiant id="demo" */
+#demo {
+  border: red 2px solid;
+}
+ +

Syntaxe

+ +
#valeur_identifiant { déclarations }
+ +
+

Note : Cela est équivalent à la notation suivante qui utilise un {{cssxref("Sélecteurs_d_attribut", "sélecteur d'attribut")}}:

+ +
[id=valeur_identifiant] { déclarations }
+
+ +

Exemples

+ +

CSS

+ +
#identifie {
+  background-color: blue;
+}
+
+ +

HTML

+ +
<span id="identifie">Voici un span avec du texte.</span>
+<span>Et un autre (mais sans identifiant).</span>
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.id")}}

diff --git "a/files/fr/web/css/s\303\251lecteurs_de_classe/index.html" "b/files/fr/web/css/s\303\251lecteurs_de_classe/index.html" new file mode 100644 index 0000000000..115d791092 --- /dev/null +++ "b/files/fr/web/css/s\303\251lecteurs_de_classe/index.html" @@ -0,0 +1,101 @@ +--- +title: Sélecteurs de classe +slug: Web/CSS/Sélecteurs_de_classe +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Class_selectors +--- +
{{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/s\303\251lecteurs_de_type/index.html" "b/files/fr/web/css/s\303\251lecteurs_de_type/index.html" new file mode 100644 index 0000000000..adf931d9fe --- /dev/null +++ "b/files/fr/web/css/s\303\251lecteurs_de_type/index.html" @@ -0,0 +1,82 @@ +--- +title: Sélecteurs de type +slug: Web/CSS/Sélecteurs_de_type +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef("Selectors")}}
+ +

Les sélecteurs de type CSS ciblent des éléments en fonction du nom de leur nœud. Ainsi, lorsqu'un sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type (autrement dit tous les nœuds avec ce nom) contenus dans le document.

+ +
/* Cibler tous les éléments <a>. */
+a {
+  color: red;
+}
+ +

Syntaxe

+ +
élément { style propriétés }
+
+ +

Exemples

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<span>Voici un élément <code>span</code> avec du texte.</span>
+<p>Et là un élément <code>p</code>.</p>
+<span>Enfin, un autre élément <code>span</code>.</span>
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.type")}}

diff --git "a/files/fr/web/css/s\303\251lecteurs_de_voisins_g\303\251n\303\251raux/index.html" "b/files/fr/web/css/s\303\251lecteurs_de_voisins_g\303\251n\303\251raux/index.html" new file mode 100644 index 0000000000..ea97bdbf67 --- /dev/null +++ "b/files/fr/web/css/s\303\251lecteurs_de_voisins_g\303\251n\303\251raux/index.html" @@ -0,0 +1,81 @@ +--- +title: Sélecteurs de voisins généraux +slug: Web/CSS/Sélecteurs_de_voisins_généraux +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Le combinateur ~ permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent {{domxref("Element")}}, voisins immédiats ou pas.

+ +
/* Parmi tous les éléments <img>, cibler tous
+   éléments <p> qui les suivent. */
+img ~ p {
+  color: red;
+}
+ +

Syntaxe

+ +
premier_element ~ second_element { propriétés de style }
+
+ +

Exemples

+ +

CSS

+ +
p ~ span {
+  color: red;
+}
+ +

HTML

+ +
<span>Ici, ce n'est pas rouge.</span>
+<p>Voici un paragraphe.</p>
+<code>Un peu de code.</code>
+<span>Et un autre span.</span>
+<code>Encore du code</code>
+<span>Ici aussi, c'est rouge</span>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 280, 120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Ce combinateur est renommé en « subsequent-sibling combinator ».
{{SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.general_sibling")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/s\303\251lecteurs_descendant/index.html" "b/files/fr/web/css/s\303\251lecteurs_descendant/index.html" new file mode 100644 index 0000000000..5690dd95e7 --- /dev/null +++ "b/files/fr/web/css/s\303\251lecteurs_descendant/index.html" @@ -0,0 +1,109 @@ +--- +title: Sélecteurs descendant +slug: Web/CSS/Sélecteurs_descendant +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/Descendant_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Le combinateur de descendance, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs  (sous la forme sélecteur₁ sélecteur₂) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants.

+ +
/* Les éléments <li> qui sont des descendants */
+/* d'un <ul class="mon-truc"> */
+ul.mon-truc li {
+  margin: 2em;
+}
+ +

Techniquement, le combinateur de descendance est représenté par un ou plusieurs blancs (les caractères qui sont des blancs sont : l'espace, le retour chariot, le saut de ligne, la tabulation verticale, la tabulation horizontale) entre deux sélecteurs lorsqu'il n'y a aucun autre combinateur. Les blancs utilisés pour le combinateur peuvent éventuellement contenir des commentaires CSS.

+ +

Syntaxe

+ +
selecteur1 selecteur2 { /* déclarations CSS */ }
+
+ +

Exemples

+ +

CSS

+ +
li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+
+ +

HTML

+ +
<ul>
+  <li>
+    <div>Élément 1</div>
+    <ul>
+      <li>Sous-élément A</li>
+      <li>Sous-élément B</li>
+    </ul>
+  </li>
+  <li>
+    <div>Élément 2</div>
+    <ul>
+      <li>Sous-élément A</li>
+      <li>Sous-élément B</li>
+    </ul>
+  </li>
+</ul>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.descendant")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/s\303\251lecteurs_enfant/index.html" "b/files/fr/web/css/s\303\251lecteurs_enfant/index.html" new file mode 100644 index 0000000000..bc24234ef2 --- /dev/null +++ "b/files/fr/web/css/s\303\251lecteurs_enfant/index.html" @@ -0,0 +1,94 @@ +--- +title: Sélecteurs enfant +slug: Web/CSS/Sélecteurs_enfant +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/Child_combinator +--- +
{{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/s\303\251lecteurs_universels/index.html" "b/files/fr/web/css/s\303\251lecteurs_universels/index.html" new file mode 100644 index 0000000000..470d27160c --- /dev/null +++ "b/files/fr/web/css/s\303\251lecteurs_universels/index.html" @@ -0,0 +1,103 @@ +--- +title: Sélecteurs universels +slug: Web/CSS/Sélecteurs_universels +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef("Selectors")}}
+ +

L'astérisque (*) est le sélecteur universel en CSS. Il correspond à un élément de n'importe quel type.

+ +
* {
+  color: green;
+}
+ +

En CSS 3, l'astérisque peut être combinée avec les espaces de nom :

+ +
    +
  • ns|* - correspond à tous les éléments de l'espace de noms ns
    • +
  • *|* - correspond à tous les éléments
    • +
  • |* - correspond à tous les éléments sans espace de noms déclaré
    • +
+ +

Syntaxe

+ +
* { style properties }
+ +

L'astérisque est optionnelle lorsqu'elle est utilisée avec des sélecteurs simples. Par exemple, *.warning et .warning seront équivalents.

+ +

Exemples

+ +

CSS

+ +
* [lang^=fr] {
+  color:green;
+}
+
+*.warning {
+  color:red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left;
+}
+
+.floating + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="warning">
+  <span lang="fr">Un span vert</span> dans un paragraphe rouge.
+</p>
+<p id="maincontent" lang="fr">
+  <span class="warning">Un span rouge</span> dans un paragraphe vert.
+</p>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Définition du comportement avec les espaces de noms et ajout d'indications pour omettre le sélecteur avec les pseudo-éléments.
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.universal")}}

diff --git a/files/fr/web/css/tab-size/index.html b/files/fr/web/css/tab-size/index.html new file mode 100644 index 0000000000..61b80c16e2 --- /dev/null +++ b/files/fr/web/css/tab-size/index.html @@ -0,0 +1,98 @@ +--- +title: tab-size +slug: Web/CSS/tab-size +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/tab-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété tab-size permet d'adapter la largeur utilisée pour représenter le caractère de tabulation (U+0009).

+ +
/* Valeurs entières */
+/* Type <integer>   */
+tab-size: 4;
+tab-size: 0;
+
+/* Valeurs de longueurs */
+/* Type <length>        */
+tab-size: 10px;
+tab-size: 2em;
+
+/* Valeurs globales */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+
+ +

{{cssinfo}}

+ +

Syntaxe

+ +

Valeurs

+ +
+
{{cssxref("<integer>")}}
+
Le nombre d'espaces qu'occupe une tabulation. La valeur doit être positive.
+
{{cssxref("<length>")}}
+
La largeur de la tabulation. La valeur doit être positive.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<pre class="exemple">
+	print "tabulation avant"
+    print "4 espaces avant"
+  print "2 espaces avant"
+</pre>
+ +

CSS

+ +
.exemple {
+  tab-size: 5;
+}
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}}{{Spec2('CSS3 Text')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.tab-size")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/table-layout/index.html b/files/fr/web/css/table-layout/index.html new file mode 100644 index 0000000000..d6c9238751 --- /dev/null +++ b/files/fr/web/css/table-layout/index.html @@ -0,0 +1,111 @@ +--- +title: table-layout +slug: Web/CSS/table-layout +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/table-layout +--- +
{{CSSRef}}
+ +

La propriété table-layout définit l'algorithme utilisé pour disposer les cellules, lignes et colonnes d'un tableau.

+ +
{{EmbedInteractiveExample("pages/css/table-layout.html")}}
+ + + +

Syntaxe

+ +
/* Valeur utilisant un mot-clé */
+table-layout: auto;
+table-layout: fixed;
+
+/* Valeurs globales */
+table-layout: inherit;
+table-layout: initial;
+table-layout: unset;
+
+ +

Valeurs

+ +
+
{{cssxref("auto")}}
+
Un algorithme automatique, utilisé communément par la plupart des navigateurs, est utilisé pour gérer la disposition du tableau. La largeur du tableau et de ses cellules dépendent de leur contenu.
+
fixed
+
La largeur du tableau et celles des colonnes sont définies grâce aux largeurs des éléments table et col ou grâce à la largeur (explicite) de la première ligne de cellules. Les cellules des lignes suivantes n'affectent pas la largeur des colonnes.
+
+ Avec cette méthode « fixée », tout le tableau peut être rendu dès que la première ligne a été téléchargée et analysée. Cela permet d'accélérer le temps de rendu par rapport à la valeur auto. En revanche, le contenu des lignes (en dehors de la première), peut ne pas rentrer dans les colonnes avec la largeur calculée. Les cellules dont le contenu est trop large utiliseront la propriété {{cssxref("overflow")}} pour déterminer comment gérer le dépassement.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Cet exemple utilise table-layout: fixed et une largeur donnée (avec la propriété width) afin que le tableau ne s'agrandisse pas avec son contenu. Ainsi, on peut voir l'effet de la propriété {{cssxref("text-overflow")}} et l'application d'une ellipse pour les mots trop longs pour le tableau.

+ +

HTML

+ +
<table class="exemple">
+  <tr>
+    <td width="7em">Jean</td>
+    <td width="7em">Biche</td>
+  </tr>
+  <tr>
+    <td>Jean-Roger-Michel</td>
+    <td>du Domaine de la Biche</td>
+  </tr>
+</table>
+ +

CSS

+ +
.exemple {
+  table-layout: fixed;
+  width: 120px;
+  border: 1px solid red;
+}
+
+tr, td {
+  border: solid;
+}
+
+td {
+  border: 1px solid blue;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'tables.html#width-layout', 'table-layout')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.table-layout")}}

diff --git a/files/fr/web/css/text-align-last/index.html b/files/fr/web/css/text-align-last/index.html new file mode 100644 index 0000000000..a0f42f8863 --- /dev/null +++ b/files/fr/web/css/text-align-last/index.html @@ -0,0 +1,114 @@ +--- +title: text-align-last +slug: Web/CSS/text-align-last +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-align-last +--- +
{{CSSRef}}
+ +

La propriété text-align-last définit la façon dont la dernière ligne d'un bloc, ou une ligne avant un retour à la ligne forcé, doit être alignée.

+ +
{{EmbedInteractiveExample("pages/css/text-align-last.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs utilisant un mot-clé */
+text-align-last: auto;
+text-align-last: start;
+text-align-last: end;
+text-align-last: left;
+text-align-last: right;
+text-align-last: center;
+text-align-last: justify;
+
+/* Valeurs globales */
+text-align-last: inherit;
+text-align-last: initial;
+text-align-last: unset;
+
+ +

Valeurs

+ +
+
auto
+
La ligne concernée est alignée selon la valeur de {{cssxref("text-align")}} sauf si {{cssxref("text-align")}} vaut justify, auquel cas, cela aura le même effet que d'utiliser la valeur start pour text-align-last.
+
start
+
Cette valeur a le même effet que la valeur left si la direction du texte va de gauche à droite ou le même effet que right si la direction du texte va de droite à gauche.
+
end
+
Cette valeur a le même effet que la valeur right si la direction du texte va de gauche à droite ou le même effet que left si la direction du texte va de droite à gauche.
+
left
+
Les contenus en ligne (inline) sont alignés sur le bord gauche de la boîte contenant la ligne.
+
right
+
Les contenus en ligne (inline) sont alignés sur le bord droit de la boîte contenant la ligne.
+
center
+
Les contenus en ligne (inline) sont horizontalement centrés par rapport à la boîte contenant la ligne.
+
justify
+
Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p class="exemple">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>
+ +

CSS

+ +
.exemple {
+  text-align: justify;
+  text-align-last: center;
+}
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#text-align-last-property', 'text-align-last')}}{{Spec2('CSS3 Text')}}Définition initiale.
+ +
{{cssinfo}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-align-last")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("text-align")}}
    • +
diff --git a/files/fr/web/css/text-align/index.html b/files/fr/web/css/text-align/index.html new file mode 100644 index 0000000000..50e54360ba --- /dev/null +++ b/files/fr/web/css/text-align/index.html @@ -0,0 +1,227 @@ +--- +title: text-align +slug: Web/CSS/text-align +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-align +--- +
{{CSSRef}}
+ +

La propriété text-align définit l'alignement horizontal d'un élément de bloc ou de la boîte d'une cellule de tableau. Cette propriété fonctionne donc de façon analogue à {{cssxref("vertical-align")}} mais dans le sens horizontal.

+ +
{{EmbedInteractiveExample("pages/css/text-align.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+text-align: start;
+text-align: end;
+text-align: match-parent;
+
+/* Dans une cellule de tableau, caractère sur lequel */
+/* doit être aligné le contenu de la cellule         */
+text-align: ".";
+text-align: "." center;
+
+/* Alignement de bloc (non standard) */
+text-align: -moz-center;
+text-align: -webkit-center;
+
+/* Valeurs globales */
+text-align: inherit;
+text-align: initial;
+text-align: unset;
+
+ +

La propriété text-align peut être définie grâce à l'un des mots-clés de la liste qui suit.

+ +

Valeurs

+ +
+
start {{experimental_inline}}
+
Cette valeur a le même effet que la valeur left si la direction du texte va de gauche à droite ou le même effet que right si la direction du texte va de droite à gauche.
+
end {{experimental_inline}}
+
Cette valeur a le même effet que la valeur right si la direction du texte va de gauche à droite ou le même effet que left si la direction du texte va de droite à gauche.
+
left
+
Les contenus en ligne (inline) sont alignés sur le bord gauche de la boîte contenant la ligne.
+
right
+
Les contenus en ligne (inline) sont alignés sur le bord droit de la boîte contenant la ligne.
+
center
+
Les contenus en ligne (inline) sont horizontalement centrés par rapport à la boîte contenant la ligne.
+
justify
+
Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.
+
justify-all{{experimental_inline}}
+
Comportement analogue à justify mais avec la dernière ligne nécessairement justifiée.
+
match-parent {{experimental_inline}}
+
Semblable à inherit mais les valeurs start et end sont calculées selon la valeur de {{cssxref("direction")}} pour le parent et sont remplacées par left ou right selon ce qui est adéquat.
+
{{cssxref("<string>")}} {{experimental_inline}}
+
Lorsque cette valeur est appliquée sur une cellule de tableau, elle indique le caractère sur lequel doit être aligné le contenu de la cellule.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Alignement à gauche

+ +

HTML

+ +
<p class="exemple">
+  Il y avait en Vestphalie, dans le château de M. le baron de
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
+  donné les moeurs les plus douces. Sa physionomie annonçait
+  son âme. Il avait le jugement assez droit, avec l’esprit le plus
+  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+</p>
+ +

CSS

+ +
.exemple {
+  text-align: left;
+  border: solid;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Alignement_à_gauche","100%","100%")}}

+ +

Texte centré

+ +

HTML

+ +
<p class="exemple">
+  Il y avait en Vestphalie, dans le château de M. le baron de
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
+  donné les moeurs les plus douces. Sa physionomie annonçait
+  son âme. Il avait le jugement assez droit, avec l’esprit le plus
+  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+</p>
+ +

CSS

+ +
.exemple {
+  text-align: center;
+  border: solid;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Texte_centré","100%","100%")}}

+ +

Justification

+ +

HTML

+ +
<p class="exemple">
+  Il y avait en Vestphalie, dans le château de M. le baron de
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
+  donné les moeurs les plus douces. Sa physionomie annonçait
+  son âme. Il avait le jugement assez droit, avec l’esprit le plus
+  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+</p>
+ +

CSS

+ +
.exemple {
+  text-align: justify;
+  border: solid;
+}
+ +

Résultat

+ +

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

+ +

Notes

+ +

La méthode la plus générique pour centrer un bloc plutot que de centrer son contenu est d'utiliser la propriété {{cssxref("margin")}} avec les valeurs left et right à auto, e.g. :

+ +
.classe {
+  margin: auto;
+}
+
+ +
.classe {
+  margin: 0 auto;
+}
+
+ +
.classe {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ +

Accessibilité

+ +

L'espacement créé entre les mots par la justification du texte peut rendre la lecture difficile pour les personnes dyslexiques ou souffrant de troubles cognitifs.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}{{Spec2('CSS Logical Properties')}}Aucun changement
{{SpecName('CSS4 Text', '#alignment', 'text-align')}}{{Spec2('CSS4 Text')}}Ajout de la gestion des valeurs <string>.
{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}{{Spec2('CSS3 Text')}}Ajout des valeurs start, end et match-parent. La valeur initiale qui n'était pas nommée est bien définie avec start.
{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}{{Spec2('CSS2.1')}}Aucun changement
{{SpecName('CSS1', '#text-align', 'text-align')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-align")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("margin","margin:auto")}}
    • +
  • {{cssxref("margin-left","margin-left:auto")}}
    • +
  • {{cssxref("vertical-align")}}
    • +
diff --git a/files/fr/web/css/text-combine-upright/index.html b/files/fr/web/css/text-combine-upright/index.html new file mode 100644 index 0000000000..3041435d0e --- /dev/null +++ b/files/fr/web/css/text-combine-upright/index.html @@ -0,0 +1,122 @@ +--- +title: text-combine-upright +slug: Web/CSS/text-combine-upright +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/text-combine-upright +--- +
{{CSSRef}}
+ +

La propriété text-combine-upright définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'1em, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur 1em. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux.

+ +

Cela permet d'obtenir un effet appelé tate-chū-yoko (縦中横) en japonais ou 直書橫向 en chinois.

+ +
/* Valeurs avec un mot-clé */
+text-combine-upright: none;
+text-combine-upright: all;
+
+/* Valeurs pour les chiffres */
+/* 2 chiffres qui se suivent prendront la place
+   d'un caractère dans du texte vertical */
+text-combine-upright: digits;
+/* Compresse jusqu'à 4 chiffres consécutifs afin
+   qu'ils occupent l'espace d'un caractère dans
+   du texte vertical */
+text-combine-upright: digits 4;
+
+/* Valeurs globales */
+text-combine-upright: inherit;
+text-combine-upright: initial;
+text-combine-upright: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
Aucun traitement particulier n'est appliqué.
+
all
+
L'agent utilisateur tente de compresser tous les caractères consécutifs dans une même boîte afin qu'ils occupent l'espace d'un seul caractère sur l'axe vertical de la boîte.
+
digits <n>?
+
L'agent utilisateur tente d'afficher une suite de chiffres ASCII (U+0030–U+0039) avec au plus n caractères afin que cette suite occupe l'espace d'un seul caractère sur l'axe vertical de la boîte. La valeur par défaut (lorsque l'entier n'est pas indiqué) vaut 2. Les entiers en dehors de l'intervalle [2;4] sont considérés comme invalides.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple avec digits

+ +

Utiliser digits nécessite moins de règles et déclarations mais n'est pas encore largement pris en charge par les navigateurs.

+ +
<p lang="ja" class="exempleText">平成20年4月16日に</p>
+
+ +
.exempleText {
+  writing-mode: vertical-lr;
+  text-combine-upright: digits 2;
+  font: 36px serif;
+}
+ +

{{EmbedLiveSample("Exemple_avec_digits", 100, 350, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}}

+ +

Exemple avec all

+ +

Pour utiliser all, on devra baliser chaque fragment de texte horizontal mais cette valeur est actuellement mieux prise en charge que digits.

+ +
<p lang="zh-Hant">民國<span class="num">105</span
+>年<span class="num">4</span
+>月<span class="num">29</span>日</p>
+
+ +
html { writing-mode: vertical-rl; font: 24px serif }
+.num { text-combine-upright: all }
+
+ +

{{EmbedLiveSample("Exemple_avec_all", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}{{Spec2("CSS3 Writing Modes")}}Définition initiale.
{{SpecName("CSS4 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}{{Spec2("CSS4 Writing Modes")}}Ajout de la valeur digits.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-combine-upright")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("writing-mode")}},
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/text-decoration-color/index.html b/files/fr/web/css/text-decoration-color/index.html new file mode 100644 index 0000000000..1abd04f003 --- /dev/null +++ b/files/fr/web/css/text-decoration-color/index.html @@ -0,0 +1,115 @@ +--- +title: text-decoration-color +slug: Web/CSS/text-decoration-color +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-decoration-color +--- +
{{CSSRef}}
+ +

La propriété text-decoration-color définit la couleur utilisée pour dessiner les lignes décorant le texte (quel que soit le style définit {{cssxref("text-decoration-line")}}).

+ +

La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.

+ +
{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}
+ + + +
+

Note : Lorsqu'on définit plusieurs décorations à la fois, il peut être plus pratique d'utiliser la propriété raccourcie {{cssxref("text-decoration")}}.

+
+ +

Il est préférable d'utiliser cette propriété pour colorer ces décorations plutôt que d'utiliser d'autres éléments HTML.

+ +
+

Note : CSS ne fournit pas de mécanisme spécifique pour définir une couleur par type de ligne. On peut toutefois y parvenir en imbriquant des éléments mis en forme différemment.

+
+ +

Syntaxe

+ +
/* Couleurs */
+/* Valeurs de type <color> */
+text-decoration-color: currentColor;
+text-decoration-color: red;
+text-decoration-color: #00ff00;
+text-decoration-color: rgba(255, 128, 128, 0.5);
+text-decoration-color: transparent;
+
+/* Valeurs globales */
+text-decoration-color: inherit;
+text-decoration-color: initial;
+text-decoration-color: unset;
+
+ +

Valeurs

+ +
+
<color>
+
La propriété color accepte différents mots-clés et valeurs numériques. Pour plus de détails, voir {{cssxref("<color>")}}.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p class="exemple">Du texte avec un effet au survol</p>
+ +

CSS

+ +
.exemple {
+  text-decoration: underline;
+  text-decoration-color: red;
+}
+
+.exemple:hover {
+  color: blue;
+  text-decoration: line-through;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color')}}{{Spec2('CSS3 Text Decoration')}}Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer text-decoration-color.
    • +
  • Le type de données {{cssxref("<color>")}}
    • +
  • D'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")}} et {{cssxref("column-rule-color")}}
    • +
  • Appliquer des couleurs aux éléments HTML
    • +
+ +

 

diff --git a/files/fr/web/css/text-decoration-line/index.html b/files/fr/web/css/text-decoration-line/index.html new file mode 100644 index 0000000000..8b54586657 --- /dev/null +++ b/files/fr/web/css/text-decoration-line/index.html @@ -0,0 +1,108 @@ +--- +title: text-decoration-line +slug: Web/CSS/text-decoration-line +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-decoration-line +--- +
{{CSSRef}}
+ +

La propriété text-decoration-line définit la façon dont les décorations linéaires sont ajoutées à un élément et notamment leur position (sous le texte, au-dessus ou en travers de celui-ci).

+ +
{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}
+ + + +

La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+text-decoration-line: none;
+text-decoration-line: underline;
+text-decoration-line: overline;
+text-decoration-line: line-through;
+
+/* Valeurs avec plusieurs mots-clés */
+text-decoration-line: underline overline;                /* On a deux décorations pour la ligne */
+text-decoration-line: overline underline line-through;   /* On a plusieurs décorations */
+
+/* Valeurs globales */
+text-decoration-line: inherit;
+text-decoration-line: initial;
+text-decoration-line: unset;
+
+ +

Valeurs

+ +

Cette propriété peut avoir une ou plusieurs valeurs séparées par des espaces. Si aucune valeur n'est fournie, il n'y a pas de décoration ajoutée :

+ +
+
none
+
Aucune ligne ne décore le texte.
+
underline
+
Chaque ligne de texte est soulignée.
+
overline
+
Une ligne est dessinée au-dessus de chaque ligne de texte.
+
line-through
+
Une ligne est dessinée au milieu de chaque ligne de texte.
+
blink {{deprecated_inline}}
+
Le texte clignote. Les agents utilisateurs conformes peuvent ne pas suivre cette directive. Cette valeur est dépréciée et il est conseillé d'utiliser les animations CSS pour obtenir un effet similaire.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p>Voici un texte souligné avec une vaguelette rouge.</p>
+ +

CSS

+ +
p {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 300, 60)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}{{Spec2('CSS3 Text Decoration')}}Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-decoration-line")}}

+ +

Voir aussi

+ +
    +
  • La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer text-decoration-line.
    • +
diff --git a/files/fr/web/css/text-decoration-skip-ink/index.html b/files/fr/web/css/text-decoration-skip-ink/index.html new file mode 100644 index 0000000000..862eccec08 --- /dev/null +++ b/files/fr/web/css/text-decoration-skip-ink/index.html @@ -0,0 +1,86 @@ +--- +title: text-decoration-skip-ink +slug: Web/CSS/text-decoration-skip-ink +tags: + - CSS + - Experimental + - Propriété + - Reference + - Web +translation_of: Web/CSS/text-decoration-skip-ink +--- +
{{CSSRef}}
+ +

La propriété CSS text-decoration-skip-ink définit la façon dont la ligne décorative (en dessous ou au dessus du texte) est dessinée lorsqu'elle rencontre le jambage ou la hampe d'un caractère (ou glyphe).

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+text-decoration-skip-ink: none;
+text-decoration-skip-ink: auto;
+
+/* Valeurs globales */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+
+ +

Valeurs

+ +
+
none
+
La ligne décorative traverse l'ensemble des glyphes, qu'ils aient un jambage ou une hampe.
+
auto
+
La valeur par défaut : la ligne (au dessus ou en dessous du texte) est uniquement dessinée de façon à ne pas être proche des jambages ou hampes des glyphes. Autrement dit, la ligne est interrompue à chaque fois qu'elle croise un glyphe.
+
An example of "text-decoration-skip: ink;".
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p>Un instant après, Alice était à la poursuite du Lapin dans le terrier…</p>
+ +

CSS

+ +
p {
+  margin: 0;
+  font-size: 2em;
+  text-decoration: underline blue;
+  text-decoration-skip-ink: auto;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-ink-property", "text-decoration-skip-ink")}}{{Spec2("CSS4 Text Decoration")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-decoration-skip-ink")}}

diff --git a/files/fr/web/css/text-decoration-skip/index.html b/files/fr/web/css/text-decoration-skip/index.html new file mode 100644 index 0000000000..39d8c49dfa --- /dev/null +++ b/files/fr/web/css/text-decoration-skip/index.html @@ -0,0 +1,107 @@ +--- +title: text-decoration-skip +slug: Web/CSS/text-decoration-skip +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/text-decoration-skip +--- +
{{CSSRef}}
+ +

La propriété text-decoration-skip définit la façon dont les lignes décoratives doivent être appliquées aux éléments et aux caractères. Elle contrôle les lignes décoratives dessinées par l'élément courant ainsi que celles de ses ancêtres.

+ +
/* Syntaxe avec un mot-clé */
+text-decoration-skip: none;
+text-decoration-skip: objects;
+text-decoration-skip: edges;
+text-decoration-skip: box-decoration;
+text-decoration-skip: spaces;
+
+/* Plusieurs mots-clés */
+text-decoration-skip: object spaces;
+text-decoration-skip: leading-spaces trailing-spaces;
+text-decoration-skip: objects edges box-decoration;
+
+/* Valeurs globales */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+
+ +
+

Note : La valeur ink initialement définie pour cette propriété a été déplacée vers la propriété {{cssxref("text-decoration-skip-ink")}}.

+
+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
La propriété text-decoration s'applique à tous les éléments sélectionnés.
+
objects
+
La propriété text-decoration n'est pas appliquée pour les éléments en lignes atomiques telles que les images ou les blocs en lignes.
+
spaces
+
Les décorations ne sont pas appliquées où il y a des espaces (c'est-à-dire des caractères Unicode considérés comme des blancs, des séparateurs de mots et toute propriété {{cssxref("letter-spacing")}} ou {{cssxref("word-spacing")}} adjacente).
+
leading-spaces
+
Comportement analogue à spaces mais seuls les espaces avant les mots sont ignorés.
+
trailing-spaces
+
Comportement analogue à spaces mais seuls les espaces après les mots sont ignorés.
+
edges
+
La décoration de text-decoration est rognée vers l'intérieur de la moitié de la largueur de la ligne, vers la droite et la gauche..
+
An example of "text-decoration-skip: edges;".
+
box-decoration
+
La propriété text-decoration n'est pas appliquée pour les marges, bordures et zones de remplissage (padding) des éléments fils.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
p {
+  margin: 0;
+  font-size: 3em;
+  text-decoration: underline;
+  text-decoration-skip: edge;
+}
+ +

HTML

+ +
<p>Bonjour tout le monde, quelle journée !</p>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}}{{Spec2("CSS4 Text Decoration")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-decoration-skip")}}

diff --git a/files/fr/web/css/text-decoration-style/index.html b/files/fr/web/css/text-decoration-style/index.html new file mode 100644 index 0000000000..28db746152 --- /dev/null +++ b/files/fr/web/css/text-decoration-style/index.html @@ -0,0 +1,117 @@ +--- +title: text-decoration-style +slug: Web/CSS/text-decoration-style +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-decoration-style +--- +
{{CSSRef}}
+ +

La propriété text-decoration-style définit le style appliqué sur les lignes visées par {{cssxref("text-decoration-line")}}. Le style s'applique à toutes les lignes définies avec text-decoration-line.

+ +
+

Note : Il n'existe pas de méthode permettant de mettre en forme les lignes décorées différemment les unes des autres.

+
+ +
{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}
+ + + +

Si la mise en forme appliquée possède une sémantique forte (par exemple barrer le texte pour indiquer qu'il a été supprimé), on recommande aux auteurs d'utiliser les balises HTML associées si elles existent (par exemple {{HTMLElement("del")}} ou {{HTMLElement("s")}}). Les navigateurs peuvent parfois désactiver la mise en forme et ces éléments permettent de conserver la sémantique du contenu quoi qu'il arrive.

+ +

La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.

+ +

Syntaxe

+ +
/* Valeurs avec des mots-clés */
+text-decoration-style: solid;
+text-decoration-style: double;
+text-decoration-style: dotted;
+text-decoration-style: dashed;
+text-decoration-style: wavy;
+
+/* Valeurs globales */
+text-decoration-style: inherit;
+text-decoration-style: initial;
+text-decoration-style: unset;
+
+ +

Valeurs

+ +
+
solid
+
Dessine une ligne.
+
double
+
Dessine une double-ligne.
+
dotted
+
Dessiner une ligne avec des points.
+
dashed
+
Dessine une ligne avec des tirets.
+
wavy
+
Dessine une ligne ondulée.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.exemple {
+  -moz-text-decoration-line: underline;
+  -moz-text-decoration-style: wavy;
+  -moz-text-decoration-color: red;
+  -webkit-text-decoration-line: underline;
+  -webkit-text-decoration-style: wavy;
+  -webkit-text-decoration-color: red;
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+
+ +

HTML

+ +
<p class="exemple">Et voilà le résultat.</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style')}}{{Spec2('CSS3 Text Decoration')}}Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-decoration-style")}}

+ +

Voir aussi

+ +
    +
  • La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer text-decoration-style.
    • +
diff --git a/files/fr/web/css/text-decoration-thickness/index.html b/files/fr/web/css/text-decoration-thickness/index.html new file mode 100644 index 0000000000..ee195ade44 --- /dev/null +++ b/files/fr/web/css/text-decoration-thickness/index.html @@ -0,0 +1,111 @@ +--- +title: text-decoration-thickness +slug: Web/CSS/text-decoration-thickness +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-decoration-thickness +--- +
{{CSSRef}}
+ +

La propriété CSS text-decoration-thickness définit l'épaisseur ou la largeur de la ligne de décoration utilisée sur le texte d'un élément (la ligne qui raye, souligne ou surligne le texte).

+ +

Syntaxe

+ +
/* Un seul mot-clé*/
+text-decoration-thickness: auto;
+text-decoration-thickness: from-font;
+
+/* Une valeur de longueur */
+text-decoration-thickness: 0.1em;
+text-decoration-thickness: 3px;
+
+/* Valeurs globales */
+text-decoration-thickness: inherit;
+text-decoration-thickness: initial;
+text-decoration-thickness: unset;
+
+ +

Valeurs

+ +
+
auto
+
Le navigateur choisit l'épaisseur pour la ligne de décoration.
+
from-font
+
Si le fichier de la police indique une épaisseur préférée, c'est cette valeur qui est utilisée. Si le fichier ne contient pas cette information, cette valeur est synonyme de auto.
+
<length>
+
Specifies the thickness of text decoration line as a {{cssxref('length')}}, overriding the font file suggestion or the browser default.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p class="longhand">Voici du texte avec un soulignement rouge de 2px.</p>
+<p class="under-and-over">Celui est souligné et surligné.</p>
+<p class="shorthand">Ce texte sera souligné avec une ligne bleue de 1px si la formulation raccourcie est prise en charge.</p>
+ +

CSS

+ +
.longhand {
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-color: red;
+  text-decoration-thickness: 2px;
+}
+
+.under-and-over {
+  text-decoration-line: underline overline;
+  text-decoration-style: solid;
+  text-decoration-color: orange;
+  text-decoration-thickness: 0.2rem;
+}
+
+.shorthand {
+  text-decoration: underline solid blue 1px;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Text Decoration', '#text-decoration-width-property', 'text-decoration-width')}}{{Spec2('CSS4 Text Decoration')}}Définition initiale.
+ +
+

Note : Cette propriété était initialement intitulée text-decoration-width mais fut renommée en 2019 en text-decoration-thickness.

+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-decoration-thickness")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("text-decoration")}}
    • +
  • {{cssxref("text-underline-offset")}}
    • +
diff --git a/files/fr/web/css/text-decoration/index.html b/files/fr/web/css/text-decoration/index.html new file mode 100644 index 0000000000..c9c37513a5 --- /dev/null +++ b/files/fr/web/css/text-decoration/index.html @@ -0,0 +1,148 @@ +--- +title: text-decoration +slug: Web/CSS/text-decoration +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/text-decoration +--- +
{{CSSRef}}
+ +

La propriété text-decoration est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte. C'est une propriété raccourcie qui permet de paramétrer simultanément les propriétés « détaillées » : {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} et {{cssxref("text-decoration-style")}}.

+ +
{{EmbedInteractiveExample("pages/css/text-decoration.html")}}
+ + + +

Ces décorations se propagent sur les différents éléments enfants. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML <p>Ce texte a <em> des mots mis en avant</em> dedans.</p>, et cette règle CSS p { text-decoration: underline; }, on aura tout le  paragraphe souligné, même si on applique la règle em { text-decoration: none; }, cela n'aurait aucun impact. En revanche, ajouter la règle em { text-decoration: overline; } entraînerait un cumul des décorations pour « des mots mis en avant ».

+ +
+

Note : La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} et {{cssxref("text-decoration-style")}}. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie.

+
+ +

Syntaxe

+ +
/* Valeurs avec mots-clés */
+text-decoration: none;                 /* Aucune décoration */
+text-decoration: underline red;        /* On souligne en rouge */
+text-decoration: underline wavy red;   /* On souligne en rouge avec */
+                                       /* une ligne ondulée */
+
+/* Valeurs globales */
+text-decoration: inherit;
+text-decoration: initial;
+text-decoration: unset;
+
+ +

Valeurs

+ +
+
{{cssxref("text-decoration-line")}}
+
Cette valeur indique le type de décoration utilisée.
+
{{cssxref("text-decoration-color")}}
+
Cette valeur indique la couleur de la décoration utilisée.
+
{{cssxref("text-decoration-style")}}
+
Cette valeur indique le style à utiliser pour la décoration.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
.under {
+  text-decoration: underline red;
+}
+
+.over {
+  text-decoration: wavy overline lime;
+}
+
+.line {
+  text-decoration: line-through;
+}
+
+.plain {
+  text-decoration: none;
+}
+
+.underover {
+  text-decoration: dashed underline overline;
+}
+
+.blink {
+  text-decoration: blink;
+}
+
+ +

HTML

+ +
<p class="under">Ce texte a une ligne en dessous.</p>
+<p class="over">Ce texte a une ligne au dessus.</p>
+<p class="line">Ce texte est barré d'une ligne.</p>
+<p>Ce <a class="plain" href="#">lien ne sera pas souligné</a>,
+    comme les liens le sont normalement. Attention à ces décorations
+    sur les ancres cars le soulignement sert souvent d'indication pour
+    un hyperlien.</p>
+<p class="underover">Ce texte a des lignes en dessous et au dessus.</p>
+<p class="blink">Ce texte peut clignoter selon le navigateur utilisé.</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','auto','280')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}{{Spec2('CSS3 Text Decoration')}}Transformée comme une propriété raccourcie. Ajout du support pour la valeur de {{cssxref('text-decoration-style')}}.
{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}{{Spec2('CSS2.1')}}Pas de changement significatif.
{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-decoration")}}

+ +

Voir aussi

+ +
    +
  • L'attribut {{cssxref("list-style")}} qui contrôle la façon dont les éléments apparaissent dans les listes HTML {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.
    • +
  • Les propriétés détaillées associées à cette propriété raccourcie : +
      +
    • {{cssxref("text-decoration-line")}}
      • +
    • {{cssxref("text-decoration-color")}}
      • +
    • {{cssxref("text-decoration-style")}}.
      • +
    +
    • +
diff --git a/files/fr/web/css/text-emphasis-color/index.html b/files/fr/web/css/text-emphasis-color/index.html new file mode 100644 index 0000000000..5b6f24d086 --- /dev/null +++ b/files/fr/web/css/text-emphasis-color/index.html @@ -0,0 +1,97 @@ +--- +title: text-emphasis-color +slug: Web/CSS/text-emphasis-color +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-emphasis-color +--- +
{{CSSRef}}
+ +

La propriété text-emphasis-color définit la couleur utilisée pour dessiner les marques d'emphase. Celle-ci peut être (re)définie grâce à la propriété raccourcie {{cssxref("text-emphasis")}}.

+ +
/* Valeur initiale */
+text-emphasis-color: currentColor;
+
+/* Valeur de couleur */
+/* Type <color> */
+text-emphasis-color: #555;
+text-emphasis-color: blue;
+text-emphasis-color: rgba(90, 200, 160, 0.8);
+text-emphasis-color: transparent;
+
+/* Valeurs globales */
+text-emphasis-color: inherit;
+text-emphasis-color: initial;
+text-emphasis-color: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
<color>
+
Définit la couleur utilisée pour les marques. Si on ne définit pas de couleur, ce sera la couleur courante du texte qui sera utilisée.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

HTML

+ +
<p><em>Coucou</em>, je suis <em>là</em></p>
+ +

CSS

+ +
em {
+  text-emphasis-style: sesame;
+  text-emphasis-color: blue;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text Decoration', '#text-emphasis-color-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{cssxref('text-emphasis-style')}}
    • +
  • {{cssxref('text-emphasis')}}.
    • +
  • {{cssxref('text-emphasis-position')}}
    • +
  • Le type de données {{cssxref("<color>")}}
    • +
  • D'autres propriétés relatives aux couleurs {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}
    • +
  • Appliquer des couleurs sur des éléments HTML
    • +
diff --git a/files/fr/web/css/text-emphasis-position/index.html b/files/fr/web/css/text-emphasis-position/index.html new file mode 100644 index 0000000000..2dfa5fb7cb --- /dev/null +++ b/files/fr/web/css/text-emphasis-position/index.html @@ -0,0 +1,167 @@ +--- +title: text-emphasis-position +slug: Web/CSS/text-emphasis-position +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-emphasis-position +--- +
{{CSSRef}}
+ +

La propriété text-emphasis-position permet de décrire l'emplacement des marques d'emphase quand elles sont utilisées. L'ajout des marques a le même effet que les annotations ruby quant à la hauteur de ligne : s'il n'y a pas suffisamment de place, la hauteur de la ligne est augmentée.

+ +
/* Valeur initiale */
+text-emphasis-position: over right;
+
+/* Valeurs avec mot-clé */
+text-emphasis-position: over left;
+text-emphasis-position: under right;
+text-emphasis-position: under left;
+
+
+text-emphasis-position: left over;
+text-emphasis-position: right under;
+text-emphasis-position: left under;
+
+/* Valeurs globales */
+text-emphasis-position: inherit;
+text-emphasis-position: initial;
+text-emphasis-position: unset;
+
+ +

Position privilégiée

+ +

La position des marques d'emphase varie en fonction du langage. Par exemple, en japonais, on préfère les placer au dessus à droite. En revanche, pour le chinois, on préfèrera en bas à droite. Le tableau qui suit illustre les différences, notamment entre le chinois, le mongolien et le japonais  :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Position privilégiée pour les marques d'emphase en ruby
LanguePositionIllustration
HorizontaleVerticale
Japaneseau dessusà droiteEmphasis marks appear over each emphasized character in horizontal Japanese text.Emphasis marks appear on the right of each emphasized character in vertical Japanese text.
Mongolian
Chineseen dessousà droiteEmphasis marks appear below each emphasized character in horizontal Simplified Chinese text.
+ +
+

Note : La propriété text-emphasis-position ne peut pas être définie (et donc ne peut pas être redéfinie) avec la propriété raccourcie {{cssxref("text-emphasis")}}.

+
+ +

Syntaxe

+ +

Valeurs

+ +
+
over
+
Les marques sont dessinées au-dessus du texte lorsqu'il est écrit en mode horizontal.
+
under
+
Les marques sont dessinées en-dessous du texte lorsqu'il est écrit en mode horizontal.
+
right
+
Les marques sont dessinées à droite du texte lorsqu'il est écrit en mode vertical.
+
left
+
Les marques sont dessinées à gauche du texte lorsqu'il est écrit en mode vertical.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Masquer les marques

+ +

Certains éditeurs préfèrent masquer les marques d'emphase lorsque celles-ci entre en conflit avec les annotations ruby. On peut utiliser la règle suivante :

+ +
ruby {
+  text-emphasis: none;
+}
+
+ +

D'autres préfèrent masquer le contenu ruby et privilégier les marques d'emphase. On peut obtenir cet effet avec les déclarations suivantes :

+ +
em {
+ /* On utilise text-emphasis pour les <em> */
+  text-emphasis: dot;
+}
+
+em rt {
+ /* On masque le ruby dans les éléments <em> */
+  display: none;
+}
+ +

Exemple live

+ +

HTML

+ +
<p><em>Coucou</em>, je suis <em>là</em></p>
+ +

CSS

+ +
em {
+  text-emphasis-style: sesame;
+  text-emphasis-position: under right;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}Définition initiale
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-emphasis-position")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("text-emphasis-style")}}
    • +
  • {{cssxref("text-emphasis-color")}}
    • +
  • {{cssxref("text-emphasis")}}
    • +
diff --git a/files/fr/web/css/text-emphasis-style/index.html b/files/fr/web/css/text-emphasis-style/index.html new file mode 100644 index 0000000000..950aef3ddc --- /dev/null +++ b/files/fr/web/css/text-emphasis-style/index.html @@ -0,0 +1,115 @@ +--- +title: text-emphasis-style +slug: Web/CSS/text-emphasis-style +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-emphasis-style +--- +
{{CSSRef}}
+ +

La propriété text-emphasis-style définit le type d'emphase utilisée. Celui-ci peut également être (re)défini via la propriété raccourcie {{cssxref("text-emphasis")}}.

+ +
/* Valeur initiale */
+/* Aucune marque d'emphase */
+text-emphasis-style: none;
+
+/*  Valeur distincte */
+text-emphasis-style: 'x';
+text-emphasis-style: '点';
+text-emphasis-style: '\25B2';
+text-emphasis-style: '*';
+
+/* Valeurs avec un mot-clé */
+text-emphasis-style: filled;
+text-emphasis-style: open;
+text-emphasis-style: filled sesame;
+text-emphasis-style: open sesame;
+
+/* Valeurs globales */
+text-emphasis-style: inherit;
+text-emphasis-style: initial;
+text-emphasis-style: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
Aucune marque d'emphase.
+
filled
+
La forme est remplie avec une couleur unie. Si filled ou open est absent, ce sera la valeur par défaut.
+
open
+
La forme est vide.
+
dot
+
Cette valeur permet d'afficher des marques en forme de points. Le point rempli est le caractère '•' (U+2022) et le point vide est le caractère '◦' (U+25E6).
+
circle
+
Cette valeur permet d'afficher des marques en forme de cercles (plus grands que les points). Le cercle rempli est le caractère '●' (U+25CF) et celui pour le cercle ouvert est '○' (U+25CB).
+
double-circle
+
Cette valeur permet d'afficher des marques en forme de doubles cercles. Le double-cercle rempli est le caractère '◉' (U+25C9), et le double-cercle ouvert est le caractère '◎' (U+25CE).
+
triangle
+
Cette valeur permet d'afficher des marques en forme de triangles. Le triangle rempli correspond au caractère '▲' (U+25B2) et le triangle ouvert au caractère '△' (U+25B3).
+
sesame
+
Cette valeur permet d'afficher des marques en forme de points sésame :'﹅' (U+FE45) pour le caractère rempli et '﹆' (U+FE46) pour le caractère ouvert.
+
<string>
+
Utilise la chaîne fournie comme marque. Attention, l'agent utilisateur peut tronquer la chaîne ou choisir d'ignorer les chaînes qui ont plus d'un graphème. Il est donc conseillé de n'utiliser qu'une seule lettre.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

HTML

+ +
<p><em>Coucou</em>, je suis <em>là</em></p>
+ +

CSS

+ +
em {
+  text-emphasis-style: sesame;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Text Decoration', '#text-emphasis-style-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-emphasis-style")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref('text-emphasis-color')}}
    • +
  • {{cssxref('text-emphasis')}}.
    • +
  • {{cssxref('text-emphasis-position')}}
    • +
diff --git a/files/fr/web/css/text-emphasis/index.html b/files/fr/web/css/text-emphasis/index.html new file mode 100644 index 0000000000..cf604b5fd5 --- /dev/null +++ b/files/fr/web/css/text-emphasis/index.html @@ -0,0 +1,135 @@ +--- +title: text-emphasis +slug: Web/CSS/text-emphasis +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-emphasis +--- +
{{CSSRef}}
+ +

La propriété text-emphasis est une propriété raccourcie qui permet de définir {{cssxref("text-emphasis-style")}} et {{cssxref("text-emphasis-color")}} avec une seule déclaration. Cette propriété appliquera les marques d'emphase définies sur chaque caractères du texte de l'élément sauf pour les séparateurs (comme les espaces) et les caractères de contrôle.

+ +
{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}
+ + + +

La propriété text-emphasis est différente de {{cssxref("text-decoration")}}. La propriété text-decoration n'a pas d'héritage et la décoration est appliquée sur tout l'élément. Cependant, text-emphasis a un héritage et il est donc possible de changer la marque selon les « descendants » d'un élément.

+ +

La taille du symbole d'emphase, comme celle des symboles Ruby, représente environ 50% de la taille de la police du texte. text-emphasis peut modifier la hauteur de la ligne lorsque l'interlignage n'est pas suffisant pour placer les marques.

+ +
+

Note : text-emphasis ne réinitialise pas la valeur de {{cssxref("text-emphasis-position")}}. En effet, bien que la couleur et le style des marques puisse varier, il est très peu probable qu'on change leurs positions au cours du même document.

+
+ +

Syntaxe

+ +
/* Valeur initiale */
+text-emphasis: none; /* Pas de marque */
+
+/* Chaîne de caractères */
+/* Type <string>        */
+text-emphasis: 'x';
+text-emphasis: '点';
+text-emphasis: '\25B2';
+text-emphasis: '*' #555;
+/* À ne pas utiliser, cela pourra être */
+/* considéré comme 't' uniquement      */
+text-emphasis: 'toto';
+
+/* Valeurs avec mot(s)-clé(s) */
+text-emphasis: filled;
+text-emphasis: open;
+text-emphasis: filled sesame;
+text-emphasis: open sesame;
+
+/* Valeurs avec mots-clés, combinés à une couleur */
+text-emphasis: filled sesame #555;
+
+/* Valeurs globales */
+text-emphasis: inherit;
+text-emphasis: initial;
+text-emphasis: unset;
+
+ +

Valeurs

+ +
+
none
+
Il n'y aura pas de marques d'emphase appliquées.
+
filled
+
La forme de la marque est remplie avec une couleur unie. Si aucun des mots-clés parmi filled ou open n'est présent, ce sera la valeur par défaut.
+
open
+
La forme de la marque est évidée.
+
dot
+
La forme de la marque est un petit cercle. Le cercle plein est le caractère '•' (U+2022) et celui qui est évidé est '◦' (U+25E6).
+
circle
+
La forme de la marque est un grand cercle. Le cercle plein est le caractère '●' (U+25CF) et celui du cercle évidé est '○' (U+25CB). Lorsqu'aucune forme n'est spécifiée, c'est la forme par défaut utilisée pour les modes d'écriture horizontaux.
+
double-circle
+
La forme de la marque est un double-cercle. Le double-cercle plein est le caractère '◉' (U+25C9), celui du double-cercle évidé est '◎' (U+25CE).
+
triangle
+
La forme de la marque est un triangle. Le triangle plein correspond au caractère '▲' (U+25B2) et celui du triangle évidé correspond à '△' (U+25B3).
+
sesame
+
La forme de la marque est un sésame. Le sésame plein correspond au caractère '﹅' (U+FE45) et celui du sésame évidé correspond à '﹆' (U+FE46). Lorsqu'aucune forme n'a été définie, c'est la forme par défaut qui est utilisée pour les marques d'emphase pour les modes d'écriture verticaux.
+
<string>
+
La marque affichée sera la chaîne de caractères. Attention à n'utiliser que des chaînes d'un seul caractère. L'agent utilisateur peut tronquer ou ignorer les chaînes qui comportent plusieurs graphèmes.
+
<color>
+
Définit la couleur utilisée pour la marque. Si aucune couleur n'est définie, la valeur utilisée par défaut sera currentColor.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

HTML

+ +
<p><em>Coucou</em>, je suis <em>là</em></p>
+ +

CSS

+ +
em {
+  text-emphasis: sesame blue;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-emphasis")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref('text-emphasis-style')}}
    • +
  • {{cssxref('text-emphasis-color')}}
    • +
  • {{cssxref('text-emphasis-position')}}
    • +
diff --git a/files/fr/web/css/text-indent/index.html b/files/fr/web/css/text-indent/index.html new file mode 100644 index 0000000000..de7e3f2b7f --- /dev/null +++ b/files/fr/web/css/text-indent/index.html @@ -0,0 +1,144 @@ +--- +title: text-indent +slug: Web/CSS/text-indent +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-indent +--- +
{{CSSRef}}
+ +

La propriété text-indent définit la longueur qui doit être laissée avant le début de la première ligne d'un élément contenant du texte.

+ +

L'espacement horizontal se fait en accord avec la bord gauche (ou droit pour les dispositions de droite à gauche) de l'élément contenant le texte. Par défaut, cela ne contrôle que l'indentation de la première ligne du bloc mais les mots-clés hanging et each-line peuvent être utilisés pour modifier ce comportement.

+ +
{{EmbedInteractiveExample("pages/css/text-indent.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs de longueur */
+/* Type <length>       */
+text-indent: 3mm;
+text-indent: 40px;
+
+/* Valeurs de pourcentages */
+/* relatives à la largeur  */
+/* du bloc englobant       */
+/* Type <percentage>       */
+text-indent: 15%;
+
+/* Valeurs avec un mot-clé */
+text-indent: 5em each-line;
+text-indent: 5em hanging;
+text-indent: 5em hanging each-line;
+
+/* Valeurs globales */
+text-indent: inherit;
+text-indent: initial;
+text-indent: unset;
+
+ +

Valeurs

+ +
+
<length>
+
L'indentation est définie de façon absolue avec une longueur ({{cssxref("<length>")}}). On peut utiliser des valeurs négatives. Voir la page sur {{cssxref("<length>")}} pour les différentes unités possibles.
+
<percentage>
+
L'indentation est définie en proportion de la largeur du bloc englobant (type {{cssxref("<percentage>")}}).
+
each-line {{experimental_inline}}
+
L'indentation n'affecte que la première ligne du bloc et chaque ligne située après un saut de ligne forcé. Cela n'affecte pas les lignes situées après un retour à la ligne automatique (wrap).
+
hanging {{experimental_inline}}
+
Inverse les lignes indentées. Toutes les lignes, sauf la première, seront indentées.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Indentation simple

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+ +

CSS

+ +
p {
+  text-indent: 5em;
+  background: powderblue;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Indentation_simple','100%','100%') }}

+ +

Indentation proportionnelle

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+ +

CSS

+ +
p {
+  text-indent: 30%;
+  background: plum;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Indentation_proportionnelle','100%','100%')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}}{{Spec2('CSS3 Text')}}Ajout des mots-clés hanging et each-line.
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}{{Spec2('CSS3 Transitions')}}text-indent peut être animée.
{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}{{Spec2('CSS2.1')}}The behavior with display: inline-block and anonymous block boxes have been explicitly defined.
{{SpecName('CSS1', '#text-indent', 'text-indent')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-indent")}}

diff --git a/files/fr/web/css/text-justify/index.html b/files/fr/web/css/text-justify/index.html new file mode 100644 index 0000000000..65e314a68d --- /dev/null +++ b/files/fr/web/css/text-justify/index.html @@ -0,0 +1,116 @@ +--- +title: text-justify +slug: Web/CSS/text-justify +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-justify +--- +
{{CSSRef}}
+ +

la propriété CSS text-justify définit le type de justification à appliquer au texte justifié (par exemple avec {{cssxref("text-align")}}: justify;).

+ +
text-justify: none;
+text-justify: auto;
+text-justify: inter-word;
+text-justify: inter-character;
+text-justify: distribute;
+
+ +

Syntaxe

+ +

La propriété text-justify peut être définie grâce à l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
none
+
Le texte ne sera pas justifié— cela aura le même effet que de ne pas définir {{cssxref("text-align")}}, mais cela peut se révéler utile pour activer ou désactiver globalement la justification.
+
auto
+
+

Le navigateur choisira la meilleure justification pour la situation, en se basant sur le rapport entre performance et qualité, mais également sur la valeur la plus appropriée par rapport à la langue (français, langues CJK, etc.). C'est la propriété par défaut, qui est appliquée lorsque text-justify n'est pas définie.

+
+
inter-word
+
Le texte est justifié en ajustant les espaces entre les mots (en faisant varier {{cssxref("word-spacing")}}) ; cette propriété est appropriée pour les langues qui séparent les mots avec des espaces, comme le Français ou le Coréen.
+
inter-character
+
Le texte est justifié en ajustant les espaces entre les caractères (en faisant varier {{cssxref("letter-spacing")}}) ;  cette propritété est plus appropriée pour des langues comme le Japonais.
+
distribute {{deprecated_inline}}
+
Même effet que inter-character ; cette valeur sert uniquement à de fins de compatibilité.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
<p class="none"><code>text-justify: none</code> — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
+<p class="auto"><code>text-justify: auto</code> — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
+<p class="dist"><code>text-justify: distribute</code> — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
+<p class="word"><code>text-justify: inter-word</code> — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
+<p class="char"><code>text-justify: inter-character</code> — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
+ +
p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  width: 95%;
+  margin: 10px auto;
+  text-align: justify;
+}
+
+.none {
+  text-justify: none;
+}
+
+.auto {
+  text-justify: auto;
+}
+
+.dist {
+  text-justify: distribute;
+}
+
+.word {
+  text-justify: inter-word;
+}
+
+.char {
+  text-justify: inter-character;
+}
+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}{{Spec2('CSS3 Text')}} 
+ +

{{cssinfo}}

+ +

Compatibilité avec les navigateurs

+ + + +
{{Compat("css.properties.text-justify")}}
+ +

Voir aussi

+ +
    +
  • {{cssxref("text-align")}}
    • +
diff --git a/files/fr/web/css/text-orientation/index.html b/files/fr/web/css/text-orientation/index.html new file mode 100644 index 0000000000..adf52e134b --- /dev/null +++ b/files/fr/web/css/text-orientation/index.html @@ -0,0 +1,107 @@ +--- +title: text-orientation +slug: Web/CSS/text-orientation +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/text-orientation +--- +
{{CSSRef}}
+ +

La propriété text-orientation définit l'orientation du texte sur une ligne. Cette propriété n'a d'effet qu'en mode vertical (autrement dit, quand {{cssxref("writing-mode")}} n'est pas horizontal-tb). Elle est utile pour contrôler l'affichage de l'écriture pour les langues dont le script est vertical. Elle permet aussi de gérer les en-têtes de tableaux verticaux.

+ +
{{EmbedInteractiveExample("pages/css/text-orientation.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+text-orientation: mixed;
+text-orientation: upright;
+text-orientation: sideways-right;
+text-orientation: sideways-left;
+text-orientation: sideways;
+text-orientation: use-glyph-orientation;
+
+/* Valeurs globales */
+text-orientation: inherit;
+text-orientation: initial;
+text-orientation: unset;
+
+ +

La propriété text-orientation peut valoir l'un des mots-clés suivants.

+ +

Valeurs

+ +
+
mixed
+
Ce mot-clé permet de tourner les caractères de 90° dans le sens des aiguilles d'une montre pour les scripts horizontaux, les glyphes des scripts verticaux sont affichés normalement. C'est la valeur par défaut.
+
upright
+
Ce mot-clé permet d'afficher les caractères des scripts horizontaux normalement et d'afficher les glyphes des scripts verticaux « debout ». Ce mot-clé implique que tous les caractères soient considérés comme ltr (left-to-right ou gauche à droite). La valeur utilisée pour {{cssxref("direction")}} sera ltr, quelle que soit celle définie par l'utilisateur.
+
sideways
+
Ce mot-clé permet d'afficher les caractères comme s'ils étaient disposés horizontalement et que la ligne de base était tournée de 90° dans le sens des aiguilles d'une montre.
+
sideways-right
+
Un alias pour sideways conservé pour des raisons de compatibilité.
+
use-glyph-orientation
+
Pour les éléments SVG, ce mot-clé permet d'utiliser la valeur des propriétés SVG dépréciées glyph-orientation-vertical et glyph-orientation-horizontal.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p class="monTexte">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
+ +

CSS

+ +
.monTexte {
+  writing-mode: vertical-rl;
+  text-orientation: sideways;
+}
+
+ +

Résultat

+ +

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

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Writing Modes', '#text-orientation', 'text-orientation')}}{{Spec2('CSS3 Writing Modes')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-orientation")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("writing-mode")}}
    • +
  • {{cssxref("text-combine-upright")}}
    • +
  • {{cssxref("unicode-bidi")}}
    • +
diff --git a/files/fr/web/css/text-overflow/index.html b/files/fr/web/css/text-overflow/index.html new file mode 100644 index 0000000000..cd18e2e925 --- /dev/null +++ b/files/fr/web/css/text-overflow/index.html @@ -0,0 +1,343 @@ +--- +title: text-overflow +slug: Web/CSS/text-overflow +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-overflow +--- +
{{CSSRef}}
+ +

La propriété text-overflow définit la façon dont le contenu textuel qui dépasse d'une boîte est signalé pour les utilisateurs. Le texte peut être rogné (clipping), afficher une ellipse ('…', U+2026 Horizontal Ellipsis) ou afficher une chaîne de caractères choisie.

+ +
{{EmbedInteractiveExample("pages/css/text-overflow.html")}}
+ + + +

Le rognage se fera à la bordure de la boîte. Afin que le rognage se fasse plus tôt, à la limite des caractères, on peut utiliser la chaîne vide ('').

+ +

Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec white-space: nowrap) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur.

+ +

Cette  propriété CSS ne force pas le dépassement. Pour ce faire et afin que text-overflow soit appliqué, l'auteur devra ajouter des propriétés supplémentaires sur l'élément, notamment : {{cssxref("overflow")}} avec hidden et {{cssxref("white-space")}} avec nowrap.

+ +

Syntaxe

+ +
/* On gère le dépassement en fin de ligne
+    - à droite en LTR,
+    - à gauche en RTL */
+text-overflow: clip;
+text-overflow: ellipsis;
+text-overflow: "…";
+text-overflow: fade;
+text-overflow: fade(10px);
+text-overflow: fade(5%);
+
+/* On gère le dépassement au début et
+   à la fin de la ligne. La directionnalité
+   n'a pas d'importance */
+text-overflow: clip ellipsis;
+text-overflow: "…" "…";
+text-overflow: fade clip;
+text-overflow: fade(10px) fade(10px);
+text-overflow: fade(5%) fade(5%);
+
+/* Valeurs globales */
+text-overflow: inherit;
+text-overflow: initial;
+text-overflow: unset;
+
+ +

La propriété text-overflow peut être définie grâce à une ou deux valeurs.

+ +

Si une valeur est fournie, celle-ci indique le comportement du dépassement en fin de ligne (c'est-à-dire l'extrêmité droite pour les textes écrits de gauche à droite et l'extrêmité gauche pour les textes écrits de droite à gauche). Si deux valeurs sont fournies, la première précisera la comportement pour le dépassement à l'extrêmité gauche de la ligne et la seconde indiquera le comportement du dépassement pour l'extrêmité droite de la ligne.

+ +

Chacune des valeurs se compose :

+ + + +

Valeurs

+ +
+
clip
+
La valeur par défaut de cette propriété. Ce mot-clé indique qu'on tronque le texte à la limite de la boîte de contenu. La troncature peut donc arriver sur le milieu d'un caractère. Pour que celle-ci soit appliquée entre deux caractères, on devra utiliser la chaîne vide ('') comme valeur pour cette propriété.
+
ellipsis
+
Ce mot-clé indique qu'on affiche une ellipse ('…', U+2026 Horizontal Ellipsis) pour représenter le texte rogné. L'ellipse est affichée à l'intérieur de la boîte de contenu et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher l'ellipse, celle-ci est rognée.
+
fade {{experimental_inline}}
+
Ce mot-clé indique que le contenu qui dépasse est rogné avec un effet de dégradé en transparence. Au bout de la boîte, le contenu est totalement transparent.
+
fade( <length> | <percentage> ) {{experimental_inline}}
+
Cette fonction permet de rogner le contenu qui dépasse et d'appliquer un effet de dégradé en transparence. Au bout de la boîte, on a une transparence totale.
+ L'argument passé à la fonction détermine la distance sur laquelle cet effet est appliqué. La valeur en pourcentage est relative à la largeur de la boîte. Les valeurs inférieures à 0 sont ramenées à 0. Les valeurs supérieures à la largeur de la boîte sont écrétées à la largeur de la boîte.
+
<string> {{experimental_inline}}
+
Une chaîne de caractères (type {{cssxref("<string>")}}) utilisée pour représentée le texte rogné. La chaîne est affichée à l'intérieur de la boîte de contenu et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher la chaîne choisie, celle-ci est rognée.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
p {
+  width: 200px;
+  border: 1px solid;
+  padding: 2px 5px;
+
+  /* Nécessaires pour text-overflow */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.overflow-visible {
+  white-space: initial;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-string {
+  /* Cette forme n'est pas prise en charge
+    par la plupart des navigateurs. cf. la
+    section Compatibilité ci-après */
+  text-overflow: " [..]";
+}
+
+ +

HTML

+ +
<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
+<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
+<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
+<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 300, 220, '', 'Web/CSS/text-overflow')}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valeur CSSdirection: ltrdirection: rtl
Résultat attenduRésultat du navigateurRésultat attenduRésultat du navigateur
overflow:visible1234567890 +
1234567890
+ 		0987654321 +
1234567890
+
text-overflow: clipt-o_clip.png +
123456
+ 		t-o_clip_rtl.png +
1234567890
+
text-overflow: ''12345 +
123456
+ 		54321 +
1234567890
+
text-overflow: ellipsis1234… +
1234567890
+ 		…4321 +
1234567890
+
text-overflow: '.'1234. +
1234567890
+ 		.4321 +
1234567890
+
text-overflow: clip clip123456 +
1234567890
+ 		654321 +
1234567890
+
text-overflow: clip ellipsis1234… +
1234567890
+ 		6543… +
1234567890
+
text-overflow: clip '.'1234. +
1234567890
+ 		6543. +
1234567890
+
text-overflow: ellipsis clip…3456 +
1234567890
+ 		…4321 +
1234567890
+
text-overflow: ellipsis ellipsis…34… +
1234567890
+ 		…43… +
1234567890
+
text-overflow: ellipsis '.'…34. +
1234567890
+ 		…43. +
1234567890
+
text-overflow: ',' clip,3456 +
1234567890
+ 		,4321 +
1234567890
+
text-overflow: ',' ellipsis,34… +
1234567890
+ 		,43… +
1234567890
+
text-overflow: ',' '.',34. +
1234567890
+ 		,43. +
1234567890
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 UI', '#text-overflow', 'text-overflow')}}{{Spec2('CSS4 UI')}}Ajout des valeurs <string> et fade et de la fonction fade().
{{SpecName('CSS3 Overflow', '#text-overflow', 'text-overflow')}}{{Spec2('CSS3 Overflow')}}Définition initiale.
+ +

Une version précédente de cette interface avait atteint le statut de Candidate Recommendation. Certaines fonctionnalités devaient être retirées et n'étaient pas listées parmi les fonctionnalités à risque, la spécification a donc été déchue au niveau Working Draft. Cela explique pourquoi les navigateurs ont implémenté cette propriété sans préfixe bien qu'elle ne soit pas une CR.

+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-overflow")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("overflow")}}
    • +
  • {{cssxref("white-space")}}
    • +
diff --git a/files/fr/web/css/text-rendering/index.html b/files/fr/web/css/text-rendering/index.html new file mode 100644 index 0000000000..94c1706c49 --- /dev/null +++ b/files/fr/web/css/text-rendering/index.html @@ -0,0 +1,132 @@ +--- +title: text-rendering +slug: Web/CSS/text-rendering +tags: + - CSS + - Propriété + - Reference + - SVG +translation_of: Web/CSS/text-rendering +--- +
{{CSSRef}}
+ +

La propriété text-rendering donne de l'information au moteur de rendu sur ce qu'il doit optimiser lors de l'affichage du texte.

+ +

Le navigateur fait des compromis entre la vitesse, la lisibilité et la précision géométrique.

+ +
/* Avec un mot-clé */
+text-rendering: auto;
+text-rendering: optimizeSpeed;
+text-rendering: optimizeLegibility;
+text-rendering: geometricPrecision;
+
+/* Valeurs globales */
+text-rendering: inherit;
+text-rendering: initial;
+text-rendering: unset;
+
+ +
+

Note : La propriété text-rendering est une propriété SVG qui n'est définie dans aucun standard CSS. Toutefois, les navigateurs utilisant Gecko et WebKit permettent d'appliquer cette propriété à du contenu HTML ou XML sur Windows, Mac OS X et Linux.

+
+ +

Un effet très visible est : text-rendering : optimizeLegibility; qui active les ligatures (ff, fi, fl etc.) dans les textes en dessous de 20px pour certains polices (par exemple, Calibri, Candara, Constantia et Corbel de Microsoft, ou la famille DejaVu).

+ +

Syntaxe

+ +

Valeurs

+ +
+
auto
+
Le navigateur fait un choix éclairé sur la manière d'optimiser la vitesse, lisibilité et la précision géométrique lors de l'affichage du texte. Pour en savoir plus sur la manière dont est supportée cette valeur, reportez-vous au tableau de compatibilité.
+
optimizeSpeed
+
Le navigateur privilégie la vitesse de rendu par rapport à la lisibilité et la précision géométrique lors de l'affichage du texte. Cela désactive les ligatures et le crénage.
+
optimizeLegibility
+
Le navigateur privilégie la lisibilité par rapport à la vitesse de rendu ou la précision géométrique. Ceci active le crénage et les ligatures.
+
geometricPrecision
+
+

Le navigateur privilégie la précision géométrique par rapport à la vitesse de rendu et la lisibilité. Certains aspects d'une police — comme le crénage — ne se mettent pas à l'échelle de manière linéaire, donc geometricPrecision peut rendre agréables à l'œil les textes utilisant ces polices.

+ +

Avec SVG, lorsque le texte est agrandi ou réduit, le navigateur calcule la taille finale du texte (qui est la taille de police définie et le facteur appliqué) et demande une police de cette taille calculée au système de police de la plateforme. Mais si vous demandez une police de taille 9 avec un facteur de 140 %, la taille résultante de 12,6 n'existe pas dans la système de polices, donc le navigateur arrondi la taille de police à 12 dans ce cas. Ce qui aboutit à une mise à l'échelle en escalier du texte.

+ +

Toutefois la propriété geometricPrecision — lorsqu'elle est complètement supportée par le moteur de rendu — permet de mettre à l'échelle le texte de manière continue. Pour les facteurs de mise à l'échelle élevés, il est possible d'obtenir un rendu de texte moins-que-joli, mais de la taille que vous attendez — et pas arrondi à la taille supportée par Windows ou Linux la plus proche.

+ +

WebKit applique précisément la valeur définie, mais Gecko traite la valeur de la même manière que optimizeLegibility.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Application automatique de optimizeLegibility

+ +

Cet exemple illustre comment optimizeLegibility est automatiquement utilisé par les navigateurs lorsque font-size est inférieure à 20px.

+ +

CSS

+ +
.small { font: 19.9px "Times New Roman", "Georgia", "Palatino", serif; }
+.big   { font: 20px "Times New Roman", "Georgia", "Palatino", serif; }
+ +

HTML

+ +
<p class="small">LYoWAT - ff fi fl ffl</p>
+<p class="big">LYoWAT - ff fi fl ffl</p>
+ +

Résultat

+ +

{{EmbedLiveSample('Application_automatique_de_optimizeLegibility')}}

+ +

optimizeSpeed et optimizeLegibility

+ +

Cet exemple illustre la différence d'apparence entre optimizeSpeed et optimizeLegibility (cette différence peut varier d'un navigateur à l'autre).

+ +

CSS

+ +
p { font: 1.5em "Times New Roman", "Georgia", "Palatino", serif }
+
+.speed       { text-rendering: optimizeSpeed; }
+.legibility  { text-rendering: optimizeLegibility; }
+ +

HTML

+ +
<p class="speed">LYoWAT - ff fi fl ffl</p>
+<p class="legibility">LYoWAT - ff fi fl ffl</p>
+ +

Résultat

+ +

{{EmbedLiveSample('optimizeSpeed_et_optimizeLegibility')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('SVG2', 'painting.html#TextRenderingProperty', 'text-rendering')}}{{Spec2('SVG2')}}Aucune modification.
{{SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering')}}{{Spec2('SVG1.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-rendering")}}

diff --git a/files/fr/web/css/text-shadow/index.html b/files/fr/web/css/text-shadow/index.html new file mode 100644 index 0000000000..af5d743c79 --- /dev/null +++ b/files/fr/web/css/text-shadow/index.html @@ -0,0 +1,142 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-shadow +--- +
{{CSSRef}}
+ +

La propriété text-shadow ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux décorations de l'élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur.

+ +
{{EmbedInteractiveExample("pages/css/text-shadow.html")}}
+ + + +

Syntaxe

+ +
/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #fc0 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558abb;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y
+/* Utiliser les défauts pour la couleur et le rayon de flou */
+text-shadow: 5px 10px;
+
+/* Valeurs globales */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+
+ +

Cette propriété est spécifiée comme une liste d'ombres séparées par des virgules.

+ +

Chaque ombre est spécifiée par deux ou trois valeurs <length>, suivies d'une valeur <color>. Les deux premières valeurs <length> sont les valeurs <decalage-x> et <decalage-y>. La troisième valeur <length>, facultative, est le <rayon-de-flou>. La valeur <color> est la couleur de l'ombre.

+ +

Lorsque plus d'une ombre est indiquée, les ombres sont appliquées d'avant en arrière, avec la première ombre spécifiée sur le dessus.

+ +

Cette propriété s'applique aux deux pseudo-éléments {{cssxref("::first-line")}} et {{cssxref("::first-letter")}}.

+ +

Valeurs

+ +
+
{{cssxref("<color>")}}
+
Optionnelle. La couleur de l'ombre. Elle peut être spécifiée avant ou après les valeurs de décalage. Si non spécifiée, la valeur de la couleur est laissée à l'agent utilisateur, donc quand une cohérence entre les navigateurs est désirée, vous devriez la définir explicitement.
+
<decalage-x> <decalage-y>
+
Obligatoires. Ces valeurs {{cssxref("<length>")}} définissent la distance de l'ombre par rapport au texte. <decalage-x> définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. <decalage-y> définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à 0, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du <rayon-de-flou>).
+
<rayon-de-flou>
+
Optionnel. C'est une valeur {{cssxref("<length>")}}). Plus la valeur sera élevée, plus le flou sera important ; l'ombre deviendra plus large et plus légère. Si non utilisée, elle a pour défaut 0.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

Ombre simple

+ +
+
.red-text-shadow {
+   text-shadow: red 0 -2px;
+}
+ +
<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
+
+ +

{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}

+ +

Ombres multiples

+ +
+
.white-text-with-blue-shadow {
+   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+   color: white;
+   font: 1.5em Georgia, serif;
+}
+ +
<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsaquae ab illo inventore.</p>
+
+ +

{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}{{Spec2('CSS3 Transitions')}}Spécifie text-shadow comme animable.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}La propriété CSS text-shadow était incorrectement définie dans CSS2 et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans CSS Text Decoration Module Level 3.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-shadow")}}

+ +

Notes CSS Quantum

+ +
    +
  • Gecko présente un bug en raison duquel les {{cssxref("transition")}}s ne fonctionnent pas lors d'une transition entre une text-shadow avec une couleur spécifiée et une ext-shadow sans couleur spécifiée ({{bug(726550)}}). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme Quantum CSS ou Stylo), prévu pour être disponible dans Firefox 57.
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/text-size-adjust/index.html b/files/fr/web/css/text-size-adjust/index.html new file mode 100644 index 0000000000..724f0ac75c --- /dev/null +++ b/files/fr/web/css/text-size-adjust/index.html @@ -0,0 +1,88 @@ +--- +title: text-size-adjust +slug: Web/CSS/text-size-adjust +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/text-size-adjust +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété text-size-adjust permet de contrôler l'algorithme d'amplification du texte sur certains appareils mobiles. Cette propriété n'est pas standard et doit donc être préfixée : -moz-text-size-adjust, -webkit-text-size-adjust, and -ms-text-size-adjust.

+ +
/* Valeur avec un mot-clé */
+text-size-adjust: none;
+text-size-adjust: auto;
+
+/* Valeurs proportionnelles */
+text-size-adjust: 80%;
+
+/* Valeurs globales */
+text-size-adjust: inherit;
+text-size-adjust: initial;
+text-size-adjust: unset;
+
+ +

De nombreuses pages web n'ont pas été conçues pour le mobile et les navigateurs mobiles n'affichent pas les pages web de la même façon que les navigateurs de bureau. Plutôt que d'afficher une page web dans la largeur de l'écran, un navigateur mobile sera parfois amené à l'afficher dans une zone d'affichage beaucoup plus large que l'écran. Pour gérer la largeur de l'écran, le navigateur n'affichera qu'une partie ou rétrécira la taille de la zone d'affichage.

+ +

Par essence, cela signifie que, sur mobiles, on ne voit qu'une portion rectangulaire de la page ou que la page a l'air dézoomée (et apparaît donc plus petite).

+ +

Cependant, lorsque l'utilisateur zoome jusqu'à ce que le texte soit lisible, on a alors une barre horizontale de défilement qui apparaît car le texte est large que la largeur de l'écran et l'ergonomie est donc détériorée car l'utilisateur doit défiler à la fin et au début à chaque passage à la ligne. Pour éviter ce problème, plusieurs navigateurs mobiles implémentent un algorithme de gonflement (inflation). Lorsqu'un élément reçoit le focus, qu'il contient du texte et qu'il utilise 100 % de la largeur de l'écran, la taille du texte est augmentée afin qu'il soit lisible, sans pour autant modifier la disposition générale (ce qui évite d'avoir à recourir à une barre de défilement horizontale).

+ +

La propriété text-size-adjust permet aux auteurs de ne pas suivre ce comportement si les pages web ont été adaptées pour les différents formats d'écran.

+ +

Syntaxe

+ +

La propriété text-size-adjust est définie avec le mot-clé none ou le mot-clé auto ou avec une valeur de type <percentage>.

+ +

Valeurs

+ +
+
none
+
Un mot-clé qui permet de ne pas utiliser l'algorithme de gonflement. En résumé, cela signifie que l'élément sera affiché sans que le texte soit amplifié. Pour les anciennes versions des navigateurs basés sur le moteur WebKit (Chrome ≤ 26 et Safari ≤ 5), cela empêchera l'utilisateur de zoomer/dézoomer sur la page web.
+
auto
+
Active l'algorithme d'amplification du navigateur. Ce mot-clé permet notamment d'annuler une valeur none utilisée précédemment.
+
<percentage>
+
Une valeur exprimée en pourcentages (type de données {{cssxref("<percentage>")}}. Cette valeur est synonyme du mot-clé auto et ajoute comme information le taux d'amplification à utiliser sur la police avec l'algorithme.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}{{Spec2("CSS Text Size Adjust")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-size-adjust")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/text-transform/index.html b/files/fr/web/css/text-transform/index.html new file mode 100644 index 0000000000..ecba436b31 --- /dev/null +++ b/files/fr/web/css/text-transform/index.html @@ -0,0 +1,191 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-transform +--- +
{{CSSRef}}
+ +

La propriété text-transform définit la façon d'utiliser les lettres capitales pour le texte d'un élément. Cela permet que le texte soit écrit uniquement en majuscules, minuscules ou que chaque mot commence par une capitale. Cela permet également d'améliorer la lisibilité pour les textes avec des annotations Ruby.

+ +
{{EmbedInteractiveExample("pages/css/text-transform.html")}}
+ + + +

La propriété text-transform gère les différences liées aux langues, par exemple :

+ +
    +
  • +

    Pour les langues turques comme le turc (tr), l'azéri (az), le tatar de Crimée (crh), le tatar de Volga (tt) et le bachkir (ba), il existe deux sortes de i, avec et sans le point. Les majuscules correspondantes sont également différentes : i/İ et ı/I.

    +
    • +
  • +

    En allemand (de), le ß devient SS en majuscule.

    +
    • +
  • +

    En néerlandais (nl), le digraphe ij devient IJ, y compris avec text-transform: capitalize qui ne met que la première lettre de chaque mot en majuscule.

    +
    • +
  • +

    En grec (el), les voyelles perdent leur accent lorsque tout le mot est écrit en capitales (ά/Α) à l'exception du eta disjonctif (ή/Ή). Les diphtongues avec un accent sur la première voyelle perde l'accent et récupère un tréma sur la seconde voyelle (άι/ΑΪ). La lettre sigma a deux formes minuscules : σ et ς. ς est utilisée uniquement lorsque c'est la dernière lettre du mot. Lorsque l'agent utilisateur applique text-transform: lowercase à un sigma majuscule (Σ), il doit choisir l'une des deux formes selon le contexte.

    +
    • +
  • En gaëlique (ga), une lettre qui préfixe un mot doit rester en minuscule lorsqu'on capitalise toutes les lettres. Ainsi, en appliquant text-transform: uppercase à ar aon tslí, on obtiendra AR AON tSLÍ et non AR AON TSLÍ. Dans certains cas, un trait d'union peut être retiré lors du passage en majuscules : an t-uisce deviendra AN tUISCE (le trait-d'union sera bien réinséré avec text-transform: lowercase)
    • +
+ +

La langue d'un document HTML est définie par l'attribut XML xml:lang, qui a la priorité sur l'attribut global lang.

+ +

Le support de ces différents cas peut varier d'un navigateur à un autre. Pour plus de détails, voir le tableau de compatibilité des navigateurs.

+ +

Syntaxe

+ +
/* Avec un mot-clé */
+text-transform: none;
+text-transform: capitalize;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: full-width;
+text-transform: full-size-kana;
+
+/* Valeurs globales */
+text-transform: inherit;
+text-transform: initial;
+text-transform: unset;
+
+ +

Valeurs

+ +
+
capitalize
+
+

En utilisant ce mot-clé, la première lettre de chaque mot sera affichée en capitale. Les autres caractères ne seront pas modifiés et conserveront ainsi la forme originale, contenue dans le texte de l'élément. Ici, une lettre peut être n'importe quel caractère Unicode qui fait partie des catégories génériques Lettre. Cela exclue donc les symboles de ponctuations qui peuvent être utilisés en début de mot.

+ +

Le mot-clé capitalize n'était pas complètement spécifié avec CSS 1 et CSS 2.1. Il y avait certaines différences entre les navigateurs : Firefox considèrait que - et _ étaient des lettres ; Webkit et Gecko considéraient que les symboles lettrés comme ⓐ étaient de vraies lettres ; Internet Explorer 9 était le plus proche de la définition donnée par CSS2 mais il y avait certains cas étranges. Grâce à CSS Text Level 3, ces ambiguités sont levées. Dans le tableau, la ligne capitalize traduit le support de cette spécification.

+
+
uppercase
+
En utilisant ce mot-clé, tous les caractères seront écrits en capitales.
+
lowercase
+
En utilisant ce mot-clé, tous les caractères seront écrits en minuscules.
+
none
+
Ce mot-clé empêche les modifications liées à la casse des caractères.
+
full-width {{experimental_inline}}
+
Ce mot-clé force l'écriture de chaque caractère dans un carré, ce qui permet de les aligner avec des scripts d'Asie Orientale (par exemple du chinois ou du japonais).
+
full-size-kana
+
Cette valeur est généralement utilisée pour les annotations Ruby. Ce mot-clé convertit les caractères Kana de petite taille en leur équivalent de grande taille. Cela permet de compenser les problèmes de lisibilité des tailles de police généralement utilisées pour le Ruby.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<code>none :</code>
+<p class="sans_effet">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit
+</p>
+
+<code>capitalize :</code>
+<p class="cap">
+  (Voici) “un” –rapide– -test- ⓙkl
+</p>
+
+</code> uppercase :</code>
+<p class="majuscules">
+  Cependant d'Artagnan voulut d'abord se rendre compte de
+  la physionomie de l'impertinent qui se moquait de lui.
+</p>
+
+<code>full-width :</code>
+<p class="mix">
+  ABCDEF</br>
+  最初に彼を嘲
+</p>
+
+<code>full-size-kana :</code>
+<p class="full-size-kana">ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
+<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
+
+
+ +

CSS

+ +
p.sans_effet {
+  text-transform: none;
+}
+
+p.cap {
+  text-transform: capitalize;
+}
+
+p.majuscules {
+  text-transform: uppercase;
+}
+
+p.mix {
+  text-transform: full-width;
+}
+
+p.full-size-kana {
+  text-transform: full-size-kana;
+}
+
+
+ +

Résultat

+ +

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

+ +

Accessibilité

+ +

De grandes portions de texte utilisant text-transform avec la valeur uppercase peuvent être difficilement lisibles par les personnes dyslexiques ou souffrant de problèmes cognitifs.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS3 Text')}}Par rapport à {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, la spécification s'étend aux caractères Unicode des catégories générales Nombre et Lettre. Le comportement de capitalize est modifié pour ignorer les éventuels symboles ou caractères de ponctuations utilisés. Les mots-clés full-width et full-size-kana sont ajoutés afin de pouvoir mélanger harmonieusement les caractères alphabétiques et les caractères idéographiques.
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}{{Spec2('CSS2.1')}}Par rapport à {{SpecName('CSS1', '#text-transform', 'text-transform')}}, étend la spécifications aux lettres non latines et aux scripts bicaméraux.
{{SpecName('CSS1', '#text-transform', 'text-transform')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-transform")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("font-variant")}}
    • +
diff --git a/files/fr/web/css/text-underline-offset/index.html b/files/fr/web/css/text-underline-offset/index.html new file mode 100644 index 0000000000..b62f7eb7e6 --- /dev/null +++ b/files/fr/web/css/text-underline-offset/index.html @@ -0,0 +1,112 @@ +--- +title: text-underline-offset +slug: Web/CSS/text-underline-offset +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-underline-offset +--- +
{{CSSRef}}
+ +

La propriété CSS text-underline-offset définit le décalage de la ligne de décoration du texte par rapport à sa position originale.

+ +
{{EmbedInteractiveExample("pages/css/text-underline-offset.html")}}
+ + + +
+

Note : text-underline-offset n'est pas une propriété détaillée de {{cssxref('text-decoration')}}. Bien qu'un élément puisse avoir plusieurs lignes décoratives, text-underline-offset n'aura qu'un impact sur le soulignage (et pas sur les autres lignes telles que celles fournies par {{cssxref('text-decoration-line')}} avec overline ou line-through).

+
+ +

Syntaxe

+ +
/* Valeur simple */
+text-underline-offset: none;
+text-underline-offset: from-font;
+text-underline-offset: 0.2em;
+
+/* Valeurs globales */
+text-underline-offset: inherit;
+text-underline-offset: initial;
+text-underline-offset: unset;
+
+ +

La propriété text-underline-offset est définie avec le mot-clé none ou avec une valeur de la liste suivante.

+ +

Valeurs

+ +
+
auto
+
Le navigateur choisit un décalage approprié pour le soulignage.
+
from-font
+
Si le fichier de fonte inclut des informations quant à un décalage préféré, c'est cette valeur qui sera utilisée. Si le fichier de fonte n'a pas cette information, cette valeur se comportera comme auto.
+
<length>
+
Une longueur (valeur de type {{cssxref("<length>")}}) indiquant le décalage à utiliser. Il est recommandé d'utiliser des em comme unité afin que le décalage suive la taille de la police (quand on zoome par exemple).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
p {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+  text-underline-offset: 1em;
+}
+
+.deuxlignes{
+  text-decoration-line: underline overline;
+}
+ +

HTML

+ +
<p class="uneligne">
+  Voici un texte souligné avec une ligne ondulée rouge !
+</p>
+<p class="deuxlignes">
+  Ce texte a une ligne en dessous et une ligne au dessus.
+  Seule la ligne du dessous est déplacée.
+</p>
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Text Decoration', '#underline-offset', 'text-underline-offset')}}{{Spec2('CSS4 Text Decoration')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-underline-offset")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("text-decoration")}}
    • +
diff --git a/files/fr/web/css/text-underline-position/index.html b/files/fr/web/css/text-underline-position/index.html new file mode 100644 index 0000000000..09bbd3b97d --- /dev/null +++ b/files/fr/web/css/text-underline-position/index.html @@ -0,0 +1,128 @@ +--- +title: text-underline-position +slug: Web/CSS/text-underline-position +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-underline-position +--- +
{{CSSRef}}
+ +

La propriété text-underline-position définit la position du soulignement utilisé lorsque la propriété {{cssxref("text-decoration")}} prend la valeur underline.

+ +
/* Avec un mot-clé */
+text-underline-position: auto;
+text-underline-position: under;
+text-underline-position: left;
+text-underline-position: right;
+
+/* Avec plusieurs mots-clés */
+text-underline-position: under left;
+text-underline-position: right under;
+
+/* Valeurs globales */
+text-underline-position: inherit;
+text-underline-position: initial;
+text-underline-position: unset;
+
+ +

Cette propriété est héritée sur les différents éléments et n'est pas réinitialisée avec la propriété raccourcie {{cssxref("text-decoration")}}, ce qui permet de la définir simplement pour l'ensemble du document.

+ +
:root {
+  /* Une meilleure règle par défaut pour un document */
+  /* avec de nombreuses formules chimiques */
+  text-underline-position: under;
+}
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
auto
+
Ce mot-clé permet à l'agent utilisateur d'utiliser un algorithme pour choisir entre under et alphabetic.
+
under
+
Ce mot-clé force la ligne à se situer sous la ligne de base, à une position où elle ne traversera pas de jambage. Cela est notamment utile lorsqu'on veut souligner de façon lisible des formules chimiques ou mathématiques (qui utilisent fréquemment des indices).
+
left
+
In vertical writing-modes, this keyword forces the line to be placed on the left of the characters. In horizontal writing-modes, it is a synonym of under.
+
right
+
Pour les modes d'écritures verticaux, ce mot-clé force la ligne à être placée à droite des caractères. Pour les modes d'écritures horizontaux, ce mot-clé est synonyme de under.
+
auto-pos{{non-standard_inline}}
+
Ce mot-clé est synonyme de auto et c'est ce dernier qui doit être utilisé à la place.
+
above{{non-standard_inline}}
+
Ce mot-clé force la ligne à être dessinée au dessus du texte. Lorsqu'on écrit avec un script d'Asie orientale, la valeur auto aura un effet semblable.
+
below{{non-standard_inline}}
+
Ce mot-clé force la ligne à être dessinée sous le texte. Lorsqu'on utilise un texte alphabétique, la valeur auto aura un effet semblable.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<p class="chimique">
+  C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>
+</p>
+<p class="defaut">
+  Et là avec des <sub>indices</sub>
+  et du jambage
+</p>
+
+ +

CSS

+ +
.chimique {
+  text-decoration: underline;
+  text-underline-position: under;
+}
+
+.defaut {
+  text-decoration: underline;
+  text-underline-position: auto;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Text Decoration', '#text-underline-position-property', 'text-underline-position')}}{{Spec2('CSS3 Text Decoration')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.text-underline-position")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/time-percentage/index.html b/files/fr/web/css/time-percentage/index.html new file mode 100644 index 0000000000..840ef99d22 --- /dev/null +++ b/files/fr/web/css/time-percentage/index.html @@ -0,0 +1,50 @@ +--- +title: +slug: Web/CSS/time-percentage +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/time-percentage +--- +
{{CSSRef}}
+ +

Le type de donnée <time-percentage> représente une valeur qui peut être de type {{Cssxref("time")}} ou une valeur qui peut être de type {{Cssxref("percentage")}}.

+ +

Syntaxe

+ +

Se référer à la documentation des types {{Cssxref("time")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles pour chacun de ces types.

+ +

Utilisation avec calc()

+ +

Lorsqu'une valeur de type <time-percentage> est autorisée dans une déclaration, cela signifie que le pourcentage sera résolu comme un temps et qu'il peut donc être utilisée dans une expression {{Cssxref("calc()")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#mixed-percentages', '<time-percentage>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#mixed-percentages', '<time-percentage>')}}{{Spec2('CSS3 Values')}}Définition du type <time-percentage>. Ajout de calc()
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.time-percentage")}}

diff --git a/files/fr/web/css/time/index.html b/files/fr/web/css/time/index.html new file mode 100644 index 0000000000..1dab59ddcb --- /dev/null +++ b/files/fr/web/css/time/index.html @@ -0,0 +1,83 @@ +--- +title: