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

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

+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}}

+{{cssinfo}} -

Syntaxe

+## Syntaxe -
--unmotcle: left;
---unecouleur: #0000ff;
---unevaleurcomplexe: 3px 6px rgb(20, 32, 54);
-
+ --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.
-
+- `` + - : 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

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

HTML

+### 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>
+```html +

Ce paragraphe devrait être sur fond bleu avec un texte jaune.

+

Ce paragraphe devrait être sur fond jaune avec un texte bleu.

+``` -

CSS

+### CSS -
:root {
+```css
+:root {
   --premiere-couleur: #488cff;
   --seconde-couleur: #ffff8c;
 }
@@ -55,37 +55,23 @@ translation_of: Web/CSS/--*
 #secondParagraphe {
   background-color: var(--seconde-couleur);
   color: var(--premiere-couleur);
-}
+} +``` -

Résultat

+### Résultat -

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

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

Spécifications

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

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi - +- [Utiliser les variables CSS](/fr/docs/Web/CSS/Les_variables_CSS) diff --git a/files/fr/web/css/-moz-context-properties/index.md b/files/fr/web/css/-moz-context-properties/index.md index c7cf7e321f..5bb568a022 100644 --- a/files/fr/web/css/-moz-context-properties/index.md +++ b/files/fr/web/css/-moz-context-properties/index.md @@ -8,13 +8,14 @@ tags: - Reference translation_of: Web/CSS/-moz-context-properties --- -
{{CSSRef}}{{Non-standard_header}}{{SeeCompatTable}}
+{{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.

+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 `` à 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

+## Syntaxe -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -moz-context-properties: fill;
 -moz-context-properties: fill, stroke;
 
@@ -22,32 +23,31 @@ translation_of: Web/CSS/-moz-context-properties
 -moz-context-properties: inherit;
 -moz-context-properties: initial;
 -moz-context-properties: unset;
-
+``` -

Valeurs

+### 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.
-
+- `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

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

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

+Dans cet exemple, on embarque un SVG simple dans un élément ``. -

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 :

+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 {
+```css
+img {
   width: 100px;
   height: 100px;
   -moz-context-properties: fill, stroke;
@@ -56,26 +56,27 @@ translation_of: Web/CSS/-moz-context-properties
 .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 :

+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>">
+```html + +``` -

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.

+Ici, l'attribut `src` de l'image correspond à une URI de données qui contient une simple image SVG. L'élément `` 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 `` grâce aux mots-clés `context-fill`/`context-stroke`. On utilise aussi une couleur de secours pour le remplissage (`fill`) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera. -
-

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

-
+> **Note :** vous pouvez consulter [un exemple complet sur notre dépôt Github](https://mdn.github.io/css-examples/moz-context-properties/). -

Spécifications

+## Spécifications -

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

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

+{{Compat("css.properties.-moz-context-properties")}} diff --git a/files/fr/web/css/-moz-float-edge/index.md b/files/fr/web/css/-moz-float-edge/index.md index a81710c8d9..4c3eac80dd 100644 --- a/files/fr/web/css/-moz-float-edge/index.md +++ b/files/fr/web/css/-moz-float-edge/index.md @@ -8,11 +8,12 @@ tags: - Reference translation_of: Web/CSS/-moz-float-edge --- -
{{CSSRef}}{{Non-standard_header}}
+{{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).

+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é */
+```css
+/* Valeurs avec un mot-clé */
 -moz-float-edge: border-box;
 -moz-float-edge: content-box;
 -moz-float-edge: margin-box;
@@ -22,61 +23,61 @@ translation_of: Web/CSS/-moz-float-edge
 -moz-float-edge: inherit;
 -moz-float-edge: initial;
 -moz-float-edge: unset;
-
+``` -

Syntaxe

+## Syntaxe -

Valeurs

+### 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.
-
+- `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

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
.box {
+```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

+### HTML -
<div class="box">
-   <p>
+```html
+

+   

       Lorem ipsum dolor sit amet,
       consectetur adipiscing elit.
-   </p>
-</div>
+

+ +``` -

Résultat

+### Résultat -

{{EmbedLiveSample('Exemples')}}

+{{EmbedLiveSample('Exemples')}} -

Spécifications

+## Spécifications -

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

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

{{cssinfo}}

+{{cssinfo}} -

Voir aussi

+## Voir aussi -
    -
  • {{bug(432891)}}
    • -
+- {{bug(432891)}} diff --git a/files/fr/web/css/-moz-force-broken-image-icon/index.md b/files/fr/web/css/-moz-force-broken-image-icon/index.md index 58e1ca993b..0fdd7683a8 100644 --- a/files/fr/web/css/-moz-force-broken-image-icon/index.md +++ b/files/fr/web/css/-moz-force-broken-image-icon/index.md @@ -8,63 +8,59 @@ tags: - Reference translation_of: Web/CSS/-moz-force-broken-image-icon --- -
{{Non-standard_header}}{{ CSSRef}}
+{{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.

+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

+## Syntaxe -

Valeurs

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

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

Syntaxe formelle

+ - : 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

+## Exemples -

CSS

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

HTML

+### HTML -
<img src='/lien/vers/image/cassée.png' alt='Un lien vers une image cassée'>
+```html +Un lien vers une image cassée +``` -

Résultat

+### Résultat -

{{EmbedLiveSample('Exemples','125','125','/files/4619/broken%20image%20link.png')}}

+{{EmbedLiveSample('Exemples','125','125','/files/4619/broken%20image%20link.png')}} -
-

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

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

Spécifications

+## Spécifications -

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

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

{{cssinfo}}

+{{cssinfo}} -

Notes

+## Notes -
    -
  • Cette propriété ne fonctionne que sur les navigateurs basés sur Gecko.
    • -
  • L'usage de cette propriété n'est pas recommandée. Une propriété alt adéquate devrait être utilisé.
    • -
+- Cette propriété ne fonctionne que sur les navigateurs basés sur Gecko. +- L'usage de cette propriété n'est pas recommandée. Une propriété _alt_ adéquate devrait être utilisé. -

Voir aussi

+## Voir aussi -
    -
  • {{Bug(58646)}}
    • -
+- {{Bug(58646)}} diff --git a/files/fr/web/css/-moz-image-rect/index.md b/files/fr/web/css/-moz-image-rect/index.md index 45b4ec33bf..0a0123b4e3 100644 --- a/files/fr/web/css/-moz-image-rect/index.md +++ b/files/fr/web/css/-moz-image-rect/index.md @@ -8,44 +8,43 @@ tags: - Reference translation_of: Web/CSS/-moz-image-rect --- -
{{Non-standard_header}}{{CSSRef}}
+{{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.

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

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

+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

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

Valeurs

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

+### Syntaxe formelle {{CSSSyntax}} -

Exemples

+## Exemples -

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

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

CSS

+### CSS -
#container {
+```css
+#container {
   width:267px;
   height:272px;
   top:100px;
@@ -83,26 +82,28 @@ translation_of: Web/CSS/-moz-image-rect
   height:136px;
   position:absolute;
 }
-
+``` -

HTML

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

JavaScript

+### JavaScript -
function rotate() {
+```js
+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++) {
+  for (var i=1; i<=4; i++) {
     var curId = "box" + i;
 
     // Shift the background images
@@ -111,14 +112,15 @@ translation_of: Web/CSS/-moz-image-rect
     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é.

+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

+### Résultat -

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

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

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

+{{Compat("css.types.-moz-image-rect")}} diff --git a/files/fr/web/css/-moz-image-region/index.md b/files/fr/web/css/-moz-image-region/index.md index b63d4192c2..ea42034254 100644 --- a/files/fr/web/css/-moz-image-region/index.md +++ b/files/fr/web/css/-moz-image-region/index.md @@ -8,45 +8,44 @@ tags: - Référence(2) translation_of: Web/CSS/-moz-image-region --- -
{{Non-standard_header}}{{CSSRef}}
+{{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.

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

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

-
+> **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

+## Syntaxe -

Valeurs

+### 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>")}}.
-
+- `auto` + - : La région pour l'image est définie automatiquement +- `` + - : 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

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -
#example-button {
+```css
+#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);
@@ -54,20 +53,19 @@ translation_of: Web/CSS/-moz-image-region
 #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

+## Spécifications -

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

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi -
    -
  • {{cssxref("-moz-image-rect")}}
    • -
+- {{cssxref("-moz-image-rect")}} diff --git a/files/fr/web/css/-moz-orient/index.md b/files/fr/web/css/-moz-orient/index.md index 4fd2c9583f..975021ef81 100644 --- a/files/fr/web/css/-moz-orient/index.md +++ b/files/fr/web/css/-moz-orient/index.md @@ -8,71 +8,71 @@ tags: - Reference translation_of: Web/CSS/-moz-orient --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -

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

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

Syntaxe

+## Syntaxe -

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

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

Valeurs

+### 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.
-
+- `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

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

HTML

+### HTML -
<p>
+```html
+

   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

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

Résultat

+### Résultat -

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

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

Spécifications

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

+Bien que [proposée](https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html) 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}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi -
    -
  • {{cssxref("box-orient")}}
    • -
+- {{cssxref("box-orient")}} diff --git a/files/fr/web/css/-moz-outline-radius-bottomleft/index.md b/files/fr/web/css/-moz-outline-radius-bottomleft/index.md index 4b4cbfb209..1880627833 100644 --- a/files/fr/web/css/-moz-outline-radius-bottomleft/index.md +++ b/files/fr/web/css/-moz-outline-radius-bottomleft/index.md @@ -8,42 +8,42 @@ tags: - Reference translation_of: Web/CSS/-moz-outline-radius-bottomleft --- -
{{Non-standard_header}}{{CSSRef}}
+{{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.

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

Exemples

+## Exemples -

HTML

+### HTML -
<p>Regardez le coin inférieur gauche de ce paragraphe.</p>
+```html +

Regardez le coin inférieur gauche de ce paragraphe.

+``` -

CSS

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

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples")}}

+{{EmbedLiveSample("Exemples")}} -
-

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

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

Spécifications

+## Spécifications -

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

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

{{cssinfo}}

+{{cssinfo}} -

Voir aussi

+## Voir aussi -
    -
  • La propriété raccourcie {{cssxref("-moz-outline-radius")}}
    • -
  • La propriété standard {{cssxref("outline")}}
    • -
+- La propriété raccourcie {{cssxref("-moz-outline-radius")}} +- La propriété standard {{cssxref("outline")}} diff --git a/files/fr/web/css/-moz-outline-radius-bottomright/index.md b/files/fr/web/css/-moz-outline-radius-bottomright/index.md index 8c4e1a813a..335df93637 100644 --- a/files/fr/web/css/-moz-outline-radius-bottomright/index.md +++ b/files/fr/web/css/-moz-outline-radius-bottomright/index.md @@ -8,42 +8,42 @@ tags: - Reference translation_of: Web/CSS/-moz-outline-radius-bottomright --- -
{{Non-standard_header}}{{CSSRef}}
+{{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.

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

Exemples

+## Exemples -

HTML

+### HTML -
<p>Regardez le coin inférieur droit de ce paragraphe.</p>
+```html +

Regardez le coin inférieur droit de ce paragraphe.

+``` -

CSS

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

Résultat

+### Résultat -

{{EmbedLiveSample("Example")}}

+{{EmbedLiveSample("Example")}} -
-

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

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

Spécifications

+## Spécifications -

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

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

{{cssinfo}}

+{{cssinfo}} -

Voir aussi

+## Voir aussi -
    -
  • La propriété raccourcie {{cssxref("-moz-outline-radius")}}
    • -
  • La propriété standard {{cssxref("outline")}}
    • -
+- La propriété raccourcie {{cssxref("-moz-outline-radius")}} +- La propriété standard {{cssxref("outline")}} diff --git a/files/fr/web/css/-moz-outline-radius-topleft/index.md b/files/fr/web/css/-moz-outline-radius-topleft/index.md index 825b0b8e08..4899122c56 100644 --- a/files/fr/web/css/-moz-outline-radius-topleft/index.md +++ b/files/fr/web/css/-moz-outline-radius-topleft/index.md @@ -8,42 +8,42 @@ tags: - Reference translation_of: Web/CSS/-moz-outline-radius-topleft --- -
{{Non-standard_header}}{{CSSRef}}
+{{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.

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

Exemples

+## Exemples -

HTML

+### HTML -
<p>Observez le coin supérieur gauche de ce paragraphe.</p>
+```html +

Observez le coin supérieur gauche de ce paragraphe.

+``` -

CSS

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

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples")}}

+{{EmbedLiveSample("Exemples")}} -
-

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

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

Spécifications

+## Spécifications -

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

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

{{cssinfo}}

+{{cssinfo}} -

Voir aussi

+## Voir aussi -
    -
  • La propriété raccourcie {{cssxref("-moz-outline-radius")}}
    • -
  • La propriété standard {{cssxref("outline")}}
    • -
+- La propriété raccourcie {{cssxref("-moz-outline-radius")}} +- La propriété standard {{cssxref("outline")}} diff --git a/files/fr/web/css/-moz-outline-radius-topright/index.md b/files/fr/web/css/-moz-outline-radius-topright/index.md index df414e6d10..a9904a7e43 100644 --- a/files/fr/web/css/-moz-outline-radius-topright/index.md +++ b/files/fr/web/css/-moz-outline-radius-topright/index.md @@ -8,42 +8,42 @@ tags: - Référence(2) translation_of: Web/CSS/-moz-outline-radius-topright --- -
{{Non-standard_header}}{{CSSRef}}
+{{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.

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

Exemples

+## Exemples -

HTML

+### HTML -
<p>Observez le coin supérieur droit de ce paragraphe.</p>
+```html +

Observez le coin supérieur droit de ce paragraphe.

+``` -

CSS

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

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples")}}

+{{EmbedLiveSample("Exemples")}} -
-

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

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

Spécifications

+## Spécifications -

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

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

{{cssinfo}}

+{{cssinfo}} -

Voir aussi

+## Voir aussi -
    -
  • La propriété raccourcie {{cssxref("-moz-outline-radius")}}
    • -
  • La propriété standard {{cssxref("outline")}}
    • -
+- La propriété raccourcie {{cssxref("-moz-outline-radius")}} +- La propriété standard {{cssxref("outline")}} diff --git a/files/fr/web/css/-moz-outline-radius/index.md b/files/fr/web/css/-moz-outline-radius/index.md index f91a602fcb..574249a9c9 100644 --- a/files/fr/web/css/-moz-outline-radius/index.md +++ b/files/fr/web/css/-moz-outline-radius/index.md @@ -8,11 +8,12 @@ tags: - Reference translation_of: Web/CSS/-moz-outline-radius --- -
{{Non-standard_header}}{{CSSRef}}
+{{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.

+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 */
+```css
+/* Une seule valeur */
 -moz-outline-radius: 25px;
 
 /* Deux valeurs */
@@ -28,45 +29,40 @@ translation_of: Web/CSS/-moz-outline-radius
 -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")}}.

+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

+## Syntaxe -

Valeurs

+### Valeurs -
-

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

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

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

+Une, deux, trois ou quatre valeurs `` 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.
-
+- `` + - : Voir {{cssxref("<length>")}} pour les valeurs possibles. +- `` + - : Voir {{cssxref("<percentage>")}}, voir {{cssxref("border-radius")}} pour plus de détails sur la proportionnalité des pourcentages. -

Gestion des valeurs multiples :

+### Gestion des valeurs multiples : -
    -
  • Si une seule valeur est définie, celle-ci s'applique pour les 4 angles.
    • -
  • Si deux valeurs sont fournies, la première s'applique aux angles en haut à gauche et en bas à droite et la seconde s'applique aux angles en haut à droite et en bas à gauche.
    • -
  • Si trois valeurs sont fournies, la première s'applique à l'angle en haut à gauche, la deuxième aux angles en haut à droite et en bas à gauche et la troisième s'applique à l'angle en bas à droite.
    • -
  • Si quatre valeurs sont fournies, la première s'applique à l'angle en haut à gauche, la deuxième en haut à droite, la troisième en bas à droite et la quatrième en bas à gauche.
    • -
+- Si une seule valeur est définie, celle-ci s'applique pour les 4 angles. +- Si deux valeurs sont fournies, la première s'applique aux angles en haut à gauche et en bas à droite et la seconde s'applique aux angles en haut à droite et en bas à gauche. +- Si trois valeurs sont fournies, la première s'applique à l'angle en haut à gauche, la deuxième aux angles en haut à droite et en bas à gauche et la troisième s'applique à l'angle en bas à droite. +- Si quatre valeurs sont fournies, la première s'applique à l'angle en haut à gauche, la deuxième en haut à droite, la troisième en bas à droite et la quatrième en bas à gauche. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
.exemple1 {
+```css
+.exemple1 {
   border: 1px solid black;
   outline: dotted red;
   -moz-outline-radius: 12% 1em 25px;
@@ -79,39 +75,37 @@ translation_of: Web/CSS/-moz-outline-radius
   -moz-outline-radius-topright: 1em;
   -moz-outline-radius-bottomright: 35px;
   -moz-outline-radius-bottomleft: 1em;
-}
+} +``` -

HTML

+### HTML -
<p class="exemple1">
+```html
+

   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

+### **Résultat** -

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

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

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

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

Notes

+## Notes -
    -
  • Les coins pour lesquels on utilise la valeur dotted ou dashed sont affichés avec des lignes pleines (cf. {{bug("382721")}}) jusqu'à Firefox 50.
    • -
  • Cette propriété sera vraisemblablement abandonnée dans les prochaines versions de Gecko (cf. {{bug("593717")}}).
    • -
+- Les coins pour lesquels on utilise la valeur `dotted` ou `dashed` sont affichés avec des lignes pleines (cf. {{bug("382721")}}) jusqu'à Firefox 50. +- Cette propriété sera vraisemblablement abandonnée dans les prochaines versions de Gecko (cf. {{bug("593717")}}). -

Spécifications

+## Spécifications -

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

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

+{{Compat("css.properties.-moz-outline-radius")}} diff --git a/files/fr/web/css/-moz-user-focus/index.md b/files/fr/web/css/-moz-user-focus/index.md index 62492eb50c..9c79636659 100644 --- a/files/fr/web/css/-moz-user-focus/index.md +++ b/files/fr/web/css/-moz-user-focus/index.md @@ -8,11 +8,12 @@ tags: - Reference translation_of: Web/CSS/-moz-user-focus --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -

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

+La propriété **`-moz-user-focus`** est utilisée pour indiquer si l'élément peut recevoir le focus. -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -moz-user-focus: normal;
 -moz-user-focus: ignore;
 
@@ -20,56 +21,53 @@ translation_of: Web/CSS/-moz-user-focus
 -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.

+En utilisant la valeur `ignore`, on peut désactiver la prise de focus sur l'élément (l'utilisateur ne pourra pas activer l'élément) et l'élément sera sauté lors de la navigation à la tabulation. -
-

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

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

Syntaxe

+## Syntaxe -

Valeurs

+### 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.
-
+- `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

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

HTML

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

CSS

+### CSS -
.ignored {
+```css
+.ignored {
   -moz-user-focus: ignore;
-}
+} +``` -

Spécifications

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

+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](https://www.w3.org/TR/2000/WD-css3-userint-20000216) mais a été rejetée par le groupe de travail. -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi -
    -
  • {{cssxref("-moz-user-input")}}
    • -
  • {{cssxref("-moz-user-modify")}}
    • -
  • {{cssxref("-moz-user-select")}}
    • -
+- {{cssxref("-moz-user-input")}} +- {{cssxref("-moz-user-modify")}} +- {{cssxref("-moz-user-select")}} diff --git a/files/fr/web/css/-moz-user-input/index.md b/files/fr/web/css/-moz-user-input/index.md index 75138e739c..8eaa985962 100644 --- a/files/fr/web/css/-moz-user-input/index.md +++ b/files/fr/web/css/-moz-user-input/index.md @@ -8,11 +8,12 @@ tags: - Reference translation_of: Web/CSS/-moz-user-input --- -
{{Non-standard_header}}{{CSSRef}}{{Deprecated_Header(60)}}
+{{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")}}.

+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é */
+```css
+/* Valeurs avec un mot-clé */
 -moz-user-input: none;
 -moz-user-input: enabled;
 -moz-user-input: disabled;
@@ -21,50 +22,47 @@ translation_of: Web/CSS/-moz-user-input
 -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.

+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

+## Syntaxe -

Valeurs

+### 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)}}).
-
+- `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

+### Syntaxe formelle {{csssyntax}} -

Exemples

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

Spécifications

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

+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](https://www.w3.org/TR/2000/WD-css3-userint-20000216) mais a été rejetée par le groupe de travail. -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi -
    -
  • {{cssxref("-moz-user-focus")}}
    • -
  • {{cssxref("-moz-user-modify")}}
    • -
  • {{cssxref("-moz-user-select")}}
    • -
+- {{cssxref("-moz-user-focus")}} +- {{cssxref("-moz-user-modify")}} +- {{cssxref("-moz-user-select")}} diff --git a/files/fr/web/css/-webkit-border-before/index.md b/files/fr/web/css/-webkit-border-before/index.md index 9e383a0fb7..343d4d76db 100644 --- a/files/fr/web/css/-webkit-border-before/index.md +++ b/files/fr/web/css/-webkit-border-before/index.md @@ -8,11 +8,12 @@ tags: - Reference translation_of: Web/CSS/-webkit-border-before --- -
{{CSSRef}}{{Non-standard_header}}
+{{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).

+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 */
+```css
+/* Valeurs décrivant une bordure */
 -webkit-border-before: 1px;
 -webkit-border-before: 2px dotted;
 -webkit-border-before: medium dashed blue;
@@ -21,38 +22,37 @@ translation_of: Web/CSS/-webkit-border-before
 -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")}}.

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

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

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

Syntaxe

+## Syntaxe -

Valeurs

+### Valeurs -

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

+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")}}.
-
+- `` + - : Voir {{cssxref("border-width")}}. +- `` + - : Voir {{cssxref("border-style")}}. +- `` + - : Voir {{cssxref("color")}}. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -61,46 +61,43 @@ translation_of: Web/CSS/-webkit-border-before
 .texteExemple {
   writing-mode: vertical-rl;
   -webkit-border-before: 5px dashed blue;
-}
+} +``` + +### HTML + +```html +
+

Texte pour l'exemple

+
+``` + +### Résultat -

HTML

+{{EmbedLiveSample("Exemples", 140, 140)}} -
<div>
-  <p class="texteExemple">Texte pour l'exemple</p>
-</div>
-
+## Spécifications -

Résultat

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

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

+{{cssinfo}} -

Spécifications

+## Compatibilité des navigateurs -

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

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

{{cssinfo}}

+## Voir aussi -

Compatibilité des navigateurs

+- {{cssxref("border-block-start")}} +- Les propriétés physiques correspondantes : -

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

+ - {{cssxref("border-top")}} + - {{cssxref("border-right")}} + - {{cssxref("border-bottom")}} + - {{cssxref("border-left")}} -

Voir aussi

+- Les propriétés qui déterminent les propriétés logiques par rapport aux propriétés physiques -
    -
  • {{cssxref("border-block-start")}}
    • -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("border-top")}}
      • -
    • {{cssxref("border-right")}}
      • -
    • {{cssxref("border-bottom")}}
      • -
    • {{cssxref("border-left")}}
      • -
    -
    • -
  • Les propriétés qui déterminent les propriétés logiques par rapport aux propriétés physiques -
      -
    • {{cssxref("writing-mode")}}
      • -
    • {{cssxref("direction")}}
      • -
    • {{cssxref("text-orientation")}}
      • -
    -
    • -
+ - {{cssxref("writing-mode")}} + - {{cssxref("direction")}} + - {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/-webkit-box-reflect/index.md b/files/fr/web/css/-webkit-box-reflect/index.md index 856a9ca5b0..b41c376bf2 100644 --- a/files/fr/web/css/-webkit-box-reflect/index.md +++ b/files/fr/web/css/-webkit-box-reflect/index.md @@ -8,11 +8,12 @@ tags: - Reference translation_of: Web/CSS/-webkit-box-reflect --- -
{{Non-standard_header}}{{CSSRef}}
+{{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.

+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 */
+```css
+/* Valeurs de directions */
 -webkit-box-reflect: above;
 -webkit-box-reflect: below;
 -webkit-box-reflect: left;
@@ -28,43 +29,37 @@ translation_of: Web/CSS/-webkit-box-reflect
 -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()")}}.

-
+> **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

+## Syntaxe -

Valeurs

+### 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.
-
+- `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). +- `` + - : La taille du reflet créé, cf. {{cssxref("<length>")}} sur les valeurs possibles. +- `` + - : Le masque à appliquer au reflet, cf. {{cssxref("<image>")}} sur les valeurs possibles. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Spécifications

+## Spécifications -

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

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi - +- [La documentation Apple](https://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16) +- [La spécification WebKit](https://www.webkit.org/blog/182/css-reflections/) +- L'article de Lea Verou sur les réflexions CSS [en utilisant les fonctionnalités en voie de standardisation](https://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/) diff --git a/files/fr/web/css/-webkit-line-clamp/index.md b/files/fr/web/css/-webkit-line-clamp/index.md index 26895d4690..6b9a4a80fc 100644 --- a/files/fr/web/css/-webkit-line-clamp/index.md +++ b/files/fr/web/css/-webkit-line-clamp/index.md @@ -6,27 +6,26 @@ tags: - Propriété translation_of: Web/CSS/-webkit-line-clamp --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

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

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

-
+> **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](https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp) définit également une propriété {{cssxref("line-clamp")}} qui doit remplacer `-webkit-line-clamp`. -

Syntaxe

+## Syntaxe -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-line-clamp: none;
 
 /* Valeurs entières */
-/* Type <integer> */
+/* Type  */
 -webkit-line-clamp: 3;
 -webkit-line-clamp: 10;
 
@@ -34,66 +33,53 @@ translation_of: Web/CSS/-webkit-line-clamp
 -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.
-
+- `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

+## Exemples -

HTML

+### 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.
+```html
+

+  Dans cet exemple -webkit-line-clamp vaut 3, 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

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

Résultat

+### Résultat -

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

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

Spécifications

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi - +- [Line Clampin’ (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/) +- {{cssxref("line-clamp")}} diff --git a/files/fr/web/css/-webkit-mask-attachment/index.md b/files/fr/web/css/-webkit-mask-attachment/index.md index f278d89b0f..a8e595fcb2 100644 --- a/files/fr/web/css/-webkit-mask-attachment/index.md +++ b/files/fr/web/css/-webkit-mask-attachment/index.md @@ -8,11 +8,12 @@ tags: - Reference translation_of: Web/CSS/-webkit-mask-attachment --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -

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

+Si la propriété {{cssxref("-webkit-mask-image")}} est définie, **`-webkit-mask-attachment`** permet de déterminer si la position de l'image est fixe par rapport à la zone d'affichage ou si elle défile avec le bloc qui l'englobe. -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-mask-attachment: scroll;
 -webkit-mask-attachment: fixed;
 -webkit-mask-attachment: local;
@@ -25,49 +26,46 @@ translation_of: Web/CSS/-webkit-mask-attachment
 -webkit-mask-attachment: inherit;
 -webkit-mask-attachment: initial;
 -webkit-mask-attachment: unset;
-
+``` -

Syntaxe

+## Syntaxe -

Valeurs

+### 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).
-
+- `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

+### Syntaxe formelle {{csssyntax}} -

Exemples

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

Spécifications

+## Spécifications -

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

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi -
    -
  • {{cssxref("-webkit-mask")}}
    • -
  • {{cssxref("-webkit-mask-clip")}}
    • -
  • {{cssxref("-webkit-mask-box-image")}}
    • -
  • {{cssxref("-webkit-mask-origin")}}
    • -
  • {{cssxref("-webkit-mask-image")}}
    • -
  • {{cssxref("-webkit-mask-composite")}}
    • -
  • {{cssxref("-webkit-mask-repeat")}}
    • -
+- {{cssxref("-webkit-mask")}} +- {{cssxref("-webkit-mask-clip")}} +- {{cssxref("-webkit-mask-box-image")}} +- {{cssxref("-webkit-mask-origin")}} +- {{cssxref("-webkit-mask-image")}} +- {{cssxref("-webkit-mask-composite")}} +- {{cssxref("-webkit-mask-repeat")}} diff --git a/files/fr/web/css/-webkit-mask-box-image/index.md b/files/fr/web/css/-webkit-mask-box-image/index.md index 79d751a5c2..dd2d49dc17 100644 --- a/files/fr/web/css/-webkit-mask-box-image/index.md +++ b/files/fr/web/css/-webkit-mask-box-image/index.md @@ -8,85 +8,77 @@ tags: - 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.

- -
    -
  • Valeur initiale : none
    • -
  • Applicabilité : à tous les éléments
    • -
  • Héritée : non
    • -
  • Type de média : visuel
    • -
  • Valeur calculée : comme la valeur définie
    • -
- -

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 {
+{{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.
+
+- Valeur initiale : `none`
+- Applicabilité : à tous les éléments
+- Héritée : non
+- Type de média : visuel
+- Valeur calculée : comme la valeur définie
+
+## Syntaxe
+
+    -webkit-mask-box-image:  [     ]
+
+Où :
+
+- ``
+  - : `{{cssxref("<uri>")}} |  | none`
+- `` `` `` ``
+  - : ` | `
+- `` ``
+  - : `repeat | stretch | round`
+
+### Valeurs
+
+- ``
+  - : L'emplacement de la ressource qui doit être utilisée comme image de masque.
+- ``
+  - : 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.
+
+
+
+- ``
+  - : Le décalage à appliquer à l'image de masque (cf. {{cssxref("<length>")}} pour les unités possibles).
+- ``
+  - : 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
+
+```css
+.exempleUn {
   -webkit-mask-box-image: url('mask.png');
 }
 
 .exempleDeux {
   -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
 }
-
+``` -

Spécifications

+## Spécifications -

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

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

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi -
    -
  • {{cssxref("-webkit-mask")}}
    • -
  • {{cssxref("-webkit-mask-origin")}}
    • -
  • {{cssxref("-webkit-mask-attachment")}}
    • -
  • {{cssxref("-webkit-mask-clip")}}
    • -
  • {{cssxref("-webkit-mask-image")}}
    • -
  • {{cssxref("-webkit-mask-composite")}}
    • -
  • {{cssxref("-webkit-mask-repeat")}}
    • -
+- {{cssxref("-webkit-mask")}} +- {{cssxref("-webkit-mask-origin")}} +- {{cssxref("-webkit-mask-attachment")}} +- {{cssxref("-webkit-mask-clip")}} +- {{cssxref("-webkit-mask-image")}} +- {{cssxref("-webkit-mask-composite")}} +- {{cssxref("-webkit-mask-repeat")}} diff --git a/files/fr/web/css/-webkit-mask-composite/index.md b/files/fr/web/css/-webkit-mask-composite/index.md index 03022f2f52..244b3fd96d 100644 --- a/files/fr/web/css/-webkit-mask-composite/index.md +++ b/files/fr/web/css/-webkit-mask-composite/index.md @@ -8,11 +8,12 @@ tags: - Reference translation_of: Web/CSS/-webkit-mask-composite --- -
{{CSSRef}}{{Non-standard_header}}
+{{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")}}.

+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é */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-mask-composite: clear;
 -webkit-mask-composite: copy;
 -webkit-mask-composite: source-over;
@@ -29,65 +30,60 @@ translation_of: Web/CSS/-webkit-mask-composite
 -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

+``` + +> **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

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

Spécifications

+## Spécifications -

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

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi -
    -
  • {{cssxref("mask-composite")}}
    • -
+- {{cssxref("mask-composite")}} diff --git a/files/fr/web/css/-webkit-mask-position-x/index.md b/files/fr/web/css/-webkit-mask-position-x/index.md index d5bb42b38f..45941093f2 100644 --- a/files/fr/web/css/-webkit-mask-position-x/index.md +++ b/files/fr/web/css/-webkit-mask-position-x/index.md @@ -8,22 +8,23 @@ tags: - Reference translation_of: Web/CSS/-webkit-mask-position-x --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -

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

+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é */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-mask-position-x: left;
 -webkit-mask-position-x: center;
 -webkit-mask-position-x: right;
 
 /* Valeurs proportionnelles */
-/* Type <percentage>        */
+/* Type         */
 -webkit-mask-position-x: 100%;
 -webkit-mask-position-x: -50%;
 
 /* Valeurs de longueur */
-/* Type <length>       */
+/* Type        */
 -webkit-mask-position-x: 50px;
 -webkit-mask-position-x: -1cm;
 
@@ -34,30 +35,29 @@ translation_of: Web/CSS/-webkit-mask-position-x
 -webkit-mask-position-x: inherit;
 -webkit-mask-position-x: initial;
 -webkit-mask-position-x: unset;
-
+``` -

Syntaxe

+## Syntaxe -

Valeurs

+### 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%.
-
+- `` + - : 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

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -
.exempleUn {
+```css
+.exempleUn {
   -webkit-mask-image: url(mask.png);
   -webkit-mask-position-x: right;
 }
@@ -66,23 +66,21 @@ translation_of: Web/CSS/-webkit-mask-position-x
   -webkit-mask-image: url(mask.png);
   -webkit-mask-position-x: 25%;
 }
-
+``` -

Spécifications

+## Spécifications -

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

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi -
    -
  • {{cssxref("-webkit-mask-position")}}
    • -
  • {{cssxref("-webkit-mask-position-y")}}
    • -
  • {{cssxref("-webkit-mask-origin")}}
    • -
  • {{cssxref("-webkit-mask-attachment")}}
    • -
+- {{cssxref("-webkit-mask-position")}} +- {{cssxref("-webkit-mask-position-y")}} +- {{cssxref("-webkit-mask-origin")}} +- {{cssxref("-webkit-mask-attachment")}} diff --git a/files/fr/web/css/-webkit-mask-position-y/index.md b/files/fr/web/css/-webkit-mask-position-y/index.md index 8e944059d1..2627f49c42 100644 --- a/files/fr/web/css/-webkit-mask-position-y/index.md +++ b/files/fr/web/css/-webkit-mask-position-y/index.md @@ -8,22 +8,23 @@ tags: - Reference translation_of: Web/CSS/-webkit-mask-position-y --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -

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

+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é */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-mask-position-y: top;
 -webkit-mask-position-y: center;
 -webkit-mask-position-y: bottom;
 
 /* Valeurs proportionnelles */
-/* Type <percentage>        */
+/* Type         */
 -webkit-mask-position-y: 100%;
 -webkit-mask-position-y: -50%;
 
 /* Valeurs de longueur */
-/* Type <length>       */
+/* Type        */
 -webkit-mask-position-y: 50px;
 -webkit-mask-position-y: -1cm;
 
@@ -34,32 +35,31 @@ translation_of: Web/CSS/-webkit-mask-position-y
 -webkit-mask-position-y: inherit;
 -webkit-mask-position-y: initial;
 -webkit-mask-position-y: unset;
-
+``` -

Syntaxe

+## Syntaxe -

Valeurs

+### 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%.
-
+- `` + - : 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). +- `` + - : 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

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -
.exempleUn {
+```css
+.exempleUn {
   -webkit-mask-image: url(mask.png);
   -webkit-mask-position-y: bottom;
 }
@@ -68,23 +68,21 @@ translation_of: Web/CSS/-webkit-mask-position-y
   -webkit-mask-image: url(mask.png);
   -webkit-mask-position-y: 25%;
 }
-
+``` -

Spécifications

+## Spécifications -

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

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi -
    -
  • {{cssxref("-webkit-mask-position")}}
    • -
  • {{cssxref("-webkit-mask-position-x")}}
    • -
  • {{cssxref("-webkit-mask-origin")}}
    • -
  • {{cssxref("-webkit-mask-attachment")}}
    • -
+- {{cssxref("-webkit-mask-position")}} +- {{cssxref("-webkit-mask-position-x")}} +- {{cssxref("-webkit-mask-origin")}} +- {{cssxref("-webkit-mask-attachment")}} diff --git a/files/fr/web/css/-webkit-mask-repeat-x/index.md b/files/fr/web/css/-webkit-mask-repeat-x/index.md index 0669e8a600..b2568be318 100644 --- a/files/fr/web/css/-webkit-mask-repeat-x/index.md +++ b/files/fr/web/css/-webkit-mask-repeat-x/index.md @@ -8,11 +8,12 @@ tags: - Reference translation_of: Web/CSS/-webkit-mask-repeat-x --- -
{{CSSRef}}{{Non-standard_header}}
+{{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.

+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é */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-mask-repeat-x: repeat;
 -webkit-mask-repeat-x: no-repeat;
 -webkit-mask-repeat-x: space;
@@ -25,30 +26,29 @@ translation_of: Web/CSS/-webkit-mask-repeat-x
 -webkit-mask-repeat-x: inherit;
 -webkit-mask-repeat-x: initial;
 -webkit-mask-repeat-x: unset;
-
+``` -

Syntaxe

+## Syntaxe -

Valeurs

+### 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.
-
+- `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

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -
.exempleun {
+```css
+.exempleun {
   -webkit-mask-image: url('mask.png');
   -webkit-mask-repeat-x: repeat;
 }
@@ -57,29 +57,28 @@ translation_of: Web/CSS/-webkit-mask-repeat-x
   -webkit-mask-image: url('mask.png');
   -webkit-mask-repeat-x: no-repeat;
 }
-
+``` -

Gestion de plusieurs images

+### 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 :

+On peut définir un style de répétition (``) différent pour chacune des images de masque en séparant les valeurs par des virgules : -
.exempletrois {
+```css
+.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.

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi -
    -
  • {{cssxref("-webkit-mask-repeat")}},
    • -
  • {{cssxref("-webkit-mask-repeat-y")}}
    • -
+- {{cssxref("-webkit-mask-repeat")}}, +- {{cssxref("-webkit-mask-repeat-y")}} diff --git a/files/fr/web/css/-webkit-mask-repeat-y/index.md b/files/fr/web/css/-webkit-mask-repeat-y/index.md index d3bdaf3055..717f2f1aaa 100644 --- a/files/fr/web/css/-webkit-mask-repeat-y/index.md +++ b/files/fr/web/css/-webkit-mask-repeat-y/index.md @@ -8,11 +8,12 @@ tags: - Reference translation_of: Web/CSS/-webkit-mask-repeat-y --- -
{{CSSRef}}{{Non-standard_header}}
+{{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.

+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é */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-mask-repeat-y: repeat;
 -webkit-mask-repeat-y: no-repeat;
 -webkit-mask-repeat-y: space;
@@ -25,30 +26,29 @@ translation_of: Web/CSS/-webkit-mask-repeat-y
 -webkit-mask-repeat-y: inherit;
 -webkit-mask-repeat-y: initial;
 -webkit-mask-repeat-y: unset;
-
+``` -

Syntaxe

+## Syntaxe -

Valeurs

+### 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.
-
+- `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

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -
.exempleun {
+```css
+.exempleun {
   -webkit-mask-image: url('mask.png');
   -webkit-mask-repeat-y: repeat;
 }
@@ -57,29 +57,28 @@ translation_of: Web/CSS/-webkit-mask-repeat-y
   -webkit-mask-image: url('mask.png');
   -webkit-mask-repeat-y: no-repeat;
 }
-
+``` -

Gestion de plusieurs images

+### 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 :

+On peut définir un style de répétition (``) différent pour chacune des images de masque en séparant les valeurs par des virgules : -
.exempletrois {
+```css
+.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.

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi -
    -
  • {{cssxref("-webkit-mask-repeat")}},
    • -
  • {{cssxref("-webkit-mask-repeat-x")}}
    • -
+- {{cssxref("-webkit-mask-repeat")}}, +- {{cssxref("-webkit-mask-repeat-x")}} diff --git a/files/fr/web/css/-webkit-overflow-scrolling/index.md b/files/fr/web/css/-webkit-overflow-scrolling/index.md index 5f6b8e2325..637e8403d3 100644 --- a/files/fr/web/css/-webkit-overflow-scrolling/index.md +++ b/files/fr/web/css/-webkit-overflow-scrolling/index.md @@ -8,28 +8,27 @@ tags: - Reference translation_of: Web/CSS/-webkit-overflow-scrolling --- -
{{CSSRef}}{{Non-standard_header}}
+{{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.

+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

+## 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.
-
+- `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

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
div {
+```css
+div {
   width: 100%;
   overflow: auto;
 }
@@ -47,38 +46,39 @@ p {
 
 .scroll-auto {
   -webkit-overflow-scrolling: auto; /* on arrête le défilement immédiatement */
-}
+} +``` -

HTML

+### HTML -
<div class="scroll-touch">
-  <p>
+```html
+

+  

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

+

+

+  

      Pas celui-ci.
-  </p>
-</div>
+

+ +``` -

Résultat

+### Résultat -

{{EmbedLiveSample('Exemples')}}

+{{EmbedLiveSample('Exemples')}} -

Spécifications

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

+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](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling). -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi - +- [L'article de CSS-Tricks sur cette fonctionnalité, avec une démonstration (en anglais)](https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/) +- [Article de Smashing Magazine (en anglais) : décrire l'effet du rebondissement du scroll et le fonctionnement dans les différents navigateurs](https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/) diff --git a/files/fr/web/css/-webkit-print-color-adjust/index.md b/files/fr/web/css/-webkit-print-color-adjust/index.md index dc129741d2..e90b61b925 100644 --- a/files/fr/web/css/-webkit-print-color-adjust/index.md +++ b/files/fr/web/css/-webkit-print-color-adjust/index.md @@ -8,11 +8,12 @@ tags: - Reference translation_of: Web/CSS/-webkit-print-color-adjust --- -
{{CSSRef}}{{Non-standard_header}}
+{{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.

+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é */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-print-color-adjust: economy;
 -webkit-print-color-adjust: exact;
 
@@ -20,42 +21,40 @@ translation_of: Web/CSS/-webkit-print-color-adjust
 -webkit-print-color-adjust: inherit;
 -webkit-print-color-adjust: initial;
 -webkit-print-color-adjust: unset;
-
+``` -

Syntaxe

+## Syntaxe -

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

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

Valeurs

+### 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.
-
+- `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

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

Spécifications

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

+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](https://wiki.csswg.org/ideas/print-backgrounds) pour standardiser cette propriété. -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi -
    -
  • Bug WebKit 64583 : Ajout d'une propriété CSS permettant de contrôler l'impression des arrière-plans des éléments.
    • -
  • Wiki du groupe de travail CSS : print-backgrounds - une proposition de standardisation pour cette propriété.
    • -
  • La spécification du module des couleurs CSS (CSS Color) de niveau 4 ajoute la propriété color-adjust pour standardiser cette propriété.
    • -
+- [Bug WebKit 64583](https://bugs.webkit.org/show_bug.cgi?id=64583) : Ajout d'une propriété CSS permettant de contrôler l'impression des arrière-plans des éléments. +- Wiki du groupe de travail CSS : [print-backgrounds](https://wiki.csswg.org/ideas/print-backgrounds) - une proposition de standardisation pour cette propriété. +- La spécification du module des couleurs CSS (CSS Color) de niveau 4 ajoute la propriété [`color-adjust`](https://drafts.csswg.org/css-color-4/#color-adjust) pour standardiser cette propriété. diff --git a/files/fr/web/css/-webkit-tap-highlight-color/index.md b/files/fr/web/css/-webkit-tap-highlight-color/index.md index 677d4e4be2..b540c737e4 100644 --- a/files/fr/web/css/-webkit-tap-highlight-color/index.md +++ b/files/fr/web/css/-webkit-tap-highlight-color/index.md @@ -8,33 +8,32 @@ tags: - Reference translation_of: Web/CSS/-webkit-tap-highlight-color --- -
{{CSSRef}}{{Non-standard_header}}
+{{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.

+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

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

Valeurs

+### Valeurs -
-
<color>
-
La couleur utilisée pour surligner le lien lorsqu'il est touché.
-
+- `` + - : La couleur utilisée pour surligner le lien lorsqu'il est touché. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Spécifications

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

+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](https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5). -

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

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

+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.md b/files/fr/web/css/-webkit-text-fill-color/index.md index f00bc2ae33..23e220dde2 100644 --- a/files/fr/web/css/-webkit-text-fill-color/index.md +++ b/files/fr/web/css/-webkit-text-fill-color/index.md @@ -8,12 +8,13 @@ tags: - Reference translation_of: Web/CSS/-webkit-text-fill-color --- -
{{CSSRef}}{{Non-standard_header}}
+{{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.

+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>        */
+```css
+/* Valeurs de couleurs */
+/* Type         */
 -webkit-text-fill-color: red;
 -webkit-text-fill-color: #000000;
 -webkit-text-fill-color: rgb(100, 200, 0);
@@ -22,77 +23,58 @@ translation_of: Web/CSS/-webkit-text-fill-color
 -webkit-text-fill-color: inherit;
 -webkit-text-fill-color: initial;
 -webkit-text-fill-color: unset;
-
+``` -

Syntaxe

+## Syntaxe -

Valeurs

+### Valeurs -
-
<color>
-
La couleur utilisée pour colorer les lettres du texte.
-
+- `` + - : La couleur utilisée pour colorer les lettres du texte. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
p {
+```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

- - +``` + +### HTML + +```html +

Ce texte est vert.

+``` + +### Résultat + +{{EmbedLiveSample("Example", "380px", "60px")}} + +## Spécifications + +| Spécification | État | Commentaires | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ------------------------------------- | +| {{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.](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-fill-color) | Documentation non-officielle, non-standard. | Documentation initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.-webkit-text-fill-color")}} + +## Voir aussi + +- [Le billet de _Surfin' Safari_ qui annonce cette fonctionnalité (en anglais)](https://www.webkit.org/blog/85/introducing-text-stroke/) +- [L'article de CSS-Tricks qui décrit cette fonctionnalité (en anglais)](https://css-tricks.com/adding-stroke-to-web-text/) +- {{cssxref("-webkit-text-stroke-color")}} +- {{cssxref("-webkit-text-stroke-width")}} +- {{cssxref("-webkit-text-stroke")}} diff --git a/files/fr/web/css/-webkit-text-security/index.md b/files/fr/web/css/-webkit-text-security/index.md index 290fc9d2b7..4aa198a0e7 100644 --- a/files/fr/web/css/-webkit-text-security/index.md +++ b/files/fr/web/css/-webkit-text-security/index.md @@ -8,47 +8,50 @@ tags: - Reference translation_of: Web/CSS/-webkit-text-security --- -
{{CSSRef}} {{Non-standard_header}}
+{{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.

+**`-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

+## Syntaxe -
-webkit-text-security: circle;
+```css
+-webkit-text-security: circle;
 -webkit-text-security: disc;
 -webkit-text-security: square;
 -webkit-text-security: none;
-
+``` -

Exemples

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

+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

+### HTML -
<label for="name">Nom :</label>
-<input type="text" name="name" id="name" />
+```html + + +``` -

CSS

+### CSS -
input {
+```css
+input {
   -webkit-text-security: square;
-}
+} +``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Example")}}

+{{EmbedLiveSample("Example")}} -

Spécifications

+## Spécifications -

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

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

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi - +- [Les extensions CSS spécifiques à WebKit](/en-US/docs/Web/CSS/WebKit_Extensions) diff --git a/files/fr/web/css/-webkit-text-stroke-color/index.md b/files/fr/web/css/-webkit-text-stroke-color/index.md index 8717f6e1aa..578dc63339 100644 --- a/files/fr/web/css/-webkit-text-stroke-color/index.md +++ b/files/fr/web/css/-webkit-text-stroke-color/index.md @@ -8,12 +8,13 @@ tags: - Reference translation_of: Web/CSS/-webkit-text-stroke-color --- -
{{CSSRef}}{{Non-standard_header}}
+{{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.

+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>       */
+```css
+/* Valeurs de couleur */
+/* Type        */
 -webkit-text-stroke-color: red;
 -webkit-text-stroke-color: #e08ab4;
 -webkit-text-stroke-color: rgb(200, 100, 0);
@@ -22,84 +23,68 @@ translation_of: Web/CSS/-webkit-text-stroke-color
 -webkit-text-stroke-color: inherit;
 -webkit-text-stroke-color: initial;
 -webkit-text-stroke-color: unset;
-
+``` -

{{cssinfo}}

+{{cssinfo}} -

Syntaxe

+## Syntaxe -

Valeurs

+### Valeurs -
-
<color>
-
La couleur du contour pour les lettres.
-
+- `` + - : La couleur du contour pour les lettres. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

HTML

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

Texte avec un contour

+ +``` -

CSS

+### CSS -
p {
+```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

- - +}); +``` + +### Résultat + +{{EmbedLiveSample("Exemples", "500px", "100px")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | ------------------------------------- | +| {{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.](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color) | Documentation non-officielle, non-standard. | Documentation initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.properties.-webkit-text-stroke-color")}} + +## Voir aussi + +- [Le billet de _Surfin' Safari_ qui annonce cette fonctionnalité (en anglais)](https://www.webkit.org/blog/85/introducing-text-stroke/) +- [L'article de CSS-Tricks à propos de cette fonctionnalité (en anglais)](https://css-tricks.com/adding-stroke-to-web-text/) +- {{cssxref("-webkit-text-fill-color")}} +- {{cssxref("-webkit-text-stroke-width")}} +- {{cssxref("-webkit-text-stroke")}} diff --git a/files/fr/web/css/-webkit-text-stroke-width/index.md b/files/fr/web/css/-webkit-text-stroke-width/index.md index 9e34011338..cbbc30483a 100644 --- a/files/fr/web/css/-webkit-text-stroke-width/index.md +++ b/files/fr/web/css/-webkit-text-stroke-width/index.md @@ -8,21 +8,22 @@ tags: - Reference translation_of: Web/CSS/-webkit-text-stroke-width --- -
{{CSSRef}}{{Non-standard_header}}
+{{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.

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

{{cssinfo}}

+{{cssinfo}} -

Syntaxe

+## Syntaxe -
/* Valeurs avec un mot-clé */
+```css
+/* 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>       */
+/* Type        */
 -webkit-text-stroke-width: 2px;
 -webkit-text-stroke-width: 0.1em;
 -webkit-text-stroke-width: 1mm;
@@ -32,24 +33,23 @@ translation_of: Web/CSS/-webkit-text-stroke-width
 -webkit-text-stroke-width: inherit;
 -webkit-text-stroke-width: initial;
 -webkit-text-stroke-width: unset;
-
+``` -

Valeurs

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

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
p {
+```css
+p {
   margin: 0;
   font-size: 4em;
   -webkit-text-stroke-color: red;
@@ -66,53 +66,35 @@ translation_of: Web/CSS/-webkit-text-stroke-width
 #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

- - +``` + +### HTML + +```html +

Trait fin

+

Trait moyen

+

Trait épais

+``` + +### Résultat + +{{EmbedLiveSample("Exemples", "450px", "230px")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | ------------------------------------- | +| {{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.](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width) | Documentation non-officielle, non-standard. | Documentation initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.properties.-webkit-text-stroke-width")}} + +## Voir aussi + +- [Le billet de _Surfin' Safari_ qui annonce cette fonctionnalité (en anglais)](https://www.webkit.org/blog/85/introducing-text-stroke/) +- [L'article de CSS-Tricks à propos de cette fonctionnalité (en anglais)](https://css-tricks.com/adding-stroke-to-web-text/) +- {{cssxref("-webkit-text-stroke-color")}} +- {{cssxref("-webkit-text-stroke")}} +- {{cssxref("-webkit-text-fill-color")}} diff --git a/files/fr/web/css/-webkit-text-stroke/index.md b/files/fr/web/css/-webkit-text-stroke/index.md index 1b44d52d3b..5149521a93 100644 --- a/files/fr/web/css/-webkit-text-stroke/index.md +++ b/files/fr/web/css/-webkit-text-stroke/index.md @@ -8,88 +8,72 @@ tags: - Reference translation_of: Web/CSS/-webkit-text-stroke --- -
{{CSSRef}}{{Non-standard_header}}
+{{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")}}.

+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 */
+```css
+/* 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

+## Syntaxe -

Valeurs

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

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
#exemple {
+```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

- - +} +``` + +### HTML + +```html +

Le contour de ce texte est rouge.

+``` + +### Résultat + +{{EmbedLiveSample("Exemples", 600, 60)}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | ------------------------------------- | +| {{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.](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke) | Documentation non-officielle, non-standard. | Documentation initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.-webkit-text-stroke")}} + +## Voir aussi + +- [Le billet de _Surfin' Safari_ qui annonce cette fonctionnalité (en anglais)](https://www.webkit.org/blog/85/introducing-text-stroke/) +- [L'article de CSS-Tricks décrivant cette fonctionnalité (en anglais)](https://css-tricks.com/adding-stroke-to-web-text/) +- {{cssxref("-webkit-text-stroke-width")}} +- {{cssxref("-webkit-text-stroke-color")}} +- {{cssxref("-webkit-text-fill-color")}} diff --git a/files/fr/web/css/-webkit-touch-callout/index.md b/files/fr/web/css/-webkit-touch-callout/index.md index 29ae2fe13a..9c8f60d484 100644 --- a/files/fr/web/css/-webkit-touch-callout/index.md +++ b/files/fr/web/css/-webkit-touch-callout/index.md @@ -8,47 +8,48 @@ tags: - Reference translation_of: Web/CSS/-webkit-touch-callout --- -
{{CSSRef}}{{Non-standard_header}}
+{{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.

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

+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é */
+```css
+/* 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;
+-webkit-touch-callout: unset; +``` -

Syntaxe

+## Syntaxe -

Valeurs

+### Valeurs -
-
default
-
La légende par défaut est activée.
-
none
-
La légende est désactivée.
-
+- `default` + - : La légende par défaut est activée. +- `none` + - : La légende est désactivée. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -
.exemple {
+```css
+.exemple {
   -webkit-touch-callout: none;
 }
-
+``` -

Spécifications

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

+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](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout). -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

+{{Compat("css.properties.-webkit-touch-callout")}} diff --git a/files/fr/web/css/@charset/index.md b/files/fr/web/css/@charset/index.md index 34e47a96b2..daa7e6ceb9 100644 --- a/files/fr/web/css/@charset/index.md +++ b/files/fr/web/css/@charset/index.md @@ -7,73 +7,61 @@ tags: - Règle @ translation_of: Web/CSS/@charset --- -
{{CSSRef}}
+{{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.

+La [règle @](/fr/docs/Web/CSS/R%C3%A8gles_@)  **`@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](/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS) et ne peut donc pas être utilisée [à l'intérieur des groupes conditionnels](/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe). 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";
+```css +@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")}}.

+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) :

+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. -
+1. La valeur du caractère indiquant [l'ordre des octets Unicode](https://fr.wikipedia.org/wiki/Indicateur_d'ordre_des_octets) qui est placé au début du fichier (le BOM) +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. La règle @ CSS `@charset`. +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. Dans tous les autres cas, on considère que le document est encodé en UTF-8 -

Syntaxe

+## Syntaxe -
@charset <charset>;
-
+```css +@charset ; +``` -

où

+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é.
-
+- `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](https://www.iana.org/assignments/character-sets/character-sets.xhtml) 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

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

Exemples valides

+### Exemples valides -
@charset "UTF-8";      /* Valide, la feuille de style est encodée en Unicode UTF-8 */
+```css
+@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

+### Exemples invalides -
 @charset "UTF-8";      /* Invalide, il y a un caractère (un espace) avant la règle @ */
+```css example-bad
+ @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")}}

+``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ------------------------ | -------------------- | +| {{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.md b/files/fr/web/css/@counter-style/additive-symbols/index.md index 538f1b0fe8..f0753e9c5d 100644 --- a/files/fr/web/css/@counter-style/additive-symbols/index.md +++ b/files/fr/web/css/@counter-style/additive-symbols/index.md @@ -7,79 +7,69 @@ tags: - Reference translation_of: Web/CSS/@counter-style/additive-symbols --- -
{{CSSRef}}
+{{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.

+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";
+```css
+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.

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

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
@counter-style additive-symbols-example {
+```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

- -
    -
  • {{cssxref("list-style")}},
    • -
  • {{cssxref("list-style-image")}},
    • -
  • {{cssxref("list-style-position")}}
    • -
  • {{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
    • +} +``` + +### HTML + +```html +
      +
    • Un
      • +
    • Deux
      • +
    • Trois
      • +
    • Quatre
      • +
    • Cinq
    +``` + +### Résultat + +{{EmbedLiveSample('Exemples')}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- | +| {{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 + +- {{cssxref("list-style")}}, +- {{cssxref("list-style-image")}}, +- {{cssxref("list-style-position")}} +- {{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes. diff --git a/files/fr/web/css/@counter-style/fallback/index.md b/files/fr/web/css/@counter-style/fallback/index.md index 92c54c2c55..88bd654e07 100644 --- a/files/fr/web/css/@counter-style/fallback/index.md +++ b/files/fr/web/css/@counter-style/fallback/index.md @@ -7,82 +7,70 @@ tags: - Reference translation_of: Web/CSS/@counter-style/fallback --- -
    {{CSSRef}}
    +{{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 :

    +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 : -
      -
    • Lorsque le descripteur {{cssxref('range')}} est utilisé, le style de secours est utilisé pour représenter les valeurs situées en dehors de l'intervalle.
      • -
    • Lorsque le descripteur {{cssxref('system')}} vaut fixed et qu'il n'y a pas suffisamment de symboles pour couvrir l'ensemble des éléments de la liste, le style de secours est utilisé pour le reste des éléments de la liste.
      • -
    +- Lorsque le descripteur {{cssxref('range')}} est utilisé, le style de secours est utilisé pour représenter les valeurs situées en dehors de l'intervalle. +- Lorsque le descripteur {{cssxref('system')}} vaut `fixed` et qu'il n'y a pas suffisamment de symboles pour couvrir l'ensemble des éléments de la liste, le style de secours est utilisé pour le reste des éléments de la liste. -

    Syntaxe

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

    Syntaxe formelle

    +### Syntaxe formelle {{csssyntax}} -

    Exemples

    +## Exemples -

    CSS

    +### CSS -
    @counter-style fallback-example {
+```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

    - -
      -
    • {{cssxref("list-style")}},
      • -
    • {{cssxref("list-style-image")}},
      • -
    • {{cssxref("list-style-position")}},
      • -
    • {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
      • +} +``` + +### HTML + +```html +
        +
      • Un
        • +
      • Deux
        • +
      • Trois
        • +
      • Quatre
        • +
      • Cinq
      +``` + +### Résultat + +{{EmbedLiveSample('Exemples')}} + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{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 + +- {{cssxref("list-style")}}, +- {{cssxref("list-style-image")}}, +- {{cssxref("list-style-position")}}, +- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes. diff --git a/files/fr/web/css/@counter-style/index.md b/files/fr/web/css/@counter-style/index.md index 6a557b88d4..05a3eb08fb 100644 --- a/files/fr/web/css/@counter-style/index.md +++ b/files/fr/web/css/@counter-style/index.md @@ -7,11 +7,12 @@ tags: - Règle @ translation_of: Web/CSS/@counter-style --- -
      {{CSSRef}}
      +{{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.

      +La [règle @](/fr/docs/Web/CSS/Règles_@) 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 {
+```css
+@counter-style thumbs {
   system: cyclic;
   symbols: "\1F44D";
   suffix: " ";
@@ -19,150 +20,137 @@ translation_of: Web/CSS/@counter-style
 
 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.

      +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

      +## Syntaxe -

      Descripteurs

      +### Descripteurs -

      Chaque @counter-style est identifié par un nom et possède un ensemble de 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/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/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/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/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/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/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/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/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. + + ```css + @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/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

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

      +## Exemples -

      CSS

      +### CSS -
      @counter-style circled-alpha {
+```css
+@counter-style circled-alpha {
   system: fixed;
   symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
   suffix: " ";
-}
      +} +``` -
      .exemple {
+```css
+.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

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

        Voir aussi

        +### Résultat -
          -
        • {{cssxref("list-style")}}
          • -
        • {{cssxref("list-style-image")}}
          • -
        • {{cssxref("list-style-position")}}
          • -
        • {{cssxref("list-style-type")}}
          • -
        • {{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes
          • -
        • Les fonctions CSS {{Cssxref("counter")}} et {{Cssxref("counters")}}
          • -
        • Démonstration pour les styles de compteur (code)
          • -
        +{{EmbedLiveSample("Exemples")}} + +> **Note :** Une page d'exemple avec plus de variables est disponible ici : . + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{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 + +- Gecko permettait d'utiliser `none` comme valeur pour les descripteurs `system` et `fallback` de `@counter-style` alors que ce devrait être invalide selon la spécification. Le nouveau moteur CSS de Firefox, Quantum CSS (aussi appelé [Stylo](https://wiki.mozilla.org/Quantum/Stylo), prévu pour Firefox 57) a résolu ce bug ({{bug(1377414)}}). + +## Voir aussi + +- {{cssxref("list-style")}} +- {{cssxref("list-style-image")}} +- {{cssxref("list-style-position")}} +- {{cssxref("list-style-type")}} +- {{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes +- Les fonctions CSS {{Cssxref("counter")}} et {{Cssxref("counters")}} +- [Démonstration pour les styles de compteur](https://mdn.github.io/css-examples/counter-style-demo/) ([code](https://github.com/mdn/css-examples/tree/master/counter-style-demo)) diff --git a/files/fr/web/css/@counter-style/negative/index.md b/files/fr/web/css/@counter-style/negative/index.md index 673163de4e..93821f1fd6 100644 --- a/files/fr/web/css/@counter-style/negative/index.md +++ b/files/fr/web/css/@counter-style/negative/index.md @@ -7,89 +7,77 @@ tags: - Reference translation_of: Web/CSS/@counter-style/negative --- -
        {{CSSRef}}
        +{{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.

        +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 */
+```css
+/* 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é.

        +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

        +## Syntaxe -

        Valeurs

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

        +### Syntaxe formelle {{csssyntax}} -

        Exemples

        +## Exemples -

        CSS

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

        HTML

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

        Résultat

        - -

        {{EmbedLiveSample('Exemples')}}

        - -

        Spécifications

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

        {{cssinfo}}

        - -

        Compatibilité des navigateurs

        - -

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

        - -

        Voir aussi

        - -
          -
        • {{cssxref("list-style")}},
          • -
        • {{cssxref("list-style-image")}},
          • -
        • {{cssxref("list-style-position")}},
          • -
        • {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle pour créer des styles de compteur anonymes.
          • +} +``` + +### HTML + +```html +
            +
          • Un
            • +
          • Deux
            • +
          • Trois
            • +
          • Quatre
            • +
          • Cinq
          +``` + +### Résultat + +{{EmbedLiveSample('Exemples')}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('CSS3 Counter Styles', '#counter-style-system', 'system')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.at-rules.counter-style.negative")}} + +## Voir aussi + +- {{cssxref("list-style")}}, +- {{cssxref("list-style-image")}}, +- {{cssxref("list-style-position")}}, +- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle pour créer des styles de compteur anonymes. diff --git a/files/fr/web/css/@counter-style/pad/index.md b/files/fr/web/css/@counter-style/pad/index.md index a27313ddef..6a146050c7 100644 --- a/files/fr/web/css/@counter-style/pad/index.md +++ b/files/fr/web/css/@counter-style/pad/index.md @@ -7,90 +7,76 @@ tags: - Reference translation_of: Web/CSS/@counter-style/pad --- -
          {{CSSRef}}
          +{{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`**, 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 :

          +Le descripteur `pad` utilise deux paramètres : -
            -
          • un entier indiquant la longueur minimale de la représentation du marqueur
            • -
          • Le symbole utilisé pour compléter la représentation du marqueur si nécessaire.
            • -
          +- un entier indiquant la longueur minimale de la représentation du marqueur +- Le symbole utilisé pour compléter la représentation du marqueur si nécessaire. -

          Syntaxe

          +## Syntaxe -
          pad: 3 "0";
-
          +```css +pad: 3 "0"; +``` -

          Valeurs

          +### 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>.
          -
          +- ` && ` + - : La composante `` 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 ``. -

          Syntaxe formelle

          +### Syntaxe formelle {{csssyntax}} -

          Exemples

          +## Exemples -

          CSS

          +### CSS -
          @counter-style pad-example {
+```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

          - -
            -
          • {{cssxref("list-style")}},
            • -
          • {{cssxref("list-style-image")}},
            • -
          • {{cssxref("list-style-position")}},
            • -
          • {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
            • +} +``` + +### HTML + +```html +
              +
            • Un
              • +
            • Deux
              • +
            • Trois
              • +
            • Quatre
              • +
            • Cinq
            +``` + +### Résultat + +{{EmbedLiveSample('Exemples')}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- | +| {{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 + +- {{cssxref("list-style")}}, +- {{cssxref("list-style-image")}}, +- {{cssxref("list-style-position")}}, +- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes. diff --git a/files/fr/web/css/@counter-style/prefix/index.md b/files/fr/web/css/@counter-style/prefix/index.md index 34af4ccc6e..506d733ed5 100644 --- a/files/fr/web/css/@counter-style/prefix/index.md +++ b/files/fr/web/css/@counter-style/prefix/index.md @@ -7,33 +7,33 @@ tags: - Reference translation_of: Web/CSS/@counter-style/prefix --- -
            {{CSSRef}}
            +{{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.

            +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

            +## Syntaxe -
            /* Valeurs de symbole */
+```css
+/* Valeurs de symbole */
 prefix: "»";
 prefix: "Page";
-
            +``` -

            Valeurs

            +### 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>")}}.
            -
            +- `` + - : 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

            +### Syntaxe formelle {{csssyntax}} -

            Exemples

            +## Exemples -

            CSS

            +### CSS -
            @counter-style chapitres {
+```css
+@counter-style chapitres {
   system: numeric;
   symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
   prefix: 'Chapitre ';
@@ -42,52 +42,40 @@ prefix: "Page";
 .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

            - -
              -
            • {{cssxref("list-style")}},
              • -
            • {{cssxref("list-style-image")}},
              • -
            • {{cssxref("list-style-position")}},
              • -
            • {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
              • +} +``` + +### HTML + +```html +
                +
              • Au fond du terrier
                • +
              • La mare aux larmes
                • +
              • La course cocasse
                • +
              • L'habitation du lapin blanc
                • +
              • Conseils d'une chenille
              +``` + +### Résultat + +{{EmbedLiveSample('Exemples')}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{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 + +- {{cssxref("list-style")}}, +- {{cssxref("list-style-image")}}, +- {{cssxref("list-style-position")}}, +- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes. diff --git a/files/fr/web/css/@counter-style/range/index.md b/files/fr/web/css/@counter-style/range/index.md index 4bc4ce55cd..17e25047d6 100644 --- a/files/fr/web/css/@counter-style/range/index.md +++ b/files/fr/web/css/@counter-style/range/index.md @@ -7,26 +7,25 @@ tags: - Reference translation_of: Web/CSS/@counter-style/range --- -
              {{CSSRef}}
              +{{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.

              +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` vaut `auto` : -
                -
              • Lorsque le descripteur system vaut cyclic, numeric ou fixed, l'intervalle considéré sera entre moins l'infini et plus l'infini.
                • -
              • Si system vaut alphabetic ou symbolic, l'intervalle considéré s'étendra entre 1 et l'infini.
                • -
              • Si system vaut additive, l'intervalle considéré ira de 0 à l'infini.
                • -
              • Enfin, lorsque system vaut extends, l'intervalle correspond à ce qui est produit par le système étendu avec cette valeur.
                • -
              +- Lorsque le descripteur `system` vaut `cyclic`, `numeric` ou `fixed`, l'intervalle considéré sera entre moins l'infini et plus l'infini. +- Si `system` vaut `alphabetic` ou `symbolic`, l'intervalle considéré s'étendra entre 1 et l'infini. +- Si `system` vaut `additive`, l'intervalle considéré ira de 0 à l'infini. +- Enfin, lorsque `system` vaut `extends`, l'intervalle correspond à ce qui est produit par le système étendu avec cette valeur. -

              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.

              +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}}

              +{{cssinfo}} -

              Syntaxe

              +## Syntaxe -
              /* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 range: auto;
 
 /* Valeurs encadrant un intervalle */
@@ -38,26 +37,25 @@ range: infinite infinite;
 /* Valeurs indiquant plusieurs intervalles */
 range: 2 5, 8 10;
 range: infinite 6, 10 infinite;
-
              +``` -

              Values

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

              +### Syntaxe formelle {{csssyntax}} -

              Exemples

              +## Exemples -

              CSS

              +### CSS -
              @counter-style range-multi-example {
+```css
+@counter-style range-multi-example {
   system: cyclic;
   symbols: "\25A0" "\25A1";
   range: 2 4, 7 9;
@@ -65,55 +63,43 @@ range: infinite 6, 10 infinite;
 
 .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

              - -
                -
              • {{cssxref("list-style")}},
                • -
              • {{cssxref("list-style-image")}},
                • -
              • {{cssxref("list-style-position")}},
                • -
              • {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
                • +} +``` + +### HTML + +```html +
                  +
                • Un
                  • +
                • Deux
                  • +
                • Trois
                  • +
                • Quatre
                  • +
                • Cinq
                  • +
                • Six
                  • +
                • Sept
                  • +
                • Huit
                  • +
                • Neuf
                  • +
                • Dix
                +``` + +Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{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 + +- {{cssxref("list-style")}}, +- {{cssxref("list-style-image")}}, +- {{cssxref("list-style-position")}}, +- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes. diff --git a/files/fr/web/css/@counter-style/speak-as/index.md b/files/fr/web/css/@counter-style/speak-as/index.md index 2dd23e1c44..a0e4511047 100644 --- a/files/fr/web/css/@counter-style/speak-as/index.md +++ b/files/fr/web/css/@counter-style/speak-as/index.md @@ -7,15 +7,16 @@ tags: - Reference translation_of: Web/CSS/@counter-style/speak-as --- -
                {{CSSRef}}
                +{{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.

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

                +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

                +## Syntaxe -
                /* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 speak-as: auto;
 speak-as: bullets;
 speak-as: numbers;
@@ -23,42 +24,41 @@ 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

                +speak-as: ; +``` + +### 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`. +- `` + - : 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

                +## Exemples -

                CSS

                +### CSS -
                @counter-style speak-as-exemple {
+```css
+@counter-style speak-as-exemple {
   system: fixed;
   symbols:     ;
   suffix: " ";
@@ -68,60 +68,46 @@ speak-as: <counter-style-name>;
 
 .exemple {
   list-style: speak-as-exemple;
-}
                +} +``` + +### HTML -

                HTML

                +```html +
                  +
                • Un
                  • +
                • Deux
                  • +
                • Trois
                  • +
                • Quatre
                  • +
                • Cinq
                  • +
                +``` -
                <ul class="exemple">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
                +### Résultat -

                Résultat

                +{{EmbedLiveSample('Exemples')}} -

                {{EmbedLiveSample('Exemples')}}

                +## Accessibilité -

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

                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.

                +- [Let's Talk About Speech CSS, CSS Tricks](https://css-tricks.com/lets-talk-speech-css/) - +## Spécifications -

                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

                - -
                  -
                • {{cssxref("list-style")}},
                  • -
                • {{cssxref("list-style-image")}},
                  • -
                • {{cssxref("list-style-position")}},
                  • -
                • {{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
                  • -
                +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{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 + +- {{cssxref("list-style")}}, +- {{cssxref("list-style-image")}}, +- {{cssxref("list-style-position")}}, +- {{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes. diff --git a/files/fr/web/css/@counter-style/suffix/index.md b/files/fr/web/css/@counter-style/suffix/index.md index 9dfe61362b..e3bfc350ee 100644 --- a/files/fr/web/css/@counter-style/suffix/index.md +++ b/files/fr/web/css/@counter-style/suffix/index.md @@ -7,33 +7,33 @@ tags: - Reference translation_of: Web/CSS/@counter-style/suffix --- -
                {{CSSRef}}
                +{{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).

                +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

                +## Syntaxe -
                /* Une valeur de type <symbol> */
+```css
+/* Une valeur de type  */
 suffix: "";
 suffix: ") ";
-
                +``` -

                Valeur

                +### 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>")}}.
                -
                +- `` + - : 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

                +### Syntaxe formelle {{csssyntax}} -

                Exemples

                +## Exemples -

                CSS

                +### CSS -
                @counter-style options {
+```css
+@counter-style options {
   system: fixed;
   symbols: A B C D;
   suffix: ") ";
@@ -41,51 +41,39 @@ suffix: ") ";
 
 .exemple {
   list-style: options;
-}
                +} +``` -

                HTML

                +### HTML -
                <ul class="exemple">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Autre</li>
-</ul>
                +```html +
                  +
                • Un
                  • +
                • Deux
                  • +
                • Trois
                  • +
                • Autre
                  • +
                +``` -

                Résultat

                +### Résultat -

                {{EmbedLiveSample('Exemples')}}

                +{{EmbedLiveSample('Exemples')}} -

                Spécifications

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

                {{cssinfo}}

                +{{cssinfo}} -

                Compatibilité des navigateurs

                +## Compatibilité des navigateurs -

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

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

                Voir aussi

                +## Voir aussi -
                  -
                • {{cssxref("list-style")}},
                  • -
                • {{cssxref("list-style-image")}},
                  • -
                • {{cssxref("list-style-position")}},
                  • -
                • {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.
                  • -
                +- {{cssxref("list-style")}}, +- {{cssxref("list-style-image")}}, +- {{cssxref("list-style-position")}}, +- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes. diff --git a/files/fr/web/css/@counter-style/symbols/index.md b/files/fr/web/css/@counter-style/symbols/index.md index 758b13e4aa..a9cce50ac0 100644 --- a/files/fr/web/css/@counter-style/symbols/index.md +++ b/files/fr/web/css/@counter-style/symbols/index.md @@ -7,100 +7,85 @@ tags: - Reference translation_of: Web/CSS/@counter-style/symbols --- -
                {{CSSRef}}
                +{{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.

                +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;
+```css
+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.

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

                Syntaxe

                +### Valeurs -

                Valeurs

                +- Des chaînes de caractères ({{cssxref("<string>")}}) délimitées par des quotes simples ou doubles. La barre oblique inversée (\\) peut être utilisée afin d'échapper les caractères spéciaux. Ainsi, on peut utiliser des caractères Unicode de cette façon `"\24B6"`. +- Des images ({{cssxref("<image>")}}) en utilisant la notation fonctionnelle `url(chemin-vers-image.png)`. **Attention : cette fonctionnalité (l'utilisation d'image) est à risque en termes d'implémentation et de conservation dans les spécifications et n'est implémentée par aucun navigateur actuellement.** +- Des identifiants ({{cssxref("<custom-ident>")}}) -
                  -
                • Des chaînes de caractères ({{cssxref("<string>")}}) délimitées par des quotes simples ou doubles. La barre oblique inversée (\) peut être utilisée afin d'échapper les caractères spéciaux. Ainsi, on peut utiliser des caractères Unicode de cette façon "\24B6".
                  • -
                • Des images ({{cssxref("<image>")}}) en utilisant la notation fonctionnelle url(chemin-vers-image.png). Attention : cette fonctionnalité (l'utilisation d'image) est à risque en termes d'implémentation et de conservation dans les spécifications et n'est implémentée par aucun navigateur actuellement.
                  • -
                • Des identifiants ({{cssxref("<custom-ident>")}})
                  • -
                + -
                -
                <symbol>
                -
                Représente le symbole à utiliser pour le système de comptage. La valeur du descripteur symbols peut être :
                -
                +- `` + - : Représente le symbole à utiliser pour le système de comptage. La valeur du descripteur `symbols` peut être : -

                Syntaxe formelle

                +### Syntaxe formelle {{csssyntax}} -

                Exemples

                +## Exemples -

                CSS

                +### CSS -
                @counter-style symbols-exemple {
+```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

                - -
                  -
                • {{cssxref("@counter-style")}},
                  • -
                • {{cssxref("list-style")}},
                  • -
                • {{cssxref("list-style-image")}},
                  • -
                • {{cssxref("list-style-position")}},
                  • -
                • {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes,
                  • -
                • {{cssxref("url()", "url()")}}.
                  • +} +``` + +### HTML + +```html +
                    +
                  • Un
                    • +
                  • Deux
                    • +
                  • Trois
                    • +
                  • Quatre
                    • +
                  • Cinq
                  +``` + +### Résultat + +{{EmbedLiveSample('Exemples')}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- | +| {{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 + +- {{cssxref("@counter-style")}}, +- {{cssxref("list-style")}}, +- {{cssxref("list-style-image")}}, +- {{cssxref("list-style-position")}}, +- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes, +- {{cssxref("url()", "url()")}}. diff --git a/files/fr/web/css/@counter-style/system/index.md b/files/fr/web/css/@counter-style/system/index.md index 07ba664616..e1c85ee212 100644 --- a/files/fr/web/css/@counter-style/system/index.md +++ b/files/fr/web/css/@counter-style/system/index.md @@ -7,11 +7,12 @@ tags: - Reference translation_of: Web/CSS/@counter-style/system --- -
                  {{CSSRef}}
                  +{{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.

                  +La descripteur **`system`**, utilisé avec [la règle @](/fr/docs/Web/CSS/R%C3%A8gles_@) {{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é */
+```css
+/* Valeurs avec un mot-clé */
 system: cyclic;
 system: numeric;
 system: alphabetic;
@@ -22,50 +23,48 @@ 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")}}).

                  +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

                  +## Syntaxe -

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

                  +Ce descripteur peut prendre l'une de ces trois formes : -
                    -
                  • Un des mots-clés parmi cyclic, numeric, alphabetic, symbolic, additive, fixed
                    • -
                  • Le mot-clé fixed avec un entier
                    • -
                  • Le mot-clé extends avec un nom correspondant à un {{cssxref("@counter-style")}}.
                    • -
                  +- Un des mots-clés parmi `cyclic`, `numeric`, `alphabetic`, `symbolic`, `additive`, `fixed` +- Le mot-clé `fixed` avec un entier +- Le mot-clé `extends` avec un nom correspondant à un {{cssxref("@counter-style")}}. + + + +- `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](https://fr.wikipedia.org/wiki/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). -
                  -
                  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

                  +### Syntaxe formelle {{csssyntax}} -

                  Exemples

                  +## Exemples -

                  Utilisation de cyclic

                  +### Utilisation de `cyclic` -

                  CSS

                  +#### CSS -
                  @counter-style fisheye {
+```css
+@counter-style fisheye {
   system: cyclic;
   symbols: ◉;
   suffix: " ";
@@ -73,28 +72,31 @@ system: extends decimal;
 
 .list {
     list-style: fisheye;
-}
                  +} +``` -

                  HTML

                  +#### HTML -
                  <ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
-
                  +```html +
                    + 
                  • Un
                    • + 
                  • Deux
                    • + 
                  • Trois
                    • +
                  • Quatre
                    • + 
                  • Cinq
                    • +
                  +``` -

                  Résultat

                  +#### Résultat -

                  {{EmbedLiveSample('Utilisation_de_cyclic')}}

                  +{{EmbedLiveSample('Utilisation_de_cyclic')}} -

                  Utilisation de fixed

                  +### Utilisation de `fixed` -

                  CSS

                  +#### CSS -
                  @counter-style circled-digits {
+```css
+@counter-style circled-digits {
   system: fixed;
   symbols: ➀ ➁ ➂;
   suffix: ' ';
@@ -103,27 +105,30 @@ system: extends decimal;
 .list {
   list-style: circled-digits;
 }
-
                  +``` -

                  HTML

                  +#### HTML -
                  <ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
                  +```html +
                    +
                  • Un
                    • +
                  • Deux
                    • +
                  • Trois
                    • +
                  • Quatre
                    • +
                  • Cinq
                    • +
                  +``` -

                  Résultat

                  +#### Résultat -

                  {{EmbedLiveSample('Utilisation_de_fixed')}}

                  +{{EmbedLiveSample('Utilisation_de_fixed')}} -

                  Utilisation de symbolic

                  +### Utilisation de `symbolic` -

                  CSS

                  +#### CSS -
                  @counter-style abc {
+```css
+@counter-style abc {
   system: symbolic;
   symbols: a b c;
   suffix: ". ";
@@ -132,27 +137,30 @@ system: extends decimal;
 .list {
   list-style: abc;
 }
-
                  +``` -

                  HTML

                  +#### HTML -
                  <ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
                  +```html +
                    +
                  • Un
                    • +
                  • Deux
                    • +
                  • Trois
                    • +
                  • Quatre
                    • +
                  • Cinq
                    • +
                  +``` -

                  Résultat

                  +#### Résultat -

                  {{EmbedLiveSample('Utilisation_de_symbolic')}}

                  +{{EmbedLiveSample('Utilisation_de_symbolic')}} -

                  Utilisation de alphabetic

                  +### Utilisation de `alphabetic` -

                  CSS

                  +#### CSS -
                  @counter-style abc {
+```css
+@counter-style abc {
   system: alphabetic;
   symbols: a b c;
   suffix: ". ";
@@ -161,28 +169,30 @@ system: extends decimal;
 .list {
   list-style: abc;
 }
-
                  +``` -

                  HTML

                  +#### HTML -
                  <ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
-
                  +```html +
                    +
                  • Un
                    • +
                  • Deux
                    • +
                  • Trois
                    • +
                  • Quatre
                    • +
                  • Cinq
                    • +
                  +``` -

                  Résultat

                  +#### Résultat -

                  {{EmbedLiveSample('Utilisation_de_alphabetic')}}

                  +{{EmbedLiveSample('Utilisation_de_alphabetic')}} -

                  Utilisation de numeric avec des lettres

                  +### Utilisation de `numeric` avec des lettres -

                  CSS

                  +#### CSS -
                  @counter-style abc {
+```css
+@counter-style abc {
   system: numeric;
   symbols: a b c;
   suffix: ". ";
@@ -190,27 +200,31 @@ system: extends decimal;
 
 .list {
   list-style: abc;
-}
                  +} +``` -

                  HTML

                  +#### HTML -
                  <ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
                  +```html +
                    +
                  • Un
                    • +
                  • Deux
                    • +
                  • Trois
                    • +
                  • Quatre
                    • +
                  • Cinq
                    • +
                  +``` -

                  Résultat

                  +#### Résultat -

                  {{EmbedLiveSample('Utilisation_de_numeric_avec_des_lettres')}}

                  +{{EmbedLiveSample('Utilisation_de_numeric_avec_des_lettres')}} -

                  Utilisation de numeric avec des chiffres

                  +### Utilisation de `numeric` avec des chiffres -

                  CSS

                  +#### CSS -
                  @counter-style numbers {
+```css
+@counter-style numbers {
   system: numeric;
   symbols: 0 1 2 3 4 5 6 7 8 9;
   suffix: ". ";
@@ -219,25 +233,28 @@ system: extends decimal;
 .list {
   list-style: numbers;
 }
-
                  +``` -

                  HTML

                  +#### HTML -
                  <ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
                  +```html +
                    +
                  • Un
                    • +
                  • Deux
                    • +
                  • Trois
                    • +
                  • Quatre
                    • +
                  • Cinq
                    • +
                  +``` -

                  {{EmbedLiveSample("Utilisation_de_numeric_avec_des_chiffres")}}

                  +{{EmbedLiveSample("Utilisation_de_numeric_avec_des_chiffres")}} -

                  Utilisation de additive

                  +### Utilisation de `additive` -

                  CSS

                  +#### CSS -
                  @counter-style upper-roman {
+```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;
@@ -246,28 +263,30 @@ system: extends decimal;
 .list {
   list-style: upper-roman;
 }
-
                  +``` -

                  HTML

                  +#### HTML -
                  <ul class="list">
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-  <li>Quatre</li>
-  <li>Cinq</li>
-</ul>
-
                  +```html +
                    +
                  • Un
                    • +
                  • Deux
                    • +
                  • Trois
                    • +
                  • Quatre
                    • +
                  • Cinq
                    • +
                  +``` -

                  Résultat

                  +#### Résultat -

                  {{EmbedLiveSample('Utilisation_de_additive')}}

                  +{{EmbedLiveSample('Utilisation_de_additive')}} -

                  Combinaison avec extends

                  +### Combinaison avec `extends` -

                  CSS

                  +#### CSS -
                  @counter-style alpha-modified {
+```css
+@counter-style alpha-modified {
   system: extends lower-alpha;
   prefix: "(";
   suffix: ") ";
@@ -276,53 +295,39 @@ system: extends decimal;
 .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

                  - -
                    -
                  • {{cssxref("list-style")}},
                    • -
                  • {{cssxref("list-style-image")}},
                    • -
                  • {{cssxref("list-style-position")}},
                    • -
                  • {{cssxref("symbols()", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.
                    • +``` + +#### HTML + +```html +
                      +
                    • Un
                      • +
                    • Deux
                      • +
                    • Trois
                      • +
                    • Quatre
                      • +
                    • Cinq
                    +``` + +#### Résultat + +{{EmbedLiveSample('Combinaison_avec_extends')}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{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 + +- {{cssxref("list-style")}}, +- {{cssxref("list-style-image")}}, +- {{cssxref("list-style-position")}}, +- {{cssxref("symbols()", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes. diff --git a/files/fr/web/css/@document/index.md b/files/fr/web/css/@document/index.md index 06a8348209..3eaae20523 100644 --- a/files/fr/web/css/@document/index.md +++ b/files/fr/web/css/@document/index.md @@ -8,46 +8,42 @@ tags: - Règle @ translation_of: Web/CSS/@document --- -
                    {{CSSRef}}{{SeeCompatTable}}
                    +{{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.

                    +La [règle @ CSS ](/fr/docs/Web/CSS/R%C3%A8gles_@)**`@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/") {
+```css
+@document url("https://www.example.com/") {
   h1 {
     color: green;
   }
-}
                    - -
                      -
                    +} +``` -

                    Syntaxe

                    +## 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 :

                    +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 : -
                      -
                    • url(), qui établit une correspondance avec une URL exacte ;
                      • -
                    • url-prefix(), qui établit une correspondance si l'URL du document commence par la valeur fournie ;
                      • -
                    • domain(), qui établit une correspondance si l'URL du document se trouve sur le domaine indiqué (ou l'un de ses sous-domaines) ;
                      • -
                    • media-document() qui caractérise le type de document : vidéo, image, plugin, tout ;
                      • -
                    • regexp(), qui établit une correspondance avec si l'URL  du document vérifie une expression rationnelle. L'expression doit correspondre à l'URL entière.
                      • -
                    +- `url()`, qui établit une correspondance avec une URL exacte ; +- `url-prefix()`, qui établit une correspondance si l'URL du document commence par la valeur fournie ; +- `domain()`, qui établit une correspondance si l'URL du document se trouve sur le domaine indiqué (ou l'un de ses sous-domaines) ; +- `media-document()` qui caractérise le type de document : vidéo, image, plugin, tout ; +- `regexp()`, qui établit une correspondance avec si l'URL  du document vérifie une [expression rationnelle](/fr-FR/docs/Web/JavaScript/Guide/Regular_Expressions). L'expression doit correspondre à l'URL entière. -

                    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 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 \\.).

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

                    -
                    +> **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

                    +### Syntaxe formelle {{csssyntax}} -

                    Exemples

                    +## Exemples -
                    @document url("http://www.w3.org/"),
+```css
+@document url("http://www.w3.org/"),
                url-prefix("http://www.w3.org/Style/"),
                domain("mozilla.org"),
                media-document("video"),
@@ -67,18 +63,16 @@ translation_of: Web/CSS/@document
     background: yellow;
   }
 }
-
                    +``` -

                    Spécifications

                    +## Spécifications -

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

                    +[Initialement](https://www.w3.org/TR/css3-conditional/) dans {{SpecName('CSS3 Conditional')}}, `@document` a [été repoussée](http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes) au niveau 4. -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

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

                    Voir aussi

                    +## Voir aussi - +- [Per-site user style sheet rules](http://lists.w3.org/Archives/Public/www-style/2004Aug/0135) sur la liste de diffusion www-style. diff --git a/files/fr/web/css/@font-face/ascent-override/index.md b/files/fr/web/css/@font-face/ascent-override/index.md index dbbeb8eaa3..7ece3bac41 100644 --- a/files/fr/web/css/@font-face/ascent-override/index.md +++ b/files/fr/web/css/@font-face/ascent-override/index.md @@ -1,42 +1,43 @@ --- title: ascent-override slug: Web/CSS/@font-face/ascent-override +translation_of: Web/CSS/@font-face/ascent-override browser-compat: css.at-rules.font-face.ascent-override -translation_of: 'Web/CSS/@font-face/ascent-override' --- -

                    {{CSSRef}}

                    +{{CSSRef}} -

                    Le descripteur CSS ascent-override définit la mesure du jambage supérieur (ascendant) de la police (voir la définition de jambage). La mesure du jambage supérieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.

                    +Le descripteur CSS **`ascent-override`** définit la mesure du jambage supérieur (ascendant) de la police (voir la [définition de jambage](https://fr.wikipedia.org/wiki/Jambage)). La mesure du jambage supérieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne. -

                    Syntaxe

                    +## Syntaxe -
                    ascent-override: normal;
-ascent-override: 90%;
                    +```css +ascent-override: normal; +ascent-override: 90%; +``` -

                    Valeurs

                    +### Valeurs -
                    -
                    normal
                    -
                    La valeur par défaut. La mesure du jambage supérieur est obtenue à partir du fichier de police.
                    -
                    <percentage>
                    -
                    Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}.
                    -
                    +- `normal` + - : La valeur par défaut. La mesure du jambage supérieur est obtenue à partir du fichier de police. +- `` + - : Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}. -

                    Définition formelle

                    +## Définition formelle -

                    {{cssinfo}}

                    +{{cssinfo}} -

                    Syntaxe formelle

                    +## Syntaxe formelle -

                    {{csssyntax}}

                    +{{csssyntax}} -

                    Exemples

                    +## Exemples -

                    Surcharge de la mesure d'une police de recours

                    +### Surcharge de la mesure d'une police de recours -

                    La propriété ascent-override peut aider à la surcharge de la mesure d'une police de secours pour qu'elle corresponde mieux à celle de la police principale.

                    +La propriété `ascent-override` peut aider à la surcharge de la mesure d'une police de secours pour qu'elle corresponde mieux à celle de la police principale. -
                    @font-face {
+```css
+@font-face {
   font-family: web-font;
   src: url("https://example.com/font.woff");
 }
@@ -45,30 +46,29 @@ ascent-override: 90%;
                    font-family: local-font; src: local(Local Font); ascent-override: 125%; -} +} +``` -

                    Spécifications

                    +## Spécifications -

                    {{Specifications}}

                    +{{Specifications}} -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat}}

                    +{{Compat}} -

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref("@font-face/descent-override", "descent-override")}}
                      • -
                    • {{cssxref("@font-face/font-display", "font-display")}}
                      • -
                    • {{cssxref("@font-face/font-family", "font-family")}}
                      • -
                    • {{cssxref("@font-face/font-weight", "font-weight")}}
                      • -
                    • {{cssxref("@font-face/font-style", "font-style")}}
                      • -
                    • {{cssxref("@font-face/font-stretch", "font-stretch")}}
                      • -
                    • {{cssxref("@font-face/font-variant", "font-variant")}}
                      • -
                    • {{cssxref("font-feature-settings", "font-feature-settings")}}
                      • -
                    • {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
                      • -
                    • {{cssxref("@font-face/line-gap-override", "line-gap-override")}}
                      • -
                    • {{cssxref("@font-face/src", "src")}}
                      • -
                    • {{cssxref("@font-face/size-adjust", "size-adjust")}}
                      • -
                    • {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}
                      • -
                    +- {{cssxref("@font-face/descent-override", "descent-override")}} +- {{cssxref("@font-face/font-display", "font-display")}} +- {{cssxref("@font-face/font-family", "font-family")}} +- {{cssxref("@font-face/font-weight", "font-weight")}} +- {{cssxref("@font-face/font-style", "font-style")}} +- {{cssxref("@font-face/font-stretch", "font-stretch")}} +- {{cssxref("@font-face/font-variant", "font-variant")}} +- {{cssxref("font-feature-settings", "font-feature-settings")}} +- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} +- {{cssxref("@font-face/line-gap-override", "line-gap-override")}} +- {{cssxref("@font-face/src", "src")}} +- {{cssxref("@font-face/size-adjust", "size-adjust")}} +- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}} diff --git a/files/fr/web/css/@font-face/descent-override/index.md b/files/fr/web/css/@font-face/descent-override/index.md index 6805fdd77f..17b9e8df0e 100644 --- a/files/fr/web/css/@font-face/descent-override/index.md +++ b/files/fr/web/css/@font-face/descent-override/index.md @@ -1,42 +1,43 @@ --- title: descent-override slug: Web/CSS/@font-face/descent-override +translation_of: Web/CSS/@font-face/descent-override browser-compat: css.at-rules.font-face.descent-override -translation_of: 'Web/CSS/@font-face/descent-override' --- -

                    {{CSSRef}}

                    +{{CSSRef}} -

                    Le descripteur CSS descent-override définit la mesure du jambage inférieur (descendant) de la police (voir la définition de jambage). La mesure du jambage inférieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.

                    +Le descripteur CSS **`descent-override`** définit la mesure du jambage inférieur (descendant) de la police (voir la [définition de jambage](https://fr.wikipedia.org/wiki/Jambage)). La mesure du jambage inférieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne. -

                    Syntaxe

                    +## Syntaxe -
                    descent-override: normal;
-descent-override: 90%;
                    +```css +descent-override: normal; +descent-override: 90%; +``` -

                    Valeurs

                    +### Valeurs -
                    -
                    normal
                    -
                    La valeur par défaut. La mesure du jambage inférieur est obtenue à partir du fichier de police.
                    -
                    <percentage>
                    -
                    Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}.
                    -
                    +- `normal` + - : La valeur par défaut. La mesure du jambage inférieur est obtenue à partir du fichier de police. +- `` + - : Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}. -

                    Définition formelle

                    +## Définition formelle -

                    {{cssinfo}}

                    +{{cssinfo}} -

                    Syntaxe formelle

                    +## Syntaxe formelle -

                    {{csssyntax}}

                    +{{csssyntax}} -

                    Exemples

                    +## Exemples -

                    Surcharge de la mesure d'une police de recours

                    +### Surcharge de la mesure d'une police de recours -

                    La propriété descent-override peut aider à la surcharge de la mesure d'une police de secours pour qu'elle corresponde mieux à celle de la police principale.

                    +La propriété `descent-override` peut aider à la surcharge de la mesure d'une police de secours pour qu'elle corresponde mieux à celle de la police principale. -
                    @font-face {
+```css
+@font-face {
   font-family: web-font;
   src: url("https://example.com/font.woff");
 }
@@ -45,30 +46,29 @@ descent-override: 90%;
                    font-family: local-font; src: local(Local Font); descent-override: 125%; -} +} +``` -

                    Spécifications

                    +## Spécifications -

                    {{Specifications}}

                    +{{Specifications}} -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat}}

                    +{{Compat}} -

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref("@font-face/ascent-override", "ascent-override")}}
                      • -
                    • {{cssxref("@font-face/font-display", "font-display")}}
                      • -
                    • {{cssxref("@font-face/font-family", "font-family")}}
                      • -
                    • {{cssxref("@font-face/font-weight", "font-weight")}}
                      • -
                    • {{cssxref("@font-face/font-style", "font-style")}}
                      • -
                    • {{cssxref("@font-face/font-stretch", "font-stretch")}}
                      • -
                    • {{cssxref("@font-face/font-variant", "font-variant")}}
                      • -
                    • {{cssxref("font-feature-settings", "font-feature-settings")}}
                      • -
                    • {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
                      • -
                    • {{cssxref("@font-face/line-gap-override", "line-gap-override")}}
                      • -
                    • {{cssxref("@font-face/src", "src")}}
                      • -
                    • {{cssxref("@font-face/size-adjust", "size-adjust")}}
                      • -
                    • {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}
                      • -
                    +- {{cssxref("@font-face/ascent-override", "ascent-override")}} +- {{cssxref("@font-face/font-display", "font-display")}} +- {{cssxref("@font-face/font-family", "font-family")}} +- {{cssxref("@font-face/font-weight", "font-weight")}} +- {{cssxref("@font-face/font-style", "font-style")}} +- {{cssxref("@font-face/font-stretch", "font-stretch")}} +- {{cssxref("@font-face/font-variant", "font-variant")}} +- {{cssxref("font-feature-settings", "font-feature-settings")}} +- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} +- {{cssxref("@font-face/line-gap-override", "line-gap-override")}} +- {{cssxref("@font-face/src", "src")}} +- {{cssxref("@font-face/size-adjust", "size-adjust")}} +- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}} diff --git a/files/fr/web/css/@font-face/font-display/index.md b/files/fr/web/css/@font-face/font-display/index.md index 2b89c8661d..d536c50a2a 100644 --- a/files/fr/web/css/@font-face/font-display/index.md +++ b/files/fr/web/css/@font-face/font-display/index.md @@ -8,83 +8,70 @@ tags: - Reference translation_of: Web/CSS/@font-face/font-display --- -
                    {{CSSRef}}
                    +{{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.

                    +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

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

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

                    +{{cssinfo}} -

                    Syntaxe

                    +## Syntaxe -
                    /* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 font-display: auto;
 font-display: block;
 font-display: swap;
 font-display: fallback;
-font-display: optional;
                    +font-display: optional; +``` -

                    Valeurs

                    +### 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.
                    -
                    +- `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

                    +### Syntaxe formelle {{csssyntax}} -

                    Exemples

                    +## Exemples -
                    @font-face {
+```css
+@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")}}

                    +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{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.md b/files/fr/web/css/@font-face/font-family/index.md index 35b4247f85..ba8d5abe86 100644 --- a/files/fr/web/css/@font-face/font-family/index.md +++ b/files/fr/web/css/@font-face/font-family/index.md @@ -7,61 +7,48 @@ tags: - Reference translation_of: Web/CSS/@font-face/font-family --- -
                    {{CSSRef}}
                    +{{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")}}.

                    +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

                    +## Syntaxe -
                    /* Valeurs de chaînes de caractères */
-/* Type <string>                    */
+```css
+/* Valeurs de chaînes de caractères */
+/* Type                     */
 font-family: "police de caractères a";
 font-family: 'une autre police';
 
-/* Valeur de type <custom-ident> */
+/* Valeur de type  */
 font-family: exemplepolice;
-
                    +``` -

                    Valeurs

                    +### Valeurs -
                    -
                    <family-name>
                    -
                    Définit le nom de la police de caractères.
                    -
                    +- `` + - : Définit le nom de la police de caractères. -

                    Syntaxe formelle

                    +### Syntaxe formelle {{csssyntax}} -

                    Exemples

                    +## Exemples -
                    @font-face {
+```css
+@font-face {
   font-family: exemplepolice;
   src: url('exemplepolice.ttf');
 }
-
                    +``` -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
                    +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. | -

                    {{cssinfo}}

                    +{{cssinfo}} -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat("css.at-rules.font-face.font-family")}}

                    +{{Compat("css.at-rules.font-face.font-family")}} diff --git a/files/fr/web/css/@font-face/font-stretch/index.md b/files/fr/web/css/@font-face/font-stretch/index.md index 505de0c2ac..296cbde1a3 100644 --- a/files/fr/web/css/@font-face/font-stretch/index.md +++ b/files/fr/web/css/@font-face/font-stretch/index.md @@ -8,17 +8,18 @@ tags: - Reference translation_of: Web/CSS/@font-face/font-stretch --- -

                    {{CSSRef}}{{draft}}

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

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

                    +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}}

                    +{{cssinfo}} -

                    Syntaxe

                    +## Syntaxe -
                    /* Valeurs simples */
+```css
+/* Valeurs simples */
 font-stretch: ultra-condensed;
 font-stretch: extra-condensed;
 font-stretch: condensed;
@@ -35,146 +36,125 @@ font-stretch: 200%;
 /* Valeurs multiples */
 font-stretch: 75% 125%;
 font-stretch: condensed ultra-condensed;;
-
                    +``` -

                    Valeurs

                    +### 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é.
                    -
                    +- `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). +- `` + - : 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.

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

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

                    +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

                    +### 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 :

                    +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%
                    KeywordPourcentage
                    ultra-condensed50%
                    extra-condensed62.5%
                    condensed75%
                    semi-condensed87.5%
                    normal100%
                    semi-expanded112.5%
                    expanded125%
                    extra-expanded150%
                    ultra-expanded200%
                    -

                    Polices variables

                    +### 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).

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

                    +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

                    +### Syntaxe formelle {{csssyntax}} -

                    Exemples

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

                    +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 {
+```css
+@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')}}
                    +} +``` + +## 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](/en-US/docs/Web/CSS/color#accessibility_concerns). + +- [Comprendre les règles WCAG - Partie 1.4 (MDN)](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Respecter le critère 1.4.8 - Comprendre les règles WCAG 2.0 (W3C)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{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

                    +## Compatibilité des navigateurs -

                    {{Compat("css.at-rules.font-face.font-stretch")}}

                    +{{Compat("css.at-rules.font-face.font-stretch")}} -

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref("@font-face/font-display", "font-display descriptor")}}
                      • -
                    • {{cssxref("@font-face/font-family", "font-family descriptor")}}
                      • -
                    • {{cssxref("@font-face/font-weight", "font-weight descriptor")}}
                      • -
                    • {{cssxref("@font-face/font-style", "font-style descriptor")}}
                      • -
                    • {{cssxref("@font-face/font-variant", "font-variant descriptor")}}
                      • -
                    • {{cssxref("font-feature-settings", "font-feature-settings")}}
                      • -
                    • {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
                      • -
                    • {{cssxref("@font-face/src", "src")}}
                      • -
                    • {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}
                      • -
                    +- {{cssxref("@font-face/font-display", "font-display descriptor")}} +- {{cssxref("@font-face/font-family", "font-family descriptor")}} +- {{cssxref("@font-face/font-weight", "font-weight descriptor")}} +- {{cssxref("@font-face/font-style", "font-style descriptor")}} +- {{cssxref("@font-face/font-variant", "font-variant descriptor")}} +- {{cssxref("font-feature-settings", "font-feature-settings")}} +- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} +- {{cssxref("@font-face/src", "src")}} +- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}} diff --git a/files/fr/web/css/@font-face/font-style/index.md b/files/fr/web/css/@font-face/font-style/index.md index 672e77a232..2b8a447bee 100644 --- a/files/fr/web/css/@font-face/font-style/index.md +++ b/files/fr/web/css/@font-face/font-style/index.md @@ -7,91 +7,78 @@ tags: - Reference translation_of: Web/CSS/@font-face/font-style --- -
                    {{CSSRef}}
                    +{{CSSRef}} -

                    Le descripteur font-style, associé à la règle @ {{cssxref("@font-face")}}, permet d'indiquer le style de police pour la police définie via la règle.

                    +Le descripteur **`font-style`**, associé à [la règle @](/fr/docs/Web/CSS/At-rule) {{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.

                    +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

                    +## Syntaxe -
                    font-style: normal;
+```css
+font-style: normal;
 font-style: italic;
 font-style: oblique;
 font-style: oblique 30deg;
-font-style: oblique 30deg 50deg;
                    +font-style: oblique 30deg 50deg; +``` -

                    Valeurs

                    +### 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.
                    -
                    +- `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

                    +### Syntaxe formelle {{csssyntax}} -

                    Exemples

                    +## Exemples -

                    Dans les exemples qui suivent, on utilisera les différentes formes liées à la police Garamond :

                    +Dans les exemples qui suivent, on utilisera les différentes formes liées à la police Garamond : -
                    @font-face {
+```css
+@font-face {
   font-family: garamond;
   src: url('garamond.ttf');
-}
                    +} +``` -

                    unstyled Garamond

                    +![unstyled Garamond](garamondunstyled.jpg) -

                    La version en italique du texte utilisera les mêmes glyphes que la version normale, artificiellement penchés de quelques degrés.

                    +La version en italique du texte utilisera les mêmes glyphes que la version normale, artificiellement penchés de quelques degrés. -

                    artificially sloped garamond

                    +![artificially sloped garamond](garamondartificialstyle.jpg) -

                    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.

                    +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 {
+```css
+@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")}}

                    +} +``` + +![italic garamond](garamonditalic.jpg) + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------- | +| {{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.md b/files/fr/web/css/@font-face/font-variation-settings/index.md index 750c35e29c..b1c2e35474 100644 --- a/files/fr/web/css/@font-face/font-variation-settings/index.md +++ b/files/fr/web/css/@font-face/font-variation-settings/index.md @@ -8,62 +8,49 @@ tags: - Reference translation_of: Web/CSS/@font-face/font-variation-settings --- -
                    {{CSSRef}}
                    +{{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.

                    +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

                    +## Syntaxe -
                    /* On utilise les paramètres par défaut */
-font-variation-settings: normal;
+    /* 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;
                    + /* On indique les valeurs pour les noms des axes OpenType */ + font-variation-settings: "xhgt" 0.7; -

                    Valeurs

                    +### 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.
                    -
                    +- `normal` + - : Le texte est disposé avec les paramètres par défaut. +- ` ` + - : 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

                    +### Syntaxe formelle {{csssyntax}} -

                    Exemples

                    +## Exemples -
                    @font-face {
+```css
+@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écifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName('CSS4 Fonts', '#font-rend-desc', 'font-variation-settings')}}{{Spec2('CSS4 Fonts')}}Définition initiale.
                    +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('CSS4 Fonts', '#font-rend-desc', 'font-variation-settings')}} | {{Spec2('CSS4 Fonts')}} | Définition initiale. | -

                    {{cssinfo}}

                    +{{cssinfo}} -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat("css.at-rules.font-face.font-variation-settings")}}

                    +{{Compat("css.at-rules.font-face.font-variation-settings")}} diff --git a/files/fr/web/css/@font-face/font-weight/index.md b/files/fr/web/css/@font-face/font-weight/index.md index 9b6c5fb851..ddfc9ad1c4 100644 --- a/files/fr/web/css/@font-face/font-weight/index.md +++ b/files/fr/web/css/@font-face/font-weight/index.md @@ -8,163 +8,104 @@ tags: - 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

                    +{{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`](/fr/docs/Web/CSS/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`). +- `` + - : 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 : + +| Valeur | Nom commun | +| ------ | ------------------------- | +| 100 | Thin (Hairline) | +| 200 | Extra Light (Ultra Light) | +| 300 | Light | +| 400 | Normal | +| 500 | Medium | +| 600 | Semi Bold (Demi Bold) | +| 700 | Bold | +| 800 | Extra Bold (Ultra Bold) | +| 900 | Black (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

                    - -
                      -
                    • font-weight
                      • -
                    • {{cssxref("@font-face/font-display", "font-display descriptor")}}
                      • -
                    • {{cssxref("@font-face/font-family", "font-family descriptor")}}
                      • -
                    • {{cssxref("@font-face/font-stretch", "font-stretch descriptor")}}
                      • -
                    • {{cssxref("@font-face/font-style", "font-style descriptor")}}
                      • -
                    • {{cssxref("@font-face/font-variant", "font-variant descriptor")}}
                      • -
                    • {{cssxref("font-feature-settings", "font-feature-settings")}}
                      • -
                    • {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
                      • -
                    • {{cssxref("@font-face/src", "src")}}
                      • -
                    • {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}
                      • -
                    +## 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](/fr/docs/Web/CSS/color#Accessibilité). + +- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [_Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{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 + +- [`font-weight`](/fr/docs/Web/CSS/font-weight) +- {{cssxref("@font-face/font-display", "font-display descriptor")}} +- {{cssxref("@font-face/font-family", "font-family descriptor")}} +- {{cssxref("@font-face/font-stretch", "font-stretch descriptor")}} +- {{cssxref("@font-face/font-style", "font-style descriptor")}} +- {{cssxref("@font-face/font-variant", "font-variant descriptor")}} +- {{cssxref("font-feature-settings", "font-feature-settings")}} +- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} +- {{cssxref("@font-face/src", "src")}} +- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}} diff --git a/files/fr/web/css/@font-face/index.md b/files/fr/web/css/@font-face/index.md index f8dfeee254..7084f72a43 100644 --- a/files/fr/web/css/@font-face/index.md +++ b/files/fr/web/css/@font-face/index.md @@ -7,182 +7,165 @@ tags: - Règle @ translation_of: Web/CSS/@font-face --- -
                    {{CSSRef}}
                    +{{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.

                    +La [règle @](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@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.

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

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

                    +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](/fr/docs/Web/CSS/Règles_@). -
                    @font-face {
+```css
+@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

                    +} +``` + +## 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 : + + ```css + 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

                    +## Exemples -

                    Police distante

                    +### Police distante -

                    CSS

                    +#### CSS -
                    @font-face {
+```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

                    +#### HTML -
                    <p> Et voici Bitstream Vera Serif Bold.</p>
-
                    +```html +

                    Et voici Bitstream Vera Serif Bold.

                    +``` -

                    Résultat

                    +#### Résultat -

                    {{EmbedLiveSample("Police_distante")}}

                    +{{EmbedLiveSample("Police_distante")}} -

                    Police locale

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

                    +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

                    +#### CSS -
                    @font-face {
+```css
+@font-face {
   font-family: MaHelvetica;
   src: local("Helvetica Neue Bold"),
        local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
   font-weight: bold;
-}
                    +} +``` + +#### HTML -

                    HTML

                    +```html +

                    Et voici Ma Helvetica.

                    +``` -
                    <p> Et voici Ma Helvetica.</p>
-
                    +#### Résultat -

                    Résultat

                    +{{EmbedLiveSample("Police_locale")}} -

                    {{EmbedLiveSample("Police_locale")}}

                    +## Types MIME associés aux polices -

                    Types MIME associés aux polices

                    +Voici, selon les différents formats de police, les types MIME associés : -

                    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` -
                    -
                    TrueType
                    -
                    font/ttf
                    -
                    OpenType
                    -
                    font/otf
                    -
                    Web Open File Format
                    -
                    font/woff
                    -
                    Web Open File Format 2
                    -
                    font/woff2
                    -
                    +## Notes -

                    Notes

                    +- Les restrictions d'origine (même domaine) s'appliquent également sur les polices web sauf si [les contrôles d'accès HTTP](/fr/docs/HTTP/Access_control_CORS) sont paramétrés afin de lever cette restriction. +- `@font-face` ne peut pas être déclaré au sein d'un sélecteur CSS. Ainsi l'exemple suivant ne fonctionnera pas : -
                      -
                    • Les restrictions d'origine (même domaine) s'appliquent également sur les polices web sauf si les contrôles d'accès HTTP sont paramétrés afin de lever cette restriction.
                      • -
                    • @font-face ne peut pas être déclaré au sein d'un sélecteur CSS. Ainsi l'exemple suivant ne fonctionnera pas : - 
                      .nomClasse {
-  @font-face {
-    font-family: MyHelvetica;
-    src: local("Helvetica Neue Bold"),
-         local("HelveticaNeue-Bold"),
-         url(MgOpenModernaBold.ttf;
-    font-weight: bold;
+  ```css example-bad
+  .nomClasse {
+    @font-face {
+      font-family: MyHelvetica;
+      src: local("Helvetica Neue Bold"),
+           local("HelveticaNeue-Bold"),
+           url(MgOpenModernaBold.ttf;
+      font-weight: bold;
+    }
   }
-}
                      -
                      • -
                    - -

                    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

                    - - + ``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------- | +| {{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 + +- [À propos de WOFF](/fr/docs/Web/Guide/WOFF) +- [Le générateur de règles `@font-face` par Everythingfonts](https://everythingfonts.com/font-face) +- [Le générateur de règles @font-face par FontSquirrel](https://www.fontsquirrel.com/tools/webfont-generator) +- [Des polices obtenues avec `@font-face` (en anglais, sur hacks.mozilla.org)](http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/) +- [Une bibliothèque de polices ouvertes (_Open Font Library_)](http://openfontlibrary.org/) +- [Où puis-je utiliser WOFF ? (en anglais sur caniuse.com)](http://caniuse.com/woff) +- [Où puis-je utiliser les polices SVG ?](http://caniuse.com/svg-fonts) diff --git a/files/fr/web/css/@font-face/line-gap-override/index.md b/files/fr/web/css/@font-face/line-gap-override/index.md index 3c70e24a29..c697ac9ec1 100644 --- a/files/fr/web/css/@font-face/line-gap-override/index.md +++ b/files/fr/web/css/@font-face/line-gap-override/index.md @@ -1,42 +1,43 @@ --- title: line-gap-override slug: Web/CSS/@font-face/line-gap-override +translation_of: Web/CSS/@font-face/line-gap-override browser-compat: css.at-rules.font-face.line-gap-override -translation_of: 'Web/CSS/@font-face/line-gap-override' --- -

                    {{CSSRef}}

                    +{{CSSRef}} -

                    Le descripteur CSS line-gap-override définit la mesure de l'écart de lignes de la police. La mesure de l'écart de lignes peut être l'écart recommandé par la police ou encore un écart externe.

                    +Le descripteur CSS **`line-gap-override`** définit la mesure de l'écart de lignes de la police. La mesure de l'écart de lignes peut être l'écart recommandé par la police ou encore un écart externe. -

                    Syntaxe

                    +## Syntaxe -
                    line-gap-override: normal;
-line-gap-override: 90%;
                    +```css +line-gap-override: normal; +line-gap-override: 90%; +``` -

                    Valeurs

                    +### Valeurs -
                    -
                    normal
                    -
                    La valeur par défaut. Lorsqu'elle est utilisée, la valeur de la mesure est obtenue à partir du fichier de police.
                    -
                    <percentage>
                    -
                    Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}).
                    -
                    +- `normal` + - : La valeur par défaut. Lorsqu'elle est utilisée, la valeur de la mesure est obtenue à partir du fichier de police. +- `` + - : Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}). -

                    Définition formelle

                    +## Définition formelle -

                    {{cssinfo}}

                    +{{cssinfo}} -

                    Syntaxe formelle

                    +## Syntaxe formelle -

                    {{csssyntax}}

                    +{{csssyntax}} -

                    Exemples

                    +## Exemples -

                    Surcharge de la mesure d'une police de recours

                    +### Surcharge de la mesure d'une police de recours -

                    La propriété line-gap-override peut aider à la surcharge des mesures d'une police de secours pour qu'elles correspondent mieux à celles de la police principale.

                    +La propriété `line-gap-override` peut aider à la surcharge des mesures d'une police de secours pour qu'elles correspondent mieux à celles de la police principale. -
                    @font-face {
+```css
+@font-face {
   font-family: web-font;
   src: url("https://example.com/font.woff");
 }
@@ -45,30 +46,29 @@ line-gap-override: 90%;
                    font-family: local-font; src: local(Local Font); line-gap-override: 125%; -} +} +``` -

                    Spécifications

                    +## Spécifications -

                    {{Specifications}}

                    +{{Specifications}} -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat}}

                    +{{Compat}} -

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref("@font-face/descent-override", "descent-override")}}
                      • -
                    • {{cssxref("@font-face/font-display", "font-display")}}
                      • -
                    • {{cssxref("@font-face/font-family", "font-family")}}
                      • -
                    • {{cssxref("@font-face/font-weight", "font-weight")}}
                      • -
                    • {{cssxref("@font-face/font-style", "font-style")}}
                      • -
                    • {{cssxref("@font-face/font-stretch", "font-stretch")}}
                      • -
                    • {{cssxref("@font-face/font-variant", "font-variant")}}
                      • -
                    • {{cssxref("font-feature-settings", "font-feature-settings")}}
                      • -
                    • {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
                      • -
                    • {{cssxref("@font-face/line-gap-override", "line-gap-override")}}
                      • -
                    • {{cssxref("@font-face/src", "src")}}
                      • -
                    • {{cssxref("@font-face/size-adjust", "size-adjust")}}
                      • -
                    • {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}
                      • -
                    +- {{cssxref("@font-face/descent-override", "descent-override")}} +- {{cssxref("@font-face/font-display", "font-display")}} +- {{cssxref("@font-face/font-family", "font-family")}} +- {{cssxref("@font-face/font-weight", "font-weight")}} +- {{cssxref("@font-face/font-style", "font-style")}} +- {{cssxref("@font-face/font-stretch", "font-stretch")}} +- {{cssxref("@font-face/font-variant", "font-variant")}} +- {{cssxref("font-feature-settings", "font-feature-settings")}} +- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} +- {{cssxref("@font-face/line-gap-override", "line-gap-override")}} +- {{cssxref("@font-face/src", "src")}} +- {{cssxref("@font-face/size-adjust", "size-adjust")}} +- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}} diff --git a/files/fr/web/css/@font-face/size-adjust/index.md b/files/fr/web/css/@font-face/size-adjust/index.md index d56be8dda9..51ac210d30 100644 --- a/files/fr/web/css/@font-face/size-adjust/index.md +++ b/files/fr/web/css/@font-face/size-adjust/index.md @@ -1,43 +1,44 @@ --- title: size-adjust slug: Web/CSS/@font-face/size-adjust +translation_of: Web/CSS/@font-face/size-adjust browser-compat: css.at-rules.font-face.size-adjust -translation_of: 'Web/CSS/@font-face/size-adjust' --- -

                    {{CSSRef}}{{SeeCompatTable}}

                    +{{CSSRef}}{{SeeCompatTable}} -

                    Le descripteur CSS size-adjust CSS définit un multiplicateur destiné aux contours des glyphes et aux mesures associées à la police. Cela facilite l'harmonisation de l'apparence des polices lorsqu'elles sont rendues avec la même taille.

                    +Le descripteur CSS **`size-adjust`** CSS définit un multiplicateur destiné aux contours des glyphes et aux mesures associées à la police. Cela facilite l'harmonisation de l'apparence des polices lorsqu'elles sont rendues avec la même taille. -

                    Le descripteur size-adjust se comporte d'une manière similaire à la propriété {{cssxref("font-size-adjust")}}. Il calcule l'ajustement à effectuer par police en faisant la correspondance avec leurs hauteurs respectives.

                    +Le descripteur `size-adjust` se comporte d'une manière similaire à la propriété {{cssxref("font-size-adjust")}}. Il calcule l'ajustement à effectuer par police en faisant la correspondance avec leurs hauteurs respectives. -

                    Syntaxe

                    +## Syntaxe -
                    size-adjust: 90%;
                    +```css +size-adjust: 90%; +``` -

                    Valeurs

                    +### Valeurs -
                    -
                    <percentage>
                    -
                    Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}), avec une valeur initiale de 100%.
                    -
                    +- `` + - : Une valeur exprimée en pourcentage (type {{cssxref("<percentage>")}}), avec une valeur initiale de 100%. -

                    Toutes les mesures associées à la police sont mises à l'échelle en utilisant le pourcentage fourni. Cela comprend les glyphes, les tables de hauteur de ligne et surcharge les valeurs fournies par les descripteurs {{cssxref("@font-face")}}.

                    +Toutes les mesures associées à la police sont mises à l'échelle en utilisant le pourcentage fourni. Cela comprend les glyphes, les tables de hauteur de ligne et surcharge les valeurs fournies par les descripteurs {{cssxref("@font-face")}}. -

                    Définition formelle

                    +## Définition formelle -

                    {{cssinfo}}

                    +{{cssinfo}} -

                    Syntaxe formelle

                    +## Syntaxe formelle -

                    {{csssyntax}}

                    +{{csssyntax}} -

                    Exemples

                    +## Exemples -

                    Surcharge de la mesure d'une police de recours

                    +### Surcharge de la mesure d'une police de recours -

                    La propriété size-adjust peut aider à la surcharge des mesures d'une police de secours pour qu'elles correspondent mieux à celles de la police principale.

                    +La propriété `size-adjust` peut aider à la surcharge des mesures d'une police de secours pour qu'elles correspondent mieux à celles de la police principale. -
                    @font-face {
+```css
+@font-face {
   font-family: web-font;
   src: url("https://example.com/font.woff");
 }
@@ -46,27 +47,26 @@ translation_of: 'Web/CSS/@font-face/size-adjust'
   font-family: local-font;
   src: local(Local Font);
   size-adjust: 90%;
-}
                    +} +``` -

                    Spécifications

                    +## Spécifications -

                    {{Specifications}}

                    +{{Specifications}} -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat}}

                    +{{Compat}} -

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref("@font-face/font-display", "font-display")}}
                      • -
                    • {{cssxref("@font-face/font-family", "font-family")}}
                      • -
                    • {{cssxref("@font-face/font-weight", "font-weight")}}
                      • -
                    • {{cssxref("@font-face/font-style", "font-style")}}
                      • -
                    • {{cssxref("@font-face/font-stretch", "font-stretch")}}
                      • -
                    • {{cssxref("@font-face/font-variant", "font-variant")}}
                      • -
                    • {{cssxref("font-feature-settings", "font-feature-settings")}}
                      • -
                    • {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
                      • -
                    • {{cssxref("@font-face/src", "src")}}
                      • -
                    • {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}
                      • -
                    +- {{cssxref("@font-face/font-display", "font-display")}} +- {{cssxref("@font-face/font-family", "font-family")}} +- {{cssxref("@font-face/font-weight", "font-weight")}} +- {{cssxref("@font-face/font-style", "font-style")}} +- {{cssxref("@font-face/font-stretch", "font-stretch")}} +- {{cssxref("@font-face/font-variant", "font-variant")}} +- {{cssxref("font-feature-settings", "font-feature-settings")}} +- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} +- {{cssxref("@font-face/src", "src")}} +- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}} diff --git a/files/fr/web/css/@font-face/src/index.md b/files/fr/web/css/@font-face/src/index.md index 0670afaf67..0e675fa6ea 100644 --- a/files/fr/web/css/@font-face/src/index.md +++ b/files/fr/web/css/@font-face/src/index.md @@ -7,26 +7,27 @@ tags: - Reference translation_of: Web/CSS/@font-face/src --- -
                    {{CSSRef}}
                    +{{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.

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

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

                    +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}}

                    +{{cssinfo}} -

                    Syntaxe

                    +## Syntaxe -
                    /* <url> */
+```css
+/*  */
 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> */
+/* Valeurs de type  */
 src: local(police);      /* nom sans double quote */
 src: local(une police); /* nom avec espace */
 src: local("police");    /* nom entre double quotes */
@@ -35,49 +36,35 @@ src: local("police");    /* nom entre double quotes */
 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

                    +### 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.
                    -
                    +- ` [ format( # ) ]?` + - : 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. +- `` + - : 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

                    +### Syntaxe formelle {{csssyntax}} -

                    Exemples

                    +## Exemples -
                    @font-face {
+```css
+@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")}}

                    +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{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.md b/files/fr/web/css/@font-face/unicode-range/index.md index 75a2fa5342..c034e9d9bf 100644 --- a/files/fr/web/css/@font-face/unicode-range/index.md +++ b/files/fr/web/css/@font-face/unicode-range/index.md @@ -8,59 +8,55 @@ tags: - Reference translation_of: Web/CSS/@font-face/unicode-range --- -
                    {{cssref}}
                    +{{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 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.

                    +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}}

                    +{{cssinfo}} -

                    Syntaxe

                    +## Syntaxe -
                    /* Valeurs <unicode-range> */
+```css
+/* Valeurs  */
 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 :

                    - -
                      -
                    • un seul point de code -
                        -
                      • Ex : U+26
                        • -
                      -
                      • -
                    • un intervalle spécifique de points de code -
                        -
                      • Ex : U+0025-00FF indique que l'intervalle contient tous les caractères contenus entre les points de code U+0025 et U+00FF
                        • -
                      -
                      • -
                    • un intervalle de substitution indiqué par ? -
                        -
                      • Un intervalle de points de code Unicode indiqué par une valeur contenant un point d'interrogation. Ainsi, U+4?? signifie « tous les caractères contenus dans l'intervalle entre les points de code U+400 et U+4FF).
                        • -
                      -
                      • -
                    - -

                    Syntaxe formelle

                    +``` + +### Valeurs + +Une valeur de type `` peut se présenter de trois façons différentes : + +- un seul point de code + + - Ex : `U+26` + +- un intervalle spécifique de points de code + + - Ex : `U+0025-00FF` indique que l'intervalle contient tous les caractères contenus entre les points de code `U+0025` et `U+00FF` + +- un intervalle de substitution indiqué par `?` + + - Un intervalle de points de code Unicode indiqué par une valeur contenant un point d'interrogation. Ainsi, `U+4??` signifie « tous les caractères contenus dans l'intervalle entre les points de code `U+400` et `U+4FF`). + +### Syntaxe formelle {{csssyntax}} -

                    Exemples

                    +## Exemples -

                    Dans cet exemple, on crée un élément HTML {{HTMLElement("div")}} pour lequel on veut que l'esperluette soit mise en forme avec une police différente. Pour que le résultat soit apparent, on utilisera une police sans empattement pour le texte (Helvetica) et une police avec des empattements (Times New Roman) pour l'esperluette.

                    +Dans cet exemple, on crée un élément HTML {{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

                    +### CSS -

                    Dans la feuille de style CSS, on définit une règle {{cssxref("@font-face")}} qui n'inclue qu'un seul caractère. Cela signifie que seul ce caractère sera affiché avec cette police. On aurait également pu encadrer l'esperluette dans un élément {{HTMLElement("span")}} et appliquer une autre règle sur cet élément mais on aurait alors eu un balisage plus lourd et une règle spécifique en plus sur la feuille de style.

                    +Dans la feuille de style CSS, on définit une règle {{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 {
+```css
+@font-face {
   font-family: 'Ampersand';
   src: local('Times New Roman');
   unicode-range: U+26;
@@ -69,39 +65,29 @@ unicode-range: U+0025-00FF, U+4??;   /* plusieurs valeurs             */
 div {
   font-size: 4em;
   font-family: Ampersand, Helvetica, sans-serif;
-}
                    +} +``` -

                    HTML

                    +### HTML -
                    <div>Me & You = Us</div>
                    +```html +
                    Me & You = Us
                    +``` -

                    Résultat de référence (image statique)

                    +### Résultat de référence (image statique) -

                    +![](https://mdn.mozillademos.org/files/6043/Refresult.png) -

                    Résultat du navigateur

                    +### Résultat du navigateur -

                    {{EmbedLiveSample("Exemples", 500,104)}}

                    +{{EmbedLiveSample("Exemples", 500,104)}} -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}Définition initiale.
                    +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat("css.at-rules.font-face.unicode-range")}}

                    +{{Compat("css.at-rules.font-face.unicode-range")}} diff --git a/files/fr/web/css/@font-feature-values/index.md b/files/fr/web/css/@font-feature-values/index.md index cf733cde7b..6b1211f0f1 100644 --- a/files/fr/web/css/@font-feature-values/index.md +++ b/files/fr/web/css/@font-feature-values/index.md @@ -7,11 +7,12 @@ tags: - Règle @ translation_of: Web/CSS/@font-feature-values --- -
                    {{CSSRef}}
                    +{{CSSRef}} -

                    La règle @ @font-feature-values permet aux auteurs d'utiliser un nom personnalisé dans une règle utilisant la propriété {{cssxref("font-variant-alternates")}} afin de régler finement les caractéristiques OpenType. Elle permet de simplifier les feuilles de style lorsqu'on utilise plusieurs polices.

                    +La [règle @](/fr/docs/Web/CSS/At-rule) **`@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 {
+```css
+@font-feature-values Font One {
 /* On active la caractéristique nice-style
    sur Font One */
   @styleset {
@@ -32,58 +33,41 @@ translation_of: Web/CSS/@font-feature-values
 .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.

                    +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](/fr/docs/Web/CSS/At-rule "CSS/At-rule#Conditional_Group_Rules"). -

                    Syntaxe

                    +## Syntaxe -

                    Blocs liés aux caractéristiques

                    +### 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.
                    -
                    +- `@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

                    +### 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

                    - -
                      -
                    • La propriété {{cssxref("font-variant-alternates")}} qui utilise la valeur définie par cette règle @.
                      • -
                    +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{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 + +- La propriété {{cssxref("font-variant-alternates")}} qui utilise la valeur définie par cette règle @. diff --git a/files/fr/web/css/@import/index.md b/files/fr/web/css/@import/index.md index 41f8a5dd52..b2d3f300b4 100644 --- a/files/fr/web/css/@import/index.md +++ b/files/fr/web/css/@import/index.md @@ -7,73 +7,46 @@ tags: - Règle @ translation_of: Web/CSS/@import --- -
                    {{CSSRef}}
                    +{{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.

                    +La [règle @](/fr/docs/Web/CSS/Règles_@) **`@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](/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS) et ne peut donc pas être utilisée à l'intérieur [de groupe de règles conditionnelles](/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe). -
                    @import url("fineprint.css") print;
+```css
+@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.

                    +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](/fr/docs/Web/CSS/Media_queries) 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

                    +## Syntaxe -
                    @import url;
-@import url liste-requetes-media;
-
                    + @import url; + @import url liste-requetes-media; -

                    où on a :

                    +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.
                    -
                    +- `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](/fr/docs/Mozilla/Tech/XUL/Tutorial/The_Chrome_URL) pour plus d'informations. +- `liste-requetes-media` + - : Une liste de [requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries) 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

                    +### Syntaxe formelle {{csssyntax}} -

                    Spécifications

                    +## 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.
                    +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{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](/fr/docs/Web/CSS/@media#Types_de_médias). | +| {{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

                    +## Compatibilité des navigateurs -

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

                    +{{Compat("css.at-rules.import")}} diff --git a/files/fr/web/css/@keyframes/index.md b/files/fr/web/css/@keyframes/index.md index 9856d8f815..a2a57a15d6 100644 --- a/files/fr/web/css/@keyframes/index.md +++ b/files/fr/web/css/@keyframes/index.md @@ -7,11 +7,12 @@ tags: - Règle @ translation_of: Web/CSS/@keyframes --- -
                    {{CSSRef}}
                    +{{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.

                    +La [règle ](/fr/docs/Web/CSS/R%C3%A8gles_@)**`@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](/fr/docs/Web/CSS/CSS_Transitions). -
                    @keyframes slidein {
+```css
+@keyframes slidein {
   from {
     margin-left: 100%;
     width: 300%;
@@ -21,47 +22,50 @@ translation_of: Web/CSS/@keyframes
     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")}}.

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

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

                    +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

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

                    +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

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

                    +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

                    +### 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 :

                    +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 {
+```css
+@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%.

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

                    +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

                    +### `!important` dans une étape -

                    Les déclarations qui utilisent !important dans une description d'étape sont ignorées

                    +Les déclarations qui utilisent `!important` dans une description d'étape sont ignorées -
                    @keyframes important1 {
+```css
+@keyframes important1 {
   from { margin-top: 50px; }
   50%  { margin-top: 150px !important; } /* ignorée */
   to   { margin-top: 100px; }
@@ -73,32 +77,31 @@ translation_of: Web/CSS/@keyframes
   to   { margin-top: 150px !important; /* ignorée */
          margin-bottom: 50px; }
 }
-
                    +``` -

                    Syntaxe

                    +## Syntaxe -

                    Valeurs

                    +### 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.
                    -
                    +- `` + - : Un nom ({{cssxref("custom-ident")}}) qui permet d'identifier la liste d'étapes. Cela doit être [un identifiant valide selon la syntaxe CSS](/fr/docs/Web/CSS/custom-ident). +- `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

                    +### Syntaxe formelle {{csssyntax}} -

                    Exemples

                    +## Exemples -

                    CSS

                    +### CSS -
                    p {
+```css
+p {
   animation-duration: 25s;
   animation-name: slidein;
 }
@@ -118,52 +121,40 @@ translation_of: Web/CSS/@keyframes
     margin-left: 0%;
     width: 100%;
   }
-}
                    +} +``` -

                    HTML

                    +### HTML -
                    <p>
+```html
+
                    
   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

                    +### Résultat -

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

                    +{{EmbedLiveSample("Exemples","500","300")}} -

                    Plus d'exemples ?

                    +### Plus d'exemples ? -

                    Regardez Utiliser les animations CSS pour de plus amples exemples.

                    +Regardez [Utiliser les animations CSS](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS) pour de plus amples exemples. -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName('CSS3 Animations', '#keyframes', '@keyframes')}}{{Spec2('CSS3 Animations')}}Définition initiale.
                    +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('CSS3 Animations', '#keyframes', '@keyframes')}} | {{Spec2('CSS3 Animations')}} | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

                    +{{Compat("css.at-rules.keyframes")}} -

                    Voir aussi

                    +## Voir aussi - +- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS) +- {{domxref("AnimationEvent")}} diff --git a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md index 10c33af0f5..9ec09a1821 100644 --- a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md +++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md @@ -9,38 +9,33 @@ tags: - 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")}}
                    +{{cssref}} {{Non-standard_header}} {{Deprecated_header}}{{h3_gecko_minversion("-moz-device-pixel-ratio", "2.0")}} {{deprecated_inline("16")}} -

                    La caractéristique média -moz-device-pixel-ratio, associée à @media, est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.

                    +La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#ciblfer_des_caract%c3%a9ristiques_m%c3%a9dia) **`-moz-device-pixel-ratio`**, associée à [`@media`](/fr/docs/Web/CSS/@media "The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."), est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS. -
                    -

                    Attention : Ne pas utiliser cette fonctionnalité ! La caractéristique resolution et l'unité dppx permettent d'obtenir le même mécanisme.
                    -
                    - -moz-device-pixel-ratio peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et -webkit-device-pixel-ratio peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge dppx. Par exemple :

                    +> **Attention :** Ne pas utiliser cette fonctionnalité ! La caractéristique [`resolution`](/fr/docs/Web/CSS/@media/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 : +> +> ```css +> @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](https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/) pour les bonnes pratiques quant à la compatibilité de `resolution` et `dppx`. -
                    @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 */
                    +> **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`. -

                    Voir cet article du CSSWG pour les bonnes pratiques quant à la compatibilité de resolution et dppx.

                    -
                    +## Syntaxe -
                    -

                    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.

                    -
                    +- {{cssxref("<number>")}} + - : Le nombre de pixels physiques pour un pixel CSS. -

                    Syntaxe

                    +**Média :** {{cssxref("Media/Visual")}} +**Gestion des préfixes min/max :** Oui -
                    -
                    {{cssxref("<number>")}}
                    -
                    Le nombre de pixels physiques pour un pixel CSS.
                    -
                    +## Compatibilité des navigateurs -


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

                    - -

                    Compatibilité des navigateurs

                    - -

                    {{Compat("css.at-rules.media.-moz-device-pixel-ratio")}}

                    +{{Compat("css.at-rules.media.-moz-device-pixel-ratio")}} diff --git a/files/fr/web/css/@media/-ms-high-contrast/index.md b/files/fr/web/css/@media/-ms-high-contrast/index.md index 814c43f592..746cd6a87c 100644 --- a/files/fr/web/css/@media/-ms-high-contrast/index.md +++ b/files/fr/web/css/@media/-ms-high-contrast/index.md @@ -10,44 +10,37 @@ tags: translation_of: Web/CSS/@media/-ms-high-contrast original_slug: Web/CSS/-ms-high-contrast --- -
                    {{CSSRef}}{{Non-standard_header}}
                    +{{CSSRef}}{{Non-standard_header}} -

                    La caractéristique média -ms-high-contrast, relative à la règle @ @media, est une extension Microsoft qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.

                    +La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#cibler_des_caract%c3%a9ristiques_m%c3%a9dia) **`-ms-high-contrast`**, relative à la règle @ [`@media`](/fr/docs/Web/CSS/@media), est une [extension Microsoft ](/en-US/docs/Web/CSS/Microsoft_extensions)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.

                    +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

                    +## Syntaxe -

                    La caractéristique média -ms-high-contrast est définie avec une des valeurs définies ci-après.

                    +La caractéristique média **`-ms-high-contrast`** est définie avec une des valeurs définies ci-après. -

                    Valeurs

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

                    -
                    -
                    +- `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

                    +### Syntaxe formelle {{CSSSyntax}} -

                    Exemples

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

                    +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) {
+```css
+@media screen and (-ms-high-contrast: active) {
   /* Règles utilisées dans tous les cas si
      le contraste élevé est utilisé */
 }
@@ -57,16 +50,16 @@ original_slug: Web/CSS/-ms-high-contrast
 @media screen and (-ms-high-contrast: white-on-black) {
   div { background-image: url('image-wb.png'); }
 }
-
                    +``` -

                    Spécifications

                    +## Spécifications -

                    Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.

                    +Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification. -

                    Notes

                    +## Notes -

                    À partir de Microsoft Edge, -ms-high-contrast: none n'est plus pris en charge.

                    +À 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`** fonctionne avec la propriété {{cssxref("-ms-high-contrast-adjust")}}. -

                    La caractéristique média -ms-high-contrast a été introduite avec Windows 8.

                    +La caractéristique média **`-ms-high-contrast`** a été introduite avec Windows 8. diff --git a/files/fr/web/css/@media/-webkit-animation/index.md b/files/fr/web/css/@media/-webkit-animation/index.md index e283f61a62..d14a4b5549 100644 --- a/files/fr/web/css/@media/-webkit-animation/index.md +++ b/files/fr/web/css/@media/-webkit-animation/index.md @@ -8,29 +8,29 @@ tags: - Reference translation_of: Web/CSS/@media/-webkit-animation --- -
                    {{CSSRef}}{{Non-standard_header}}
                    +{{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")}}.

                    +**`-webkit-animation`** est une [caractéristique média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_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

                    +## Exemples -
                    @media (-webkit-animation) {
+```css
+@media (-webkit-animation) {
   /* CSS à utiliser si les animations sont prises en charge */
-}
                    +} +``` -

                    Spécifications

                    +## 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).

                    +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)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

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

                    Voir aussi

                    +## Voir aussi - +- {{cssxref("-webkit-transform-3d")}} +- {{cssxref("-webkit-transform-2d")}} +- {{cssxref("-webkit-transition")}} +- [Page de test sur quirksmode.org](http://www.quirksmode.org/css/tests/mediaqueries/animation.html) diff --git a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md index 3d96ba5464..023c96d1d2 100644 --- a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md +++ b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md @@ -8,30 +8,27 @@ tags: - Reference translation_of: Web/CSS/@media/-webkit-device-pixel-ratio --- -
                    {{CSSRef}}{{Non-standard_header}}
                    +{{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")}}.

                    +**`-webkit-device-pixel-ratio`** est une caractéristique média non-standard, alternative à la caractéristique média standard {{cssxref("@media/resolution","resolution")}}. -

                    Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter un pixel CSS (px). Bien que la valeur soit de type {{cssxref("<number>")}}, sans unité donc, l'unité implicite est dppx.

                    +Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter [un pixel CSS (`px`)](/fr/docs/Web/CSS/length#unités_de_longueur_absolues). Bien que la valeur soit de type {{cssxref("<number>")}}, sans unité donc, l'unité implicite est [`dppx`](/fr/docs/Web/CSS/resolution#unités). -
                    -

                    Attention : Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.

                    -
                    +> **Attention :** Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}. -

                    Syntaxe

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

                    +**`-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

                    +### 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.
                    -
                    +- {{cssxref("<number>")}} + - : Le nombre de pixels physiques pour chaque pixel ([`px`](/fr/docs/Web/CSS/length#unités_de_longueur_absolues)) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est [`dppx`](/fr/docs/Web/CSS/resolution#dppx). -

                    Implémentation

                    +## Implémentation -
                    /* Unité dppx implicite */
+```css
+/* Unité dppx implicite */
 @media (-webkit-min-device-pixel-ratio: 2) { ... }
 /* équivalent à */
 @media (min-resolution: 2dppx) { ... }
@@ -40,13 +37,14 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
 @media (-webkit-max-device-pixel-ratio: 2) { ... }
 /* équivalent à */
 @media (max-resolution: 2dppx) { ... }
-
                    +``` -

                    Exemples

                    +## Exemples -

                    CSS

                    +### CSS -
                    /* Résolution exacte */
+```css
+/* Résolution exacte */
 @media (-webkit-device-pixel-ratio: 1) {
   p {
     color: red;
@@ -65,52 +63,35 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
   p {
     background: yellow;
   }
-}
                    - -

                    HTML

                    - -
                    <p>Voici un test pour la densité de pixel de votre appareil.</p>
-
                    - -

                    Résultat

                    - -

                    {{EmbedLiveSample("Exemples")}}

                    - -

                    Spécifications

                    - - - - - - - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}{{Spec2('Compat')}}Définition initiale dans un standard.
                    Safari CSS Reference 'media query extensions'.Documentation non-officielle, non-standard.Documentation initiale.
                    - -

                    Compatibilité des navigateurs

                    - -

                    {{Compat("css.at-rules.media.-webkit-device-pixel-ratio")}}

                    - -

                    Voir aussi

                    - -
                      -
                    • {{cssxref("@media/resolution","resolution")}}
                      • -
                    • {{cssxref("-webkit-transition")}}
                      • -
                    • {{cssxref("-webkit-transform-3d")}}
                      • -
                    • {{cssxref("-webkit-transform-2d")}}
                      • -
                    • {{cssxref("-webkit-animation")}}
                      • -
                    • Article du W3C pour éviter le préfixe
                      • -
                    +} +``` + +### HTML + +```html +

                    Voici un test pour la densité de pixel de votre appareil.

                    +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | ------------------------------------- | +| {{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'.](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3) | Documentation non-officielle, non-standard. | Documentation initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.at-rules.media.-webkit-device-pixel-ratio")}} + +## Voir aussi + +- {{cssxref("@media/resolution","resolution")}} +- {{cssxref("-webkit-transition")}} +- {{cssxref("-webkit-transform-3d")}} +- {{cssxref("-webkit-transform-2d")}} +- {{cssxref("-webkit-animation")}} +- [Article du W3C pour éviter le préfixe](https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/) diff --git a/files/fr/web/css/@media/-webkit-transform-2d/index.md b/files/fr/web/css/@media/-webkit-transform-2d/index.md index 94ab2e5e51..90a9cf0635 100644 --- a/files/fr/web/css/@media/-webkit-transform-2d/index.md +++ b/files/fr/web/css/@media/-webkit-transform-2d/index.md @@ -8,27 +8,23 @@ tags: - Reference translation_of: Web/CSS/@media/-webkit-transform-2d --- -
                    {{CSSRef}}{{Non-standard_header}}
                    +{{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.

                    +**`-webkit-transform-2d`** est une [caractéristique média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_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.

                    -
                    +> **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

                    +## 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) .

                    +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)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3) . -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat("css.at-rules.media.-webkit-transform-2d")}}

                    +{{Compat("css.at-rules.media.-webkit-transform-2d")}} -

                    Voir aussi

                    +## Voir aussi - +- {{cssxref("-webkit-transition")}} +- {{cssxref("-webkit-transform-3d")}} +- {{cssxref("-webkit-animation")}} +- [Page de test sur quirksmode.org](http://www.quirksmode.org/css/tests/mediaqueries/animation.html) diff --git a/files/fr/web/css/@media/-webkit-transform-3d/index.md b/files/fr/web/css/@media/-webkit-transform-3d/index.md index 887649670d..e6f8af8642 100644 --- a/files/fr/web/css/@media/-webkit-transform-3d/index.md +++ b/files/fr/web/css/@media/-webkit-transform-3d/index.md @@ -8,17 +8,16 @@ tags: - Reference translation_of: Web/CSS/@media/-webkit-transform-3d --- -
                    {{CSSRef}}{{Non-standard_header}}
                    +{{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.

                    +**`-webkit-transform-3d`** est une [caractéristique média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_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.

                    -
                    +> **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

                    +## Exmple -
                    @media (-webkit-transform-3d) {
+```css
+@media (-webkit-transform-3d) {
   .toto {
     transform-style: preserve-3d;
   }
@@ -28,41 +27,23 @@ translation_of: Web/CSS/@media/-webkit-transform-3d
   .toto {
     transform-style: preserve-3d;
   }
-}
                    +} +``` -

                    Spécifications

                    +## 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.
                    +| Spécification | État | Commentaires | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ------------------------------------- | +| {{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.](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3) | Documentation non-officielle, non-standard. | Documentation initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat("css.at-rules.media.-webkit-transform-3d")}}

                    +{{Compat("css.at-rules.media.-webkit-transform-3d")}} -

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref("@media/-webkit-transform-2d", "-webkit-transform-2d")}}
                      • -
                    • {{cssxref("@media/-webkit-transition", "-webkit-transition")}}
                      • -
                    • {{cssxref("@media/-webkit-animation", "-webkit-animation")}}
                      • -
                    • Page de test sur quirksmode.org
                      • -
                    +- {{cssxref("@media/-webkit-transform-2d", "-webkit-transform-2d")}} +- {{cssxref("@media/-webkit-transition", "-webkit-transition")}} +- {{cssxref("@media/-webkit-animation", "-webkit-animation")}} +- [Page de test sur quirksmode.org](http://www.quirksmode.org/css/tests/mediaqueries/animation.html) diff --git a/files/fr/web/css/@media/-webkit-transition/index.md b/files/fr/web/css/@media/-webkit-transition/index.md index 4a408bf765..bc50ddcdbb 100644 --- a/files/fr/web/css/@media/-webkit-transition/index.md +++ b/files/fr/web/css/@media/-webkit-transition/index.md @@ -9,41 +9,39 @@ tags: - Reference translation_of: Web/CSS/@media/-webkit-transition --- -
                    {{CSSRef}}{{Non-standard_header}}{{obsolete_header}}
                    +{{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.

                    +**`-webkit-transition`** est une [caractéristique média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_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")}}.

                    -
                    +> **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

                    +## 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")}} :

                    +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) {
+```css
+@supports(transition: initial) {
   /* Les règles CSS à utiliser si   */
   /* les transitions sont prises en */
   /* charge. */
-}
                    +} +``` -

                    Spécifications

                    +## 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).

                    +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)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

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

                    Voir aussi

                    +## Voir aussi - +- [Utiliser les media queries](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries) +- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS) +- {{cssxref("@supports")}} +- {{cssxref("transition")}} +- {{cssxref("-webkit-transform-3d")}} +- {{cssxref("-webkit-transform-2d")}} +- {{cssxref("-webkit-animation")}} +- [Page de test sur quirksmode.org](http://www.quirksmode.org/css/tests/mediaqueries/animation.html) diff --git a/files/fr/web/css/@media/any-hover/index.md b/files/fr/web/css/@media/any-hover/index.md index 27509c77c4..6eba582600 100644 --- a/files/fr/web/css/@media/any-hover/index.md +++ b/files/fr/web/css/@media/any-hover/index.md @@ -7,64 +7,51 @@ tags: - Reference translation_of: Web/CSS/@media/any-hover --- -
                    {{CSSRef}}
                    +{{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.

                    +**`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

                    +## Syntaxe -

                    La caractéristique any-hover est définie avec un mot-clé parmi ceux de la liste ci-après.

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

                    +## Exemples -

                    HTML

                    +### HTML -
                    <a href="#">Essayez de me survoler !</a>
                    +```html +Essayez de me survoler ! +``` -

                    CSS

                    +### CSS -
                    @media (any-hover: hover) {
+```css
+@media (any-hover: hover) {
   a:hover {
     background: yellow;
   }
-}
                    +} +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples")}}

                    +{{EmbedLiveSample("Exemples")}} -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
                    +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}} | {{Spec2('CSS4 Media Queries')}} | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

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

                    Voir aussi

                    +## Voir aussi - +- [La caractéristique média `hover`](/fr/docs/Web/CSS/@media/hover) diff --git a/files/fr/web/css/@media/any-pointer/index.md b/files/fr/web/css/@media/any-pointer/index.md index a2ef25ec7c..bff694bf34 100644 --- a/files/fr/web/css/@media/any-pointer/index.md +++ b/files/fr/web/css/@media/any-pointer/index.md @@ -7,43 +7,40 @@ tags: - Reference translation_of: Web/CSS/@media/any-pointer --- -
                    {{CSSRef}}
                    +{{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.

                    +**`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.

                    -
                    +> **Note :** Si on souhaite tester la précision du mécanisme de pointage _principal_, on pourra utiliser la caractéristique [`pointer`](/fr/docs/Web/CSS/@media/pointer) à la place. -

                    Syntaxe

                    +## Syntaxe -

                    La caractéristique any-pointer est définie comme un mot-clé parmi ceux de la liste ci-après.

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

                    -
                    +> **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

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

                    +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

                    +### HTML -
                    <input id="test" type="checkbox" />
-<label for="test">Coucou !</label>
                    +```html + + +``` -

                    CSS

                    +### CSS -
                    input[type="checkbox"]:checked {
+```css
+input[type="checkbox"]:checked {
   background: gray;
 }
 
@@ -67,37 +64,23 @@ translation_of: Web/CSS/@media/any-pointer
     height: 30px;
     border: 2px solid red;
   }
-}
                    +} +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples")}}

                    +{{EmbedLiveSample("Exemples")}} -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
                    +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}} | {{Spec2('CSS4 Media Queries')}} | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

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

                    Voir aussi

                    +## Voir aussi - +- [La caractéristique média `pointer`](/fr/docs/Web/CSS/@media/pointer) diff --git a/files/fr/web/css/@media/aspect-ratio/index.md b/files/fr/web/css/@media/aspect-ratio/index.md index 0999d4619e..8c2c20469b 100644 --- a/files/fr/web/css/@media/aspect-ratio/index.md +++ b/files/fr/web/css/@media/aspect-ratio/index.md @@ -7,60 +7,44 @@ tags: - Reference translation_of: Web/CSS/@media/aspect-ratio --- -
                    {{CSSRef}}
                    +{{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).

                    +**`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

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

                    +La caractéristique `aspect-ratio` est définie avec un ratio (type CSS {{cssxref("<ratio>")}}) qui représente le ratio entre la largeur et la hauteur de la zone d'affichage . C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-aspect-ratio`** et **`max-aspect-ratio`** afin de cibler des règles CSS en fonction d'une valeur minimale ou maximale. -

                    Exemples

                    +## Exemples -

                    Exemples de valeurs pour aspect-ratio

                    +### Exemples de valeurs pour aspect-ratio -
                    +```css
 aspect-ratio: 1 / 1;
 aspect-ratio: 16 / 9;
-
                    +``` -

                    Correspondance entre width et height et aspect-ratio

                    +## Correspondance entre width et height et aspect-ratio -

                    Les navigateurs ont ajouté une propriété aspect-ratio interne qui s'applique aux éléments remplacés et aux autres éléments associés qui acceptent des attributs width et height. Celle-ci apparaît dans la feuille de style interne de l'agent utilisateur.

                    +Les navigateurs ont ajouté une propriété `aspect-ratio` interne qui s'applique aux [éléments remplacés](/fr/docs/Web/CSS/Replaced_element) et aux autres éléments associés qui acceptent des attributs `width` et `height`. Celle-ci apparaît dans la feuille de style interne de l'agent utilisateur. -

                    Pour Firefox, la feuille de style interne ressemble à :

                    +Pour Firefox, la feuille de style interne ressemble à : -
                    +```css
 img, input[type="image"], video, embed, iframe, marquee, object, table {
   aspect-ratio: attr(width) / attr(height);
-}
                    +} +``` -

                    Pour en savoir plus, vous pouvez consulter Définir la hauteur et largeur des images redevient important (en anglais).

                    +Pour en savoir plus, vous pouvez consulter [Définir la hauteur et largeur des images redevient important (en anglais)](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/). -

                    Spécifications

                    +## 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.
                    +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{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

                    +## Compatibilité des navigateurs -

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

                    +{{Compat("css.at-rules.media.aspect-ratio")}} diff --git a/files/fr/web/css/@media/aural/index.md b/files/fr/web/css/@media/aural/index.md index 3de1642213..af70dab5b3 100644 --- a/files/fr/web/css/@media/aural/index.md +++ b/files/fr/web/css/@media/aural/index.md @@ -8,35 +8,18 @@ tags: - Reference translation_of: Web/CSS/@media/aural --- -
                    {{CSSRef}}{{obsolete_header("6.0")}} {{deprecated_header}}
                    +{{CSSRef}}{{obsolete_header("6.0")}} {{deprecated_header}} -

                    Un groupe de médias défini par les standards CSS.

                    +Un [groupe de médias](/fr/docs/Web/CSS/@media#Groupes_de_médias) défini par les standards [CSS](/fr/docs/Web/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.

                    -
                    +> **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](/fr/docs/Web/CSS/@media#speech) qui le remplace. -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    CSS Level 2DépréciationDéfinition initiale.
                    +| Spécification | État | Commentaires | +| ---------------------------------------------------------- | ------------ | -------------------- | +| [CSS Level 2](https://www.w3.org/TR/CSS2/aural.html#q19.0) | Dépréciation | Définition initiale. | -

                    Voir aussi

                    +## Voir aussi - +- [@media](/fr/docs/Web/CSS/@media) diff --git a/files/fr/web/css/@media/color-gamut/index.md b/files/fr/web/css/@media/color-gamut/index.md index e50d76749f..2437d4344d 100644 --- a/files/fr/web/css/@media/color-gamut/index.md +++ b/files/fr/web/css/@media/color-gamut/index.md @@ -7,60 +7,49 @@ tags: - Reference translation_of: Web/CSS/@media/color-gamut --- -
                    {{CSSRef}}
                    +{{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.

                    +**`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

                    +## Syntaxe -

                    La caractéristique color-gamut est définie avec un mot-clé parmi ceux de la liste ci-après.

                    +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.
                    -
                    +- `srgb` + - : L'appareil d'affichage prend approximativement en charge l'espace de couleurs [sRGB](https://en.wikipedia.org/wiki/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](https://en.wikipedia.org/wiki/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](https://en.wikipedia.org/wiki/Rec._2020) ou un espace plus grand. L'espace rec2020 est plus grand (et inclut) l'espace p3. -

                    Exemples

                    +## Exemples -

                    HTML

                    +### HTML -
                    <p>Un test simple.</p>
                    +```html +

                    Un test simple.

                    +``` -

                    CSS

                    +### CSS -
                    @media (color-gamut: srgb) {
+```css
+@media (color-gamut: srgb) {
   p {
     background: #f4ae8a;
   }
-}
                    +} +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples")}}

                    +{{EmbedLiveSample("Exemples")}} -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName('CSS4 Media Queries', '#color-gamut', 'color-gamut')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
                    +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS4 Media Queries', '#color-gamut', 'color-gamut')}} | {{Spec2('CSS4 Media Queries')}} | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

                    +{{Compat("css.at-rules.media.color-gamut")}} diff --git a/files/fr/web/css/@media/color-index/index.md b/files/fr/web/css/@media/color-index/index.md index d50db80028..0224cbe792 100644 --- a/files/fr/web/css/@media/color-index/index.md +++ b/files/fr/web/css/@media/color-index/index.md @@ -7,26 +7,28 @@ tags: - Reference translation_of: Web/CSS/@media/color-index --- -
                    {{CSSRef}}
                    +{{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.

                    +**`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

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

                    +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

                    +## Exemples -

                    Exemple simple

                    +### Exemple simple -

                    HTML

                    +#### HTML -
                    <p>Un test simple.</p>
-
                    +```html +

                    Un test simple.

                    +``` -

                    CSS

                    +#### CSS -
                    p {
+```css
+p {
   color: black;
 }
 
@@ -40,43 +42,29 @@ translation_of: Web/CSS/@media/color-index
   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")}}

                    +} +``` + +#### 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. + +```html + + +``` + +## Spécifications + +| Spécification | Etat | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------- | +| {{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.md b/files/fr/web/css/@media/color/index.md index 166d7849d0..66676f58f2 100644 --- a/files/fr/web/css/@media/color/index.md +++ b/files/fr/web/css/@media/color/index.md @@ -7,32 +7,32 @@ tags: - Reference translation_of: Web/CSS/@media/color --- -
                    {{CSSRef}}
                    +{{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.

                    +**`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

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

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

                    -
                    +> **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

                    +## Exemples -

                    HTML

                    +### HTML -
                    <p>
+```html
+
                    
    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

                    +### CSS -
                    p {
+```css
+p {
   color: black;
 }
 
@@ -49,44 +49,26 @@ translation_of: Web/CSS/@media/color
   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

                    - - +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------- | +| {{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 + +- [Appliquer des couleurs HTML à CSS](/fr/docs/Web/HTML/Applying_color) +- La propriété CSS {{cssxref("color")}} +- Le type de donnée CSS {{cssxref("<color>")}} diff --git a/files/fr/web/css/@media/device-aspect-ratio/index.md b/files/fr/web/css/@media/device-aspect-ratio/index.md index f9054e3aa9..9922175c94 100644 --- a/files/fr/web/css/@media/device-aspect-ratio/index.md +++ b/files/fr/web/css/@media/device-aspect-ratio/index.md @@ -8,17 +8,18 @@ tags: - Reference translation_of: Web/CSS/@media/device-aspect-ratio --- -
                    {{CSSRef}}{{deprecated_header}}
                    +{{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.

                    +**`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

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

                    +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

                    +## Exemples -
                    article {
+```css
+article {
   padding: 1rem;
 }
 
@@ -26,32 +27,16 @@ translation_of: Web/CSS/@media/device-aspect-ratio
   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")}}

                    +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------- | +| {{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.md b/files/fr/web/css/@media/device-height/index.md index 3fdbf2c38f..117e647809 100644 --- a/files/fr/web/css/@media/device-height/index.md +++ b/files/fr/web/css/@media/device-height/index.md @@ -8,44 +8,29 @@ tags: - Reference translation_of: Web/CSS/@media/device-height --- -
                    {{CSSRef}}{{deprecated_header}}
                    +{{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.

                    +**`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

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

                    +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

                    +## Exemples -

                    Ce fragment HTML applique une feuille de style spécifique pour les appareils dont la hauteur est inférieure à 800 pixels.

                    +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" />
                    +```html + +``` -

                    Spécifications

                    +## 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.
                    +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------- | +| {{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

                    +## Compatibilité des navigateurs -

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

                    +{{Compat("css.at-rules.media.device-height")}} diff --git a/files/fr/web/css/@media/device-width/index.md b/files/fr/web/css/@media/device-width/index.md index 54e3589e24..38b3cf5547 100644 --- a/files/fr/web/css/@media/device-width/index.md +++ b/files/fr/web/css/@media/device-width/index.md @@ -8,44 +8,29 @@ tags: - Reference translation_of: Web/CSS/@media/device-width --- -
                    {{CSSRef}}{{deprecated_header}}
                    +{{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.

                    +**`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

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

                    +`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

                    +## Exemples -

                    Ce code HTML applique une feuille de style pour pour les appareils plus étroits que 800 pixels.

                    +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" />
                    +```html + +``` -

                    Spécifications

                    +## 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.
                    +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------- | +| {{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

                    +## Compatibilité des navigateurs -

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

                    +{{Compat("css.at-rules.media.device-width")}} diff --git a/files/fr/web/css/@media/display-mode/index.md b/files/fr/web/css/@media/display-mode/index.md index 0e32d83a0b..addb021017 100644 --- a/files/fr/web/css/@media/display-mode/index.md +++ b/files/fr/web/css/@media/display-mode/index.md @@ -7,76 +7,40 @@ tags: - Reference translation_of: Web/CSS/@media/display-mode --- -
                    {{CSSRef}}
                    +{{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.

                    +**`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).

                    +Cette caractéristique correspond à la propriété [`display` ](/fr/docs/Web/Manifest#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

                    +## Syntaxe -

                    La caractéristique display-mode est définie avec un mot-clé parmi ceux du tableau ci-après.

                    +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
                    +| Valeur (mode d'affichage) | Description | Mode d'affichage utilisé en recours | +| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | +| `fullscreen` | Toute la zone d'affichage est utilisée et aucun autre élément d'interface utilisateur (_chrome_) n'est affiché. | `standalone` | +| `standalone` | L'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-ui` | L'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` | +| `browser` | L'application ouvre un nouvel onglet dans le navigateur ou une nouvelle fenêtre selon le navigateur et la plateforme utilisés. | Aucun | -

                    Exemples

                    +## Exemples -
                    @media all and (display-mode: fullscreen) {
+```css
+@media all and (display-mode: fullscreen) {
   body {
     margin: 0;
     border: 5px solid black;
   }
-}
                    +} +``` -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}{{Spec2('Manifest')}}Définition initiale.
                    +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}} | {{Spec2('Manifest')}} | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

                    +{{Compat("css.at-rules.media.display-mode")}} diff --git a/files/fr/web/css/@media/forced-colors/index.md b/files/fr/web/css/@media/forced-colors/index.md index ab75ac487c..cc33f5cca5 100644 --- a/files/fr/web/css/@media/forced-colors/index.md +++ b/files/fr/web/css/@media/forced-colors/index.md @@ -7,78 +7,59 @@ tags: - Reference translation_of: Web/CSS/@media/forced-colors --- -
                    {{CSSRef}}{{SeeCompatTable}}{{draft}}
                    +{{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.

                    +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

                    -
                    +> **Note :** Cette fonctionnalité n'est pas encore implémentée par aucun agent utilisateur -

                    Valeurs

                    +## 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.
                    -
                    +- `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

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

                    +À 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

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

                    +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

                    +### HTML -
                    <div class="colors">quelques couleurs étranges</div>
-
                    +
                    quelques couleurs étranges
                    -

                    CSS

                    +### CSS -
                    .colors {
-  background-color: red;
-  color: grey;
-}
+    .colors {
+      background-color: red;
+      color: grey;
+    }
 
-@media (forced-colors: active) {
-  .colors {
-    background-color: white;
-    color: black;
-  }
-}
-
                    + @media (forced-colors: active) { + .colors { + background-color: white; + color: black; + } + } -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples")}}

                    +{{EmbedLiveSample("Exemples")}} -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName('CSS5 Media Queries', '#forced-colors', 'forced-colors')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
                    +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS5 Media Queries', '#forced-colors', 'forced-colors')}} | {{Spec2('CSS5 Media Queries')}} | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat("javascript.builtins.Array.sort")}}

                    +{{Compat("javascript.builtins.Array.sort")}} -

                    Voir aussi

                    +## Voir aussi -

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

                    +{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}} diff --git a/files/fr/web/css/@media/grid/index.md b/files/fr/web/css/@media/grid/index.md index f0ba7043ff..060d9b8156 100644 --- a/files/fr/web/css/@media/grid/index.md +++ b/files/fr/web/css/@media/grid/index.md @@ -7,27 +7,30 @@ tags: - Reference translation_of: Web/CSS/@media/grid --- -
                    {{CSSRef}}
                    +{{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 »).

                    +**`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.

                    +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

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

                    +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

                    +## Exemples -

                    HTML

                    +### 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>
                    +```html +

                    Impossible de savoir si l'affichage fonctionne sur une grille. :-(

                    +

                    L'appareil dispose d'un affichage matriciel.

                    +

                    L'appareil utilise une grille pour l'affichage !

                    +``` -

                    CSS

                    +### CSS -
                    :not(.unknown) {
+```css
+:not(.unknown) {
   color: lightgray;
 }
 
@@ -51,31 +54,19 @@ translation_of: Web/CSS/@media/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")}}

                    +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{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.md b/files/fr/web/css/@media/height/index.md index 6e88c3a451..9e51d9bd6e 100644 --- a/files/fr/web/css/@media/height/index.md +++ b/files/fr/web/css/@media/height/index.md @@ -7,26 +7,29 @@ tags: - Reference translation_of: Web/CSS/@media/height --- -
                    {{CSSRef}}
                    +{{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).

                    +**`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

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

                    +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

                    +## Exemples -

                    HTML

                    +### HTML -
                    <div>
+```html
+
                    
   Surveillez cet élément lors du
   redimensionnement de la zone d'affichage.
-</div>
                    + +``` -

                    CSS

                    +### CSS -
                    /* Hauteur exacte */
+```css
+/* Hauteur exacte */
 @media (height: 360px) {
   div {
     color: red;
@@ -46,36 +49,19 @@ translation_of: Web/CSS/@media/height
     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")}}

                    +``` + +### Résultat + +{{EmbedLiveSample('Exemples','90%')}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------- | +| {{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.md b/files/fr/web/css/@media/hover/index.md index 2ca99b76f9..5f73a6bf83 100644 --- a/files/fr/web/css/@media/hover/index.md +++ b/files/fr/web/css/@media/hover/index.md @@ -7,64 +7,51 @@ tags: - Reference translation_of: Web/CSS/@media/hover --- -
                    {{CSSRef}}
                    +{{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.

                    +**`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

                    +## Syntaxe -

                    La caractéristique hover est définie avec un mot-clé parmi ceux de la liste suivant :

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

                    +## Exemples -

                    HTML

                    +### HTML -
                    <a href="#">Essayez de me survoler !</a>
                    +```html +Essayez de me survoler ! +``` -

                    CSS

                    +### CSS -
                    @media (hover: hover) {
+```css
+@media (hover: hover) {
   a:hover {
     background: yellow;
   }
-}
                    +} +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples")}}

                    +{{EmbedLiveSample("Exemples")}} -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName('CSS4 Media Queries', '#hover', 'hover')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
                    +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{SpecName('CSS4 Media Queries', '#hover', 'hover')}} | {{Spec2('CSS4 Media Queries')}} | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

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

                    Voir aussi

                    +## Voir aussi - +- [La caractéristique média `any-hover`](/fr/docs/Web/CSS/@media/any-hover) diff --git a/files/fr/web/css/@media/index.md b/files/fr/web/css/@media/index.md index bc94ddbaf3..141f634f08 100644 --- a/files/fr/web/css/@media/index.md +++ b/files/fr/web/css/@media/index.md @@ -1,22 +1,21 @@ --- title: '@media' slug: Web/CSS/@media -browser-compat: css.at-rules.media translation_of: Web/CSS/@media +browser-compat: css.at-rules.media --- -
                    {{CSSRef}}
                    +{{CSSRef}} -

                    La règle @ @media permet d'appliquer une partie d'une feuille de styles en fonction du résultat d'une ou plusieurs requêtes média (media queries). Grâce à cette règle, on peut indiquer une requête média et un ensemble de règles CSS qui s'appliquent uniquement si la requête média est vérifiée pour l'appareil, le contexte avec lequel le contenu est consulté.

                    +La [règle @](/fr/docs/Web/CSS/At-rule) **`@media`** permet d'appliquer une partie d'une feuille de styles en fonction du résultat d'une ou plusieurs [requêtes média (media queries)](/fr/docs/Web/CSS/Media_Queries). Grâce à cette règle, on peut indiquer une requête média et un ensemble de règles CSS qui s'appliquent uniquement si la requête média est vérifiée pour l'appareil, le contexte avec lequel le contenu est consulté. -
                    -

                    Note : Il est possible de manipuler la règle @ @media via le CSSOM (et JavaScript) grâce à l'interface CSSMediaRule.

                    -
                    +> **Note :** Il est possible de manipuler la règle @ `@media` via le CSSOM (et JavaScript) grâce à l'interface [`CSSMediaRule`](/fr/docs/Web/API/CSSMediaRule). -

                    Syntaxe

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

                    +Une requête média (type ``) 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](/fr/docs/Web/CSS/At-rule#les_r%c3%a8gles_de_groupe_conditionnelles). -
                    /* Au niveau le plus haut du code */
+```css
+/* Au niveau le plus haut du code */
 @media screen and (min-width: 900px) {
   article {
     padding: 1rem 3rem;
@@ -31,41 +30,42 @@ translation_of: Web/CSS/@media
     }
   }
 }
-
                    +``` -

                    Pour plus d'informations sur la syntaxe des requêtes média, voir Utiliser les requêtes média.

                    +Pour plus d'informations sur la syntaxe des requêtes média, voir [Utiliser les requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries). -

                    Description

                    +## Description -

                    Types de média

                    +### Types de média -

                    {{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_types")}}

                    +{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_types")}} -

                    Caractéristiques de média

                    +### Caractéristiques de média -

                    {{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_features")}}

                    +{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_features")}} -

                    Accessibilité

                    +## Accessibilité -

                    Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité em comme valeur pour les requêtes média lorsqu'il faut utiliser une longueur (<length>).

                    +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`](/fr/docs/Web/CSS/length#em) comme valeur pour [les requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries) lorsqu'il faut utiliser une longueur ([``](/fr/docs/Web/CSS/)). -

                    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.

                    +Les unités [`em`](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille) et [`px`](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille) sont toutes les deux valides mais [`em`](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille) 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.

                    +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](/fr/docs/Web/CSS/@media/prefers-reduced-motion). -

                    Sécurité

                    +## Sécurité -

                    Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon non-désirée.

                    +Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon non-désirée. -

                    Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.

                    +Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage. -

                    Syntaxe formelle

                    +### Syntaxe formelle -

                    {{csssyntax}}

                    +{{csssyntax}} -

                    Exemples

                    +## Exemples -
                    @media print {
+```css
+@media print {
   body { font-size: 10pt }
 }
 @media screen {
@@ -81,32 +81,31 @@ translation_of: Web/CSS/@media
   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 :

                    +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) {
+```css
+@media (height > 600px) {
   body { line-height: 1.4; }
 }
 
-@media (400px <= width <= 700px) {
+@media (400px <= width <= 700px) {
   body { line-height: 1.4; }
 }
-
                    +``` -

                    Pour plus d'exemples, voir Utiliser les requêtes média.

                    +Pour plus d'exemples, voir [Utiliser les requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries). -

                    Spécifications

                    +## Spécifications -

                    {{Specifications}}

                    +{{Specifications}} -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat}}

                    +{{Compat}} -

                    Voir aussi

                    +## Voir aussi - +- [Utiliser les requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries) +- L'interface CSSOM [`CSSMediaRule`](/fr/docs/Web/API/CSSMediaRule) qui est associée avec cette règle @. diff --git a/files/fr/web/css/@media/inverted-colors/index.md b/files/fr/web/css/@media/inverted-colors/index.md index 9d1983d497..a91cc83a32 100644 --- a/files/fr/web/css/@media/inverted-colors/index.md +++ b/files/fr/web/css/@media/inverted-colors/index.md @@ -7,39 +7,40 @@ tags: - Reference translation_of: Web/CSS/@media/inverted-colors --- -
                    {{CSSRef}}
                    +{{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.

                    +**`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

                    +## Syntaxe -

                    Cette caractéristique est définie avec un des mots-clés parmi ceux qui suivent :

                    +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.
                    -
                    +- `none` + - : Les couleurs sont affichées normalement. +- `inverted` + - : Les couleurs des pixels de la zone affichée ont été inversées. -

                    Exemples

                    +## Exemples -

                    HTML

                    +### HTML -
                    <p>
+```html
+
                    
   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

                    +### CSS -
                    p {
+```css
+p {
   color: gray;
 }
 
@@ -55,36 +56,20 @@ translation_of: Web/CSS/@media/inverted-colors
     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")}}

                    +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------- | +| {{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.md b/files/fr/web/css/@media/monochrome/index.md index d52c7db54d..5d28532ff3 100644 --- a/files/fr/web/css/@media/monochrome/index.md +++ b/files/fr/web/css/@media/monochrome/index.md @@ -7,30 +7,33 @@ tags: - Reference translation_of: Web/CSS/@media/monochrome --- -
                    {{CSSRef}}
                    +{{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.

                    +**`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

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

                    +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

                    +## Exemples -

                    HTML

                    +### HTML -
                    <p class="mono">
+```html
+
                    
   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

                    +### CSS -
                    p {
+```css
+p {
   display: none;
 }
 
@@ -48,36 +51,20 @@ translation_of: Web/CSS/@media/monochrome
     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")}}

                    +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------- | +| {{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.md b/files/fr/web/css/@media/orientation/index.md index 53208a4b34..d63cc3c6be 100644 --- a/files/fr/web/css/@media/orientation/index.md +++ b/files/fr/web/css/@media/orientation/index.md @@ -7,33 +7,33 @@ tags: - Reference translation_of: Web/CSS/@media/orientation --- -
                    {{CSSRef}}
                    +{{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).

                    +**`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

                    +## Syntaxe -

                    La caractéristique orientation se définit grâce à l'un des mots-clés suivants :

                    +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).
                    -
                    +- `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

                    +## Exemples -

                    HTML

                    +### HTML -
                    <div>Boîte 1</div>
-<div>Boîte 2</div>
-<div>Boîte 3</div>
-
                    +```html +
                    Boîte 1
                    +
                    Boîte 2
                    +
                    Boîte 3
                    +``` -

                    CSS

                    +### CSS -
                    body {
+```css
+body {
   display: flex;
 }
 
@@ -51,36 +51,20 @@ div {
   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")}}

                    +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{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.md b/files/fr/web/css/@media/overflow-block/index.md index 0ba8f3cf08..d5566d992e 100644 --- a/files/fr/web/css/@media/overflow-block/index.md +++ b/files/fr/web/css/@media/overflow-block/index.md @@ -7,63 +7,51 @@ tags: - Reference translation_of: Web/CSS/@media/overflow-block --- -
                    {{CSSRef}}
                    +{{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).

                    +**`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

                    +## Syntaxe -

                    La caractéristique overflow-block est définie avec un mot-clé de la liste suivante :

                    +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).
                    -
                    +- `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

                    +## Exemples -

                    HTML

                    +### 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>
-
                    +```html +

                    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.

                    +``` -

                    CSS

                    +### CSS -
                    @media (overflow-block: scroll) {
+```css
+@media (overflow-block: scroll) {
   p {
     color: red;
   }
-}
                    +} +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples")}}

                    +{{EmbedLiveSample("Exemples")}} -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName('CSS4 Media Queries', '#mf-overflow-block', 'overflow-block')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
                    +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS4 Media Queries', '#mf-overflow-block', 'overflow-block')}} | {{Spec2('CSS4 Media Queries')}} | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

                    +{{Compat("css.at-rules.media.overflow-block")}} diff --git a/files/fr/web/css/@media/overflow-inline/index.md b/files/fr/web/css/@media/overflow-inline/index.md index 142a85420a..421b5dd2c1 100644 --- a/files/fr/web/css/@media/overflow-inline/index.md +++ b/files/fr/web/css/@media/overflow-inline/index.md @@ -7,26 +7,25 @@ tags: - Reference translation_of: Web/CSS/@media/overflow-inline --- -
                    {{CSSRef}}
                    +{{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).

                    +**`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

                    +## Syntaxe -

                    La caractéristique overflow-inline est définit avec un mot-clé parmi ceux de la liste suivante :

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

                    +## Exemples -

                    HTML

                    +### HTML -
                    <p>
+```html
+
                    
   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
@@ -37,40 +36,29 @@ translation_of: Web/CSS/@media/overflow-inline
   massa et feugiat. Integer rutrum ullamcorper eleifend.
   Proin sit amet tincidunt risus. Sed nec augue congue eros
   accumsan tincidunt sed eget ex.
-</p>
-
                    +

                    +``` -

                    CSS

                    +### CSS -
                    @media (overflow-inline: scroll) {
+```css
+@media (overflow-inline: scroll) {
   p {
     color: red;
   }
-}
                    +} +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples")}}

                    +{{EmbedLiveSample("Exemples")}} -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName('CSS4 Media Queries', '#mf-overflow-inline', 'overflow-inline')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
                    +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS4 Media Queries', '#mf-overflow-inline', 'overflow-inline')}} | {{Spec2('CSS4 Media Queries')}} | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

                    +{{Compat("css.at-rules.media.overflow-inline")}} diff --git a/files/fr/web/css/@media/pointer/index.md b/files/fr/web/css/@media/pointer/index.md index 6fecdf4b85..9af141f6f0 100644 --- a/files/fr/web/css/@media/pointer/index.md +++ b/files/fr/web/css/@media/pointer/index.md @@ -7,39 +7,38 @@ tags: - Reference translation_of: Web/CSS/@media/pointer --- -
                    {{CSSRef}}
                    +{{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.

                    +**`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.

                    -
                    +> **Note :** Si on souhaite tester la précision de n'importe quel dispositif de pointage, on utilisera plutôt la caractéristique [`any-pointer`](/fr/docs/Web/CSS/@media/any-pointer). -

                    Syntaxe

                    +## Syntaxe -

                    Cette caractéristique est définie avec un mot-clé parmi les suivants :

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

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

                    +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

                    +### HTML -
                    <input id="test" type="checkbox" />
-<label for="test">Coucou !</label>
                    +```html + + +``` -

                    CSS

                    +### CSS -
                    input[type="checkbox"]:checked {
+```css
+input[type="checkbox"]:checked {
   background: gray;
 }
 
@@ -63,37 +62,23 @@ translation_of: Web/CSS/@media/pointer
     height: 30px;
     border: 2px solid red;
   }
-}
                    +} +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples")}}

                    +{{EmbedLiveSample("Exemples")}} -

                    Spécifications

                    +## 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.
                    +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------- | +| {{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

                    +## Compatibilité des navigateurs -

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

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

                    Voir aussi

                    +## Voir aussi - +- [La caractéristique média `any-pointer`](/fr/docs/Web/CSS/@media/any-pointer) diff --git a/files/fr/web/css/@media/prefers-color-scheme/index.md b/files/fr/web/css/@media/prefers-color-scheme/index.md index 4476aacdf7..4f89fe96ee 100644 --- a/files/fr/web/css/@media/prefers-color-scheme/index.md +++ b/files/fr/web/css/@media/prefers-color-scheme/index.md @@ -8,29 +8,26 @@ tags: - Reference translation_of: Web/CSS/@media/prefers-color-scheme --- -
                    {{CSSRef}}
                    +{{CSSRef}} -
                    -

                    Note : Si vous avez modifié privacy.resistFingerprinting à vrai, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à light.
                    - Sinon, vous pouvez créer le paramètre numérique ui.systemUsesDarkTheme pour redéfinier le comportement par défaut et retourner light (valeur : 0), dark (valeur : 1), or no-preference (valeur : 2). (Firefox retourneralight si une autre valeur est utilisée.)

                    -
                    +> **Note :** Si vous avez modifié `privacy.resistFingerprinting` à **vrai**, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à `light`. +> Sinon, vous pouvez créer le paramètre numérique `ui.systemUsesDarkTheme` pour redéfinier le comportement par défaut et retourner `light` (valeur : 0), `dark` (valeur : 1), or `no-preference` (valeur : 2). (Firefox retournera`light` 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).

                    +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

                    +## 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.
                    -
                    +- `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

                    +## Exemples -

                    CSS

                    +### CSS -
                    .day   { background: #eee; color: black; }
+```css
+.day   { background: #eee; color: black; }
 .night { background: #333; color: white; }
 
 @media (prefers-color-scheme: dark) {
@@ -50,52 +47,38 @@ translation_of: Web/CSS/@media/prefers-color-scheme
   height: 2em;
   vertical-align: middle;
 }
-
                    +``` -

                    HTML

                    +### 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>
+```html
+
                    Jour (initial)
                    
+
                    Jour (modifié si utilisation d'un thème clair)
                    
+
                    Jour (modifié si utilisation d'un thème sombre)
                     
                    
 
-<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>
-
                    +
                    Nuit (initial)
                    +
                    Nuit (modifié si utilisation d'un thème clair)
                    +
                    Nuit (modifié si utilisation d'un thème sombre)
                    +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples")}}

                    +{{EmbedLiveSample("Exemples")}} -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
                    +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}} | {{Spec2('CSS5 Media Queries')}} | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

                    +{{Compat("css.at-rules.media.prefers-color-scheme")}} -

                    Voir aussi

                    +## Voir aussi - +- [Tutoriel vidéo (en anglais) : « Coding a Dark Mode for your Website », Coder un thème sombre pour votre site web](https://www.youtube.com/watch?v=jmepqJ5UbuM) +- [Revoir la conception d'un produit ou d'un site pour le mode sombre](https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode) +- Modifier le thème du system sur [Windows](https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/), [macOS](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/) et [Android](https://www.phonandroid.com/android-10-comment-activer-le-theme-fonce.html). -
                    {{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}
                    +{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}} diff --git a/files/fr/web/css/@media/prefers-contrast/index.md b/files/fr/web/css/@media/prefers-contrast/index.md index c2bc1770ca..16467d0867 100644 --- a/files/fr/web/css/@media/prefers-contrast/index.md +++ b/files/fr/web/css/@media/prefers-contrast/index.md @@ -7,78 +7,59 @@ tags: - Reference translation_of: Web/CSS/@media/prefers-contrast --- -
                    {{CSSRef}}{{SeeCompatTable}}{{draft}}
                    +{{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é.

                    +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

                    +## 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.
                    -
                    +- `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

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

                    +À 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

                    +## Exemples -

                    Par défaut, cet exemple présente un contraste trop faible pour la lisibilité.

                    +Par défaut, cet exemple présente un contraste trop faible pour la lisibilité. -

                    HTML

                    +### HTML -
                    <div class="contrast">Une boîte avec un contraste faible.</div>
-
                    +
                    Une boîte avec un contraste faible.
                    -

                    CSS

                    +### CSS -
                    .contrast {
-  color: grey;
-}
+    .contrast {
+      color: grey;
+    }
 
-@media (prefers-contrast: high) {
-  .contrast {
-    color: black;
-  }
-}
-
                    + @media (prefers-contrast: high) { + .contrast { +   color: black; + } + } -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples")}}

                    +{{EmbedLiveSample("Exemples")}} -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpecificationÉtatCommentaires
                    {{SpecName('CSS5 Media Queries', '#descdef-media-prefers-contrast', 'prefers-contrast')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
                    +| Specification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{SpecName('CSS5 Media Queries', '#descdef-media-prefers-contrast', 'prefers-contrast')}} | {{Spec2('CSS5 Media Queries')}} | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

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

                    Voir aussi

                    +## Voir aussi - +- La caractéristique média spécifique à Microsoft [`-ms-high-contrast`](https://msdn.microsoft.com/library/Hh771830) -

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

                    +{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}} diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.md b/files/fr/web/css/@media/prefers-reduced-motion/index.md index daf259477f..602abf4761 100644 --- a/files/fr/web/css/@media/prefers-reduced-motion/index.md +++ b/files/fr/web/css/@media/prefers-reduced-motion/index.md @@ -10,48 +10,44 @@ tags: - media feature translation_of: Web/CSS/@media/prefers-reduced-motion --- -
                    {{CSSRef}}
                    +{{CSSRef}} -

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

                    +La [requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) [CSS](/fr/docs/Web/CSS) **`prefers-reduced-motion`** détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement. -
                    -

                    Attention : Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.

                    -
                    +> **Attention :** Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation. -

                    Syntaxe

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

                    +## 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 :

                    +Dans Firefox, la valeur `reduce` est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau : -
                      -
                    • Pour GTK/Gnome, si gtk-enable-animation vaut false. Cela peut être configuré par le menu « Ajustements » de Gnome.
                      • -
                    • Pour Windows 10 : Paramètres > Options d'ergonomie > Vision > Afficher > Afficher les animations dans windows
                      • -
                    • Pour macOS : Préférences système > Accessibilité > Affichage > Réduire les animations.
                      • -
                    • Dans iOS : Paramètres > ; Général > ; Accessibilité > ; Réduire les animations.
                      • -
                    • Dans Android 9+ : Paramètres > ; Accessibilité > ; Supprimer les animations.
                      • -
                    • Dans la page about:config de Firefox : Ajoutez une préférence numérique appelée ui.prefersReducedMotion et définissez sa valeur soit à 0 pour des animations complètes, soit à 1 pour indiquer une préférence pour des mouvements réduits. Les modifications apportées à cette préférence prennent effet immédiatement.
                      • -
                    +- Pour GTK/Gnome, si `gtk-enable-animation` vaut `false`. Cela peut être configuré par le menu « Ajustements » de Gnome. +- Pour Windows 10 : Paramètres > Options d'ergonomie > Vision > Afficher > Afficher les animations dans windows +- Pour macOS : Préférences système > Accessibilité > Affichage > Réduire les animations. +- Dans iOS : Paramètres > ; Général > ; Accessibilité > ; Réduire les animations. +- Dans Android 9+ : Paramètres > ; Accessibilité > ; Supprimer les animations. +- Dans la page `about:config` de Firefox : Ajoutez une préférence numérique appelée `ui.prefersReducedMotion` et définissez sa valeur soit à `0` pour des animations complètes, soit à `1` pour indiquer une préférence pour des mouvements réduits. Les modifications apportées à cette préférence prennent effet immédiatement. -

                    Exemple

                    +## Exemple -

                    Cet exemple possède une animation désagréable qui sera exécutée à moins d'activer la réduction de mouvement dans les préférences relatives à l'accessibilité.

                    +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

                    +### HTML -
                    <div class="animation">boîte animée</div>
-
                    +```html +
                    boîte animée
                    +``` -

                    CSS

                    +### CSS -
                    .animation {
+```css
+.animation {
   animation: vibrate 0.3s linear infinite both;
 }
 
@@ -60,9 +56,10 @@ translation_of: Web/CSS/@media/prefers-reduced-motion
   animation: none;
   }
 }
-
                    +``` - +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("example")}}

                    +{{EmbedLiveSample("example")}} -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationStatutCommentaire
                    {{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
                    +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}} | {{Spec2('CSS5 Media Queries')}} | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

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

                    Voir aussi

                    +## Voir aussi - +- [Une introduction aux requêtes média pour la réduction de mouvement](https://css-tricks.com/introduction-reduced-motion-media-query/) +- [Responsive Design for Motion (WebKit Blog)](https://webkit.org/blog/7551/responsive-design-for-motion/) comprend des exemples de déclencheurs de mouvements vestibulaires. diff --git a/files/fr/web/css/@media/resolution/index.md b/files/fr/web/css/@media/resolution/index.md index 771d463cd5..3f2851c729 100644 --- a/files/fr/web/css/@media/resolution/index.md +++ b/files/fr/web/css/@media/resolution/index.md @@ -7,24 +7,26 @@ tags: - Reference translation_of: Web/CSS/@media/resolution --- -
                    {{CSSRef}}
                    +{{CSSRef}} -

                    resolution est une caractéristique média CSS dont la valeur représente la densité de pixels de l'appareil d'affichage.

                    +**`resolution`** est une caractéristique média CSS dont la valeur représente la densité de pixels de l'appareil d'affichage. -

                    Syntaxe

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

                    +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

                    +## Exemples -

                    HTML

                    +### HTML -
                    <p>Un test pour la densité de pixels de votre appareil.</p>
-
                    +```html +

                    Un test pour la densité de pixels de votre appareil.

                    +``` -

                    CSS

                    +### CSS -
                    /* Résolution exacte  */
+```css
+/* Résolution exacte  */
 @media (resolution: 150dpi) {
   p {
     color: red;
@@ -43,31 +45,19 @@ translation_of: Web/CSS/@media/resolution
   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")}}

                    +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.at-rules.media.resolution")}} diff --git a/files/fr/web/css/@media/scripting/index.md b/files/fr/web/css/@media/scripting/index.md index 4fd191ef33..9c5940f749 100644 --- a/files/fr/web/css/@media/scripting/index.md +++ b/files/fr/web/css/@media/scripting/index.md @@ -7,35 +7,35 @@ tags: - Reference translation_of: Web/CSS/@media/scripting --- -
                    {{CSSRef}}
                    +{{CSSRef}} -

                    scripting est une caractéristique média CSS qui permet de savoir si les outils de script (ex. JavaScript) sont disponibles.

                    +**`scripting`** est une caractéristique média CSS qui permet de savoir si les outils de script (ex. JavaScript) sont disponibles. -

                    Syntaxe

                    +## Syntaxe -

                    La caractéristique scripting est définie avec un mot-clé parmi les suivants :

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

                    +## Exemples -

                    HTML

                    +### 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>
-
                    +```html +

                    Les outils de script ne sont pas disponibles. :-(

                    +

                    Les outils de script sont uniquement disponibles au chargement initial.

                    +

                    Les outils de script sont activés ! :-)

                    +``` -

                    CSS

                    +### CSS -
                    p {
+```css
+p {
   color: lightgray;
 }
 
@@ -55,31 +55,19 @@ translation_of: Web/CSS/@media/scripting
   .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")}}

                    +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------- | +| {{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.md b/files/fr/web/css/@media/shape/index.md index 0f07c013b2..edf2c2a7f9 100644 --- a/files/fr/web/css/@media/shape/index.md +++ b/files/fr/web/css/@media/shape/index.md @@ -9,37 +9,35 @@ tags: - Règle @ translation_of: Web/CSS/@media/shape --- -
                    {{CSSRef}} {{Non-standard_header}}
                    +{{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.

                    +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

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

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

                    +## Exemples -
                    -

                    Note : Aucun navigateur n'implémente actuellement cette fonctionnalité.

                    -
                    +> **Note :** Aucun navigateur n'implémente actuellement cette fonctionnalité. -

                    Exemple simple

                    +### Exemple simple -

                    HTML

                    +#### HTML -
                    <h1>Coucou le monde !</h1>
-
                    +```html +

                    Coucou le monde !

                    +``` -

                    CSS

                    +#### CSS -
                    h1 {
+```css
+h1 {
   text-align: left;
 }
 
@@ -54,42 +52,30 @@ translation_of: Web/CSS/@media/shape
     text-align: center;
   }
 }
-
                    +``` -

                    Résultat

                    +#### Résultat -

                    {{EmbedLiveSample("Exemple_simple")}}

                    +{{EmbedLiveSample("Exemple_simple")}} -

                    Feuille de style spécifique

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

                    +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>
-
                    +```html + +    +    +    + +``` -

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    CSS Round Display Level 1BrouillonDéfinition initiale.
                    +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------- | --------- | -------------------- | +| _[CSS Round Display Level 1](https://drafts.csswg.org/css-round-display/)_ | Brouillon | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

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

                    +{{Compat("css.at-rules.media.shape")}} diff --git a/files/fr/web/css/@media/update-frequency/index.md b/files/fr/web/css/@media/update-frequency/index.md index 41b540b3ba..0c5ee270ab 100644 --- a/files/fr/web/css/@media/update-frequency/index.md +++ b/files/fr/web/css/@media/update-frequency/index.md @@ -7,36 +7,36 @@ tags: - Reference translation_of: Web/CSS/@media/update-frequency --- -
                    {{CSSRef}}
                    +{{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.

                    +**`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

                    +## Syntaxe -

                    La caractéristique update est définie avec un mot-clé parmi ceux de la liste ci-après.

                    +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).
                    -
                    +- `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

                    +## Exemples -

                    HTML

                    +### HTML -
                    <p>
+```html
+
                    
   Si ce texte est animé, cela signifie que vous utilisez
   un appareil avec un affichage qui évolue rapidement.
-</p>
-
                    +

                    +``` -

                    CSS

                    +### CSS -
                    @keyframes jiggle {
+```css
+@keyframes jiggle {
   from {
     transform: translateY(0);
   }
@@ -50,31 +50,19 @@ translation_of: Web/CSS/@media/update-frequency
   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")}}

                    +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{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.md b/files/fr/web/css/@media/width/index.md index b32ee66222..d13d54f681 100644 --- a/files/fr/web/css/@media/width/index.md +++ b/files/fr/web/css/@media/width/index.md @@ -7,15 +7,16 @@ tags: - Reference translation_of: Web/CSS/@media/width --- -
                    {{CSSRef}}
                    +{{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>")}}.

                    +**`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](/fr/docs/Web/CSS/M%C3%A9dia_pagin%C3%A9s)). La largeur est exprimée comme une longueur CSS (type {{cssxref("<length>")}}. -

                    Syntaxe

                    +## 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).

                    +**`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 */
+```css
+/* Largeur exacte */
 @media (width: 300px) {}
 
 /* Un viewport avec une largeur minimale */
@@ -23,17 +24,20 @@ translation_of: Web/CSS/@media/width
 
 /* Un viewport avec une largeur maximale */
 @media (max-width: 1000px) {}
-
                    +``` -

                    Exemples

                    +## Exemples -

                    HTML

                    +### HTML -
                    <div>Observez cet élément lorsque vous redimensionnez la largeur du viewport.</div>
                    +```html +
                    Observez cet élément lorsque vous redimensionnez la largeur du viewport.
                    +``` -

                    CSS

                    +### CSS -
                    /* Largeur exacte */
+```css
+/* Largeur exacte */
 @media (width: 360px) {
   div {
     color: red;
@@ -53,36 +57,19 @@ translation_of: Web/CSS/@media/width
     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")}}

                    +``` + +### Résultat + +{{EmbedLiveSample('Exemples','90%')}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------- | +| {{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.md b/files/fr/web/css/@namespace/index.md index b30bf8e593..1e3ebd0e0b 100644 --- a/files/fr/web/css/@namespace/index.md +++ b/files/fr/web/css/@namespace/index.md @@ -7,70 +7,58 @@ tags: - Règle @ translation_of: Web/CSS/@namespace --- -
                    {{CSSRef}}
                    +{{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`** est [une règle @](/fr/docs/Web/CSS/Règles_@) qui définit [les espaces de noms XML](/fr/docs/Glossaire/Namespace) utilisés dans une feuille de style CSS. Les espaces de noms définis sont alors utilisés pour restreindre les sélecteurs [universels](/fr/docs/Web/CSS/Sélecteurs_universels), [de type](/fr/docs/Web/CSS/Sélecteurs_de_type), et [d'attribut](/fr/docs/Web/CSS/Sélecteurs_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);
+```css
+@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>
+/* Cela correspond à tous les éléments XHTML 
   car XHTML est l'espace de nom par défaut, sans
   préfixe. */
 a {}
 
-/* Cela correspond à tous les éléments SVG <a> */
+/* Cela correspond à tous les éléments SVG  */
 svg|a {}
 
-/* Cela correspond aux éléments <a> XHTML et SVG */
+/* Cela correspond aux éléments  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.

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

                    +`@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.

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

                    +En [HTML5](/fr/docs/Glossaire/HTML5), les [éléments étrangers](https://html.spec.whatwg.org/#foreign-elements) 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 [``](/fr/docs/Web/SVG/Element/svg) et [``](/fr/docs/Web/MathML/Element/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.

                    -
                    +> **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

                    +## Syntaxe -
                    /* Espace de noms par défaut */
-@namespace url(XML-namespace-URL);
-@namespace "XML-namespace-URL";
+```css
+/* 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";
                    +@namespace préfixe url(XML-namespace-URL); +@namespace préfixe "XML-namespace-URL"; +``` -

                    Syntaxe formelle

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

                    +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}} | {{Spec2('CSS3 Namespaces')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.at-rules.namespace")}} diff --git a/files/fr/web/css/@page/index.md b/files/fr/web/css/@page/index.md index 9d44d62546..563e341e7e 100644 --- a/files/fr/web/css/@page/index.md +++ b/files/fr/web/css/@page/index.md @@ -7,99 +7,74 @@ tags: - Règle @ translation_of: Web/CSS/@page --- -
                    {{CSSRef}}
                    +{{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é.

                    +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 {
+```css
+@page {
   margin: 1cm;
 }
 
 @page :first {
   margin: 2cm;
-}
                    +} +``` + +La règle @ `@page` peut être manipulée via le CSSOM, notamment avec l'interface {{domxref("CSSPageRule")}}. -

                    La règle @ @page peut être manipulée via le CSSOM, notamment avec l'interface {{domxref("CSSPageRule")}}.

                    +> **Note :** Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("<length>")}}) relative à la zone d'affichage (_viewport_) : `vh`, `vw`, `vmin` et `vmax`. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle `@page`. -
                    -

                    Note : Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("<length>")}}) relative à la zone d'affichage (viewport) : vh, vw, vmin et vmax. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle @page.

                    -
                    +## Syntaxe -

                    Syntaxe

                    +### Descripteurs -

                    Descripteurs

                    +- [`size`](/fr/docs/Web/CSS/@page/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. -
                    -
                    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.
                    -
                    +- [`marks`](/fr/docs/orphaned/Web/CSS/@page/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

                    +- [`bleed`](/fr/docs/orphaned/Web/CSS/@page/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

                    +## Exemples -
                    @page :first {
+```css
+@page :first {
   margin: 2cm 3cm;
-}
                    - -

                    Pour d'autres exemples, voir les pages qui concernent les pseudo-classes liées à @page :

                    - -
                      -
                    • {{cssxref(":blank")}}
                      • -
                    • {{cssxref(":first")}}
                      • -
                    • {{cssxref(":left")}}
                      • -
                    • {{cssxref(":right")}}
                      • -
                    • {{cssxref(":recto")}} {{experimental_inline}}
                      • -
                    • {{cssxref(":verso")}} {{experimental_inline}}
                      • -
                    - -

                    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

                    - - +} +``` + +Pour d'autres exemples, voir les pages qui concernent les pseudo-classes liées à `@page` : + +- {{cssxref(":blank")}} +- {{cssxref(":first")}} +- {{cssxref(":left")}} +- {{cssxref(":right")}} +- {{cssxref(":recto")}} {{experimental_inline}} +- {{cssxref(":verso")}} {{experimental_inline}} + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | +| {{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 + +- [Le bug de suivi Mozilla pour l'ensemble des fonctionnalités associées aux médias paginés.](https://bugzilla.mozilla.org/show_bug.cgi?id=286443) diff --git a/files/fr/web/css/@page/size/index.md b/files/fr/web/css/@page/size/index.md index 89d4723b4d..6cdf3c70a7 100644 --- a/files/fr/web/css/@page/size/index.md +++ b/files/fr/web/css/@page/size/index.md @@ -8,22 +8,23 @@ tags: - Reference translation_of: Web/CSS/@page/size --- -
                    {{CSSRef}}{{SeeCompatTable}}
                    +{{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.

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

                    +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

                    +## Syntaxe -
                    /* Des mots-clés qui peuvent être utilisées
+```css
+/* 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>           */
+/* Type            */
 /* 1 valeur : hauteur = largeur */
 size: 6in;
 
@@ -39,87 +40,72 @@ size: letter;
 
 /* Une déclaration incluant la taille et l'orientation */
 size: A4 portrait;
-
                    - -

                    Valeurs

                    - -
                    -
                    auto
                    -
                    L'agent utilisateur décidera de la taille de page. En général, ce seront les dimensions de la page cible (celle sur laquelle imprimer/afficher) qui seront utilisées.
                    -
                    landscape
                    -
                    Le contenu de la page est affiché en paysage (le côté le plus long de la page sera le côté horizontal).
                    -
                    portrait
                    -
                    Le contenu de la page est affiché en portrait (le côté le plus long de la page sera le côté vertical).
                    -
                    <length>
                    -
                    Une valeur de longueur (cf. {{cssxref("<length>")}}). La première valeur utilisée correspond à la largeur de la boîte de la page et la deuxième correspond à la hauteur. Si une seule valeur est fournie, celle-ci sera utilisée pour la largeur et pour la hauteur.
                    -
                    <page-size>
                    -

                    Un mot-clé avec l'une des valeurs suivantes :

                    -
                    -
                    A5
                    -
                    Ce mot-clé correspond aux dimensions ISO standard : 148mm x 210mm.
                    -
                    A4
                    -
                    Ce mot-clé correspond aux dimensions ISO standard : 210mm x 297mm (c'est le format le plus utilisé pour les impressions occasionnelles sur les imprimantes personnelles).
                    -
                    A3
                    -
                    Ce mot-clé correspond aux dimensions ISO standard : 297mm x 420mm.
                    -
                    B5
                    -
                    Ce mot-clé correspond aux dimensions ISO standard : 176mm x 250mm.
                    -
                    B4
                    -
                    Ce mot-clé correspond aux dimensions ISO standard : 250mm x 353mm.
                    -
                    JIS-B5
                    -
                    Ce mot-clé correspond aux dimensions JIS standard : 182mm x 257mm.
                    -
                    JIS-B4
                    -
                    Ce mot-clé correspond aux dimensions JIS standard : 257mm x 364mm.
                    -
                    letter
                    -
                    Ce mot-clé correspond à la taille standard du papier à lettre aux États-Unis : 8.5in x 11in.
                    -
                    legal
                    -
                    Ce mot-clé correspond à la taille standard des documents légaux aux États-Unis : 8.5in par 14in.
                    -
                    ledger
                    -
                    Ce mot-clé correspond à la taille standard des pages d'un livre en grand format aux États-Unis. Cela correspond à : 11in x 17in.
                    -
                    -
                    -
                    - -

                    Exemples

                    - -
                    @page {
+```
+
+### 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).
+- ``
+  - : 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.
+- ``
+
+  - : Un mot-clé avec l'une des valeurs suivantes :
+
+    - `A5`
+      - : Ce mot-clé correspond aux dimensions ISO standard : 148mm x 210mm.
+    - `A4`
+      - : Ce mot-clé correspond aux dimensions ISO standard : 210mm x 297mm (c'est le format le plus utilisé pour les impressions occasionnelles sur les imprimantes personnelles).
+    - `A3`
+      - : Ce mot-clé correspond aux dimensions ISO standard : 297mm x 420mm.
+    - `B5`
+      - : Ce mot-clé correspond aux dimensions ISO standard : 176mm x 250mm.
+    - `B4`
+      - : Ce mot-clé correspond aux dimensions ISO standard : 250mm x 353mm.
+    - `JIS-B5`
+      - : Ce mot-clé correspond aux dimensions JIS standard : 182mm x 257mm.
+    - `JIS-B4`
+      - : Ce mot-clé correspond aux dimensions JIS standard : 257mm x 364mm.
+    - `letter`
+      - : Ce mot-clé correspond à la taille standard du papier à lettre aux États-Unis : 8.5in x 11in.
+    - `legal`
+      - : Ce mot-clé correspond à la taille standard des documents légaux aux États-Unis : 8.5in par 14in.
+    - `ledger`
+      - : Ce mot-clé correspond à la taille standard des pages d'un livre en grand format aux États-Unis. Cela correspond à : 11in x 17in.
+
+## Exemples
+
+```css
+@page {
   size: 4cm 6cm landscape;
 }
-
                    +``` -
                    @media print {
+```css
+@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

                    - -
                      -
                    • {{cssxref("@page/bleed", "bleed")}}
                      • -
                    • {{cssxref("@page/marks", "marks")}}
                      • -
                    +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{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 + +- {{cssxref("@page/bleed", "bleed")}} +- {{cssxref("@page/marks", "marks")}} diff --git a/files/fr/web/css/@property/index.md b/files/fr/web/css/@property/index.md index cdcb5770ff..bc30e0b52f 100644 --- a/files/fr/web/css/@property/index.md +++ b/files/fr/web/css/@property/index.md @@ -1,80 +1,80 @@ --- title: '@property' slug: Web/CSS/@property +translation_of: Web/CSS/@property browser-compat: css.at-rules.property -translation_of: 'Web/CSS/@property' --- -
                    {{CSSRef}}{{SeeCompatTable}}
                    +{{CSSRef}}{{SeeCompatTable}} -

                    La règle {{cssxref("at-rule")}} CSS @property fait partie du panel d'API CSS Houdini, qui permet de définir explicitement leurs propriétés CSS personnalisées (voir {{cssxref('--*', 'CSS custom properties')}}). Cela permet la vérification des types de propriétés, de leur donner des valeurs par défaut et de déterminer si une propriété peut hériter ses valeurs ou non.

                    +La règle {{cssxref("at-rule")}} [CSS](/fr/docs/Web/CSS) **`@property`** fait partie du panel d'API [CSS Houdini](/fr/docs/Web/Houdini), qui permet de définir explicitement leurs propriétés CSS personnalisées (voir {{cssxref('--*', 'CSS custom properties')}}). Cela permet la vérification des types de propriétés, de leur donner des valeurs par défaut et de déterminer si une propriété peut hériter ses valeurs ou non. -

                    La règle @property permet l'enregistrement d'une propriété personnalisée directement dans une feuille de styles sans avoir à utiliser la moindre ligne de JavaScript. Une règle @property valide enregistre une nouvelle propriété personnalisée comme si {{domxref('CSS.registerProperty')}} avait été appelé avec les mêmes paramètres.

                    +La règle `@property` permet l'enregistrement d'une propriété personnalisée directement dans une feuille de styles sans avoir à utiliser la moindre ligne de JavaScript. Une règle `@property` valide enregistre une nouvelle propriété personnalisée comme si {{domxref('CSS.registerProperty')}} avait été appelé avec les mêmes paramètres. -

                    Syntaxe

                    +## Syntaxe -
                    @property --property-name {
-  syntax: '<color>';
+```css
+@property --property-name {
+  syntax: '';
   inherits: false;
   initial-value: #c0ffee;
-}
                    +} +``` -

                    Descripteurs

                    +### Descripteurs -
                    -
                    {{cssxref("@property/syntax","syntax")}}
                    -
                    Décrit la syntaxe autorisée de la propriété.
                    -
                    {{cssxref("@property/inherits","inherits")}}
                    -
                    Détermine si l'enregistrement de la propriété personnalisée spécifiée avec @property hérite ou non par défaut.
                    -
                    {{cssxref("@property/initial-value","initial-value")}}
                    -
                    Détermine la valeur initiale de la propriété.
                    -
                    +- {{cssxref("@property/syntax","syntax")}} + - : Décrit la syntaxe autorisée de la propriété. +- {{cssxref("@property/inherits","inherits")}} + - : Détermine si l'enregistrement de la propriété personnalisée spécifiée avec `@property` hérite ou non par défaut. +- {{cssxref("@property/initial-value","initial-value")}} + - : Détermine la valeur initiale de la propriété. -

                    Une règle @property valide enregistre une propriété personnalisée avec comme nom de propriété la sérialisation de du préfixe de la règle.

                    +Une règle `@property` valide enregistre une propriété personnalisée avec comme nom de propriété la sérialisation de du préfixe de la règle. -

                    Une règle @property nécessite le respecte d'une syntaxe (voir {{cssxref("@property/syntax","syntax")}}) et une description d'héritage (voir {{cssxref("@property/inherits","inherits")}}). Si l'un des deux manque, l'ensemble de la règle est invalide et celle-ci doit être ignorée. Le descripteur {{cssxref("@property/initial-value","initial-value")}} est optionnel, uniquement si la syntaxe est une définition de syntaxe universelle. Sinon, le descripteur est requis (s'il manque, l'ensemble de la règle est invalide et celle-ci doit être ignorée).

                    +Une règle `@property` nécessite le respecte d'une syntaxe (voir {{cssxref("@property/syntax","syntax")}}) et une description d'héritage (voir {{cssxref("@property/inherits","inherits")}}). Si l'un des deux manque, l'ensemble de la règle est invalide et celle-ci doit être ignorée. Le descripteur {{cssxref("@property/initial-value","initial-value")}} est optionnel, uniquement si la syntaxe est une définition de syntaxe universelle. Sinon, le descripteur est requis (s'il manque, l'ensemble de la règle est invalide et celle-ci doit être ignorée). -

                    Les descripteurs inconnus ne sont pas valides et sont ignorés, mais n'invalident pas l'ensemble de la règle @property.

                    +Les descripteurs inconnus ne sont pas valides et sont ignorés, mais n'invalident pas l'ensemble de la règle `@property`. -

                    Exemples

                    +## Exemples -

                    Ajout d'une vérification de type à la {{cssxref('--*', 'propriété personnalisée')}} --my-color en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur :

                    +Ajout d'une vérification de type à la {{cssxref('--*', 'propriété personnalisée')}} `--my-color` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur : -

                    Utilisation de la règle CSS at-rule {{cssxref('@property')}} :

                    +Utilisation de la règle [CSS](/en-US/docs/Web/CSS) [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} : -
                    @property --my-color {
-  syntax: '<color>';
+```css
+@property --my-color {
+  syntax: '';
   inherits: false;
   initial-value: #c0ffee;
 }
-
                    +``` -

                    Équivalent avec la fonction JavaScript {{domxref('CSS.registerProperty')}} :

                    +Équivalent avec la fonction [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty')}} : -
                    window.CSS.registerProperty({
+```js
+window.CSS.registerProperty({
   name: '--my-color',
-  syntax: '<color>',
+  syntax: '',
   inherits: false,
   initialValue: '#c0ffee',
 });
-
                    +``` -

                    Syntaxe formelle

                    +## Syntaxe formelle -

                    {{csssyntax}}

                    +{{csssyntax}} -

                    Spécifications

                    +## Spécifications -

                    {{Specifications}}

                    +{{Specifications}} -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat}}

                    +{{Compat}} -

                    Voir aussi

                    +## Voir aussi - +- [API Propriétés et valeurs CSS](/fr/docs/Web/API/CSS_Properties_and_Values_API) +- [API Peinture CSS](/fr/docs/Web/API/CSS_Painting_API) +- [API Typage de modèle d'objet CSS](/fr/docs/Web/API/CSS_Typed_OM_API) +- [CSS Houdini](/fr/docs/Web/Houdini) diff --git a/files/fr/web/css/@supports/index.md b/files/fr/web/css/@supports/index.md index 163bcdd89f..f142fe1ba4 100644 --- a/files/fr/web/css/@supports/index.md +++ b/files/fr/web/css/@supports/index.md @@ -7,154 +7,181 @@ tags: - Règle @ translation_of: Web/CSS/@supports --- -
                    {{CSSRef}}
                    +{{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).

                    +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) {
+```css
+@supports (display: grid) {
   div {
     display: grid;
   }
-}
                    +} +``` -
                    @supports not (display: grid) {
+```css
+@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).

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

                    +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](/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe). Cette règle @ peut être manipulée via le modèle d'objets CSS et JavaScript, notamment via l'interface {{domxref("CSSSupportsRule")}}. -

                    Syntaxe

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

                    +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

                    +### 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 :

                    +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% ) { }
                    +```css +@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.

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

                    +Une déclaration CSS est toujours encadrée par des parenthèses. -

                    Syntaxe fonctionnelle

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

                    +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}}

                    +#### `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

                    +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](/fr/docs/Web/CSS/Sélecteurs_enfant) -
                    @supports selector(A > B) { }
                    +```css +@supports selector(A > B) { } +``` -

                    L'opérateur not

                    +### 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 :

                    +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 ) { }
                    +```css +@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.

                    +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 :

                    +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) ) { }
                    +```css +@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.

                    -
                    +> **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` -

                    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 :

                    +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) { }
                    +```css +@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).

                    +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) { }
                    +```css +@supports (display: table-cell) and (display: list-item) and (display:run-in) { } +``` -

                    sera équivalente à :

                    +sera équivalente à : -
                    @supports (display: table-cell) and ((display: list-item) and (display:run-in)) { }
                    +```css +@supports (display: table-cell) and ((display: list-item) and (display:run-in)) { } +``` -

                    L'opérateur or

                    +### 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 :

                    +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 ) { }
                    +```css +@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.

                    +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  ) { }
                    +```css +@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) or + ( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve ) { } +``` -

                    sera ainsi équivalente à :

                    +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  ))) { }
                    +```css +@supports ( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or + (( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d ))) { } +``` -
                    -

                    Note : Lorsqu'on utilise à la fois l'opérateur and et l'opérateur or, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée.

                    -
                    +> **Note :** Lorsqu'on utilise à la fois l'opérateur `and` et l'opérateur `or`, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée. -

                    Syntaxe formelle

                    +### Syntaxe formelle {{csssyntax}} -

                    Exemples

                    +## Exemples -

                    Tester la prise en charge d'une propriété CSS donnée

                    +### Tester la prise en charge d'une propriété CSS donnée -
                    @supports (animation-name: test) {
+```css
+@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

                    +### 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
+```css
+@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

                    +### Tester l'absence de prise en charge d'une propriété CSS -
                    @supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
+```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

                    +### Tester la prise en charge des propriétés personnalisées -
                    @supports (--toto: green) {
+```css
+@supports (--toto: green) {
   body {
     color: --nomVar;
   }
-}
                    +} +``` -

                    Tester la prise en charge d'un sélecteur

                    +### Tester la prise en charge d'un sélecteur -

                    {{SeeCompatTable}}

                    +{{SeeCompatTable}} -
                    /* Cette règle ne sera pas appliquée si le navigateur */
+```css
+/* Cette règle ne sera pas appliquée si le navigateur */
 /* ne prend pas en charge :is() */
-:is(ul, ol) > li {
+: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 {
+  ul > li,
+  ol > li {
     …
   }
 }
@@ -164,44 +191,25 @@ translation_of: Web/CSS/@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) {
+  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

                    - -
                      -
                    • La classe CSSOM {{domxref("CSSSupportsRule")}}
                      • -
                    • La méthode {{domxref("CSS.supports")}} qui permet d'effectuer les mêmes vérifications via JavaScript.
                      • -
                    +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------- | +| {{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 + +- La classe CSSOM {{domxref("CSSSupportsRule")}} +- La méthode {{domxref("CSS.supports")}} qui permet d'effectuer les mêmes vérifications via JavaScript. diff --git a/files/fr/web/css/@viewport/index.md b/files/fr/web/css/@viewport/index.md index b14056c7ea..e27650eec2 100644 --- a/files/fr/web/css/@viewport/index.md +++ b/files/fr/web/css/@viewport/index.md @@ -8,66 +8,65 @@ tags: - Règle @ translation_of: Web/CSS/@viewport --- -
                    {{SeeCompatTable}}{{CSSRef}}
                    +{{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).

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

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

                    +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 {
+```css
+@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

                    +} +``` + +## 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

                    +## Exemples -
                    @viewport {
+```css
+@viewport {
   min-width: 640px;
   max-width: 800px;
 }
@@ -80,39 +79,21 @@ translation_of: Web/CSS/@viewport
 
 @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

                    - - +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------- | +| {{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 + +- {{HTMLElement("meta")}} et plus précisément `` +- [Utiliser la balise `meta` afin de contrôler la disposition sur les navigateurs mobiles](/fr/docs/Mozilla/Mobile/Balise_meta_viewport) diff --git a/files/fr/web/css/_colon_-moz-broken/index.md b/files/fr/web/css/_colon_-moz-broken/index.md index cab1b281e3..4e006e5f91 100644 --- a/files/fr/web/css/_colon_-moz-broken/index.md +++ b/files/fr/web/css/_colon_-moz-broken/index.md @@ -1,43 +1,45 @@ --- title: ':-moz-broken' -slug: 'Web/CSS/:-moz-broken' +slug: Web/CSS/:-moz-broken tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-moz-broken' +translation_of: Web/CSS/:-moz-broken --- -
                    {{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
                    +{{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.

                    +La [p](/en-US/docs/Web/CSS)[seudo-class CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-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.

                    +Ce sélecteur est principalement destiné à être utilisé par les développeurs de thèmes. -

                    Syntaxe

                    +## Syntaxe -
                    :-moz-broken
                    + :-moz-broken -

                    Exemples

                    +## Exemples -

                    HTML

                    +### HTML -
                    <img src="broken.jpg" alt="Cette image ne fonctionne pas. :-(">
                    +```html +Cette image ne fonctionne pas. :-( +``` -

                    CSS

                    +### CSS -
                    :-moz-broken {
+```css
+:-moz-broken {
   background: bisque;
   padding: 8px;
-}
                    +} +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples")}}

                    +{{EmbedLiveSample("Exemples")}} -

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{bug("11011")}}
                      • -
                    • {{cssxref(":-moz-loading")}}, {{cssxref(":-moz-suppressed")}}, {{cssxref(":-moz-user-disabled")}}
                      • -
                    +- {{bug("11011")}} +- {{cssxref(":-moz-loading")}}, {{cssxref(":-moz-suppressed")}}, {{cssxref(":-moz-user-disabled")}} diff --git a/files/fr/web/css/_colon_-moz-drag-over/index.md b/files/fr/web/css/_colon_-moz-drag-over/index.md index f8ef38f055..07b3e2e36c 100644 --- a/files/fr/web/css/_colon_-moz-drag-over/index.md +++ b/files/fr/web/css/_colon_-moz-drag-over/index.md @@ -1,44 +1,45 @@ --- title: ':-moz-drag-over' -slug: 'Web/CSS/:-moz-drag-over' +slug: Web/CSS/:-moz-drag-over tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-moz-drag-over' +translation_of: Web/CSS/:-moz-drag-over --- -
                    {{Non-standard_header}}{{CSSRef}}
                    +{{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.

                    +La pseudo-classe **`:-moz-drag-over`** permet de mettre en forme un élément lorsqu'un événement `drag-over` est appelé dessus. -

                    Syntaxe

                    +## Syntaxe -
                    element:-moz-drag-over { propriétés de mise en forme }
-
                    + element:-moz-drag-over { propriétés de mise en forme } -

                    Exemples

                    +## Exemples -

                    CSS

                    +### CSS -
                    td:-moz-drag-over {
+```css
+td:-moz-drag-over {
   color: red;
 }
-
                    +``` -

                    HTML

                    +### HTML -
                    <table border="1">
-  <tr>
-    <td width="100px" height="100px">Drag Over</td>
-  </tr>
-</table>
-
                    +```html + + + + +
                    Drag Over
                    +``` -

                    Résultat

                    +### Résultat -

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

                    +{{EmbedLiveSample("Exemples","200","200")}} -

                    Spécifications

                    +## Spécifications -

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

                    +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.md b/files/fr/web/css/_colon_-moz-first-node/index.md index 74fcd7f5bb..6007b9e0d4 100644 --- a/files/fr/web/css/_colon_-moz-first-node/index.md +++ b/files/fr/web/css/_colon_-moz-first-node/index.md @@ -1,58 +1,55 @@ --- title: ':-moz-first-node' -slug: 'Web/CSS/:-moz-first-node' +slug: Web/CSS/:-moz-first-node tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-moz-first-node' +translation_of: Web/CSS/:-moz-first-node --- -
                    {{Non-standard_header}}{{CSSRef}}
                    +{{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).

                    +La pseudo-classe **`:-moz-first-node`** correspond à un élément si celui-ci est le premier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":first-child")}} car elle ne cible pas le premier élément qui possède du texte (hors blancs). -
                    -

                    Note : Tout blanc qui serait au début d'un élément est ignoré pour la détermination de :-moz-last-node.

                    -
                    +> **Note :** Tout blanc qui serait au début d'un élément est ignoré pour la détermination de `:-moz-last-node`. -

                    Syntaxe

                    +## Syntaxe -
                    span:-moz-first-node { propriétés de mise en forme }
-
                    + span:-moz-first-node { propriétés de mise en forme } -

                    Exemples

                    +## Exemples -

                    CSS

                    +### CSS -
                    span:-moz-first-node {
+```css
+span:-moz-first-node {
   background-color: lime;
 }
-
                    +``` -

                    HTML

                    +### HTML -
                    <p>
-  <span>:-moz-first-node</span>
-  <span>:-moz-last-node</span>
-</p>
-<p>
+```html
+
                    
+  :-moz-first-node
+  :-moz-last-node
+
                    
+
                    
   Bip bop bip bop
-  <span>Cet élément n'est pas ciblé car il y a du texte avant.</span>
-</p>
-
                    +  Cet élément n'est pas ciblé car il y a du texte avant. +

                    +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples", "220", "20")}}

                    +{{EmbedLiveSample("Exemples", "220", "20")}} -

                    Spécifications

                    +## Spécifications -

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

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

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref(":-moz-last-node")}}
                      • -
                    • {{cssxref(":last-child")}}
                      • -
                    +- {{cssxref(":-moz-last-node")}} +- {{cssxref(":last-child")}} diff --git a/files/fr/web/css/_colon_-moz-focusring/index.md b/files/fr/web/css/_colon_-moz-focusring/index.md index 6e6181fb70..4734e1c6f9 100644 --- a/files/fr/web/css/_colon_-moz-focusring/index.md +++ b/files/fr/web/css/_colon_-moz-focusring/index.md @@ -1,32 +1,31 @@ --- title: ':-moz-focusring' -slug: 'Web/CSS/:-moz-focusring' +slug: Web/CSS/:-moz-focusring tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-moz-focusring' +translation_of: Web/CSS/:-moz-focusring --- -
                    {{Non-standard_header}}{{CSSRef}}
                    +{{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.

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

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

                    -
                    +> **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é](/en-US/docs/Web/Web_Components/Using_custom_elements) dont on veut changer le style en fonction de son comportement. -

                    Syntaxe

                    +## Syntaxe -
                    :-moz-focusring
                    + :-moz-focusring -

                    Exemple

                    +## Exemple -

                    CSS

                    +### CSS -
                    input {
+```css
+input {
   margin: 5px;
 }
 
@@ -34,26 +33,26 @@ translation_of: 'Web/CSS/:-moz-focusring'
   color: red;
   outline: 2px dotted green;
 }
-
                    +``` -

                    HTML

                    +### HTML -
                    <input/>
                    +```html + +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemple")}}

                    +{{EmbedLiveSample("Exemple")}} -

                    Spécifications

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

                    +Cette fonctionnalité ne fait partie d'aucune spécification bien qu'elle ait [discutée avec le groupe de travail](https://lists.w3.org/Archives/Public/www-style/2015Sep/0226.html) et qu'il a été [conclus de son ajout dans la spécification CSS sur les sélecteurs de niveau 4 ou 5](https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html). -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat("css.selectors.-moz-focusring")}}

                    +{{Compat("css.selectors.-moz-focusring")}} -

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{bug("418521")}}
                      • -
                    +- {{bug("418521")}} diff --git a/files/fr/web/css/_colon_-moz-handler-blocked/index.md b/files/fr/web/css/_colon_-moz-handler-blocked/index.md index 0168f703f5..ef0e403061 100644 --- a/files/fr/web/css/_colon_-moz-handler-blocked/index.md +++ b/files/fr/web/css/_colon_-moz-handler-blocked/index.md @@ -1,26 +1,24 @@ --- title: ':-moz-handler-blocked' -slug: 'Web/CSS/:-moz-handler-blocked' +slug: Web/CSS/:-moz-handler-blocked tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-moz-handler-blocked' +translation_of: Web/CSS/:-moz-handler-blocked --- -
                    {{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
                    +{{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.

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

                    +Cette pseudo-classe est principalement destinée aux développeurs de thèmes. -

                    Spécifications

                    +## Spécifications -

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

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

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref(":-moz-handler-crashed")}}
                      • -
                    • {{cssxref(":-moz-handler-disabled")}}
                      • -
                    +- {{cssxref(":-moz-handler-crashed")}} +- {{cssxref(":-moz-handler-disabled")}} diff --git a/files/fr/web/css/_colon_-moz-handler-crashed/index.md b/files/fr/web/css/_colon_-moz-handler-crashed/index.md index 72f1bdff9f..02567714c9 100644 --- a/files/fr/web/css/_colon_-moz-handler-crashed/index.md +++ b/files/fr/web/css/_colon_-moz-handler-crashed/index.md @@ -1,26 +1,24 @@ --- title: ':-moz-handler-crashed' -slug: 'Web/CSS/:-moz-handler-crashed' +slug: Web/CSS/:-moz-handler-crashed tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-moz-handler-crashed' +translation_of: Web/CSS/:-moz-handler-crashed --- -
                    {{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}
                    +{{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é.

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

                    +Cette pseudo-classe est principalement destinée aux développeurs de thèmes. -

                    Spécifications

                    +## Spécifications -

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

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

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref(":-moz-handler-blocked")}}
                      • -
                    • {{cssxref(":-moz-handler-disabled")}}
                      • -
                    +- {{cssxref(":-moz-handler-blocked")}} +- {{cssxref(":-moz-handler-disabled")}} diff --git a/files/fr/web/css/_colon_-moz-handler-disabled/index.md b/files/fr/web/css/_colon_-moz-handler-disabled/index.md index 12ade56fe0..b8b8b3de39 100644 --- a/files/fr/web/css/_colon_-moz-handler-disabled/index.md +++ b/files/fr/web/css/_colon_-moz-handler-disabled/index.md @@ -1,26 +1,24 @@ --- title: ':-moz-handler-disabled' -slug: 'Web/CSS/:-moz-handler-disabled' +slug: Web/CSS/:-moz-handler-disabled tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-moz-handler-disabled' +translation_of: Web/CSS/:-moz-handler-disabled --- -
                    {{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
                    +{{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.

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

                    +Cette pseudo-classe est principalement destinée aux développeurs de thèmes. -

                    Spécifications

                    +## Spécifications -

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

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

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref(":-moz-handler-blocked")}}
                      • -
                    • {{cssxref(":-moz-handler-crashed")}}
                      • -
                    +- {{cssxref(":-moz-handler-blocked")}} +- {{cssxref(":-moz-handler-crashed")}} diff --git a/files/fr/web/css/_colon_-moz-last-node/index.md b/files/fr/web/css/_colon_-moz-last-node/index.md index aab079a2e6..b2d49eef88 100644 --- a/files/fr/web/css/_colon_-moz-last-node/index.md +++ b/files/fr/web/css/_colon_-moz-last-node/index.md @@ -1,58 +1,55 @@ --- title: ':-moz-last-node' -slug: 'Web/CSS/:-moz-last-node' +slug: Web/CSS/:-moz-last-node tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-moz-last-node' +translation_of: Web/CSS/:-moz-last-node --- -
                    {{Non-standard_header}}{{CSSRef}}
                    +{{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).

                    +La pseudo-classe **`:-moz-last-node`** correspond à un élément si celui-ci est le dernier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":last-child")}} car elle ne cible pas le dernier élément qui possède du texte (hors blancs). -
                    -

                    Note : Tout blanc qui serait à la fin d'un élément est ignoré pour la détermination de :-moz-last-node.

                    -
                    +> **Note :** Tout blanc qui serait à la fin d'un élément est ignoré pour la détermination de `:-moz-last-node`. -

                    Syntaxe

                    +## Syntaxe -
                    span:-moz-last-node { propriétés de mise en forme }
-
                    + span:-moz-last-node { propriétés de mise en forme } -

                    Exemples

                    +## Exemples -

                    CSS

                    +### CSS -
                    span:-moz-last-node {
+```css
+span:-moz-last-node {
   background-color: lime;
 }
-
                    +``` -

                    HTML

                    +### 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>
+```html
+
                    
+  :-moz-first-node
+  :-moz-last-node
+
                    
+
                    
+  Cet élément n'est pas ciblé car il est suivi par du texte.
   Bip bop bip bop.
-</p>
-
                    +

                    +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples", "220", "20")}}

                    +{{EmbedLiveSample("Exemples", "220", "20")}} -

                    Spécifications

                    +## Spécifications -

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

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

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref(":-moz-first-node")}}
                      • -
                    • {{cssxref(":last-child")}}
                      • -
                    +- {{cssxref(":-moz-first-node")}} +- {{cssxref(":last-child")}} diff --git a/files/fr/web/css/_colon_-moz-list-bullet/index.md b/files/fr/web/css/_colon_-moz-list-bullet/index.md index 8bbfcb6954..cc220e95b1 100644 --- a/files/fr/web/css/_colon_-moz-list-bullet/index.md +++ b/files/fr/web/css/_colon_-moz-list-bullet/index.md @@ -9,48 +9,49 @@ tags: translation_of: Web/CSS/:-moz-list-bullet original_slug: Web/CSS/::-moz-list-bullet --- -
                    {{Non-standard_header}}{{CSSRef}}
                    +{{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")}}).

                    +Le [pseudo-élément CSS](/fr/docs/Web/CSS/Pseudo-éléments) 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

                    +## Syntaxe -
                    li::-moz-list-bullet { propriétés de style }
                    + li::-moz-list-bullet { propriétés de style } -

                    Exemples

                    +## Exemples -

                    HTML

                    +### HTML -
                    <ul>
-  <li>Numéro 1</li>
-  <li>Numéro 2</li>
-  <li>Numéro 3</li>
-</ul>
+```html
+
                      
+  
                    • Numéro 1
                      • 
+  
                    • Numéro 2
                      • 
+  
                    • Numéro 3
                      • 
+
                    
 
-<ul class="list">
-  <li>Numéro 1</li>
-  <li>Numéro 2</li>
-  <li>Numéro 3</li>
-</ul>
-
                    +
                      +
                    • Numéro 1
                      • +
                    • Numéro 2
                      • +
                    • Numéro 3
                      • +
                    +``` -

                    CSS

                    +### CSS -
                    .list ::-moz-list-bullet {
+```css
+.list ::-moz-list-bullet {
   font-size: 36px;
-}
                    +} +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/:-moz-list-bullet')}}

                    +{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/:-moz-list-bullet')}} -

                    Spécifications

                    +## Spécifications -

                    Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

                    +Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification. -

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref(":-moz-list-number")}}
                      • -
                    • {{cssxref("::marker")}}
                      • -
                    +- {{cssxref(":-moz-list-number")}} +- {{cssxref("::marker")}} diff --git a/files/fr/web/css/_colon_-moz-list-number/index.md b/files/fr/web/css/_colon_-moz-list-number/index.md index 8a4d2f4be6..96b4f9ca7f 100644 --- a/files/fr/web/css/_colon_-moz-list-number/index.md +++ b/files/fr/web/css/_colon_-moz-list-number/index.md @@ -9,45 +9,44 @@ tags: translation_of: Web/CSS/:-moz-list-number original_slug: Web/CSS/::-moz-list-number --- -
                    {{Non-standard_header}}{{CSSRef}}
                    +{{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")}}).

                    +Le [pseudo-élément CSS](/fr/docs/Web/CSS/Pseudo-éléments) **`::-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

                    +## Syntaxe -
                    li::-moz-list-number { propriétés de style }
-
                    + li::-moz-list-number { propriétés de style } -

                    Exemples

                    +## Exemples -

                    CSS

                    +### CSS -
                    li::-moz-list-number {
+```css
+li::-moz-list-number {
   font-style: italic;
   font-weight: bold;
 }
-
                    +``` -

                    HTML

                    +### HTML -
                    <ol>
-  <li>Premier élément</li>
-  <li>Second élément</li>
-  <li>Troisième élément</li>
-</ol>
-
                    +```html +
                      +
                    1. Premier élément
                      2. +
                    2. Second élément
                      3. +
                    3. Troisième élément
                      4. +
                    +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemple")}}

                    +{{EmbedLiveSample("Exemple")}} -

                    Spécifications

                    +## Spécifications -

                    Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

                    +Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification. -

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref(":-moz-list-bullet")}}
                      • -
                    • {{cssxref("::marker")}}
                      • -
                    +- {{cssxref(":-moz-list-bullet")}} +- {{cssxref("::marker")}} diff --git a/files/fr/web/css/_colon_-moz-loading/index.md b/files/fr/web/css/_colon_-moz-loading/index.md index 4efb552f03..b5aacfc7f7 100644 --- a/files/fr/web/css/_colon_-moz-loading/index.md +++ b/files/fr/web/css/_colon_-moz-loading/index.md @@ -1,36 +1,36 @@ --- title: ':-moz-loading' -slug: 'Web/CSS/:-moz-loading' +slug: Web/CSS/:-moz-loading tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-moz-loading' +translation_of: Web/CSS/:-moz-loading --- -
                    {{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}
                    +{{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.

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

                    +Cette pseudo-classe est principalement destinée aux développeurs de thèmes. -

                    Syntaxe

                    +## Syntaxe -
                    :-moz-loading
                    + :-moz-loading -

                    Exemples

                    +## Exemples -
                    img:-moz-loading {
+```css
+img:-moz-loading {
   background-color: #aaa;
   background-image: url(loading-animation.gif) center no-repeat;
-}
                    +} +``` -

                    Spécifications

                    +## Spécifications -

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

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

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref(":-moz-broken")}}, {{cssxref(":-moz-suppressed")}}, {{cssxref(":-moz-user-disabled")}}
                      • -
                    +- {{cssxref(":-moz-broken")}}, {{cssxref(":-moz-suppressed")}}, {{cssxref(":-moz-user-disabled")}} diff --git a/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.md b/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.md index 13622d0dd1..21b5b54dea 100644 --- a/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.md +++ b/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.md @@ -1,6 +1,6 @@ --- title: ':-moz-locale-dir(ltr)' -slug: 'Web/CSS/:-moz-locale-dir(ltr)' +slug: Web/CSS/:-moz-locale-dir(ltr) tags: - CSS - Localisation @@ -8,40 +8,41 @@ tags: - Pseudo-classe - Reference - l10n -translation_of: 'Web/CSS/:-moz-locale-dir(ltr)' +translation_of: Web/CSS/:-moz-locale-dir(ltr) --- -
                    {{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}
                    +{{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".

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

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

                    +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

                    +## Exemples -

                    HTML

                    +### HTML -
                    <p>Sur une interface allant de gauche à droite, ce texte devrait être rouge.</p>
-
                    +```html +

                    Sur une interface allant de gauche à droite, ce texte devrait être rouge.

                    +``` -

                    CSS

                    +### CSS -
                    p:-moz-locale-dir(ltr) {
+```css
+p:-moz-locale-dir(ltr) {
   color: red;
-}
                    +} +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples")}}

                    +{{EmbedLiveSample("Exemples")}} -

                    Spécifications

                    +## Spécifications -

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

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

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref(":dir",":dir(…)")}}
                      • -
                    • {{cssxref(":-moz-locale-dir(rtl)")}}
                      • -
                    +- {{cssxref(":dir",":dir(…)")}} +- {{cssxref(":-moz-locale-dir(rtl)")}} diff --git a/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.md b/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.md index 8ab4f863d5..060e075bfd 100644 --- a/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.md +++ b/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.md @@ -1,6 +1,6 @@ --- title: ':-moz-locale-dir(rtl)' -slug: 'Web/CSS/:-moz-locale-dir(rtl)' +slug: Web/CSS/:-moz-locale-dir(rtl) tags: - CSS - Droite-à-gauche @@ -8,40 +8,41 @@ tags: - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-moz-locale-dir(rtl)' +translation_of: Web/CSS/:-moz-locale-dir(rtl) --- -
                    {{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}
                    +{{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".

                    +La [pseudo-classe CSS](/fr/docs/Web/CSS/Pseudo-classes) **`:-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.

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

                    +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

                    +## Exemples -

                    CSS

                    +### CSS -
                    p:-moz-locale-dir(rtl) {
+```css
+p:-moz-locale-dir(rtl) {
   color: red;
-}
                    +} +``` -

                    HTML

                    +### HTML -
                    <p>En utilisant une interface de droite à gauche, ce texte sera rouge.</p>
-
                    +```html +

                    En utilisant une interface de droite à gauche, ce texte sera rouge.

                    +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemples")}}

                    +{{EmbedLiveSample("Exemples")}} -

                    Spécifications

                    +## Spécifications -

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

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

                    Voir aussi

                    +## Voir aussi - +- {{cssxref(":-moz-locale-dir(ltr)")}} +- [Garantir le fonctionnement de votre thème avec les locales RTL](/en-US/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales) diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.md b/files/fr/web/css/_colon_-moz-only-whitespace/index.md index d53499bc80..55acde836f 100644 --- a/files/fr/web/css/_colon_-moz-only-whitespace/index.md +++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.md @@ -1,36 +1,36 @@ --- title: ':-moz-only-whitespace' -slug: 'Web/CSS/:-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' +translation_of: Web/CSS/:-moz-only-whitespace --- -
                    {{CSSRef}}{{SeeCompatTable}}
                    +{{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é.

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

                    +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:-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

                    +## Syntaxe {{CSSSyntax}} -

                    Exemples

                    +## Exemples -

                    HTML

                    +### HTML -
                    <div> </div>
-
                    +```html +
                    +``` -

                    CSS

                    +### CSS - +``` -
                    div {
+```css
+div {
   border: 4px solid red;
 }
 
 :-moz-only-whitespace {
   border-color: lime;
-}
                    +} +``` -

                    Résultat

                    +### Résultat -

                    {{EmbedLiveSample("Exemple", "100%", "50")}}

                    +{{EmbedLiveSample("Exemple", "100%", "50")}} -

                    Spécifications

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

                    +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

                    +## Compatibilité des navigateurs -

                    {{Compat("css.selectors.moz-only-whitespace")}}

                    +{{Compat("css.selectors.moz-only-whitespace")}} -

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{CSSxRef(":blank")}} {{Experimental_Inline}}
                      • -
                    • {{CSSxRef(":empty")}}
                      • -
                    +- {{CSSxRef(":blank")}} {{Experimental_Inline}} +- {{CSSxRef(":empty")}} diff --git a/files/fr/web/css/_colon_-moz-submit-invalid/index.md b/files/fr/web/css/_colon_-moz-submit-invalid/index.md index 30f9856f3d..5ae1fc9dc3 100644 --- a/files/fr/web/css/_colon_-moz-submit-invalid/index.md +++ b/files/fr/web/css/_colon_-moz-submit-invalid/index.md @@ -1,37 +1,34 @@ --- title: ':-moz-submit-invalid' -slug: 'Web/CSS/:-moz-submit-invalid' +slug: Web/CSS/:-moz-submit-invalid tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-moz-submit-invalid' +translation_of: Web/CSS/:-moz-submit-invalid --- -
                    {{Non-standard_header}}{{CSSRef}}
                    +{{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.

                    +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) 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](/fr/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation "en/HTML/HTML5/Forms in HTML5#Constraint 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.

                    +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

                    +## Syntaxe -
                    :-moz-submit-invalid
-
                    + :-moz-submit-invalid -

                    Spécifications

                    +## Spécifications -

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

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

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat("css.selectors.-moz-submit-invalid")}}

                    +{{Compat("css.selectors.-moz-submit-invalid")}} -

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref(":valid")}}
                      • -
                    • {{cssxref(":invalid")}}
                      • -
                    • {{cssxref(":required")}}
                      • -
                    • {{cssxref(":optional")}}
                      • -
                    +- {{cssxref(":valid")}} +- {{cssxref(":invalid")}} +- {{cssxref(":required")}} +- {{cssxref(":optional")}} diff --git a/files/fr/web/css/_colon_-moz-suppressed/index.md b/files/fr/web/css/_colon_-moz-suppressed/index.md index d250f94a15..3dddc706a2 100644 --- a/files/fr/web/css/_colon_-moz-suppressed/index.md +++ b/files/fr/web/css/_colon_-moz-suppressed/index.md @@ -1,38 +1,38 @@ --- title: ':-moz-suppressed' -slug: 'Web/CSS/:-moz-suppressed' +slug: Web/CSS/:-moz-suppressed tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-moz-suppressed' +translation_of: Web/CSS/:-moz-suppressed --- -
                    {{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
                    +{{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é.

                    +`:-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.

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

                    Syntaxe

                    +## Syntaxe -
                    :-moz-suppressed
                    + :-moz-suppressed -

                    Exemple

                    +## Exemple -
                    :-moz-suppressed {
+```css
+:-moz-suppressed {
   background: yellow;
   padding: 8px;
-}
                    +} +``` -

                    Spécifications

                    +## Spécifications -

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

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

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref(":-moz-broken")}}
                      • -
                    • {{cssxref(":-moz-loading")}}
                      • -
                    • {{cssxref(":-moz-user-disabled")}}
                      • -
                    +- {{cssxref(":-moz-broken")}} +- {{cssxref(":-moz-loading")}} +- {{cssxref(":-moz-user-disabled")}} diff --git a/files/fr/web/css/_colon_-moz-user-disabled/index.md b/files/fr/web/css/_colon_-moz-user-disabled/index.md index 7890fbdca6..46b0a59daf 100644 --- a/files/fr/web/css/_colon_-moz-user-disabled/index.md +++ b/files/fr/web/css/_colon_-moz-user-disabled/index.md @@ -1,38 +1,38 @@ --- title: ':-moz-user-disabled' -slug: 'Web/CSS/:-moz-user-disabled' +slug: Web/CSS/:-moz-user-disabled tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-moz-user-disabled' +translation_of: Web/CSS/:-moz-user-disabled --- -
                    {{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
                    +{{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.

                    +La [pseudo-classe CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-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.

                    +Ce sélecteur est destiné principalement à une utilisation par les développeurs de thèmes. -

                    Syntaxe

                    +## Syntaxe -
                    :-moz-user-disabled
                    + :-moz-user-disabled -

                    Exemples

                    +## Exemples -
                    :-moz-user-disabled {
+```css
+:-moz-user-disabled {
   background-color: lightgray;
   padding: 8px;
-}
                    +} +``` -

                    Spécifications

                    +## Spécifications -

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

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

                    Voir aussi

                    +## Voir aussi -
                      -
                    • {{cssxref(":-moz-broken")}}
                      • -
                    • {{cssxref(":-moz-loading")}}
                      • -
                    • {{cssxref(":-moz-suppressed")}}
                      • -
                    +- {{cssxref(":-moz-broken")}} +- {{cssxref(":-moz-loading")}} +- {{cssxref(":-moz-suppressed")}} diff --git a/files/fr/web/css/_colon_-moz-window-inactive/index.md b/files/fr/web/css/_colon_-moz-window-inactive/index.md index e0352a939f..e31fd89e80 100644 --- a/files/fr/web/css/_colon_-moz-window-inactive/index.md +++ b/files/fr/web/css/_colon_-moz-window-inactive/index.md @@ -1,53 +1,53 @@ --- title: ':-moz-window-inactive' -slug: 'Web/CSS/:-moz-window-inactive' +slug: Web/CSS/:-moz-window-inactive tags: - CSS - Non-standard - Pseudo-classe - Reference -translation_of: 'Web/CSS/:-moz-window-inactive' +translation_of: Web/CSS/:-moz-window-inactive --- -
                    {{CSSRef}}{{Non-standard_header}}
                    +{{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.

                    +La pseudo-classe **`:-moz-window-inactive`**, spécifique à Mozilla, correspond à n'importe quel élément qui se trouve sur une fenêtre inactive. -
                    -

                    Note : Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut active="true" sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé.

                    -
                    +> **Note :** Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut `active="true"` sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé. -

                    :-moz-window-inactive fonctionne également pour le contenu des documents HTML.

                    +`:-moz-window-inactive` fonctionne également pour le contenu des documents HTML. -

                    Exemples

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

                    +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

                    +### CSS -
                    #maboite {
+```css
+#maboite {
   background: linear-gradient(to bottom, blue, cyan);
 }
 
 #maboite:-moz-window-inactive {
   background: cyan;
 }
-
                    +``` -

                    HTML

                    +### HTML -
                    <div id="maboite" style="width:200px; height:200px;">
-  <p>Une boîte :)</p>
-</div>
-
                    +```html +
                    +

                    Une boîte :)

                    +
                    +``` -

                    Résultat

                    +### Résultat -

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

                    +{{EmbedLiveSample("Exemples","220","220")}} -

                    Spécifications

                    +## Spécifications -

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

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

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat("css.selectors.-moz-window-inactive")}}

                    +{{Compat("css.selectors.-moz-window-inactive")}} diff --git a/files/fr/web/css/_colon_active/index.md b/files/fr/web/css/_colon_active/index.md index 0ac630a4c3..8317472411 100644 --- a/files/fr/web/css/_colon_active/index.md +++ b/files/fr/web/css/_colon_active/index.md @@ -1,129 +1,106 @@ --- title: ':active' -slug: 'Web/CSS/:active' +slug: Web/CSS/:active tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:active' +translation_of: Web/CSS/:active --- -
                    {{CSSRef}}
                    +{{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.

                    +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`: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é */
+```css
+/* ne cible  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 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.

                    +La mise en forme associée peut être surchargée par les autres pseudo-classes pour les liens : {{cssxref(":link")}}, {{cssxref(":hover")}} et {{cssxref(":visited")}} lorsqu'elles sont utilisées dans des règles qui suivent. Afin de mettre en forme les liens de façon correcte, la règle avec `:active` doit être écrite après les autres : `:link` — `:visited` — `:hover` — `:active`. -
                    -

                    Note : Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe :active ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.

                    -
                    +> **Note :** Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe `:active` ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche. -

                    Syntax

                    +## Syntax {{csssyntax}} -

                    Exemples

                    +## Exemples -

                    Liens actifs

                    +### Liens actifs -

                    CSS

                    +#### CSS -
                    a:link { color: blue; }          /* Liens non visités */
+```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 */
                    +p:active { background: #eee; } /* Paragraphes actifs */ +``` -

                    HTML

                    +#### HTML -
                    <p>Ce paragraphe contient un lien :
-  <a href="#">Ce lien devient rouge quand vous cliquez dessus.</a>
+```html
+
                    Ce paragraphe contient un lien :
+  Ce lien devient rouge quand vous cliquez dessus.
   Le paragraphe sera sur un fond gris quand vous cliquerez dessus
   ou sur le lien.
-</p>
                    +

                    +``` -

                    Résultat

                    +#### Résultat -

                    {{EmbedLiveSample('Liens_actifs')}}

                    +{{EmbedLiveSample('Liens_actifs')}} -

                    Éléments de formulaire actifs

                    +### Éléments de formulaire actifs -

                    CSS

                    +#### CSS -
                    form :active {
+```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

                    - -
                      -
                    • {{cssxref(":link")}}
                      • -
                    • {{cssxref(":visited")}}
                      • -
                    • {{cssxref(":hover")}}
                      • -
                    +} +``` + +#### HTML + +```html +
                    + + +
                    +``` + +#### Résultat + +{{EmbedLiveSample('Éléments_de_formulaire_actifs')}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{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 + +- {{cssxref(":link")}} +- {{cssxref(":visited")}} +- {{cssxref(":hover")}} diff --git a/files/fr/web/css/_colon_any-link/index.md b/files/fr/web/css/_colon_any-link/index.md index 689e4d42b2..b6d515c4f0 100644 --- a/files/fr/web/css/_colon_any-link/index.md +++ b/files/fr/web/css/_colon_any-link/index.md @@ -1,33 +1,36 @@ --- title: ':any-link' -slug: 'Web/CSS/:any-link' +slug: Web/CSS/:any-link tags: - CSS - Experimental - Pseudo-classe - Reference -translation_of: 'Web/CSS/:any-link' +translation_of: Web/CSS/:any-link --- -
                    {{CSSRef}}
                    +{{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")}}.

                    +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 */
+```css
+/* cible tous les éléments qui seraient ciblés par */
 /* :link ou :visited */
 :any-link {
   color: green;
   font-weight: bold;
-}
                    +} +``` -

                    Syntaxe

                    +## Syntaxe {{csssyntax}} -

                    Exemples

                    +## Exemples -

                    CSS

                    +### CSS -
                    :any-link {
+```css
+:any-link {
   color: green;
   font-weight: bold;
 }
@@ -37,37 +40,26 @@ translation_of: 'Web/CSS/:any-link'
   color: green;
   font-weight: bold;
 }
-
                    +``` -

                    HTML

                    +### 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>
                    +```html +Une page différente
                    +Une ancre
                    +Un lien sans cible (n'est pas mis en forme) +``` -

                    Résultat

                    +### Résultat -

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

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

                    Spécifications

                    +## Spécifications - - - - - - - - - - - - - - - -
                    SpécificationÉtatCommentaires
                    {{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}{{Spec2('CSS4 Selectors')}}Définition initiale.
                    +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}} | {{Spec2('CSS4 Selectors')}} | Définition initiale. | -

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat("css.selectors.any-link")}}

                    +{{Compat("css.selectors.any-link")}} diff --git a/files/fr/web/css/_colon_autofill/index.md b/files/fr/web/css/_colon_autofill/index.md index c74d26ed18..b1b7827003 100644 --- a/files/fr/web/css/_colon_autofill/index.md +++ b/files/fr/web/css/_colon_autofill/index.md @@ -9,26 +9,22 @@ tags: translation_of: Web/CSS/:-webkit-autofill original_slug: Web/CSS/:-webkit-autofill --- -
                    {{CSSRef}}{{Non-standard_header}}
                    +{{CSSRef}}{{Non-standard_header}} -

                    La pseudo-classe :-webkit-autofill correspond à un élément {{HTMLElement("input")}} lorsque sa valeur est remplie automatiquement par le navigateur.

                    +La pseudo-classe **`:-webkit-autofill`** correspond à un élément {{HTMLElement("input")}} lorsque sa valeur est remplie automatiquement par le navigateur. -
                    -

                    Note : Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent !important pour les déclarations avec :-webkit-autofill ce qui les rend difficilement modifiables sans utiliser JavaScript.

                    -
                    +> **Note :** Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent `!important` pour les déclarations avec `:-webkit-autofill` ce qui les rend difficilement modifiables sans utiliser JavaScript. -

                    Spécifications

                    +## Spécifications -

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

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

                    Compatibilité des navigateurs

                    +## Compatibilité des navigateurs -

                    {{Compat("css.selectors.-webkit-autofill")}}

                    +{{Compat("css.selectors.-webkit-autofill")}} -

                    Voir aussi

                    +## Voir aussi - +- [Bug Chromium n°46543 : Le fond jaune des champs texte saisis automatiquement ne peut pas être désactivé.](https://code.google.com/p/chromium/issues/detail?id=46543) +- [Bug WebKit n°66032 : Permettre aux auteurs de surcharger la couleur des champs remplis automatiquement.](https://bugs.webkit.org/show_bug.cgi?id=66032) +- [Bug Mozilla n°740979 : Implémentation de la pseudo-classe `:-moz-autofill` pour  les éléments `input` avec une valeur saisie automatiquement.](https://bugzilla.mozilla.org/show_bug.cgi?id=740979) diff --git a/files/fr/web/css/_colon_blank/index.md b/files/fr/web/css/_colon_blank/index.md index db9d6f5d06..5623cca528 100644 --- a/files/fr/web/css/_colon_blank/index.md +++ b/files/fr/web/css/_colon_blank/index.md @@ -1,51 +1,34 @@ --- title: ':blank' -slug: 'Web/CSS/:blank' +slug: Web/CSS/:blank tags: - CSS - Draft - Experimental - Pseudo-classe - Reference -translation_of: 'Web/CSS/:blank' +translation_of: Web/CSS/:blank --- -

                    {{CSSRef}}{{Draft}}{{SeeCompatTable}}

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

                    -
                    +> **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](https://github.com/w3c/csswg-drafts/issues/1967 "[selectors] decide on :blank"). -

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

                    +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`: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

                    +## 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

                    - -
                      -
                    • {{CSSxRef(":empty")}}
                      • -
                    +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}} | {{Spec2("CSS4 Selectors")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.selectors.blank")}} + +## Voir aussi + +- {{CSSxRef(":empty")}} diff --git a/files/fr/web/css/_colon_checked/index.md b/files/fr/web/css/_colon_checked/index.md index fba13cef19..14955f7d3e 100644 --- a/files/fr/web/css/_colon_checked/index.md +++ b/files/fr/web/css/_colon_checked/index.md @@ -7,56 +7,55 @@ tags: - Reference translation_of: Web/CSS/:checked --- -
                    {{CSSRef}}
                    +{{CSSRef}} -

                    La pseudo-classe :checked représente n'importe quel bouton radio (<input type="radio">), case à cocher (<input type="checkbox">) ou option ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (on). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe :checked ne s'applique plus à l'élément en question.

                    +La pseudo-classe **`:checked`** représente n'importe quel **bouton radio** ([``](/fr/docs/Web/HTML/Element/Input/radio)), **case à cocher** ([``](/fr/docs/Web/HTML/Element/Input/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
+```css
+/* 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.

                    -
                    +> **Note :** Les navigateurs considèrent souvent les éléments `