From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/-moz-binding/index.html | 65 + .../web/css/-moz-border-bottom-colors/index.html | 134 + .../de/web/css/-moz-border-left-colors/index.html | 136 + .../de/web/css/-moz-border-right-colors/index.html | 88 + files/de/web/css/-moz-border-top-colors/index.html | 136 + files/de/web/css/-moz-box-flex/index.html | 103 + files/de/web/css/-moz-box-ordinal-group/index.html | 66 + files/de/web/css/-moz-box-pack/index.html | 136 + files/de/web/css/-moz-cell/index.html | 11 + files/de/web/css/-moz-float-edge/index.html | 67 + .../css/-moz-force-broken-image-icon/index.html | 57 + files/de/web/css/-moz-image-rect/index.html | 146 + files/de/web/css/-moz-image-region/index.html | 84 + files/de/web/css/-moz-orient/index.html | 73 + .../css/-moz-outline-radius-bottomleft/index.html | 22 + .../css/-moz-outline-radius-bottomright/index.html | 22 + .../web/css/-moz-outline-radius-topleft/index.html | 22 + .../css/-moz-outline-radius-topright/index.html | 22 + files/de/web/css/-moz-outline-radius/index.html | 141 + files/de/web/css/-moz-stack-sizing/index.html | 59 + files/de/web/css/-moz-text-blink/index.html | 47 + files/de/web/css/-moz-user-focus/index.html | 117 + files/de/web/css/-moz-user-input/index.html | 64 + files/de/web/css/-moz-user-modify/index.html | 133 + files/de/web/css/-moz-user-select/index.html | 55 + files/de/web/css/-moz-window-shadow/index.html | 53 + files/de/web/css/-webkit-box-reflect/index.html | 116 + files/de/web/css/-webkit-mask-origin/index.html | 100 + .../de/web/css/-webkit-mask-position-x/index.html | 124 + .../de/web/css/-webkit-mask-position-y/index.html | 122 + files/de/web/css/-webkit-mask-repeat-x/index.html | 128 + files/de/web/css/-webkit-mask-repeat-y/index.html | 126 + files/de/web/css/-webkit-mask-repeat/index.html | 127 + .../web/css/-webkit-overflow-scrolling/index.html | 95 + .../web/css/-webkit-print-color-adjust/index.html | 97 + .../web/css/-webkit-tap-highlight-color/index.html | 33 + .../de/web/css/-webkit-text-fill-color/index.html | 83 + .../web/css/-webkit-text-stroke-color/index.html | 108 + .../web/css/-webkit-text-stroke-width/index.html | 85 + files/de/web/css/-webkit-text-stroke/index.html | 126 + files/de/web/css/-webkit-touch-callout/index.html | 108 + files/de/web/css/@charset/index.html | 79 + files/de/web/css/@document/index.html | 71 + files/de/web/css/@import/index.html | 79 + files/de/web/css/@keyframes/index.html | 114 + files/de/web/css/@media/any-pointer/index.html | 67 + files/de/web/css/@media/index.html | 260 ++ files/de/web/css/@media/pointer/index.html | 91 + .../css/@media/prefers-reduced-motion/index.html | 23 + files/de/web/css/@media/width/index.html | 53 + files/de/web/css/@page/bleed/index.html | 77 + files/de/web/css/@page/index.html | 90 + files/de/web/css/@page/marks/index.html | 84 + files/de/web/css/@viewport/index.html | 96 + files/de/web/css/_colon_-moz-broken/index.html | 25 + files/de/web/css/_colon_-moz-drag-over/index.html | 42 + files/de/web/css/_colon_-moz-first-node/index.html | 48 + files/de/web/css/_colon_-moz-focusring/index.html | 91 + .../_colon_-moz-full-screen-ancestor/index.html | 82 + .../web/css/_colon_-moz-handler-blocked/index.html | 23 + .../web/css/_colon_-moz-handler-crashed/index.html | 23 + .../css/_colon_-moz-handler-disabled/index.html | 23 + files/de/web/css/_colon_-moz-last-node/index.html | 48 + .../de/web/css/_colon_-moz-list-bullet/index.html | 47 + .../de/web/css/_colon_-moz-list-number/index.html | 45 + files/de/web/css/_colon_-moz-loading/index.html | 17 + .../web/css/_colon_-moz-locale-dir(ltr)/index.html | 28 + .../web/css/_colon_-moz-locale-dir(rtl)/index.html | 30 + .../css/_colon_-moz-lwtheme-brighttext/index.html | 22 + .../css/_colon_-moz-lwtheme-darktext/index.html | 23 + files/de/web/css/_colon_-moz-lwtheme/index.html | 26 + .../web/css/_colon_-moz-only-whitespace/index.html | 36 + .../de/web/css/_colon_-moz-placeholder/index.html | 120 + .../web/css/_colon_-moz-submit-invalid/index.html | 28 + files/de/web/css/_colon_-moz-suppressed/index.html | 17 + .../index.html | 19 + .../index.html | 25 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 65 + .../_colon_-moz-tree-cell-text(hover)/index.html | 20 + .../web/css/_colon_-moz-tree-cell-text/index.html | 30 + files/de/web/css/_colon_-moz-tree-cell/index.html | 38 + .../de/web/css/_colon_-moz-tree-column/index.html | 29 + .../css/_colon_-moz-tree-drop-feedback/index.html | 29 + files/de/web/css/_colon_-moz-tree-image/index.html | 34 + .../css/_colon_-moz-tree-indentation/index.html | 27 + files/de/web/css/_colon_-moz-tree-line/index.html | 25 + .../css/_colon_-moz-tree-progressmeter/index.html | 28 + .../web/css/_colon_-moz-tree-row(hover)/index.html | 20 + files/de/web/css/_colon_-moz-tree-row/index.html | 48 + .../web/css/_colon_-moz-tree-separator/index.html | 29 + .../de/web/css/_colon_-moz-tree-twisty/index.html | 30 + files/de/web/css/_colon_-moz-ui-invalid/index.html | 94 + files/de/web/css/_colon_-moz-ui-valid/index.html | 94 + .../web/css/_colon_-moz-user-disabled/index.html | 19 + .../web/css/_colon_-moz-window-inactive/index.html | 51 + .../de/web/css/_colon_-webkit-autofill/index.html | 80 + files/de/web/css/_colon_active/index.html | 84 + files/de/web/css/_colon_default/index.html | 83 + files/de/web/css/_colon_dir/index.html | 69 + files/de/web/css/_colon_disabled/index.html | 139 + files/de/web/css/_colon_empty/index.html | 66 + files/de/web/css/_colon_enabled/index.html | 96 + files/de/web/css/_colon_first-child/index.html | 103 + files/de/web/css/_colon_first-of-type/index.html | 76 + files/de/web/css/_colon_first/index.html | 65 + files/de/web/css/_colon_focus/index.html | 79 + files/de/web/css/_colon_fullscreen/index.html | 81 + files/de/web/css/_colon_hover/index.html | 122 + files/de/web/css/_colon_in-range/index.html | 117 + files/de/web/css/_colon_indeterminate/index.html | 74 + files/de/web/css/_colon_invalid/index.html | 134 + files/de/web/css/_colon_lang/index.html | 85 + files/de/web/css/_colon_last-child/index.html | 74 + files/de/web/css/_colon_last-of-type/index.html | 86 + files/de/web/css/_colon_link/index.html | 70 + files/de/web/css/_colon_not/index.html | 76 + files/de/web/css/_colon_nth-child/index.html | 163 + files/de/web/css/_colon_only-child/index.html | 113 + files/de/web/css/_colon_optional/index.html | 69 + files/de/web/css/_colon_out-of-range/index.html | 94 + files/de/web/css/_colon_required/index.html | 67 + files/de/web/css/_colon_root/index.html | 48 + files/de/web/css/_colon_visited/index.html | 76 + .../css/_doublecolon_-moz-page-sequence/index.html | 83 + files/de/web/css/_doublecolon_-moz-page/index.html | 28 + .../css/_doublecolon_-moz-placeholder/index.html | 107 + .../css/_doublecolon_-moz-progress-bar/index.html | 36 + .../index.html | 81 + .../de/web/css/_doublecolon_-ms-browse/index.html | 79 + files/de/web/css/_doublecolon_-ms-check/index.html | 23 + .../web/css/_doublecolon_-ms-fill-lower/index.html | 90 + .../web/css/_doublecolon_-ms-fill-upper/index.html | 90 + files/de/web/css/_doublecolon_-ms-fill/index.html | 71 + .../de/web/css/_doublecolon_-ms-reveal/index.html | 24 + files/de/web/css/_doublecolon_-ms-thumb/index.html | 24 + files/de/web/css/_doublecolon_after/index.html | 158 + files/de/web/css/_doublecolon_backdrop/index.html | 49 + files/de/web/css/_doublecolon_before/index.html | 230 ++ .../de/web/css/_doublecolon_placeholder/index.html | 150 + files/de/web/css/_doublecolon_selection/index.html | 86 + files/de/web/css/alias/index.html | 10 + files/de/web/css/align-content/index.html | 212 ++ files/de/web/css/align-items/index.html | 107 + files/de/web/css/align-self/index.html | 95 + files/de/web/css/all/index.html | 140 + .../de/web/css/alternative_style_sheets/index.html | 47 + files/de/web/css/angle-percentage/index.html | 50 + files/de/web/css/angle/index.html | 86 + .../angrenzende_geschwisterselektoren/index.html | 88 + files/de/web/css/animation-delay/index.html | 78 + files/de/web/css/animation-direction/index.html | 91 + files/de/web/css/animation-duration/index.html | 79 + files/de/web/css/animation-fill-mode/index.html | 145 + .../web/css/animation-iteration-count/index.html | 75 + files/de/web/css/animation-name/index.html | 86 + files/de/web/css/animation-play-state/index.html | 84 + .../web/css/animation-timing-function/index.html | 93 + files/de/web/css/animation/index.html | 125 + files/de/web/css/appearance/index.html | 1532 +++++++++ files/de/web/css/at-rule/index.html | 61 + files/de/web/css/attr()/index.html | 189 ++ files/de/web/css/attributselektoren/index.html | 122 + files/de/web/css/aural/index.html | 17 + files/de/web/css/auto/index.html | 26 + files/de/web/css/backdrop-filter/index.html | 97 + files/de/web/css/backface-visibility/index.html | 208 ++ files/de/web/css/background-attachment/index.html | 158 + files/de/web/css/background-blend-mode/index.html | 129 + files/de/web/css/background-clip/index.html | 110 + files/de/web/css/background-color/index.html | 133 + files/de/web/css/background-image/index.html | 155 + files/de/web/css/background-origin/index.html | 60 + files/de/web/css/background-position/index.html | 86 + files/de/web/css/background-repeat/index.html | 166 + files/de/web/css/background-size/index.html | 151 + files/de/web/css/background/index.html | 182 ++ files/de/web/css/basic-shape/index.html | 176 ++ files/de/web/css/berechneter_wert/index.html | 32 + files/de/web/css/border-bottom-color/index.html | 99 + .../web/css/border-bottom-left-radius/index.html | 51 + .../web/css/border-bottom-right-radius/index.html | 56 + files/de/web/css/border-bottom-style/index.html | 99 + files/de/web/css/border-bottom-width/index.html | 82 + files/de/web/css/border-bottom/index.html | 89 + files/de/web/css/border-collapse/index.html | 155 + files/de/web/css/border-color/index.html | 107 + files/de/web/css/border-image-outset/index.html | 77 + files/de/web/css/border-image-repeat/index.html | 83 + files/de/web/css/border-image-slice/index.html | 102 + files/de/web/css/border-image-source/index.html | 67 + files/de/web/css/border-image-width/index.html | 119 + files/de/web/css/border-image/index.html | 101 + files/de/web/css/border-left-color/index.html | 36 + files/de/web/css/border-left-style/index.html | 120 + files/de/web/css/border-left-width/index.html | 38 + files/de/web/css/border-left/index.html | 48 + files/de/web/css/border-radius/index.html | 141 + files/de/web/css/border-right-color/index.html | 36 + files/de/web/css/border-right-style/index.html | 120 + files/de/web/css/border-right-width/index.html | 90 + files/de/web/css/border-right/index.html | 48 + files/de/web/css/border-spacing/index.html | 143 + files/de/web/css/border-style/index.html | 219 ++ files/de/web/css/border-top-color/index.html | 81 + files/de/web/css/border-top-left-radius/index.html | 91 + .../de/web/css/border-top-right-radius/index.html | 47 + files/de/web/css/border-top-style/index.html | 120 + files/de/web/css/border-top-width/index.html | 90 + files/de/web/css/border-top/index.html | 98 + files/de/web/css/border-width/index.html | 118 + files/de/web/css/border/index.html | 99 + files/de/web/css/bottom/index.html | 74 + files/de/web/css/box-decoration-break/index.html | 136 + files/de/web/css/box-shadow/index.html | 107 + files/de/web/css/box-sizing/index.html | 137 + files/de/web/css/break-after/index.html | 114 + files/de/web/css/break-inside/index.html | 127 + files/de/web/css/calc()/index.html | 106 + files/de/web/css/caption-side/index.html | 153 + files/de/web/css/clear/index.html | 250 ++ files/de/web/css/clip-path/index.html | 128 + files/de/web/css/clip/index.html | 131 + files/de/web/css/color/index.html | 121 + files/de/web/css/column-count/index.html | 106 + files/de/web/css/column-fill/index.html | 74 + files/de/web/css/column-gap/index.html | 94 + files/de/web/css/column-rule-color/index.html | 67 + files/de/web/css/column-rule-style/index.html | 72 + files/de/web/css/column-rule-width/index.html | 78 + files/de/web/css/column-rule/index.html | 74 + files/de/web/css/column-span/index.html | 67 + files/de/web/css/column-width/index.html | 99 + files/de/web/css/columns/index.html | 113 + files/de/web/css/content/index.html | 238 ++ files/de/web/css/counter-increment/index.html | 99 + files/de/web/css/counter-reset/index.html | 100 + .../css_animationen_nutzen/index.html | 365 +++ files/de/web/css/css_animations/index.html | 79 + .../border-image_generator/index.html | 2626 +++++++++++++++ .../border-radius_generator/index.html | 1600 ++++++++++ .../web/css/css_background_and_borders/index.html | 154 + .../index.html" | 69 + .../de/web/css/css_basic_user_interface/index.html | 76 + .../css_boxmodell/box-shadow_generator/index.html | 2884 +++++++++++++++++ .../index.html" | 52 + files/de/web/css/css_boxmodell/index.html | 165 + .../index.html" | 60 + files/de/web/css/css_charsets/index.html | 50 + .../css/css_colors/farbauswahl_werkzeug/index.html | 3225 +++++++++++++++++++ files/de/web/css/css_colors/index.html | 117 + files/de/web/css/css_columns/index.html | 60 + .../css/css_compositing_and_blending/index.html | 98 + files/de/web/css/css_conditional_rules/index.html | 100 + files/de/web/css/css_device_adaptation/index.html | 104 + .../aligning_items_in_a_flex_container/index.html | 210 ++ .../flex_elemente_sortieren/index.html | 138 + .../grundlegende_konzepte_der_flexbox/index.html | 230 ++ .../de/web/css/css_flexible_box_layout/index.html | 111 + .../using_css_flexible_boxes/index.html | 397 +++ files/de/web/css/css_fonts/index.html | 145 + files/de/web/css/css_generated_content/index.html | 61 + files/de/web/css/css_grid_layout/index.html | 252 ++ .../implementing_image_sprites_in_css/index.html | 50 + files/de/web/css/css_images/index.html | 145 + .../css_z\303\244hler_verwenden/index.html" | 126 + files/de/web/css/css_lists_and_counters/index.html | 132 + .../index.html" | 104 + files/de/web/css/css_logical_properties/index.html | 129 + files/de/web/css/css_masken/index.html | 55 + .../de/web/css/css_namensr\303\244ume/index.html" | 51 + files/de/web/css/css_positioning/index.html | 64 + .../adding_z-index/index.html | 161 + .../understanding_z_index/index.html | 51 + .../the_stacking_context/index.html | 243 ++ files/de/web/css/css_referenz/index.html | 211 ++ files/de/web/css/css_ruby/index.html | 97 + files/de/web/css/css_selectors/index.html | 153 + files/de/web/css/css_shapes/index.html | 98 + files/de/web/css/css_table/index.html | 101 + files/de/web/css/css_text/index.html | 123 + files/de/web/css/css_textdekoration/index.html | 65 + .../css_transformationen_verwenden/index.html | 248 ++ files/de/web/css/css_transforms/index.html | 152 + files/de/web/css/css_transitions/index.html | 116 + files/de/web/css/css_typen/index.html | 59 + files/de/web/css/css_user_interface/index.html | 116 + files/de/web/css/css_writing_modes/index.html | 109 + files/de/web/css/cssom_view/index.html | 99 + files/de/web/css/cursor/index.html | 300 ++ files/de/web/css/custom-ident/index.html | 120 + files/de/web/css/direction/index.html | 90 + files/de/web/css/display/index.html | 259 ++ files/de/web/css/empty-cells/index.html | 76 + files/de/web/css/ersetztes_element/index.html | 23 + files/de/web/css/farben/index.html | 1285 ++++++++ files/de/web/css/filter/index.html | 1064 +++++++ files/de/web/css/flex-flow/index.html | 64 + files/de/web/css/flex-grow/index.html | 82 + files/de/web/css/flex-shrink/index.html | 75 + files/de/web/css/flex-wrap/index.html | 81 + files/de/web/css/float/index.html | 109 + files/de/web/css/font-family/index.html | 185 ++ files/de/web/css/font-feature-settings/index.html | 108 + files/de/web/css/font-size/index.html | 327 ++ files/de/web/css/font-style/index.html | 225 ++ files/de/web/css/font-variant/index.html | 116 + files/de/web/css/font-weight/index.html | 276 ++ files/de/web/css/font/index.html | 176 ++ files/de/web/css/frequency/index.html | 111 + files/de/web/css/gradient/index.html | 91 + files/de/web/css/grid-gap/index.html | 177 ++ files/de/web/css/grid-template-areas/index.html | 194 ++ files/de/web/css/grid/index.html | 184 ++ files/de/web/css/height/index.html | 157 + files/de/web/css/hyphens/index.html | 119 + files/de/web/css/id-selektoren/index.html | 72 + files/de/web/css/image-orientation/index.html | 98 + files/de/web/css/image-rendering/index.html | 114 + files/de/web/css/image/index.html | 129 + files/de/web/css/index.html | 100 + files/de/web/css/index/index.html | 8 + files/de/web/css/inherit/index.html | 75 + files/de/web/css/initial/index.html | 100 + files/de/web/css/initialwert/index.html | 20 + files/de/web/css/integer/index.html | 89 + files/de/web/css/justify-content/index.html | 187 ++ files/de/web/css/kindselektoren/index.html | 90 + files/de/web/css/klassenselektoren/index.html | 76 + files/de/web/css/kurzformat_eigenschaft/index.html | 158 + files/de/web/css/layout_mode/index.html | 27 + files/de/web/css/left/index.html | 190 ++ files/de/web/css/length/index.html | 178 ++ files/de/web/css/letter-spacing/index.html | 117 + files/de/web/css/line-break/index.html | 72 + files/de/web/css/linear-gradient()/index.html | 332 ++ files/de/web/css/list-style-image/index.html | 102 + files/de/web/css/list-style-position/index.html | 116 + files/de/web/css/list-style-type/index.html | 562 ++++ files/de/web/css/list-style/index.html | 104 + files/de/web/css/margin-bottom/index.html | 87 + files/de/web/css/margin-left/index.html | 87 + files/de/web/css/margin-right/index.html | 87 + files/de/web/css/margin-top/index.html | 87 + files/de/web/css/margin/index.html | 121 + files/de/web/css/mask/index.html | 96 + files/de/web/css/max-height/index.html | 111 + files/de/web/css/max-width/index.html | 139 + files/de/web/css/media_queries/index.html | 76 + .../media_queries/using_media_queries/index.html | 644 ++++ files/de/web/css/min-height/index.html | 77 + files/de/web/css/min-width/index.html | 101 + files/de/web/css/mix-blend-mode/index.html | 97 + files/de/web/css/motion_path/index.html | 104 + files/de/web/css/mozilla_extensions/index.html | 661 ++++ files/de/web/css/none/index.html | 25 + files/de/web/css/normal/index.html | 27 + files/de/web/css/number/index.html | 80 + files/de/web/css/object-fit/index.html | 148 + files/de/web/css/object-position/index.html | 147 + files/de/web/css/opacity/index.html | 158 + files/de/web/css/order/index.html | 104 + files/de/web/css/orphans/index.html | 121 + files/de/web/css/outline-color/index.html | 154 + files/de/web/css/outline/index.html | 162 + files/de/web/css/overflow-clip-box/index.html | 97 + files/de/web/css/overflow/index.html | 130 + files/de/web/css/overscroll-behavior-y/index.html | 85 + files/de/web/css/overscroll-behavior/index.html | 104 + files/de/web/css/padding-bottom/index.html | 76 + files/de/web/css/padding-left/index.html | 86 + files/de/web/css/padding-right/index.html | 76 + files/de/web/css/padding-top/index.html | 76 + files/de/web/css/padding/index.html | 125 + files/de/web/css/page-break-after/index.html | 90 + files/de/web/css/page-break-before/index.html | 90 + files/de/web/css/page-break-inside/index.html | 87 + files/de/web/css/paged_media/index.html | 21 + files/de/web/css/percentage/index.html | 84 + files/de/web/css/pointer-events/index.html | 184 ++ files/de/web/css/position/index.html | 104 + files/de/web/css/position_value/index.html | 86 + files/de/web/css/property_template/index.html | 165 + files/de/web/css/pseudo-classes/index.html | 122 + files/de/web/css/pseudo-elements/index.html | 78 + files/de/web/css/quotes/index.html | 86 + files/de/web/css/ratio/index.html | 79 + files/de/web/css/resize/index.html | 196 ++ files/de/web/css/resolution/index.html | 145 + files/de/web/css/right/index.html | 97 + files/de/web/css/row-gap/index.html | 163 + files/de/web/css/ruby-align/index.html | 153 + files/de/web/css/scroll-behavior/index.html | 143 + files/de/web/css/shape/index.html | 93 + "files/de/web/css/spezifit\303\244t/index.html" | 197 ++ files/de/web/css/string/index.html | 70 + files/de/web/css/tab-size/index.html | 94 + files/de/web/css/table-layout/index.html | 117 + .../web/css/tats\303\244chlicher_wert/index.html" | 36 + files/de/web/css/text-align-last/index.html | 106 + files/de/web/css/text-align/index.html | 238 ++ files/de/web/css/text-decoration-color/index.html | 135 + files/de/web/css/text-decoration-line/index.html | 94 + files/de/web/css/text-decoration/index.html | 116 + files/de/web/css/text-indent/index.html | 119 + files/de/web/css/text-justify/index.html | 117 + files/de/web/css/text-overflow/index.html | 274 ++ files/de/web/css/text-rendering/index.html | 133 + files/de/web/css/text-shadow/index.html | 145 + files/de/web/css/text-transform/index.html | 504 +++ .../de/web/css/text-underline-position/index.html | 92 + files/de/web/css/time/index.html | 75 + .../css/tools/cubic_bezier_generator/index.html | 321 ++ files/de/web/css/tools/index.html | 25 + .../css/tools/linear-gradient_generator/index.html | 3328 ++++++++++++++++++++ files/de/web/css/top/index.html | 83 + files/de/web/css/touch-action/index.html | 72 + files/de/web/css/transform-origin/index.html | 692 ++++ files/de/web/css/transform/index.html | 123 + files/de/web/css/transition-property/index.html | 91 + files/de/web/css/transition/index.html | 104 + files/de/web/css/tutorials/index.html | 62 + files/de/web/css/type_selectors/index.html | 78 + files/de/web/css/unicode-bidi/index.html | 102 + files/de/web/css/universal_selectors/index.html | 80 + files/de/web/css/unset/index.html | 64 + files/de/web/css/url/index.html | 84 + files/de/web/css/vererbung/index.html | 33 + files/de/web/css/vertical-align/index.html | 240 ++ files/de/web/css/visibility/index.html | 99 + files/de/web/css/webkit_extensions/index.html | 271 ++ files/de/web/css/wertdefinitionssyntax/index.html | 405 +++ files/de/web/css/white-space/index.html | 244 ++ files/de/web/css/widows/index.html | 128 + files/de/web/css/width/index.html | 191 ++ files/de/web/css/word-break/index.html | 115 + files/de/web/css/word-spacing/index.html | 107 + files/de/web/css/word-wrap/index.html | 83 + files/de/web/css/z-index/index.html | 150 + 444 files changed, 64706 insertions(+) create mode 100644 files/de/web/css/-moz-binding/index.html create mode 100644 files/de/web/css/-moz-border-bottom-colors/index.html create mode 100644 files/de/web/css/-moz-border-left-colors/index.html create mode 100644 files/de/web/css/-moz-border-right-colors/index.html create mode 100644 files/de/web/css/-moz-border-top-colors/index.html create mode 100644 files/de/web/css/-moz-box-flex/index.html create mode 100644 files/de/web/css/-moz-box-ordinal-group/index.html create mode 100644 files/de/web/css/-moz-box-pack/index.html create mode 100644 files/de/web/css/-moz-cell/index.html create mode 100644 files/de/web/css/-moz-float-edge/index.html create mode 100644 files/de/web/css/-moz-force-broken-image-icon/index.html create mode 100644 files/de/web/css/-moz-image-rect/index.html create mode 100644 files/de/web/css/-moz-image-region/index.html create mode 100644 files/de/web/css/-moz-orient/index.html create mode 100644 files/de/web/css/-moz-outline-radius-bottomleft/index.html create mode 100644 files/de/web/css/-moz-outline-radius-bottomright/index.html create mode 100644 files/de/web/css/-moz-outline-radius-topleft/index.html create mode 100644 files/de/web/css/-moz-outline-radius-topright/index.html create mode 100644 files/de/web/css/-moz-outline-radius/index.html create mode 100644 files/de/web/css/-moz-stack-sizing/index.html create mode 100644 files/de/web/css/-moz-text-blink/index.html create mode 100644 files/de/web/css/-moz-user-focus/index.html create mode 100644 files/de/web/css/-moz-user-input/index.html create mode 100644 files/de/web/css/-moz-user-modify/index.html create mode 100644 files/de/web/css/-moz-user-select/index.html create mode 100644 files/de/web/css/-moz-window-shadow/index.html create mode 100644 files/de/web/css/-webkit-box-reflect/index.html create mode 100644 files/de/web/css/-webkit-mask-origin/index.html create mode 100644 files/de/web/css/-webkit-mask-position-x/index.html create mode 100644 files/de/web/css/-webkit-mask-position-y/index.html create mode 100644 files/de/web/css/-webkit-mask-repeat-x/index.html create mode 100644 files/de/web/css/-webkit-mask-repeat-y/index.html create mode 100644 files/de/web/css/-webkit-mask-repeat/index.html create mode 100644 files/de/web/css/-webkit-overflow-scrolling/index.html create mode 100644 files/de/web/css/-webkit-print-color-adjust/index.html create mode 100644 files/de/web/css/-webkit-tap-highlight-color/index.html create mode 100644 files/de/web/css/-webkit-text-fill-color/index.html create mode 100644 files/de/web/css/-webkit-text-stroke-color/index.html create mode 100644 files/de/web/css/-webkit-text-stroke-width/index.html create mode 100644 files/de/web/css/-webkit-text-stroke/index.html create mode 100644 files/de/web/css/-webkit-touch-callout/index.html create mode 100644 files/de/web/css/@charset/index.html create mode 100644 files/de/web/css/@document/index.html create mode 100644 files/de/web/css/@import/index.html create mode 100644 files/de/web/css/@keyframes/index.html create mode 100644 files/de/web/css/@media/any-pointer/index.html create mode 100644 files/de/web/css/@media/index.html create mode 100644 files/de/web/css/@media/pointer/index.html create mode 100644 files/de/web/css/@media/prefers-reduced-motion/index.html create mode 100644 files/de/web/css/@media/width/index.html create mode 100644 files/de/web/css/@page/bleed/index.html create mode 100644 files/de/web/css/@page/index.html create mode 100644 files/de/web/css/@page/marks/index.html create mode 100644 files/de/web/css/@viewport/index.html create mode 100644 files/de/web/css/_colon_-moz-broken/index.html create mode 100644 files/de/web/css/_colon_-moz-drag-over/index.html create mode 100644 files/de/web/css/_colon_-moz-first-node/index.html create mode 100644 files/de/web/css/_colon_-moz-focusring/index.html create mode 100644 files/de/web/css/_colon_-moz-full-screen-ancestor/index.html create mode 100644 files/de/web/css/_colon_-moz-handler-blocked/index.html create mode 100644 files/de/web/css/_colon_-moz-handler-crashed/index.html create mode 100644 files/de/web/css/_colon_-moz-handler-disabled/index.html create mode 100644 files/de/web/css/_colon_-moz-last-node/index.html create mode 100644 files/de/web/css/_colon_-moz-list-bullet/index.html create mode 100644 files/de/web/css/_colon_-moz-list-number/index.html create mode 100644 files/de/web/css/_colon_-moz-loading/index.html create mode 100644 files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html create mode 100644 files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html create mode 100644 files/de/web/css/_colon_-moz-lwtheme-brighttext/index.html create mode 100644 files/de/web/css/_colon_-moz-lwtheme-darktext/index.html create mode 100644 files/de/web/css/_colon_-moz-lwtheme/index.html create mode 100644 files/de/web/css/_colon_-moz-only-whitespace/index.html create mode 100644 files/de/web/css/_colon_-moz-placeholder/index.html create mode 100644 files/de/web/css/_colon_-moz-submit-invalid/index.html create mode 100644 files/de/web/css/_colon_-moz-suppressed/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(images-in-menus)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(touch-enabled)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-cell-text(hover)/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-cell-text/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-cell/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-column/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-drop-feedback/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-image/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-indentation/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-line/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-progressmeter/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-row(hover)/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-row/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-separator/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-twisty/index.html create mode 100644 files/de/web/css/_colon_-moz-ui-invalid/index.html create mode 100644 files/de/web/css/_colon_-moz-ui-valid/index.html create mode 100644 files/de/web/css/_colon_-moz-user-disabled/index.html create mode 100644 files/de/web/css/_colon_-moz-window-inactive/index.html create mode 100644 files/de/web/css/_colon_-webkit-autofill/index.html create mode 100644 files/de/web/css/_colon_active/index.html create mode 100644 files/de/web/css/_colon_default/index.html create mode 100644 files/de/web/css/_colon_dir/index.html create mode 100644 files/de/web/css/_colon_disabled/index.html create mode 100644 files/de/web/css/_colon_empty/index.html create mode 100644 files/de/web/css/_colon_enabled/index.html create mode 100644 files/de/web/css/_colon_first-child/index.html create mode 100644 files/de/web/css/_colon_first-of-type/index.html create mode 100644 files/de/web/css/_colon_first/index.html create mode 100644 files/de/web/css/_colon_focus/index.html create mode 100644 files/de/web/css/_colon_fullscreen/index.html create mode 100644 files/de/web/css/_colon_hover/index.html create mode 100644 files/de/web/css/_colon_in-range/index.html create mode 100644 files/de/web/css/_colon_indeterminate/index.html create mode 100644 files/de/web/css/_colon_invalid/index.html create mode 100644 files/de/web/css/_colon_lang/index.html create mode 100644 files/de/web/css/_colon_last-child/index.html create mode 100644 files/de/web/css/_colon_last-of-type/index.html create mode 100644 files/de/web/css/_colon_link/index.html create mode 100644 files/de/web/css/_colon_not/index.html create mode 100644 files/de/web/css/_colon_nth-child/index.html create mode 100644 files/de/web/css/_colon_only-child/index.html create mode 100644 files/de/web/css/_colon_optional/index.html create mode 100644 files/de/web/css/_colon_out-of-range/index.html create mode 100644 files/de/web/css/_colon_required/index.html create mode 100644 files/de/web/css/_colon_root/index.html create mode 100644 files/de/web/css/_colon_visited/index.html create mode 100644 files/de/web/css/_doublecolon_-moz-page-sequence/index.html create mode 100644 files/de/web/css/_doublecolon_-moz-page/index.html create mode 100644 files/de/web/css/_doublecolon_-moz-placeholder/index.html create mode 100644 files/de/web/css/_doublecolon_-moz-progress-bar/index.html create mode 100644 files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html create mode 100644 files/de/web/css/_doublecolon_-ms-browse/index.html create mode 100644 files/de/web/css/_doublecolon_-ms-check/index.html create mode 100644 files/de/web/css/_doublecolon_-ms-fill-lower/index.html create mode 100644 files/de/web/css/_doublecolon_-ms-fill-upper/index.html create mode 100644 files/de/web/css/_doublecolon_-ms-fill/index.html create mode 100644 files/de/web/css/_doublecolon_-ms-reveal/index.html create mode 100644 files/de/web/css/_doublecolon_-ms-thumb/index.html create mode 100644 files/de/web/css/_doublecolon_after/index.html create mode 100644 files/de/web/css/_doublecolon_backdrop/index.html create mode 100644 files/de/web/css/_doublecolon_before/index.html create mode 100644 files/de/web/css/_doublecolon_placeholder/index.html create mode 100644 files/de/web/css/_doublecolon_selection/index.html create mode 100644 files/de/web/css/alias/index.html create mode 100644 files/de/web/css/align-content/index.html create mode 100644 files/de/web/css/align-items/index.html create mode 100644 files/de/web/css/align-self/index.html create mode 100644 files/de/web/css/all/index.html create mode 100644 files/de/web/css/alternative_style_sheets/index.html create mode 100644 files/de/web/css/angle-percentage/index.html create mode 100644 files/de/web/css/angle/index.html create mode 100644 files/de/web/css/angrenzende_geschwisterselektoren/index.html create mode 100644 files/de/web/css/animation-delay/index.html create mode 100644 files/de/web/css/animation-direction/index.html create mode 100644 files/de/web/css/animation-duration/index.html create mode 100644 files/de/web/css/animation-fill-mode/index.html create mode 100644 files/de/web/css/animation-iteration-count/index.html create mode 100644 files/de/web/css/animation-name/index.html create mode 100644 files/de/web/css/animation-play-state/index.html create mode 100644 files/de/web/css/animation-timing-function/index.html create mode 100644 files/de/web/css/animation/index.html create mode 100644 files/de/web/css/appearance/index.html create mode 100644 files/de/web/css/at-rule/index.html create mode 100644 files/de/web/css/attr()/index.html create mode 100644 files/de/web/css/attributselektoren/index.html create mode 100644 files/de/web/css/aural/index.html create mode 100644 files/de/web/css/auto/index.html create mode 100644 files/de/web/css/backdrop-filter/index.html create mode 100644 files/de/web/css/backface-visibility/index.html create mode 100644 files/de/web/css/background-attachment/index.html create mode 100644 files/de/web/css/background-blend-mode/index.html create mode 100644 files/de/web/css/background-clip/index.html create mode 100644 files/de/web/css/background-color/index.html create mode 100644 files/de/web/css/background-image/index.html create mode 100644 files/de/web/css/background-origin/index.html create mode 100644 files/de/web/css/background-position/index.html create mode 100644 files/de/web/css/background-repeat/index.html create mode 100644 files/de/web/css/background-size/index.html create mode 100644 files/de/web/css/background/index.html create mode 100644 files/de/web/css/basic-shape/index.html create mode 100644 files/de/web/css/berechneter_wert/index.html create mode 100644 files/de/web/css/border-bottom-color/index.html create mode 100644 files/de/web/css/border-bottom-left-radius/index.html create mode 100644 files/de/web/css/border-bottom-right-radius/index.html create mode 100644 files/de/web/css/border-bottom-style/index.html create mode 100644 files/de/web/css/border-bottom-width/index.html create mode 100644 files/de/web/css/border-bottom/index.html create mode 100644 files/de/web/css/border-collapse/index.html create mode 100644 files/de/web/css/border-color/index.html create mode 100644 files/de/web/css/border-image-outset/index.html create mode 100644 files/de/web/css/border-image-repeat/index.html create mode 100644 files/de/web/css/border-image-slice/index.html create mode 100644 files/de/web/css/border-image-source/index.html create mode 100644 files/de/web/css/border-image-width/index.html create mode 100644 files/de/web/css/border-image/index.html create mode 100644 files/de/web/css/border-left-color/index.html create mode 100644 files/de/web/css/border-left-style/index.html create mode 100644 files/de/web/css/border-left-width/index.html create mode 100644 files/de/web/css/border-left/index.html create mode 100644 files/de/web/css/border-radius/index.html create mode 100644 files/de/web/css/border-right-color/index.html create mode 100644 files/de/web/css/border-right-style/index.html create mode 100644 files/de/web/css/border-right-width/index.html create mode 100644 files/de/web/css/border-right/index.html create mode 100644 files/de/web/css/border-spacing/index.html create mode 100644 files/de/web/css/border-style/index.html create mode 100644 files/de/web/css/border-top-color/index.html create mode 100644 files/de/web/css/border-top-left-radius/index.html create mode 100644 files/de/web/css/border-top-right-radius/index.html create mode 100644 files/de/web/css/border-top-style/index.html create mode 100644 files/de/web/css/border-top-width/index.html create mode 100644 files/de/web/css/border-top/index.html create mode 100644 files/de/web/css/border-width/index.html create mode 100644 files/de/web/css/border/index.html create mode 100644 files/de/web/css/bottom/index.html create mode 100644 files/de/web/css/box-decoration-break/index.html create mode 100644 files/de/web/css/box-shadow/index.html create mode 100644 files/de/web/css/box-sizing/index.html create mode 100644 files/de/web/css/break-after/index.html create mode 100644 files/de/web/css/break-inside/index.html create mode 100644 files/de/web/css/calc()/index.html create mode 100644 files/de/web/css/caption-side/index.html create mode 100644 files/de/web/css/clear/index.html create mode 100644 files/de/web/css/clip-path/index.html create mode 100644 files/de/web/css/clip/index.html create mode 100644 files/de/web/css/color/index.html create mode 100644 files/de/web/css/column-count/index.html create mode 100644 files/de/web/css/column-fill/index.html create mode 100644 files/de/web/css/column-gap/index.html create mode 100644 files/de/web/css/column-rule-color/index.html create mode 100644 files/de/web/css/column-rule-style/index.html create mode 100644 files/de/web/css/column-rule-width/index.html create mode 100644 files/de/web/css/column-rule/index.html create mode 100644 files/de/web/css/column-span/index.html create mode 100644 files/de/web/css/column-width/index.html create mode 100644 files/de/web/css/columns/index.html create mode 100644 files/de/web/css/content/index.html create mode 100644 files/de/web/css/counter-increment/index.html create mode 100644 files/de/web/css/counter-reset/index.html create mode 100644 files/de/web/css/css_animations/css_animationen_nutzen/index.html create mode 100644 files/de/web/css/css_animations/index.html create mode 100644 files/de/web/css/css_background_and_borders/border-image_generator/index.html create mode 100644 files/de/web/css/css_background_and_borders/border-radius_generator/index.html create mode 100644 files/de/web/css/css_background_and_borders/index.html create mode 100644 "files/de/web/css/css_background_and_borders/mehrere_hintergr\303\274nde_in_css_verwenden/index.html" create mode 100644 files/de/web/css/css_basic_user_interface/index.html create mode 100644 files/de/web/css/css_boxmodell/box-shadow_generator/index.html create mode 100644 "files/de/web/css/css_boxmodell/einf\303\274hrung_in_das_css_boxmodell/index.html" create mode 100644 files/de/web/css/css_boxmodell/index.html create mode 100644 "files/de/web/css/css_boxmodell/zusammenfallen_von_au\303\237enabst\303\244nden_meistern/index.html" create mode 100644 files/de/web/css/css_charsets/index.html create mode 100644 files/de/web/css/css_colors/farbauswahl_werkzeug/index.html create mode 100644 files/de/web/css/css_colors/index.html create mode 100644 files/de/web/css/css_columns/index.html create mode 100644 files/de/web/css/css_compositing_and_blending/index.html create mode 100644 files/de/web/css/css_conditional_rules/index.html create mode 100644 files/de/web/css/css_device_adaptation/index.html create mode 100644 files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html create mode 100644 files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html create mode 100644 files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html create mode 100644 files/de/web/css/css_flexible_box_layout/index.html create mode 100644 files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html create mode 100644 files/de/web/css/css_fonts/index.html create mode 100644 files/de/web/css/css_generated_content/index.html create mode 100644 files/de/web/css/css_grid_layout/index.html create mode 100644 files/de/web/css/css_images/implementing_image_sprites_in_css/index.html create mode 100644 files/de/web/css/css_images/index.html create mode 100644 "files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html" create mode 100644 files/de/web/css/css_lists_and_counters/index.html create mode 100644 "files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html" create mode 100644 files/de/web/css/css_logical_properties/index.html create mode 100644 files/de/web/css/css_masken/index.html create mode 100644 "files/de/web/css/css_namensr\303\244ume/index.html" create mode 100644 files/de/web/css/css_positioning/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html create mode 100644 files/de/web/css/css_referenz/index.html create mode 100644 files/de/web/css/css_ruby/index.html create mode 100644 files/de/web/css/css_selectors/index.html create mode 100644 files/de/web/css/css_shapes/index.html create mode 100644 files/de/web/css/css_table/index.html create mode 100644 files/de/web/css/css_text/index.html create mode 100644 files/de/web/css/css_textdekoration/index.html create mode 100644 files/de/web/css/css_transforms/css_transformationen_verwenden/index.html create mode 100644 files/de/web/css/css_transforms/index.html create mode 100644 files/de/web/css/css_transitions/index.html create mode 100644 files/de/web/css/css_typen/index.html create mode 100644 files/de/web/css/css_user_interface/index.html create mode 100644 files/de/web/css/css_writing_modes/index.html create mode 100644 files/de/web/css/cssom_view/index.html create mode 100644 files/de/web/css/cursor/index.html create mode 100644 files/de/web/css/custom-ident/index.html create mode 100644 files/de/web/css/direction/index.html create mode 100644 files/de/web/css/display/index.html create mode 100644 files/de/web/css/empty-cells/index.html create mode 100644 files/de/web/css/ersetztes_element/index.html create mode 100644 files/de/web/css/farben/index.html create mode 100644 files/de/web/css/filter/index.html create mode 100644 files/de/web/css/flex-flow/index.html create mode 100644 files/de/web/css/flex-grow/index.html create mode 100644 files/de/web/css/flex-shrink/index.html create mode 100644 files/de/web/css/flex-wrap/index.html create mode 100644 files/de/web/css/float/index.html create mode 100644 files/de/web/css/font-family/index.html create mode 100644 files/de/web/css/font-feature-settings/index.html create mode 100644 files/de/web/css/font-size/index.html create mode 100644 files/de/web/css/font-style/index.html create mode 100644 files/de/web/css/font-variant/index.html create mode 100644 files/de/web/css/font-weight/index.html create mode 100644 files/de/web/css/font/index.html create mode 100644 files/de/web/css/frequency/index.html create mode 100644 files/de/web/css/gradient/index.html create mode 100644 files/de/web/css/grid-gap/index.html create mode 100644 files/de/web/css/grid-template-areas/index.html create mode 100644 files/de/web/css/grid/index.html create mode 100644 files/de/web/css/height/index.html create mode 100644 files/de/web/css/hyphens/index.html create mode 100644 files/de/web/css/id-selektoren/index.html create mode 100644 files/de/web/css/image-orientation/index.html create mode 100644 files/de/web/css/image-rendering/index.html create mode 100644 files/de/web/css/image/index.html create mode 100644 files/de/web/css/index.html create mode 100644 files/de/web/css/index/index.html create mode 100644 files/de/web/css/inherit/index.html create mode 100644 files/de/web/css/initial/index.html create mode 100644 files/de/web/css/initialwert/index.html create mode 100644 files/de/web/css/integer/index.html create mode 100644 files/de/web/css/justify-content/index.html create mode 100644 files/de/web/css/kindselektoren/index.html create mode 100644 files/de/web/css/klassenselektoren/index.html create mode 100644 files/de/web/css/kurzformat_eigenschaft/index.html create mode 100644 files/de/web/css/layout_mode/index.html create mode 100644 files/de/web/css/left/index.html create mode 100644 files/de/web/css/length/index.html create mode 100644 files/de/web/css/letter-spacing/index.html create mode 100644 files/de/web/css/line-break/index.html create mode 100644 files/de/web/css/linear-gradient()/index.html create mode 100644 files/de/web/css/list-style-image/index.html create mode 100644 files/de/web/css/list-style-position/index.html create mode 100644 files/de/web/css/list-style-type/index.html create mode 100644 files/de/web/css/list-style/index.html create mode 100644 files/de/web/css/margin-bottom/index.html create mode 100644 files/de/web/css/margin-left/index.html create mode 100644 files/de/web/css/margin-right/index.html create mode 100644 files/de/web/css/margin-top/index.html create mode 100644 files/de/web/css/margin/index.html create mode 100644 files/de/web/css/mask/index.html create mode 100644 files/de/web/css/max-height/index.html create mode 100644 files/de/web/css/max-width/index.html create mode 100644 files/de/web/css/media_queries/index.html create mode 100644 files/de/web/css/media_queries/using_media_queries/index.html create mode 100644 files/de/web/css/min-height/index.html create mode 100644 files/de/web/css/min-width/index.html create mode 100644 files/de/web/css/mix-blend-mode/index.html create mode 100644 files/de/web/css/motion_path/index.html create mode 100644 files/de/web/css/mozilla_extensions/index.html create mode 100644 files/de/web/css/none/index.html create mode 100644 files/de/web/css/normal/index.html create mode 100644 files/de/web/css/number/index.html create mode 100644 files/de/web/css/object-fit/index.html create mode 100644 files/de/web/css/object-position/index.html create mode 100644 files/de/web/css/opacity/index.html create mode 100644 files/de/web/css/order/index.html create mode 100644 files/de/web/css/orphans/index.html create mode 100644 files/de/web/css/outline-color/index.html create mode 100644 files/de/web/css/outline/index.html create mode 100644 files/de/web/css/overflow-clip-box/index.html create mode 100644 files/de/web/css/overflow/index.html create mode 100644 files/de/web/css/overscroll-behavior-y/index.html create mode 100644 files/de/web/css/overscroll-behavior/index.html create mode 100644 files/de/web/css/padding-bottom/index.html create mode 100644 files/de/web/css/padding-left/index.html create mode 100644 files/de/web/css/padding-right/index.html create mode 100644 files/de/web/css/padding-top/index.html create mode 100644 files/de/web/css/padding/index.html create mode 100644 files/de/web/css/page-break-after/index.html create mode 100644 files/de/web/css/page-break-before/index.html create mode 100644 files/de/web/css/page-break-inside/index.html create mode 100644 files/de/web/css/paged_media/index.html create mode 100644 files/de/web/css/percentage/index.html create mode 100644 files/de/web/css/pointer-events/index.html create mode 100644 files/de/web/css/position/index.html create mode 100644 files/de/web/css/position_value/index.html create mode 100644 files/de/web/css/property_template/index.html create mode 100644 files/de/web/css/pseudo-classes/index.html create mode 100644 files/de/web/css/pseudo-elements/index.html create mode 100644 files/de/web/css/quotes/index.html create mode 100644 files/de/web/css/ratio/index.html create mode 100644 files/de/web/css/resize/index.html create mode 100644 files/de/web/css/resolution/index.html create mode 100644 files/de/web/css/right/index.html create mode 100644 files/de/web/css/row-gap/index.html create mode 100644 files/de/web/css/ruby-align/index.html create mode 100644 files/de/web/css/scroll-behavior/index.html create mode 100644 files/de/web/css/shape/index.html create mode 100644 "files/de/web/css/spezifit\303\244t/index.html" create mode 100644 files/de/web/css/string/index.html create mode 100644 files/de/web/css/tab-size/index.html create mode 100644 files/de/web/css/table-layout/index.html create mode 100644 "files/de/web/css/tats\303\244chlicher_wert/index.html" create mode 100644 files/de/web/css/text-align-last/index.html create mode 100644 files/de/web/css/text-align/index.html create mode 100644 files/de/web/css/text-decoration-color/index.html create mode 100644 files/de/web/css/text-decoration-line/index.html create mode 100644 files/de/web/css/text-decoration/index.html create mode 100644 files/de/web/css/text-indent/index.html create mode 100644 files/de/web/css/text-justify/index.html create mode 100644 files/de/web/css/text-overflow/index.html create mode 100644 files/de/web/css/text-rendering/index.html create mode 100644 files/de/web/css/text-shadow/index.html create mode 100644 files/de/web/css/text-transform/index.html create mode 100644 files/de/web/css/text-underline-position/index.html create mode 100644 files/de/web/css/time/index.html create mode 100644 files/de/web/css/tools/cubic_bezier_generator/index.html create mode 100644 files/de/web/css/tools/index.html create mode 100644 files/de/web/css/tools/linear-gradient_generator/index.html create mode 100644 files/de/web/css/top/index.html create mode 100644 files/de/web/css/touch-action/index.html create mode 100644 files/de/web/css/transform-origin/index.html create mode 100644 files/de/web/css/transform/index.html create mode 100644 files/de/web/css/transition-property/index.html create mode 100644 files/de/web/css/transition/index.html create mode 100644 files/de/web/css/tutorials/index.html create mode 100644 files/de/web/css/type_selectors/index.html create mode 100644 files/de/web/css/unicode-bidi/index.html create mode 100644 files/de/web/css/universal_selectors/index.html create mode 100644 files/de/web/css/unset/index.html create mode 100644 files/de/web/css/url/index.html create mode 100644 files/de/web/css/vererbung/index.html create mode 100644 files/de/web/css/vertical-align/index.html create mode 100644 files/de/web/css/visibility/index.html create mode 100644 files/de/web/css/webkit_extensions/index.html create mode 100644 files/de/web/css/wertdefinitionssyntax/index.html create mode 100644 files/de/web/css/white-space/index.html create mode 100644 files/de/web/css/widows/index.html create mode 100644 files/de/web/css/width/index.html create mode 100644 files/de/web/css/word-break/index.html create mode 100644 files/de/web/css/word-spacing/index.html create mode 100644 files/de/web/css/word-wrap/index.html create mode 100644 files/de/web/css/z-index/index.html (limited to 'files/de/web/css') diff --git a/files/de/web/css/-moz-binding/index.html b/files/de/web/css/-moz-binding/index.html new file mode 100644 index 0000000000..c59286c421 --- /dev/null +++ b/files/de/web/css/-moz-binding/index.html @@ -0,0 +1,65 @@ +--- +title: '-moz-binding' +slug: Web/CSS/-moz-binding +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - NeedsUpdate + - Non-standard + - XBL +translation_of: Archive/Web/CSS/-moz-binding +--- +
{{Non-standard_header}}{{CSSRef}}{{Deprecated_Header(57)}}
+ +

Übersicht

+ +

Die -moz-binding CSS Eigenschaft wird bei Mozilla basierten Anwendungen dazu verwendet, XBL Bindings an ein DOM Element anzufügen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* <uri> Wert */
+-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox);
+
+/* Globale Werte */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+
+ +

Werte

+ +
+
<uri>
+
Die URI für ein XBL Binding (inclusive dem Fragmentidentifizier).
+
none
+
Kein XBL Binding wird auf das Element angewandt.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

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

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

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

Siehe auch

+ + diff --git a/files/de/web/css/-moz-border-bottom-colors/index.html b/files/de/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..04c5583e52 --- /dev/null +++ b/files/de/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,134 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

In Mozilla Anwendungen wie Firefox setzt die -moz-border-bottom-colors CSS Eigenschaft eine Liste von Farben für den unteren Rahmen.

+ +

Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.

+ +

{{cssinfo}}

+ +

Sie wird nicht angewendet

+ +
    +
  1. wenn {{cssxref("border-style")}} dashed oder dotted ist.
    2. +
  2. auf Tabellen mit border-collapse: collapse.
    3. +
+ +

Syntax

+ +
/* Einzelner <color> Wert */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* Mehrere <color> Werte */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Globale Werte */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+
+ +

Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.

+ +
+
<color>
+
Definiert die Farbe einer Linie von Pixeln des unteren Randes. transparent ist gültig. Siehe {{cssxref("<color>")}} Werte für mögliche Einheiten.
+
none
+
Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

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

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

+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

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

In Mozilla-Anwendungen wie Firefox, setzt die {{cssxref("-moz-border-left-colors")}} CSS Eigenschaft eine Liste von Farben für den linken Rand.

+ +

Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.

+ +

{{cssinfo}}

+ +

Sie wird nicht angewendet

+ +
    +
  1. wenn {{cssxref("border-style")}} dashed oder dotted ist.
    2. +
  2. auf Tabellen mit border-collapse: collapse.
    3. +
+ +

Syntax

+ +
/* Einzelner <color> Wert */
+-moz-border-left-colors: #f0f0f0;
+
+/* Mehrere <color> Werte */
+-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Globale Werte */
+-moz-border-left-colors: inherit;
+-moz-border-left-colors: initial;
+-moz-border-left-colors: unset;
+
+ +

Werte

+ +

Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.

+ +
+
<color>
+
Definiert die Farbe einer Linie von Pixeln des linken Randes. transparent ist gültig. Siehe {{cssxref("<color>")}} Werte für mögliche Einheiten.
+
none
+
Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

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

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

+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-border-right-colors/index.html b/files/de/web/css/-moz-border-right-colors/index.html new file mode 100644 index 0000000000..787c70a6fa --- /dev/null +++ b/files/de/web/css/-moz-border-right-colors/index.html @@ -0,0 +1,88 @@ +--- +title: '-moz-border-right-colors' +slug: Web/CSS/-moz-border-right-colors +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-right-colors +--- +
{{Non-standard_header}}{{CSSRef}}{{Obsolete_Header(59)}}
+ +

In Mozilla-Anwendungen wie Firefox, setzt die {{cssxref("-moz-border-top-colors")}} CSS Eigenschaft eine Liste von Farben für den rechten Rand.

+ +

Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.

+ +

{{cssinfo}}

+ +

Sie wird nicht angewendet

+ +
    +
  1. wenn {{cssxref("border-style")}} dashed oder dotted ist.
    2. +
  2. auf Tabellen mit border-collapse: collapse.
    3. +
+ +

Syntax

+ +
/* Einzelner <color> Wert */
+-moz-border-right-colors: #f0f0f0;
+
+/* Mehrere <color> Werte */
+-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Globale Werte */
+-moz-border-right-colors: inherit;
+-moz-border-right-colors: initial;
+-moz-border-right-colors: unset;
+
+ +

Werte

+ +

Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.

+ +
+
<color>
+
Definiert die Farbe einer Linie von Pixeln des rechten Randes. transparent ist gültig. Siehe {{cssxref("<color>")}} Werte für mögliche Einheiten.
+
none
+
Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

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

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

+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.

+ +

Browser Kompatibilität

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

Siehe auch

+ + diff --git a/files/de/web/css/-moz-border-top-colors/index.html b/files/de/web/css/-moz-border-top-colors/index.html new file mode 100644 index 0000000000..79f324ceb0 --- /dev/null +++ b/files/de/web/css/-moz-border-top-colors/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-border-top-colors' +slug: Web/CSS/-moz-border-top-colors +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-top-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

In Mozilla-Anwendungen wie Firefox, setzt die {{cssxref("-moz-border-top-colors")}} CSS Eigenschaft eine Liste von Farben für den oberen Rand.

+ +

Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.

+ +

{{cssinfo}}

+ +

Sie wird nicht angewendet

+ +
    +
  1. wenn {{cssxref("border-style")}} dashed oder dotted ist.
    2. +
  2. auf Tabellen mit border-collapse: collapse.
    3. +
+ +

Syntax

+ +
/* Einzelner <color> Wert */
+-moz-border-top-colors: #f0f0f0;
+
+/* Mehrere <color> Werte */
+-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Globale Werte */
+-moz-border-top-colors: inherit;
+-moz-border-top-colors: initial;
+-moz-border-top-colors: unset;
+
+ +

Werte

+ +

Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.

+ +
+
<color>
+
Definiert die Farbe einer Linie von Pixeln des oberen Randes. transparent ist gültig. Siehe {{cssxref("<color>")}} Werte für mögliche Einheiten.
+
none
+
Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

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

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

+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-box-flex/index.html b/files/de/web/css/-moz-box-flex/index.html new file mode 100644 index 0000000000..8c54ffa75a --- /dev/null +++ b/files/de/web/css/-moz-box-flex/index.html @@ -0,0 +1,103 @@ +--- +title: '-moz-box-flex' +slug: Web/CSS/-moz-box-flex +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: Web/CSS/box-flex +--- +
{{CSSRef}}{{warning("Dies ist eine Eigenschaft zur Steuerung von Teilen des XUL Boxmodells. Sie stimmt weder mit den alten CSS Flexible Box Layout Module Entwürfen für box-flex (welche auf dieser Eigenschaft beruhen), noch dem Verhalten von -webkit-box-flex (welche auf diesen Entwürfen beruht) überein.")}}
+ +

Siehe Flexbox für mehr Informationen, was anstelle dieser Eigenschaft verwendet werden sollte.

+ +

Übersicht

+ +

Die -moz-box-flex und -webkit-box-flex CSS Eigenschaften geben an, wie eine -moz-box oder -webkit-box wächst, um die Box zu füllen, die sie beinhaltet, in Richtung des Layouts der beinhaltenden Box. Siehe Flexbox für mehr Informationen über die Eigenschaften von Flexbox-Elementen.

+ +

Syntax

+ +
/* <number> Werte */
+-moz-box-flex: 0;
+-moz-box-flex: 3;
+-webkit-box-flex: 0;
+-webkit-box-flex: 3;
+
+/* Globale Werte */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+
+ +

Werte

+ +
+
0
+
Die Box wächst nicht.
+
> 0
+
Die Box wächst soweit, dass sie den verfügbaren Raum ausfüllt.
+
+ +

Beispiele

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>-moz-box-flex example</title>
+    <style>
+      div.example {
+        display: -moz-box;
+        display: -webkit-box;
+        border: 1px solid black;
+        width: 100%;
+      }
+      div.example > p:nth-child(1) {
+        -moz-box-flex: 1;       /* Mozilla */
+        -webkit-box-flex: 1;    /* WebKit */
+        border: 1px solid black;
+      }
+      div.example > p:nth-child(2) {
+        -moz-box-flex: 0;       /* Mozilla */
+        -webkit-box-flex: 0;    /* WebKit */
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="example">
+      <p>Ich wachse, um den zusätzlichen Raum auszufüllen.</p>
+      <p>Ich wachse nicht.</p>
+    </div>
+  </body>
+</html>
+
+ +

Hinweise

+ +

Die beinhaltende Box teilt den zur Verfügung stehenden zusätzlichen Abstand proportional zum Flexwert jedes Inhaltselements auf.

+ +

Inhaltselemente, die null als Flexwert haben, vergrößern sich nicht.

+ +

Falls nur ein Inhaltselement einen Flexwert hat, der nicht null ist, vergrößert es sich, um den verfügbaren Raum auszufüllen.

+ +

Inhaltselemente, die den gleichen Flexwert haben, vergrößern sich um den gleichen absoluten Betrag.

+ +

Falls der Flexwert über das flex Elementattribut gesetzt wird, wird der Stil ignoriert.

+ +

Um XUL Elemente innerhalb einer Box gleich groß zu machen, muss das equalsize Attribut der beinhaltenden Box auf den Wert always gesetzt werden. Dieses Attribut hat keine entsprechende CSS Eigenschaft.

+ +

Ein Trick, um alle Inhaltselemente in einer beinhaltenden Box gleich groß zu machen, ist, allen eine feste Größe (z. B. height: 0;) und denselben box-flex Wert größer als null zu geben (z. B. -moz-box-flex: 1).

+ +

Spezifikationen

+ +

Diese Eigenschaft ist eine nicht standardisierte Erweiterung. Es gab einen alten Entwurf der CSS3 Flexbox Spezifikation, der eine box-flex Eigenschaft definiert hat, aber dieser Entwurf ist mittlerweile überholt.

+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.box-flex")}}

+ +

Siehe auch

+ +

{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}

diff --git a/files/de/web/css/-moz-box-ordinal-group/index.html b/files/de/web/css/-moz-box-ordinal-group/index.html new file mode 100644 index 0000000000..f4465ba8ca --- /dev/null +++ b/files/de/web/css/-moz-box-ordinal-group/index.html @@ -0,0 +1,66 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' + - Flexible Box + - Non-standard +translation_of: Web/CSS/box-ordinal-group +--- +

{{CSSRef}}
+ {{warning("Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Entwurfs und wurde in neueren Entwürfen ersetzt.")}}

+ +

Siehe Flexbox für mehr Informationen, was statt dieser Eigenschaft verwendet werden sollte.

+ +

Übersicht

+ +

Kennzeichnet die Aufzählungsgruppe, zu der das Element gehört. Elemente mit einer geringeren Aufzählungsgruppe werden vor denen mit höherer Aufzählungsgruppe angezeigt.

+ +

Werte

+ +

Werte müssen Ganzzahlen größer als null sein. Der Standardwert für diese Eigenschaft ist 1.

+ +

Beispiele

+ +
<style type="text/css">
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+</style>
+
+<div id="Flexbox">
+  <div id="text1">text 1</div>
+  <div id="text2">text 2</div>
+  <div id="text3">text 3</div>
+  <div id="text4">text 4</div>
+</div>
+
diff --git a/files/de/web/css/-moz-box-pack/index.html b/files/de/web/css/-moz-box-pack/index.html new file mode 100644 index 0000000000..517c6fce72 --- /dev/null +++ b/files/de/web/css/-moz-box-pack/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-box-pack' +slug: Web/CSS/-moz-box-pack +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Layout + - Non-standard +translation_of: Web/CSS/box-pack +--- +
{{CSSRef}}{{warning("Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Layout Moduls, welches durch einen neuen Standard ersetzt wurde.")}}
+ +

Siehe Flexbox für mehr Informationen.

+ +

Übersicht

+ +

Die -moz-box-pack und -webkit-box-pack CSS Eigenschaften bestimmen, wie ein -moz-box oder -webkit-box seine Inhalte in Richtung seines Layouts packt.  Die Wirkung dieser Eigenschaft ist nur sichtbar, falls es zusätzlichen Leerraum innerhalb der Box gibt. Siehe Flexbox für mehr Informationen bezüglich den Eigenschaften von Flexbox-Elementen.

+ +

Die Richtung des Layouts hängt von der Ausrichtung des Elements ab: horizontal oder vertikal.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-moz-box-pack: start;
+-moz-box-pack: center;
+-moz-box-pack: end;
+-moz-box-pack: justify;
+
+/* Globale Werte */
+-moz-box-pack: inherit;
+-moz-box-pack: initial;
+-moz-box-pack: unset;
+
+ +

Werte

+ +
+
start
+
Die Box packt Inhalte am Anfang und lässt eventuellen zusätzlichen Leerraum am Ende.
+
center
+
Die Box packt Inhalte in der Mitte und teilt eventuellen zusätzlichen Leerraum zwischen Start und Ende auf.
+
end
+
Die Box packt Inhalte am Ende und lässt eventuellen zusätzlichen Leerraum am Start.
+
justify
+
Der Leerraum wird gleichmäßig zwischen jedem Kind aufgeteilt, wobei kein zusätzlicher Leerraum vor dem ersten Kind oder nach dem letzten Kind platziert wird. Falls es nur ein Kind gibt, wird der Wert so behandelt, als ob er start wäre.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
div.example {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* Make this box taller than the children,
+     so there is room for the box-pack */
+  height: 300px;
+  /* Make this box wide enough to show the contents
+     are centered horizontally */
+  width: 300px;
+
+  /* Children should be oriented vertically */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* Align children to the horizontal center of this box */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* Pack children to the bottom of this box */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example p {
+  /* Make children narrower than their parent,
+     so there is room for the box-align */
+  width: 200px;
+}
+
+ +
<div class="example">
+  <p>I will be second from the bottom of div.example, centered horizontally.</p>
+  <p>I will be on the bottom of div.example, centered horizontally.</p>
+</div>
+
+ +

{{EmbedLiveSample('Beispiele', 310, 310)}}

+ +

Hinweise

+ +

Der Rand der Box, die als Start zum Packen bestimmt wird, hängt von der Ausrichtung der Box und deren Richtung ab:

+ + + + + + + + + + + + + + + + + + + +
 NormalUmgekehrt
Horizontallinksrechts
Vertikalobenunten
+ +

Der dem Start gegenüberliegende Rand wird als das Ende bestimmt.

+ +

Falls das Packen durch das pack Elementattribut gesetzt wird, wird die Stileigenschaft ignoriert.

+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht standardisiert, jedoch erschien eine ähnliche Eigenschaft in einem frühen Entwurf von CSS3 Flexbox, die durch neuere Versionen der Spezifikation überholt wurde.

+ +

Browser Kompatibilität

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

Siehe auch

+ +

{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}

diff --git a/files/de/web/css/-moz-cell/index.html b/files/de/web/css/-moz-cell/index.html new file mode 100644 index 0000000000..7e4ded305c --- /dev/null +++ b/files/de/web/css/-moz-cell/index.html @@ -0,0 +1,11 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +tags: + - CSS + - Non-standard +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}{{obsolete_header}}
+ +

Diesen Wert nicht verwenden! Stattdessen sollte der cursor Wert {{cssxref("cursor#cell","cell")}} verwendet werden.

diff --git a/files/de/web/css/-moz-float-edge/index.html b/files/de/web/css/-moz-float-edge/index.html new file mode 100644 index 0000000000..1049fa0df2 --- /dev/null +++ b/files/de/web/css/-moz-float-edge/index.html @@ -0,0 +1,67 @@ +--- +title: '-moz-float-edge' +slug: Web/CSS/-moz-float-edge +tags: + - CSS + - CSS Eigenschaft + - 'CSS:Mozilla Erweiterungen' + - Layout + - NeedsCompatTable + - NeedsLiveSample + - Non-standard +translation_of: Web/CSS/-moz-float-edge +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die nicht standardisierte -moz-float-edge CSS Eigenschaft gibt an, ob die Höhen- und Breiteneigenschaften des Elements die Dicke des Außenabstands, des Rands oder des Innenabstands beinhalten.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-moz-float-edge: border-box;
+-moz-float-edge: content-box;
+-moz-float-edge: margin-box;
+-moz-float-edge: padding-box;
+
+/* Globale Werte */
+-moz-float-edge: inherit;
+-moz-float-edge: initial;
+-moz-float-edge: unset;
+
+ +

Werte

+ +
+
border-box
+
Die Höhen- und Breiteneigenschaften beinhalten den Inhalt, Innenabstand und Rand, aber nicht den Außenabstand.
+
content-box
+
Die Höhen- und Breiteneigenschaften beinhalten den Inhalt, aber weder Innenabstand, Rand, noch Außenabstand.
+
margin-box
+
Die Höhen- und Breiteneigenschaften beinhalten den Inhalt, Innenabstand, Rand und Außenabstand.
+
padding-box
+
Die Höhen- und Breiteneigenschaften beinhalten den Inhalt und Innenabstand, aber nicht den Rand oder Außenabstand.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +
hr {
+  display: block;
+  height: 2px;
+  border: 1px inset;
+  margin: 0.5em auto 0.5em auto;
+  color: gray;
+  -moz-float-edge: margin-box;
+  box-sizing: border-box;
+}
+ +

Siehe auch

+ +

{{bug(432891)}}

diff --git a/files/de/web/css/-moz-force-broken-image-icon/index.html b/files/de/web/css/-moz-force-broken-image-icon/index.html new file mode 100644 index 0000000000..b4b56a17d8 --- /dev/null +++ b/files/de/web/css/-moz-force-broken-image-icon/index.html @@ -0,0 +1,57 @@ +--- +title: '-moz-force-broken-image-icon' +slug: Web/CSS/-moz-force-broken-image-icon +tags: + - CSS + - CSS Referenz + - NeedsContent + - Non-standard +translation_of: Web/CSS/-moz-force-broken-image-icon +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

-moz-force-broken-image-icon ist eine erweiterte CSS Eigenschaft. Der Wert 1 erzwingt ein Symbol für nicht ladbare Bilder auch wenn das Bild ein {{HTMLElement("img", "alt", "#attr-alt")}} Attribut hat. Wenn der Wert 0 verwendet wird, wird sich das Bild wie gewohnt verhalten und nur das alt Attribut anzeigen.

+ +
Hinweis: Sogar wenn der Wert auf 1 gesetzt wird, wird das alt Attribut immer noch angezeigt. Mehr Informationen sind weiter unten verfügbar.
+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+ +

Werte

+ +
+
{{cssxref("<integer>")}}
+
Ein Wert von 1 bedeutet, dass ein Symbol für nicht ladbare Bilder angezeigt wird, auch wenn das Bild ein {{HTMLElement("img", "alt", "#attr-alt")}} Attribut hat. Ein Wert von 0 zeigt nur das alt Attribut an.
+
+ +

Beispiele

+ +
img {
+  -moz-force-broken-image-icon: 1;
+  height:100px;
+  width:100px;
+}
+ +
<img src='/broken/image/link.png' alt='Broken image link'>
+ +

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

+ +
Hinweis: Sofern das Bild keine definierte Höhe und Breite hat, wird das Symbol für nicht ladbare Bilder nicht angezeigt, aber das alt Attribut wird ebenfalls versteckt, wenn -moz-force-broken-image-icon auf 1 gesetzt wird.
+ +

Hinweise

+ + + +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-image-rect/index.html b/files/de/web/css/-moz-image-rect/index.html new file mode 100644 index 0000000000..685d7a855b --- /dev/null +++ b/files/de/web/css/-moz-image-rect/index.html @@ -0,0 +1,146 @@ +--- +title: '-moz-image-rect' +slug: Web/CSS/-moz-image-rect +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsUpdate + - Non-standard +translation_of: Web/CSS/-moz-image-rect +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}
+ +

Übersicht

+ +

Dieser Wert für CSS {{cssxref("background-image")}} ermöglicht es, einen Bereich eines größeren Bildes als Hintergrund zu verwenden. Dies erlaubt es beispielsweise, verschiedene Teile eines größeren Bildes als Hintergründe in verschiedenen Teilen des Inhalts zu verwenden.

+ +

Dies funktioniert ähnlich der {{cssxref("-moz-image-region")}} Eigenschaft, welche zusammen mit der {{cssxref("list-style-image")}} verwendet wird, um Teile eines Bildes als Aufzählungszeichen in einer Liste zu verwenden. Diese Eigenschaft wird jedoch für CSS Hintergründe verwendet.

+ +

Die Syntax für ein Rechteck ist ähnlich der der rect() Funktion, die einen {{cssxref("<shape>")}} CSS Typ generiert. Alle vier Werte sind relativ zur linken oberen Ecke des Bildes.

+ +

Syntax

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

Werte

+ +
+
{{cssxref("<uri>")}}
+
Der URI des Bildes, von dem das Teilbild verwendet werden soll.
+
top
+
Der obere Rand, definiert als {{cssxref("<length>")}} des Teilbilds innerhalb des angegebenen Bildes.
+
right
+
Der rechte Rand, definiert als {{cssxref("<length>")}} des Teilbilds innerhalb des angegebenen Bildes.
+
bottom
+
Der untere Rand, definiert als {{cssxref("<length>")}} des Teilbilds innerhalb des angegebenen Bildes.
+
left
+
Der linke Rand, definiert als {{cssxref("<length>")}} des Teilbilds innerhalb des angegebenen Bildes.
+
+ +

Beispiel

+ +

Dieses Beispiel lädt ein Bild und verwendet es in vier Segmenten, um das Firefox Logo in vier {{HTMLElement("div")}} Blöcken darzustellen. Wenn auf deren Container geklickt wird, werden die vier Segmente rotiert, indem die {{cssxref("background-image")}} Eigenschaftswerte zwischen den vier {{HTMLElement("div")}} Blöcken getauscht werden.

+ +

CSS

+ +

Das CSS definiert einen Containerstil, dann die Stile für die vier Boxen, die das gesamte Bild ausmachen.

+ +

Der Container sieht folgendermaßen aus:

+ +
#container {
+  width: 267px;
+  height: 272px;
+  top: 100px;
+  left: 100px;
+  position: absolute;
+  font-size: 16px;
+  text-shadow: white 0px 0px 6px;
+  text-align: center;
+}
+ +

Dann werden die vier Boxen definiert, die die Segmente des Bildes beschreiben. Hier wird eines nach dem anderen dargestellt.

+ +
#box1 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
+}
+
+ +

Dies ist die linke obere Ecke des Bildes. Sie beschreibt ein Rechteck, das das linke obere Viertel des Bildes der Datei firefox.jpg beinhaltet.

+ +
#box2 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
+}
+
+ +

Dies beschreibt die rechte obere Ecke des Bildes.

+ +

Die anderen Ecken folgen einem ähnlichen Schema:

+ +
#box3 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
+}
+
+#box4 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
+}
+
+ +

HTML

+ +

Das HTML ist recht einfach:

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

Dies platziert die vier Segmente des Bildes in einem 2x2 Raster. Diese vier Segmente sind alle innerhalb eines größeren {{HTMLElement("div")}} Blocks, dessen primärer Zweck das Erhalten von Klickereignissen und deren Senden an den JavaScript Code ist.

+ +

Der JavaScript Code

+ +

Dieser Code verarbeitet das Klickereignis, wenn auf den Container geklickt wird.

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

Dies verwendet {{domxref("window.getComputedStyle()")}}, um den Stil jedes Elements auszulesen und dem nächsten Element zuzuweisen. Beachte, dass es zuvor eine Kopie des letzten Boxstils speichert, da dieser durch den Stil des dritten Elements überschrieben wird. Durch das simple Kopieren der Werte der {{cssxref("background-image")}} Eigenschaft von einem zum nächsten Element durch jeden Mausklick, wird dieser erwünschte Effekt erreicht.

+ +

Wie es aussieht

+ +

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

+ +

Bugs

+ + diff --git a/files/de/web/css/-moz-image-region/index.html b/files/de/web/css/-moz-image-region/index.html new file mode 100644 index 0000000000..3a49ad49b0 --- /dev/null +++ b/files/de/web/css/-moz-image-region/index.html @@ -0,0 +1,84 @@ +--- +title: '-moz-image-region' +slug: Web/CSS/-moz-image-region +tags: + - CSS + - Non-standard + - Referenz +translation_of: Web/CSS/-moz-image-region +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +
Für ein System, das mit beliebigen Hintergründen funktioniert, siehe {{Cssxref("-moz-image-rect")}}.
+ +
 
+ +

Übersicht

+ +

Die -moz-image-region Eigenschaft ist für XUL-Elemente und Pseudo-Elemente, welche ein Bild von der list-style-image Eigenschaft benutzen, gedacht. Die Eigenschaft gibt einen Bereich des Bildes an, welcher anstelle des ganzen Bildes dargestellt wird. Das erlaubt Elementen verschiedene Stücke des gleichen Bildes zu benutzen, um die Leistung zu steigern.
+ Die Syntax ist derjenigen der clip-Property ähnlich. Alle vier Werte sind relativ von der oberen linken Ecke des Bildes.

+ +

{{cssinfo}}

+ +

Syntax

+ +

Werte

+ +
+
auto
+
Standardwert. Es wird nichts ausgeschnitten.
+
rect()
+
Es wird ein Bereich ausgeschnitten, der über die vier Längenangaben definert wird.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+
+ +

Beispiele

+ +
#example-button {
+  /* Zeige nur einen 4x4 großen Ausschnitt von der oberen, linken Ecke des Bildes */
+  list-style-image: url("chrome://example/skin/example.png");
+  -moz-image-region: rect(0px, 4px, 4px, 0px);
+}
+#example-button:hover {
+  /* Zeige einen anderen 4x4 großen Ausschnitt vom Bild, wenn sich die Maus über dem Button befindet */
+  -moz-image-region: rect(0px, 8px, 4px, 4px);
+}
+
+
+ +

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer---
Firefox (Gecko)1.0 (1.0)
Opera---
Safari (WebKit)---
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-orient/index.html b/files/de/web/css/-moz-orient/index.html new file mode 100644 index 0000000000..8f650e4ab5 --- /dev/null +++ b/files/de/web/css/-moz-orient/index.html @@ -0,0 +1,73 @@ +--- +title: '-moz-orient' +slug: Web/CSS/-moz-orient +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: Web/CSS/-moz-orient +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Die -moz-orient CSS Eigenschaft bestimmt die Orientierung des Elements, auf das sie angewendet wird.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+ +

Werte

+ +
+
inline
+
Das Element wird in der gleichen Richtung wie die Textachse dargestellt: horizontal für horizontale Schreibmodi, vertikal für vertikale Schreibmodi.
+
block
+
Das Element wird in der gleichen Richtung wie die Textachse dargestellt: horizontal für horizontale Schreibmodi, vertikal für vertikale Schreibmodi.
+
horizontal
+
Das Element wird horizontal dargestellt.
+
vertical
+
Das Element wird vertikal dargestellt.
+
+ +

Beispiele

+ +

HTML

+ +
<p>
+  The following progress meter
+  is horizontal (the default):
+</p>
+<progress max="100" value="75"></progress>
+
+<p>
+ The following progress meter
+ is vertical:
+</p>
+<progress class="vert" max="100" value="75"></progress>
+ +

CSS

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

Beispiele

+ +

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

+ +

Spezifikationen

+ +

Obwohl für das W3C mit anfänglichem positivem Feedback eingereicht, ist diese Eigenschaft noch nicht Teil einer Spezifikation; aktuell ist sie daher eine Mozilla spezifische Erweiterung (d. h. -moz-orient).

+ +

Browser Kompatibilität

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

Siehe auch

+ + diff --git a/files/de/web/css/-moz-outline-radius-bottomleft/index.html b/files/de/web/css/-moz-outline-radius-bottomleft/index.html new file mode 100644 index 0000000000..33caabb749 --- /dev/null +++ b/files/de/web/css/-moz-outline-radius-bottomleft/index.html @@ -0,0 +1,22 @@ +--- +title: '-moz-outline-radius-bottomleft' +slug: Web/CSS/-moz-outline-radius-bottomleft +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-bottomleft +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die -moz-outline-radius-bottomleft CSS Eigenschaft setzt in Mozilla Anwendungen die Rundung der linken unteren Ecke des Umrisses.

+ +

{{cssinfo}}

+ +

Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.

diff --git a/files/de/web/css/-moz-outline-radius-bottomright/index.html b/files/de/web/css/-moz-outline-radius-bottomright/index.html new file mode 100644 index 0000000000..6603060bd4 --- /dev/null +++ b/files/de/web/css/-moz-outline-radius-bottomright/index.html @@ -0,0 +1,22 @@ +--- +title: '-moz-outline-radius-bottomright' +slug: Web/CSS/-moz-outline-radius-bottomright +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-bottomright +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die -moz-outline-radius-bottomright CSS Eigenschaft setzt in Mozilla Anwendungen die Rundung der rechten unteren Ecke des Umrisses.

+ +

{{cssinfo}}

+ +

Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.

diff --git a/files/de/web/css/-moz-outline-radius-topleft/index.html b/files/de/web/css/-moz-outline-radius-topleft/index.html new file mode 100644 index 0000000000..1129445f62 --- /dev/null +++ b/files/de/web/css/-moz-outline-radius-topleft/index.html @@ -0,0 +1,22 @@ +--- +title: '-moz-outline-radius-topleft' +slug: Web/CSS/-moz-outline-radius-topleft +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-topleft +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die -moz-outline-radius-topleft CSS Eigenschaft setzt in Mozilla Anwendungen die Rundung der linken oberen Ecke des Umrisses.

+ +

{{cssinfo}}

+ +

Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.

diff --git a/files/de/web/css/-moz-outline-radius-topright/index.html b/files/de/web/css/-moz-outline-radius-topright/index.html new file mode 100644 index 0000000000..4abd5bea36 --- /dev/null +++ b/files/de/web/css/-moz-outline-radius-topright/index.html @@ -0,0 +1,22 @@ +--- +title: '-moz-outline-radius-topright' +slug: Web/CSS/-moz-outline-radius-topright +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-topright +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die -moz-outline-radius-topright CSS Eigenschaft setzt in Mozilla Anwendungen die Rundung der rechten oberen Ecke des Umrisses.

+ +

{{cssinfo}}

+ +

Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.

diff --git a/files/de/web/css/-moz-outline-radius/index.html b/files/de/web/css/-moz-outline-radius/index.html new file mode 100644 index 0000000000..45213c6b0b --- /dev/null +++ b/files/de/web/css/-moz-outline-radius/index.html @@ -0,0 +1,141 @@ +--- +title: '-moz-outline-radius' +slug: Web/CSS/-moz-outline-radius +tags: + - CSS + - CSS Referenz + - NeedsLiveSample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

In Mozilla Anwendungen wie Firefox kann die -moz-outline-radius CSS Eigenschaft dazu verwendet werden, um Umrissen runde Ecken zu verleihen. Ein {{cssxref("outline", "Umriss")}} ist eine Linie, die um Elemente gezeichnet wird, außerhalb des Randes, um das Element hervorzuheben.

+ +

-moz-outline-radius ist eine praktische Kurzschreibweise, um die vier Eigenschaften {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} und {{cssxref("-moz-outline-radius-bottomleft")}} zu setzen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Ein Wert */
+-moz-outline-radius: 25px;
+
+/* Zwei Werte */
+-moz-outline-radius: 25px 1em;
+
+/* Drei Werte */
+-moz-outline-radius: 25px 1em 12%;
+
+/* Vier Werte */
+-moz-outline-radius: 25px 1em 12% 4mm;
+
+/* Globale Werte */
+-moz-outline-radius: inherit;
+-moz-outline-radius: initial;
+-moz-outline-radius: unset;
+
+ +

Werte

+ +
Elliptische Umrisse und <percentage> Werte folgen der in {{cssxref("border-radius")}} beschriebenen Syntax.
+ +

Ein, zwei, drei oder vier <outline-radius> Werte, die jeweils einem dieser Werte entsprechen:

+ +
+
<length>
+
Siehe {{cssxref("<length>")}} für mögliche Werte.
+
<percentage>
+
Eine {{cssxref("<percentage>")}}; siehe {{cssxref("border-radius")}} für Details.
+
+ + + +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
outline: dotted red;
+
+-moz-outline-radius: 12% 1em 25px;
+/* ist gleichbedeutend mit: */
+-moz-outline-radius-topleft: 12%;
+-moz-outline-radius-topright: 1em;
+-moz-outline-radius-bottomright: 35px;
+-moz-outline-radius-bottomleft: 1em;
+ +

Hinweise

+ + + +

Spezifikationen

+ +

Diese Eigenschaft ist in keinem CSS Standard definiert.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.8")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("1.8")}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/-moz-stack-sizing/index.html b/files/de/web/css/-moz-stack-sizing/index.html new file mode 100644 index 0000000000..40e35d798f --- /dev/null +++ b/files/de/web/css/-moz-stack-sizing/index.html @@ -0,0 +1,59 @@ +--- +title: '-moz-stack-sizing' +slug: Web/CSS/-moz-stack-sizing +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsLiveSample + - Non-standard + - XUL +translation_of: Archive/Web/CSS/-moz-stack-sizing +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
+ +

Übersicht

+ +

-moz-stack-sizing ist eine erweiterte CSS Eigenschaft. Normalerweise ändert ein {{XULElem("stack")}} seine Größe, sodass alle seine Kindelemente komplett sichtbar sind. Zum Beispiel führt das Verschieben eines Kindelements ganz nach rechts innerhalb eines Stacks dazu, dass der Stack verbreitert wird, sodass das Kindelement sichtbar bleibt.

+ +

Falls es erwünscht ist, den Stack an der automatischen Größenänderung zur Unterbringung aller Kinder zu hindern, kann -moz-stack-sizing beim Kindelement auf ignore gesetzt werden. Die Eigenschaft wird nicht für den Stack selbst, sondern auf dessen Kindelemente gesetzt. Dies erlaubt es, bestimmte Kindelemente zu ignorieren, die anderen aber nicht.

+ +

Hinweis: In früheren Gecko Versionen war es möglich, das Problem zu umgehen, indem sehr große negative untere und rechte Außenabstände für das Stackelement angegeben wurden und gleichgroße positive untere und rechte Außenabstände für die Kindelemente, die nicht ignoriert werden sollten. (Das Problem betraf nicht Kindelemente, die über oder links vom Stack verschoben wurden.)

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-moz-stack-sizing: stretch-to-fit;
+-moz-stack-sizing: ignore;
+
+/* Globale Werte */
+-moz-stack-sizing: inherit;
+-moz-stack-sizing: initial;
+-moz-stack-sizing: unset;
+
+ +

Werte

+ +
+
stretch-to-fit
+
Das Kindelement beeinflusst die Größe des Stacks.
+
ignore
+
Der Stack wird das Kind bei der Berechnung seiner Größe nicht berücksichtigen.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

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

Siehe auch

+ +

{{bug("346189")}}

diff --git a/files/de/web/css/-moz-text-blink/index.html b/files/de/web/css/-moz-text-blink/index.html new file mode 100644 index 0000000000..40ee555a03 --- /dev/null +++ b/files/de/web/css/-moz-text-blink/index.html @@ -0,0 +1,47 @@ +--- +title: '-moz-text-blink' +slug: Web/CSS/-moz-text-blink +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Extensions' +translation_of: Archive/Web/CSS/-moz-text-blink +--- +
{{CSSRef}}{{non-standard_header}}{{deprecated_header}}
+ +

Übersicht

+ +

Die nicht standardisierte -moz-text-blink Mozilla CSS Eigenschaft definiert den Blinkmodus.

+ +
+

Firefox, der der einzige große Browser ist, der diese Eigenschaft unterstützt, hat die Unterstützung in Firefox 26 aufgegeben. Diese Eigenschaft wird nun in keinem Browser mehr unterstützt.

+
+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+ +

Werte

+ +
+
none
+
Produziert kein Blinken.
+
blink
+
Text blinkt. Beachte, dass Text nicht blinken zu lassen eine Technik ist, um  Checkpoint 3.3 der WAI-UAAG zu erfüllen.
+
+ +

Beispiel

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

Spezifikationen

+ +

Diese Eigenschaft wurde in einem alten Entwurf der CSS 3 Text Spezifikation definiert. Neuere Versionen haben die Definition entfernt.

+ +

Browser Kompatibilität

+ +{{Compat("css.properties.-moz-text-blink")}} diff --git a/files/de/web/css/-moz-user-focus/index.html b/files/de/web/css/-moz-user-focus/index.html new file mode 100644 index 0000000000..2c3e77a9da --- /dev/null +++ b/files/de/web/css/-moz-user-focus/index.html @@ -0,0 +1,117 @@ +--- +title: '-moz-user-focus' +slug: Web/CSS/-moz-user-focus +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' + - NeedsBrowserCompatibility + - NeedsContent + - NeedsExample + - NeedsMobileBrowserCompatibility +translation_of: Web/CSS/-moz-user-focus +--- +
{{Non-standard_header}}
+ +

Übersicht

+ +

Die -moz-user-focus CSS Eigenschaft wird dazu benutzt, anzugeben, ob das Element den Fokus haben kann.

+ +

Durch Setzen ihres Wertes auf ignore kann die Fokussierung des Elements deaktiviert werden, was bedeutet, dass der Benutzer das Element nicht aktivieren kann. Das Element wird in der Tabsequenz ausgelassen.

+ +

{{cssinfo}}

+ +
Hinweis: Diese Eigenschaft funktioniert nicht bei XUL {{XULElem("textbox")}} Elementen, weil die textbox selbst nie fokussiert werden kann. Stattdessen erzeugt XBL ein anonymes HTML {{HTMLElement("input")}} Element innerhalb der textbox und dieses Element ist dasjenige, das den Fokus erhält. Die textbox kann auch daran gehindert werden, den Tastaturfokus zu erhalten, indem sein Tabindex auf -1 gesetzt wird und daran, den Mausfokus zu erhalten, indem die Standardaktion des mousedown Ereignisses verhindert wird.
+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-moz-user-focus: normal;
+-moz-user-focus: ignore;
+
+/* Globale Werte */
+-moz-user-focus: inherit;
+-moz-user-focus: initial;
+-moz-user-focus: unset;
+
+ +

Werte

+ +
+
ignore
+
Das Element akzeptiert den Tastaturfokus nicht und wird in der Tabreihenfolge ausgelassen.
+
normal
+
Das Element kann den Tastaturfokus akzeptieren.
+
select-after
+
?
+
select-before
+
?
+
select-menu
+
?
+
select-same
+
?
+
select-all
+
?
+
none
+
?
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht Teil einer Spezifikation. Eine ähnliche Eigenschaft user-focus wurde in frühen Entwürfen eines Vorläufers der CSS3 UI Spezifikation vorgeschlagen, jedoch von der Arbeitsgruppe abgelehnt.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/-moz-user-input/index.html b/files/de/web/css/-moz-user-input/index.html new file mode 100644 index 0000000000..a9237a1778 --- /dev/null +++ b/files/de/web/css/-moz-user-input/index.html @@ -0,0 +1,64 @@ +--- +title: '-moz-user-input' +slug: Web/CSS/-moz-user-input +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: Web/CSS/-moz-user-input +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

In Mozilla Anwendungen bestimmt die -moz-user-input CSS Eigenschaft, ob ein Element Benutzereingaben zulässt. Eine ähnliche Eigenschaft user-focus wurde in frühen Entwürfen eines Vorläufers der CSS3 UI Spezifikation definiert, wurde jedoch von der Arbeitsgruppe verworfen.

+ +

{{cssinfo}}

+ +

-moz-user-input war einer der Vorschläge, der zu der vorgeschlagenen CSS 3 {{cssxref("user-input")}} Eigenschaft führten, welche noch nicht Candidate Recommendation (benötigt Implementierungen) erreicht hat.

+ +

Für Elemente, die normalerweise Benutzereingaben ermöglichen wie beispielsweise {{HTMLElement("textarea")}}, ist der Initialwert von -moz-user-input enabled.

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-moz-user-input: none;
+-moz-user-input: enabled;
+-moz-user-input: disabled;
+
+/* Globale Werte */
+-moz-user-input: inherit;
+-moz-user-input: initial;
+-moz-user-input: unset;
+
+ +

Werte

+ +
+
none
+
Das Element reagiert nicht auf Benutzereingaben und wird nicht {{Cssxref(":active")}}.
+
enabled
+
Das Element akzeptiert Benutzereingaben. Für Texteingabefelder ist dies das Standardverhalten.
+
disabled
+
Das Element akzeptiert keine Benutzereingaben. Dies ist jedoch insofern nicht dasselbe wie das Setzen von {{XULAttr("disabled")}} auf true, als dass das Element normal dargestellt wird.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
input.example {
+  /* Der Benutzer kann den Text markieren, ihn jedoch nicht ändern. */
+  -moz-user-input: disabled;
+}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-user-modify/index.html b/files/de/web/css/-moz-user-modify/index.html new file mode 100644 index 0000000000..d1ec135fa0 --- /dev/null +++ b/files/de/web/css/-moz-user-modify/index.html @@ -0,0 +1,133 @@ +--- +title: '-moz-user-modify' +slug: Web/CSS/-moz-user-modify +tags: + - CSS + - CSS Referenz + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: Web/CSS/user-modify +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die -moz-user-modify Eigenschaft bestimmt, ob der Inhalt eines Elementes vom Benutzer bearbeitet werden kann oder nicht. Diese Eigenschaft ist ähnlich zum {{htmlattrxref("contenteditable")}} Attribut. Eine ähnliche Eigenschaft user-focus wurde in frühen Entwürfen eines Vorläufers der CSS3 UI Spezifikation vorgeschlagen, jedoch von der Arbeitsgruppe verworfen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-moz-user-modify: read-only;
+-moz-user-modify: read-write;
+-moz-user-modify: write-only;
+
+/* Globale Werte */
+-moz-user-modify: inherit;
+-moz-user-modify: initial;
+-moz-user-modify: unset;
+
+ +

Werte

+ +
+
read-only
+
Standardwert. Inhalte sind nur lesbar.
+
read-write
+
Der Benutzer kann Inhalte lesen und schreiben.
+
write-only
+
Der Benutzer kann Inhalte bearbeiten, jedoch nicht lesen.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +

CSS

+ +
.readwrite {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+}
+
+ +

HTML

+ +
<div class="readwrite">Der Benutzer kann diesen Text ändern.</div>
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Beispiel", 300, 30)}}

+ +

Spezifikationen

+ +

user-modify in einem frühen Entwurf der CSS 3 User Interface Spezifikation (Working Draft vom Februar 2000, jetzt überholt durch CSS 3 Basic User Interface).

+ +

Browser Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}} {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}3.0 {{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Auch unterstützt: -webkit-user-modify: read-write-plaintext-only (Richtext geht verloren).
+ Diese Eigenschaft wird in Safari 2.0 -khtml-user-modify genannt.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-user-select/index.html b/files/de/web/css/-moz-user-select/index.html new file mode 100644 index 0000000000..aefa619439 --- /dev/null +++ b/files/de/web/css/-moz-user-select/index.html @@ -0,0 +1,55 @@ +--- +title: '-moz-user-select' +slug: Web/CSS/-moz-user-select +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' +translation_of: Web/CSS/user-select +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

In Mozilla Anwendungen steuert die -moz-user-select Eigenschaft, ob und wie ein Text ausgewählt werden kann.

+ + + +

Syntax

+ +
-moz-user-select: text | all | none| -moz-none | inherit
+
+ +

Werte

+ +
+
text
+
Der Text kann vom Benutzer ausgewählt werden.
+
all
+
Bei einem einfachem Klick auf das Element wird der gesamte Text ausgewählt. Bei einem Doppelklick auf das Element wird der höchste Vorfahr ausgewählt.
+
none
+
Der Text eines Elements und dessen Kindelemente können nicht ausgewählt werden. Wird jedoch eine Auswahl über das DOM getätigt, sind diese Elemente darin enthalten.
+
-moz-none
+
Der Text eines Elements und dessen Kindelemente können nicht ausgewählt werden. Die Auswahl kann bei Kindelementen aktiviert werden, wenn dort -moz-user-select: text festgelegt wird.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Beispiele

+ +
/* Schaltet Textauswahl ab */
+-moz-user-select: none
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-window-shadow/index.html b/files/de/web/css/-moz-window-shadow/index.html new file mode 100644 index 0000000000..9571b99e0d --- /dev/null +++ b/files/de/web/css/-moz-window-shadow/index.html @@ -0,0 +1,53 @@ +--- +title: '-moz-window-shadow' +slug: Web/CSS/-moz-window-shadow +tags: + - CSS + - CSS Eigenschaft + - NeedsCompatTable + - Non-standard + - Referenz + - XUL +translation_of: Archive/Web/CSS/-moz-window-shadow +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
+ +

Übersicht

+ +

Die -moz-window-shadow CSS Eigenschaft bestimmt, ob ein Fenster einen Schatten wirft oder nicht. Sie funktioniert nur unter Mac OS X.

+ +
+

Diese Eigenschaft ist nicht standardisiert und kann ab Firefox 44 nicht mehr in Webseiten verwendet werden.

+
+ +

{{cssinfo}}

+ +

Firefox 3 hat die Unterstützung für transparente Fenster unter Mac OS X hinzugefügt. Jedoch waren für diese Fenster Schatten deaktiviert und es gab keine Möglichkeit, diese zu aktivieren.

+ +

In Firefox 3.5 wurde der Standardwert geändert; alle Fenster haben nun einen Schatten. Es wurde die -moz-window-shadow CSS Eigenschaft eingeführt, um umgewollte Schatten ausschalten zu können.

+ +

Syntax

+ +
{{csssyntax}}
+ +

Werte

+ +
+
default
+
Das Fenster wirft einen Schatten mit dem Standard Fensterschattenstil.
+
menu {{gecko_minversion_inline("2.0")}}
+
Das Fenster hat einen Schatten, der für Menüs passend ist.
+
tooltip {{gecko_minversion_inline("2.0")}}
+
Das Fenster hat einen Schatten, der für Tooltips passend ist.
+
sheet {{gecko_minversion_inline("2.0")}}
+
Das Fenster hat einen Schatten, der für Sheetfenster passend ist.
+
none
+
Das Fenster hat keinen Schatten.
+
+ +

Beispiele

+ +
.KUI-panel {
+  -moz-window-shadow: none;
+}
+
diff --git a/files/de/web/css/-webkit-box-reflect/index.html b/files/de/web/css/-webkit-box-reflect/index.html new file mode 100644 index 0000000000..08b974fd4e --- /dev/null +++ b/files/de/web/css/-webkit-box-reflect/index.html @@ -0,0 +1,116 @@ +--- +title: '-webkit-box-reflect' +slug: Web/CSS/-webkit-box-reflect +tags: + - CSS + - Eigenschaft + - Non-standard + - Referenz +translation_of: Web/CSS/-webkit-box-reflect +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die -webkit-box-reflect CSS Eigenschaft reflektiert den Inhalt eines Elements in einer bestimmten Richtung.

+ +
Hinweis: Dieses Feature ist nicht dazu gedacht, auf Webseiten verwendet zu werden. Um Reflektionen im Web zu erreichen, ist der Standardweg die Benutzung der CSS {{cssxref("element", "element()")}} Funktion.
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Richtungswerte */
+-webkit-box-reflect: above;
+-webkit-box-reflect: below;
+-webkit-box-reflect: left;
+-webkit-box-reflect: right;
+
+/* Versatzwert */
+-webkit-box-reflect: below 10px;
+
+/* Maskenwert */
+-webkit-box-reflect: below 0 linear-gradient(transparent, white);
+
+/* Globale Werte */
+-webkit-box-reflect: inherit;
+-webkit-box-reflect: initial;
+-webkit-box-reflect: unset;
+
+ +

Werte

+ +
+
above, below, right, left
+
Sind Schlüsselwörter, die angeben, in welche Richtung die Reflektion stattfinden soll.
+
<length>
+
Gibt die Größe der Reflektion an.
+
<image>
+
Beschreibt die Maske, die auf die Reflektion angewendet werden soll.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht standardisiert und wird nicht Teil von CSS sein. Der Standardweg, um eine Reflektion in CSS zu erzeugen, ist die Verwendung der CSS Funktion {{cssxref("element", "element()")}}.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatChrome("4.0")}}{{CompatNo}}{{CompatOpera("15.0")}}{{CompatSafari("4.0")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatAndroid("2.1")}}{{CompatNo}}22.0 {{CompatVersionUnknown}}3.2 {{CompatVersionUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-webkit-mask-origin/index.html b/files/de/web/css/-webkit-mask-origin/index.html new file mode 100644 index 0000000000..21f3b18534 --- /dev/null +++ b/files/de/web/css/-webkit-mask-origin/index.html @@ -0,0 +1,100 @@ +--- +title: '-webkit-mask-origin' +slug: Web/CSS/-webkit-mask-origin +tags: + - CSS + - Referenz +translation_of: Web/CSS/mask-origin +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Die -webkit-mask-origin CSS Eigenschaft bestimmt den Ursprungspunkt des Maskenbildes. Der Wert der {{cssxref("-webkit-mask-position")}} Eigenschaft wird relativ zum Wert dieser Eigenschaft interpretiert. Diese Eigenschaft wird nicht angewendet, wenn -webkit-mask-attachment fixed ist.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+ +

Werte

+ +
+
padding
+
Standardwert. Die Position des Maskenbildes ist relativ zum Innenabstand. (Für einzelne Boxen ist "0 0" die linke obere Ecke des Randes des Innenabstands, "100% 100%" ist die untere rechte Ecke.)
+
border
+
Die Position des Maskenbildes ist relativ zum Rand.
+
content
+
Das Maskenbild ist relativ zum Inhalt.
+
+ +

Beispiele

+ +
.example {
+  border: 10px double;
+  padding: 10px;
+  -webkit-mask-image: url('mask.png');
+
+  /* Das Maskenbild ist innerhalb des Innenabstands. */
+  -webkit-mask-origin: content;
+}
+
+ +
div {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-origin: padding, content;
+}
+
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
+ +

Siehe auch

+ +

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

diff --git a/files/de/web/css/-webkit-mask-position-x/index.html b/files/de/web/css/-webkit-mask-position-x/index.html new file mode 100644 index 0000000000..04586fef38 --- /dev/null +++ b/files/de/web/css/-webkit-mask-position-x/index.html @@ -0,0 +1,124 @@ +--- +title: '-webkit-mask-position-x' +slug: Web/CSS/-webkit-mask-position-x +translation_of: Web/CSS/-webkit-mask-position-x +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

 

+ +

Die CSS-Eigenschaft -webkit-mask-position-x legt die anfängliche horizontale Position eines Maskenbilds (Bild mit einer Maske) fest.

+ +
/* Keyword values */
+-webkit-mask-position-x: left;
+-webkit-mask-position-x: center;
+-webkit-mask-position-x: right;
+
+/* <percentage> values */
+-webkit-mask-position-x: 100%;
+-webkit-mask-position-x: -50%;
+
+/* <length> values */
+-webkit-mask-position-x: 50px;
+-webkit-mask-position-x: -1cm;
+
+/* Multiple values values */
+-webkit-mask-position-x: 50px, 25%, -3em;
+
+/* Global values */
+-webkit-mask-position-x: inherit;
+-webkit-mask-position-x: initial;
+-webkit-mask-position-x: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Werte

+ +
+
<length-percentage>
+
Eine Länge, die die Position der linken Kante des Bildes relativ zur linken Füllkante der Box angibt. Die Prozentsätze werden anhand der horizontalen Abmessung des Box-Padding-Bereichs berechnet. Das heißt, ein Wert von 0% bedeutet, dass die linke Kante des Bildes mit der linken Füllkante der Box ausgerichtet ist und ein Wert von 100% bedeutet, dass die rechte Kante des Bildes mit der rechten Füllkante der Box ausgerichtet ist.
+
left
+
Gleichwertig mit 0%.
+
center
+
Gleichwertig mit 50%.
+
right
+
Gleichwertig mit 100%.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

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

Spezifikation

+ +

Kein Teil einer Spezifikation.

+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Sehenswert

+ +

{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-y")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}

diff --git a/files/de/web/css/-webkit-mask-position-y/index.html b/files/de/web/css/-webkit-mask-position-y/index.html new file mode 100644 index 0000000000..d0c972990c --- /dev/null +++ b/files/de/web/css/-webkit-mask-position-y/index.html @@ -0,0 +1,122 @@ +--- +title: '-webkit-mask-position-y' +slug: Web/CSS/-webkit-mask-position-y +translation_of: Web/CSS/-webkit-mask-position-y +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Die CSS-Eigenschaft -webkit-mask-position-y legt die anfängliche vertikale Position eines Maskenbilds (Bild mit einer Maske) fest.

+ +
/* Keyword values */
+-webkit-mask-position-y: top;
+-webkit-mask-position-y: center;
+-webkit-mask-position-y: bottom;
+
+/* <percentage> values */
+-webkit-mask-position-y: 100%;
+-webkit-mask-position-y: -50%;
+
+/* <length> values */
+-webkit-mask-position-y: 50px;
+-webkit-mask-position-y: -1cm;
+
+/* Multiple values values */
+-webkit-mask-position-y: 50px, 25%, -3em;
+
+/* Global values */
+-webkit-mask-position-y: inherit;
+-webkit-mask-position-y: initial;
+-webkit-mask-position-y: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Werte

+ +
+
<length-percentage>
+
Eine Länge, die die Position der oberen Seite des Bildes relativ zur oberen Kante der Box angibt. Die Prozentsätze werden anhand der vertikalen Abmessung des Box-Padding-Bereichs berechnet. Ein Wert von 0% bedeutet, dass der obere Rand des Bilds mit der oberen Füllkante der Box ausgerichtet ist und ein Wert von 100% bedeutet, dass die untere Kante des Bildes mit der unteren Füllkante der Box ausgerichtet ist.
+
top
+
Gleichwertig zu 0%.
+
bottom
+
Gleichwertig zu  100%.
+
center
+
Gleichwertig zu 50%.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

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

Spezifikation

+ +

Kein Teil einer Spezifikation.

+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Sehenswert

+ +

{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-x")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}

diff --git a/files/de/web/css/-webkit-mask-repeat-x/index.html b/files/de/web/css/-webkit-mask-repeat-x/index.html new file mode 100644 index 0000000000..15ab8b1f66 --- /dev/null +++ b/files/de/web/css/-webkit-mask-repeat-x/index.html @@ -0,0 +1,128 @@ +--- +title: '-webkit-mask-repeat-x' +slug: Web/CSS/-webkit-mask-repeat-x +translation_of: Web/CSS/-webkit-mask-repeat-x +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

 

+ +

Die Eigenschaft -webkit-mask-repeat-x gibt an, ob und wie ein Maskenbild horizontal wiederholt wird.

+ +
/* Keyword values */
+-webkit-mask-repeat-x: repeat;
+-webkit-mask-repeat-x: no-repeat;
+-webkit-mask-repeat-x: space;
+-webkit-mask-repeat-x: round;
+
+/* Multiple values */
+-webkit-mask-repeat-x: repeat, no-repeat, space;
+
+/* Global values */
+-webkit-mask-repeat-x: inherit;
+-webkit-mask-repeat-x: initial;
+-webkit-mask-repeat-x: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Werte

+ +
+
repeat
+
Das Maskenbild wird sowohl horizontal als auch vertikal wiederholt.
+
no-repeat
+
Das Maskenbild wird nicht wiederholt, nur eine Kopie des Maskenbildes wird gezeichnet. Der Rest des Inhalts des maskierten Elements wird nicht angezeigt.
+
space
+
Das Bild wird so oft wie möglich wiederholt, ohne zu beschneiden. Das erste und das letzte Bild sind an jeder Seite des Elements angeheftet und Leerräume sind gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft {{cssxref ("mask-position")}} wird ignoriert, es sei denn, nur ein Bild kann ohne Übersteuerung angezeigt werden. Der einzige Fall, in dem Clipping mit Leerzeichen auftritt, ist, wenn nicht genügend Platz vorhanden ist, um ein Bild anzuzeigen.
+
round
+
Wenn der erlaubte Platz vergrößert wird, werden sich die wiederholten Bilder dehnen (ohne Lücken zu hinterlassen), bis Platz für einen weiteren Platz vorhanden ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Breite von 260 Pixeln, das dreimal wiederholt wird, könnte sich dehnen, bis jede Wiederholung 300 Pixel breit ist, und dann wird ein weiteres Bild hinzugefügt. Sie werden dann auf 225px komprimieren.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+
+ +

Beispiel

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

Support für mehrere Bildmasken

+ +

Sie können für jedes Maskenbild, getrennt durch Kommas, einen anderen <repeat-style> angeben:

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

Jedes Bild wird mit dem entsprechenden Wiederholungsstil verglichen, vom ersten bis zum letzten.

+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Während die Eigenschaft selbst erkannt wird, akzeptiert sie keine Werte.

+ +

Sehenswert

+ +

{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-y")}}

diff --git a/files/de/web/css/-webkit-mask-repeat-y/index.html b/files/de/web/css/-webkit-mask-repeat-y/index.html new file mode 100644 index 0000000000..e969fc9482 --- /dev/null +++ b/files/de/web/css/-webkit-mask-repeat-y/index.html @@ -0,0 +1,126 @@ +--- +title: '-webkit-mask-repeat-y' +slug: Web/CSS/-webkit-mask-repeat-y +translation_of: Web/CSS/-webkit-mask-repeat-y +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Die Eigenschaft -webkit-mask-repeat-y gibt an, ob und wie ein Maskenbild vertikal wiederholt wird.

+ +
/* Keyword values */
+-webkit-mask-repeat-y: repeat;
+-webkit-mask-repeat-y: no-repeat;
+-webkit-mask-repeat-y: space;
+-webkit-mask-repeat-y: round;
+
+/* Multiple values */
+-webkit-mask-repeat-y: repeat, no-repeat, space;
+
+/* Global values */
+-webkit-mask-repeat-y: inherit;
+-webkit-mask-repeat-y: initial;
+-webkit-mask-repeat-y: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Werte

+ +
+
repeat
+
Das Maskenbild wird vertikal wiederholt.
+
no-repeat
+
Das Maskenbild wird nicht vertikal wiederholt, nur eine Kopie des Maskenbildes wird in vertikaler Richtung gezeichnet. Der vertikale Rest des Inhalts des maskierten Elements wird nicht angezeigt.
+
space
+
Das Bild wird so oft wie möglich wiederholt, ohne zu beschneiden. Das erste und das letzte Bild werden am oberen und unteren Rand des Elements fixiert, und Leerräume werden gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft {{cssxref ("mask-position")}} wird ignoriert, es sei denn, nur ein Bild kann ohne Übersteuerung angezeigt werden. Der einzige Fall, in dem Clipping mit Leerzeichen auftritt, ist, wenn nicht genügend Platz vorhanden ist, um ein Bild anzuzeigen.
+
round
+
Wenn der erlaubte vertikale Raum größer wird, dehnen sich die wiederholten Bilder (ohne Lücken), bis Platz für einen weiteren Platz ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Höhe von 260 Pixeln, das dreimal wiederholt wird, kann sich dehnen, bis jede Wiederholung 300 Pixel hoch ist, und dann wird ein weiteres Bild hinzugefügt. Sie werden dann auf eine Höhe von 225px komprimieren.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+
+ +

Beispiel

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

Support für mehrere Bildmasken

+ +

Sie können für jedes Maskenbild, getrennt durch Kommas, einen anderen <repeat-style> angeben:

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

Jedes Bild wird mit dem entsprechenden Wiederholungsstil verglichen, vom ersten bis zum letzten.

+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Während die Eigenschaft selbst erkannt wird, akzeptiert sie keine Werte.

+ +

Sehenswert

+ +

{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-x")}}

diff --git a/files/de/web/css/-webkit-mask-repeat/index.html b/files/de/web/css/-webkit-mask-repeat/index.html new file mode 100644 index 0000000000..cef03cef91 --- /dev/null +++ b/files/de/web/css/-webkit-mask-repeat/index.html @@ -0,0 +1,127 @@ +--- +title: '-webkit-mask-repeat' +slug: Web/CSS/-webkit-mask-repeat +tags: + - CSS +translation_of: Web/CSS/mask-repeat +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-mask-repeat Eigenschaft gibt an, ob und wie ein Maskenbild wiederholt (gekachelt) wird.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Einzelne Schlüsselwortwerte */
+-webkit-mask-repeat: repeat;
+-webkit-mask-repeat: repeat-x;
+-webkit-mask-repeat: repeat-y;
+-webkit-mask-repeat: no-repeat;
+
+/* Mehrer Schlüsselwortwerte */
+-webkit-mask-repeat: repeat, repeat-x, no-repeat;
+
+/* Globale Werte */
+-webkit-mask-repeat: inherit;
+-webkit-mask-repeat: initial;
+-webkit-mask-repeat: unset;
+
+ +

Werte

+ +
+
repeat
+
Das Maskenbild wird horizontal und vertikal wiederholt.
+
repeat-x
+
Das Maskenbild wird nur horizontal wiederholt.
+
repeat-y
+
Das Maskenbild wird nur vertikal wiederholt.
+
no-repeat
+
Das Maskenbild wird nicht wiederholt; nur eine Kopie des Maskenbildes wird gezeichnet. Der Rest des Inhalts des maskierten Elements wird nicht dargestellt.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

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

Unterstützung mehrerer Maskenbilder

+ +

Für jedes Maskenbild kann ein unterschiedlicher <repeat-style> Wert angegeben werden, der durch Kommas getrennt wird:

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

Jedes Bild wird dem zugehörigen Wiederholungsstil zugeordnet, vom zuerst bis zum zuletzt angegebenen.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
+ +

Siehe auch

+ +

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

diff --git a/files/de/web/css/-webkit-overflow-scrolling/index.html b/files/de/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..e563f1bc33 --- /dev/null +++ b/files/de/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,95 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-overflow-scrolling CSS Eigenschaft bestimmt, ob Touchgeräte impulsbasiertes Scrolling für ein Element verwenden oder nicht.

+ +

Werte

+ +
+
auto
+
"Reguläres" Scrolling wird verwendet, wobei der Inhalt sofort aufhört zu scrollen, wenn der Finger vom Touchscreen entfernt wird.
+
touch
+
Impulsbasiertes Scrolling wird verwendet, wobei der Inhalt für einen Moment weiterscrollt nachdem die Scrollgeste beendet und der Finger vom Touchscreen entfernt wurde. Die Geschwindigkeit und Dauer des Weiterscrollens ist proportional zur Stärke der Scrollgeste. Erzeugt auch einen neuen Stackingkontext.
+
+ +

Beispiele

+ +
-webkit-overflow-scrolling: touch; /* lets it scroll lazy */
+
+-webkit-overflow-scrolling: auto; /* stop scrolling immediately */
+
+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}5.0
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-webkit-print-color-adjust/index.html b/files/de/web/css/-webkit-print-color-adjust/index.html new file mode 100644 index 0000000000..37712aa627 --- /dev/null +++ b/files/de/web/css/-webkit-print-color-adjust/index.html @@ -0,0 +1,97 @@ +--- +title: '-webkit-print-color-adjust' +slug: Web/CSS/-webkit-print-color-adjust +tags: + - CSS + - CSS Eigenschaft + - Layout + - NeedsExample + - Non-standard + - Web +translation_of: Web/CSS/-webkit-print-color-adjust +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Die -webkit-print-color-adjust Eigenschaft ist eine nicht standardisierte CSS Erweiterung, die dazu verwendet werden kann, um das Drucken von Hintergrundfarben und -bildern in Browsern zu erzwingen, die auf der WebKit Engine basieren.

+ +

Syntax

+ +
-webkit-print-color-adjust: economy | exact
+
+ +

Werte

+ +
+
economy
+
Normales Verhalten. Hintergrundfarben und -bilder werden nur gedruckt, falls der Benutzer dies explizit in den Druckeinstellungen seines Browsers erlaubt.
+
exact
+
Hintergrundfarben und -bilder des Elements, auf den die Regel zutrifft, werden immer gedruckt. Die Druckeinstellungen des Benutzers werden überschrieben.
+
+ +

Vererbung

+ +

Diese Eigenschaft wird vererbt.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}6.0[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Chrome druckt keine Hintergründe des {{HTMLElement("body")}} Elements. Falls diese Eigenschaft für das <body> Element auf exact gesetzt ist, wird sie nur auf dessen Unterknoten angewendet.

+ +

Wenn Hintergrundbilder zugeschnitten sind (zum Beispiel wenn Sprites als Hintergrundbilder verwendet werden), werden sie wegen Chromium Bug 131054 verzerrt dargestellt, wenn sie im Chrome Browser mit -webkit-print-color-adjust: exact gedruckt werden. Einfarbige Hintergründe und Hintergrundbilder, die nicht zugeschnitten sind (d. h. sie haben eine kleinere Breite und Höhe als das Element, auf das sie angewendet werden), werden korrekt gedruckt.

+ +

[2] Safari druckt keine Hintergründe des {{HTMLElement("body")}} Elements. Falls diese Eigenschaft für das <body> Element auf exact gesetzt ist, wird sie nur auf dessen Unterknoten angewendet.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/-webkit-tap-highlight-color/index.html b/files/de/web/css/-webkit-tap-highlight-color/index.html new file mode 100644 index 0000000000..f74eca6d7e --- /dev/null +++ b/files/de/web/css/-webkit-tap-highlight-color/index.html @@ -0,0 +1,33 @@ +--- +title: '-webkit-tap-highlight-color' +slug: Web/CSS/-webkit-tap-highlight-color +translation_of: Web/CSS/-webkit-tap-highlight-color +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

-webkit-tap-highlight-color ist eine nicht standardmäßige CSS-Eigenschaft, mit der die Farbe der Hervorhebung festgelegt wird, die während des Tippens über einen Link angezeigt wird. Die Markierung zeigt dem Benutzer an, dass sein Antippen erfolgreich erkannt wird, und zeigt an, auf welches Element er tippt.

+ +
-webkit-tap-highlight-color: red;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +

A {{Cssxref("color value")}}.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Spezifikationen

+ +

Kein Teil einer Spezifikation. Apple hat eine Beschreibung im Safari Web Content Guide.

+ +

Browser-Kompatibilität

+ +

Diese Eigenschaft wird von WebKit / Safari, Blink / Chrome und einigen Versionen von Internet Explorer und Microsoft Edge unterstützt.

diff --git a/files/de/web/css/-webkit-text-fill-color/index.html b/files/de/web/css/-webkit-text-fill-color/index.html new file mode 100644 index 0000000000..e3a7cc06e6 --- /dev/null +++ b/files/de/web/css/-webkit-text-fill-color/index.html @@ -0,0 +1,83 @@ +--- +title: '-webkit-text-fill-color' +slug: Web/CSS/-webkit-text-fill-color +tags: + - CSS + - CSS Eigenschaft + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/-webkit-text-fill-color +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-text-fill-color CSS Eigenschaft bestimmt die Füllfarbe von Textzeichen. Falls diese Eigenschaft nicht gesetzt ist, wird der Wert der {{cssxref("color")}} Eigenschaft verwendet.

+ +

Spezifikationen

+ +

Nicht Teil irgendeiner Spezifikation.

+ +

Apple hat eine Beschreibung in der Safari CSS Referenz.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-webkit-text-stroke-color/index.html b/files/de/web/css/-webkit-text-stroke-color/index.html new file mode 100644 index 0000000000..1a220a1710 --- /dev/null +++ b/files/de/web/css/-webkit-text-stroke-color/index.html @@ -0,0 +1,108 @@ +--- +title: '-webkit-text-stroke-color' +slug: Web/CSS/-webkit-text-stroke-color +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: Web/CSS/-webkit-text-stroke-color +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-text-stroke-color CSS Eigenschaft definiert die Umrandungsfarbe von Textzeichen. Falls diese Eigenschaft nicht gesetzt ist, wird der Wert der {{cssxref("color")}} Eigenschaft verwendet.

+ +

Syntax

+ +
/* <color> Werte */
+-webkit-text-stroke-color: red;
+-webkit-text-stroke-color: #e08ab4;
+-webkit-text-stroke-color: rgb(200, 100, 0);
+
+/* Globale Werte */
+-webkit-text-stroke-color: inherit;
+-webkit-text-stroke-color: initial;
+-webkit-text-stroke-color: unset;
+
+ +

Werte

+ +
+
<color>
+
Die Farbe der Umrandung.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Apple hat eine Beschreibung von -webkit-text-stroke-color in der Safari CSS Referenz.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-webkit-text-stroke-width/index.html b/files/de/web/css/-webkit-text-stroke-width/index.html new file mode 100644 index 0000000000..e06b5b1337 --- /dev/null +++ b/files/de/web/css/-webkit-text-stroke-width/index.html @@ -0,0 +1,85 @@ +--- +title: '-webkit-text-stroke-width' +slug: Web/CSS/-webkit-text-stroke-width +tags: + - CSS + - Experimentell + - NeedsBrowserCompatibility + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-webkit-text-stroke-width +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-text-stroke-width CSS Eigenschaft definiert die Strichbreite des Texts.

+ +

Der Standardwert dieser Eigenschaft ist null.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Apple hat eine Beschreibung in der Safari CSS Referenz.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-webkit-text-stroke/index.html b/files/de/web/css/-webkit-text-stroke/index.html new file mode 100644 index 0000000000..056b62d357 --- /dev/null +++ b/files/de/web/css/-webkit-text-stroke/index.html @@ -0,0 +1,126 @@ +--- +title: '-webkit-text-stroke' +slug: Web/CSS/-webkit-text-stroke +tags: + - CSS + - Eigenschaft + - Non-standard + - Referenz +translation_of: Web/CSS/-webkit-text-stroke +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-text-stroke CSS Eigenschaft gibt die Breite und Farbe der Umrandung von Textzeichen an. Sie ist eine Kurzschreibweise für die Langschreibungseigenschaften {{cssxref("-webkit-text-stroke-width")}} und {{cssxref("-webkit-text-stroke-color")}}.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Breiten- und Farbwerte */
+-webkit-text-stroke: 4px navy;
+
+/* Globale Werte */
+-webkit-text-stroke: inherit;
+-webkit-text-stroke: initial;
+-webkit-text-stroke: unset;
+
+ +

Werte

+ +
+
<length>
+
Die Breite der Umrandung.
+
<color>
+
Die Farbe der Umrandung.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +

HTML

+ +
<p id="example">Die Umrandung dieses Texts ist rot.</p>
+ +

CSS

+ +
#example {
+  font-size: 50px;
+  margin: 0;
+  -webkit-text-stroke: 2px red;
+}
+ +

{{EmbedLiveSample("Beispiel", 650, 60)}}

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Apple hat eine Beschreibung in der Safari CSS Referenz.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung4{{CompatGeckoDesktop("48.0")}}[1]{{CompatNo}}153.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung4{{CompatGeckoMobile("48.0")}}[1]{{CompatNo}}364.1
+
+ +

[1] Ab Gecko 48 hinter der Einstellung layout.css.prefixes.webkit implementiert, dort noch standarmäßig false;
+ ab Gecko 49 {{geckoRelease("49.0")}} standardmäßig true.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/-webkit-touch-callout/index.html b/files/de/web/css/-webkit-touch-callout/index.html new file mode 100644 index 0000000000..af79615358 --- /dev/null +++ b/files/de/web/css/-webkit-touch-callout/index.html @@ -0,0 +1,108 @@ +--- +title: '-webkit-touch-callout' +slug: Web/CSS/-webkit-touch-callout +tags: + - CSS + - CSS Eigenschaft + - Layout + - NeedsBrowserCompatibility + - NeedsLiveSample + - Referenz +translation_of: Web/CSS/-webkit-touch-callout +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-touch-callout CSS Eigenschaft steuert die Anzeige der Standard-Textbox, die angezeigt wird, wenn das Touchziel berührt und gehalten wird.

+ +

Wenn das Ziel in iPhone OS berührt und gehalten wird, zeigt Safari eine Textbox-Information über den Link an. Diese Eigenschaft erlaubt es, dieses Verhalten zu deaktivieren.

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-webkit-touch-callout: default;
+-webkit-touch-callout: none;
+
+/* Globale Werte */
+-webkit-touch-callout: initial;
+-webkit-touch-callout: inherit;
+-webkit-touch-callout: unset;
+ +

Werte

+ +
+
default
+
Die Standard-Textbox wird angezeigt.
+
none
+
Die Textbox ist deaktiviert.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

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

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Apple hat eine Beschreibung in der Safari CSS Referenz.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[1]
+
+ +

[1] Die -webkit-touch-callout Eigenschaft wurde in iOS 2.0 implementiert und später zu WebKit hinzugefügt ({{webkitbug(121507)}}).

diff --git a/files/de/web/css/@charset/index.html b/files/de/web/css/@charset/index.html new file mode 100644 index 0000000000..289dc8117b --- /dev/null +++ b/files/de/web/css/@charset/index.html @@ -0,0 +1,79 @@ +--- +title: '@charset' +slug: Web/CSS/@charset +tags: + - CSS + - CSS At-Regel + - Layout + - Referenz + - Web +translation_of: Web/CSS/@charset +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die @charset CSS At-Regel gibt die Zeichenkodierung an, die in dem Stylesheet verwendet wird. Sie muss das erste Element im Stylesheet sein und ihr darf kein Zeichen vorangestellt werden; da sie kein verschachtelter Ausdruck ist, kann sie nicht innerhalb bedingten Gruppen At-Regeln verwendet werden. Falls mehrere @charset At-Regeln definiert sind, wird nur die erste verwendet. Und sie kann auch nicht innerhalb eines style Attributs eines HTML Elements oder innerhalb des {{ HTMLElement("style") }} Elements verwendet werden, in dem die Zeichenkodierung der HTML Seite ausschlaggebend ist.

+ +

Diese At-Regel ist nützlich, wenn nicht-ASCII Zeichen in manchen CSS Eigenschaften wie {{ cssxref("content") }} verwendet werden.

+ +

Da es mehrere Möglichkeiten gibt, die Zeichenkodierung eines Stylesheets anzugeben, versucht der Browser die folgenden Methoden in der angegebenen Reihenfolge (und stoppt, sobald eine ein Ergebnis zurückliefert):

+ +
    +
  1. Der Wert des Unicode Bytereihenfolge Zeichens, das am Anfang der Datei gesetzt ist.
    2. +
  2. Der Wert, der durch das charset Attribut des Content-Type: HTTP-Headers angegeben wurde oder das Äquivalent hierzu im Protokoll, das verwendet wird, um das Stylesheet zu übertragen.
    3. +
  3. Die @charset CSS At-Regel.
    4. +
  4. Benutze die Zeichenkodierung, die durch das referenzierte Dokument angegeben wird: Das charset Attribut des {{ HTMLElement("link") }} Elements. Diese Methode ist veraltet in HTML5 und darf nicht verwendet werden.
    5. +
  5. Nimm an, dass das Dokument UTF-8 kodiert ist.
    6. +
+ +

Syntax

+ +
@charset "UTF-8";
+@charset 'iso-8859-15';
+
+ +
+
charset
+
Ist ein {{cssxref("<string>")}}, der die zu verwendende Zeichenkodierung angibt. Dies muss der Name einer websicheren Zeichenkodierung sein, wie sie in der IANA Registrierung definiert wird. Falls mehrere Namen mit einer Kodierung assoziiert werden, wird nur der verwendet, der mit preferred gekennzeichnet ist.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Gültige Bespiele:

+ +
@charset "UTF-8";       /* Setzt die Kodierung des Stylesheets auf Unicode UTF-8 */
+@charset 'iso-8859-15'; /* Setzt die Kodierung des Stylesheets auf Latin-9 (Westeuropäische Sprachen, mit Eurozeichen) */
+
+ +

Ungültige Beispiele:

+ +
 @charset "UTF-8";      /* Ungültig, da ein Zeichen (Leerzeichen) vor der At-Regel steht */
+@charset UTF-8;         /* Ungültig, da kein ' oder " angegeben wurde, die Zeichenkodierung ist kein CSS {{cssxref("<string>")}} */
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.at-rules.charset")}} diff --git a/files/de/web/css/@document/index.html b/files/de/web/css/@document/index.html new file mode 100644 index 0000000000..f9d47540fb --- /dev/null +++ b/files/de/web/css/@document/index.html @@ -0,0 +1,71 @@ +--- +title: '@document' +slug: Web/CSS/@document +tags: + - At-Regel + - CSS + - Referenz +translation_of: Web/CSS/@document +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Übersicht

+ +

Die @document CSS at-rule beschränkt die Stilregeln, die sie beinhaltet, basierend auf dem URL des Dokuments. Sie wurde hauptsächlich für Benutzerstylesheets entworfen. Eine @document Regel kann eine oder mehrere Matchingfunktionen definieren. Falls eine der Funktionen auf einen URL passt, wird die Regel auf diesen URL angewandt.

+ +

Der Hauptanwendungsfall ist für benutzerdefinierte Stylesheets, jedoch kann diese Regel auch für autordefinierte Stylesheets verwendet werden.

+ +

Die verfügbaren Funktionen sind:

+ + + +

Syntax

+ +

Die angegebenen Werte für die url(), url-prefix() und domain() Funktionen können optional durch einfache oder doppelte Anführungszeichen umschlossen werden. Die angegebenen WErte für die regexp() Funktion müssen durch Anführungenzeichen umschlossen sein.

+ +

Für die regexp() Funktion escapte Werte müssen zusätzlich vom CSS escapt werden. Zum Beispiel matcht ein . (Punkt) ein beliebiges Zeichen in regulären Ausdrücken. Um einen Punkt zu matchen, muss er zunächst anhand der Regeln für reguläre Ausdrücke escapt werden (also \.) und anschließend durch die CSS Regeln (also \\.).

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
@document url(http://www.w3.org/),
+               url-prefix(http://www.w3.org/Style/),
+               domain(mozilla.org),
+               regexp("https:.*")
+{
+  /* CSS Regeln hier werden angewandt auf:
+     - Die Seite "http://www.w3.org/".
+     - Jede Seite, deren URL mit "http://www.w3.org/Style/" beginnt
+     - Jede Seite, deren URLs Host "mozilla.org" ist oder mit ".mozilla.org" endet
+     - Jede Seite, deren URL mit "https:" beginnt */
+
+  /* macht die oben erwähnten Seiten wirklich hässlich */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+
+ +

Spezifikationen

+ +

Ursprünglich in {{SpecName('CSS3 Conditional', '', '')}}, wurde @document nach Level 4 verschoben.

+ +

Browser Kompatibilität

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

Siehe auch

+ + diff --git a/files/de/web/css/@import/index.html b/files/de/web/css/@import/index.html new file mode 100644 index 0000000000..acff38aebc --- /dev/null +++ b/files/de/web/css/@import/index.html @@ -0,0 +1,79 @@ +--- +title: '@import' +slug: Web/CSS/@import +tags: + - '@-Regel' + - CSS + - Referenz +translation_of: Web/CSS/@import +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die @import CSS @-Regel wird verwendet, um Stilregeln anderer Stylesheets zu importieren. Diese Regeln müssen allen anderen Typen von Regeln vorangehen außer {{cssxref("@charset")}} Regeln; da sie kein verschachteltes Statement ist, kann @import nicht innerhalb bedingter Gruppen-@-Regeln verwendet werden.

+ +

Damit User Agents verhindern können, Ressourcen für nicht unterstützte Medientypen zu holen, können Autoren medienabhängige @import Regeln definieren. Diese bedingten Importe definieren kommaseparierte Media Queries nach dem URI. Falls keine Media Query angegeben wurde, ist der Import unbedingt. Die Angabe von all für das Medium hat denselben Effekt.

+ +

Syntax

+ +
@import url;
+@import url list-of-media-queries;
+
+ +

wobei:

+ +
+
url
+
Ist ein {{cssxref("<string>")}} oder ein {{cssxref("<uri>")}}, der die Adresse der zu importierenden Ressource repräsentiert. Der URL kann absolut oder relativ sein. Beachte, dass der URL nicht unbedingt eine Datei referenzieren muss; er kann auch nur den Packagenamen und -teil angeben und die passende Datei wird automatisch ausgewählt (z. B. chrome://communicator/skin/). Siehe hier für mehr Informationen.
+
list-of-media-queries
+
Ist eine kommaseparierte Liste von Media Queries, die die Anwendung der in dem verlinkten URL definierten CSS Regeln bedingt. Falls der Browser keine dieser Media Queries unterstützt, lädt er die verlinkte Ressource nicht.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
@import url("fineprint.css") print;
+@import url("bluish.css") projection, tv;
+@import 'custom.css';
+@import url("chrome://communicator/skin/");
+@import "common.css" screen, projection;
+@import url('landscape.css') screen and (orientation:landscape);
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Media Queries', '#media0', '@import')}}{{Spec2('CSS3 Media Queries')}}Erweitert die Syntax zur Unterstützung beliebiger Media Queries und nicht nur einfache Medientypen.
{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}{{Spec2('CSS2.1')}}Fügt Unterstützung für {{cssxref("<string>")}} hinzu, um den URL eines Stylesheets anzugeben,
+ und Voraussetzung dafür, die @import Regel am Anfang des CSS Dokuments anzugeben.
{{SpecName('CSS1', '#the-cascade', '@import')}}{{Spec2('CSS1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.at-rules.import")}} diff --git a/files/de/web/css/@keyframes/index.html b/files/de/web/css/@keyframes/index.html new file mode 100644 index 0000000000..31acaf56b5 --- /dev/null +++ b/files/de/web/css/@keyframes/index.html @@ -0,0 +1,114 @@ +--- +title: '@keyframes' +slug: Web/CSS/@keyframes +translation_of: Web/CSS/@keyframes +--- +
{{CSSRef}}
+ +

Zusammenfassung

+ +

Durch die CSS-at-Regel @keyframes kann der Autor die einzelnen Schritte einer CSS-Animationssequenz festlegen, indem er Keyframes (oder Wegpunkte) setzt, die während der Sequenz an bestimmten Punkten erreicht werden. Das ermöglicht eine spezifischere Kontrolle über die Zwischenschritte einer Animationssequenz gegenüber dem Ergebnis einem dem Browser überlassenen, automatisch berechneten Ablauf.

+ +

Die at-Regel @keyframes kann mit dem CSS-Objekt {{domxref("CSSKeyframesRule")}} erlangt werden.

+ +

Um Keyframes zu benutzen, erstellt man eine @keyframes-Regel mit einem Namen, der dann durch die {{ cssxref("animation-name") }}-Eigenschaft genutzt wird, um einer Animation einen Keyframe zuzuweisen. Jede @keyframes-Regel beinhaltet eine Style-Liste aus Keyframe-Selektoren, von denen jeder eine Prozentzahl enthält, die angibt, zu welchem relativen Zeitpunkt während der Animation der Keyframe auftritt, sowie einen Block mit den jeweiligen Style-Informationen für diesen Keyframe.

+ +

Die Reihenfolge der Keyframes ist egal, denn sie werden in der Reihenfolge ihrer Prozentzahl verwendet.

+ +

Gültige Keyframe-Liste

+ +

Damit ein Keyframe gültig ist, muss er Regeln enthalten, die zumindest die Zeiten 0% (oder from) und 100% (oder to) enthalten (d.h. der Start- und Endstatus der Animation). Wenn beide Zeiten nicht angegeben sind, ist die Keyframe-Deklaration ungültig; sie wird vom Parser ignoriert und kann nicht als Animation verwendet werden.

+ +

Wenn Eigenschaften beschrieben werden, die nicht in den Keyframe-Regeln animiert werden können, werden sie ignoriert. Unterstützte Eingeschaften in dem Block werden weiterhin animiert.

+ +

Doppelte Deklarationen

+ +

Wenn mehrere Keyframe-Sets mit einem Namen existieren, gilt der letzte definierte. @keyframes-Regeln sind nicht kaskadierend, Animationen nehmen also niemals Keyframes von mehr als einer definierten Regel.

+ +

Wenn ein Zeitpunkt in der Animation doppelt deklariert ist, gilt der letzte Keyframe dieses Zeitpunkts in der @keyframes-Regel. Mehrere Regeln derselben Zeit sind nicht kaskadierend.

+ +

Wenn Eigenschaften aus manchen Keyframes ausgelassen werden

+ +

Jede Eigenschaft, die nicht in jedem Keyframe spezifiert wird, ist interpoliert (mit der Ausnahme von denen, die nicht interpoliert werden können und daher aus der gesamten Animation weggelassen werden). Zum Beispiel:

+ +
@keyframes identifier {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+
+ +

Hier wird die {{ cssxref("top") }}-Eigenschaft mit Benutzen der 0%-, 30%-, und 100%-Keyframes animiert, und {{ cssxref("left") }} animiert anhand der 0%-, 68%-, and 100%-Keyframes.

+ +

Nur Eigenschaften, die in sowohl im 0%-, als auch im 100%-Keyframe spezifiziert sind, werden animiert; jede Eigenschaft, die nicht in diesen beiden Keyframes enthalten ist, wird ihren Startwert für die Dauer der Animation behalten.

+ +

Wenn ein Keyframe mehrmals definiert wird

+ +

Wenn ein Keyframe mehrmals definiert wird, aber nicht alle Eigenschaften in jedem Keyframe enthalten sind, werden ausschließlich die Werte des letzten Keyframes beachtet, zum Beispiel:

+ +
@keyframes identifier {
+  0% { top: 0; }
+  50% { top: 30px; left: 20px; }
+  50% { top: 10px; }
+  100% { top: 0; }
+}
+
+ +

In diesem Beispiel ist der genutzte Wert des 50%-Keyframe top: 10px und alle anderen Werte des ersten Keyframes werden ignoriert.

+ +

{{ non-standard_inline }} {{ fx_minversion_inline("14") }}  Kaskadierende Keyframes werden in Firefox ab Version 14 unterstützt. Im oberen Beispiel wird beim 50%-Keyframe der Wert left: 20px beachtet. Dies ist noch nicht in der Spezifikation definiert, wird allerdings gerade diskutiert.

+ +

Syntax

+ +
@keyframes <bezeichner> {
+  [ [ from | to | <Prozentzahl> ] [, from | to | <Prozentzahl> ]* block ]*
+}
+
+ +

Values

+ +
+
<Bezeichner>
+
Ein Name, der die Keyframe-Liste eindeutig identifiziert. Er muss den CSS-Syntax-Richtlinien für Bezeichner entsprechen.
+
from
+
Der Startwert 0%.
+
to
+
Der Endwert 100%.
+
{{cssxref("<percentage>")}}
+
Eine Prozentzahl, die den Zeitpunkt in der Animationssequenz angibt, an dem der spezifizierte Keyframe gelten soll.
+
+ +

Beispiel

+ +

Siehe CSS-Animationen für Beispiele.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}{{ Spec2('CSS3 Animations') }} 
+ +

Browser-Kompatibilität

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

Siehe auch

+ + diff --git a/files/de/web/css/@media/any-pointer/index.html b/files/de/web/css/@media/any-pointer/index.html new file mode 100644 index 0000000000..d919a97c58 --- /dev/null +++ b/files/de/web/css/@media/any-pointer/index.html @@ -0,0 +1,67 @@ +--- +title: any-pointer +slug: Web/CSS/@media/any-pointer +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - Referenz +translation_of: Web/CSS/@media/any-pointer +--- +{{cssref}} + +

any-pointer ist ein CSS Media Feature, das dazu verwendet werden kann, um zu prüfen, ob irgendein verfügbarer Eingabemechanismus ein Zeigegerät ist, und falls ja, wie genau es ist.

+ +

Aufgezählte Werte

+ + + + + + + + + + + + + + + + + + + + + + +
WertBedeutung
noneDas Gerät verfügt nicht über ein Zeigegerät.
coarseMindestens ein Eingabemechanismus des Geräts verfügt über ein Zeigegerät von begrenzter Genauigkeit.
fineMindestens ein Eingabemechanismus des Geräts verfügt über ein Zeigegerät von präziser Genauigkeit.
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}{{Spec2('CSS4 Media Queries')}}Added in Media Queries Level 4
+ +

Browser Kompatibilität

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

Siehe auch

+ + diff --git a/files/de/web/css/@media/index.html b/files/de/web/css/@media/index.html new file mode 100644 index 0000000000..814ff628ed --- /dev/null +++ b/files/de/web/css/@media/index.html @@ -0,0 +1,260 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - At-rule + - CSS + - Layout + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/CSS/@media +--- +

{{ CSSRef() }}

+ +

Summary

+ +

The @media CSS at-rule associates a set of nested statements, in a CSS block that is delimited by curly braces, with a condition defined by a media query. The @media at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.

+ +

The @media at-rule can be accessed via the CSS object model interface {{domxref("CSSMediaRule")}}.

+ +

Syntax

+ +
{{csssyntax}}
+ +

A <media-query> is composed of a media type and/or a number of media features.

+ +

Media types

+ +
Note: Firefox currently only implements the print and screen media types.  The FullerScreen extension enables support for the projection media type.
+ +
+
all
+
Suitable for all devices.
+
print
+
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.
+
screen
+
Intended primarily for color computer screens.
+
speech
+
Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
+
+ +
Note: CSS2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, aural), but they were deprecated in Media Queries 4 and shouldn't be used.
+ +

Media Features

+ +

Definition. This section needs to be expanded to explain media conditions in more depth.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameSummaryNotes
widthViewport width 
heightViewport height 
aspect-ratioWidth-to-height aspect ratio of the viewport 
orientationOrientation of the viewport 
resolutionPixel density of the output device 
scanScanning process of the output device 
gridIs the device a grid or bitmap? 
update-frequencyHow quickly (if at all) can the output device modify the appearance of the contentAdded in Media Queries Level 4
overflow-blockHow does the output device handle content that overflows the viewport along the block axis?Added in Media Queries Level 4
overflow-inlineCan content that overflows the viewport along the inline axis be scrolled?Added in Media Queries Level 4
colorNumber of bits per color component of the output device, or zero if the device isn't color. 
color-indexNumber of entries in the output device's color lookup table, or zero if the device does not use such a table. 
monochromeBits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome. 
inverted-colorsIs the user agent or underlying OS inverting colors?Added in Media Queries Level 4
pointerIs the primary input mechanism a pointing device, and if so, how accurate is it?Added in Media Queries Level 4
hoverDoes the primary input mechanism allow the user to hover over elements?Added in Media Queries Level 4
any-pointerIs any available input mechanism a pointing device, and if so, how accurate is it? 
any-hoverDoes any available input mechanism allow the user to hover over elements? 
light-levelCurrent ambient light levelAdded in Media Queries Level 4
scriptingIs scripting (e.g. JavaScript) available?Added in Media Queries Level 4
device-width {{obsolete_inline}}Width of the rendering surface of the output deviceDeprecated in Media Queries Level 4
device-height {{obsolete_inline}}Height of the rendering surface of the output deviceDeprecated in Media Queries Level 4
device-aspect-ratio {{obsolete_inline}}Width-to-height aspect ratio of the output deviceDeprecated in Media Queries Level 4
-webkit-device-pixel-ratio {{non-standard_inline}}Number of physical device pixels per CSS pixelNonstandard; WebKit/Blink-specific. If possible, use the resolution media feature instead.
-webkit-transform-3d {{non-standard_inline}}Are CSS 3D {{cssxref("transform")}}s supported?Nonstandard; WebKit/Blink-specific
-webkit-transform-2d {{non-standard_inline}}Are CSS 2D {{cssxref("transform")}}s supported?Nonstandard; WebKit-specific
-webkit-transition {{non-standard_inline}}Are CSS {{cssxref("transition")}}s supported?Nonstandard; WebKit-specific
-webkit-animation {{non-standard_inline}}Are CSS {{cssxref("animation")}}s supported?Nonstandard; WebKit-specific
+ +

Examples

+ +
@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}{{Spec2('CSS3 Conditional')}}Defines the basic syntax of the @media rule.
{{SpecName('CSS4 Media Queries', '#media', '@media')}}{{Spec2('CSS4 Media Queries')}} +

Added scripting, pointer, hover, light-level, update-frequency, overflow-block, and overflow-inline media features.
+ Deprecated all media types except for screen, print, speech, and all.

+
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}{{Spec2('CSS3 Media Queries')}}No change.
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Browser compatibility

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

See also

+ + diff --git a/files/de/web/css/@media/pointer/index.html b/files/de/web/css/@media/pointer/index.html new file mode 100644 index 0000000000..4c1ff0fc8b --- /dev/null +++ b/files/de/web/css/@media/pointer/index.html @@ -0,0 +1,91 @@ +--- +title: pointer +slug: Web/CSS/@media/pointer +translation_of: Web/CSS/@media/pointer +--- +
{{cssref}}
+ +

Das CSS {{cssxref("@media")}} media Merkmal pointer wird verwendet um Styles abhängig vom primären Eingabemechanismus des Geräts anzuwenden. Es gibt aufschluss darüber ob der primäre Eingabemechanismus ein Zeigegerät ist, und wenn ja, wie präzise es ist.

+ +

Syntax

+ +

Die Einstellungsmöglichkeiten für das Merkmal pointer  sind in der folgenden Liste aufge

+ +
+
none
+
Das Gerät verfügt nur über Tastatur
+
coarse
+
Das Gerät verfügt über ein Eingabegerät mit limitierter Präzision (z.B. Touch)
+
fine
+
Das Gerät verfügt über einen sehr präzises Eingabegerät (z.B. Maus, Touchpad, Stift)
+
+ +

Beispiel

+ +

HTML

+ +
<input id="test" type="checkbox" />
+<label for="test">Look at me!</label>
+ +

CSS

+ +
input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}
+ +

Result

+ +

{{EmbedLiveSample("Example")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}{{Spec2('CSS4 Media Queries')}}Initial definition.
+ +

Browser Kompatibilität

+ + + +

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

+ +

See also

+ + diff --git a/files/de/web/css/@media/prefers-reduced-motion/index.html b/files/de/web/css/@media/prefers-reduced-motion/index.html new file mode 100644 index 0000000000..84c9382a27 --- /dev/null +++ b/files/de/web/css/@media/prefers-reduced-motion/index.html @@ -0,0 +1,23 @@ +--- +title: prefers-reduced-motion +slug: Web/CSS/@media/prefers-reduced-motion +translation_of: Web/CSS/@media/prefers-reduced-motion +--- +

Das prefers-reduced-motion CSS media feature wird genutzt um zu erkennen ob der Nutzer angefragt hat, dass das System die Menge an nicht notwendiger Bewegung minimiert.

+ +

User preferences

+ + + +

Browser Kompatibilität

+ + + +

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

+ +

+ +
{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}
diff --git a/files/de/web/css/@media/width/index.html b/files/de/web/css/@media/width/index.html new file mode 100644 index 0000000000..7f25285f3e --- /dev/null +++ b/files/de/web/css/@media/width/index.html @@ -0,0 +1,53 @@ +--- +title: width +slug: Web/CSS/@media/width +tags: + - CSS + - Referenz +translation_of: Web/CSS/@media/width +--- +

{{cssref}}

+ +

width ist eine CSS Medien-Eigenschaft, die verwendet werden kann um Stile basierend auf der Breite der Anzeige (Viewport) zuzuordnen. Die Breite muss als {{cssxref("<length>")}} Wert definiert werden.

+ +

Syntax

+ +

width ist ein Breichswert, d.h. min-width und max-width sind ebenfalls verfügbar.

+ +
/* Exakte Breite */
+@media (width: 300px) {}
+
+/* Viewport Minimale Breite */
+@media (min-width: 50em) {}
+
+/* Viewport Maximale Breite */
+@media (max-width: 1000px) {}
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Media Queries', '#media', '@media')}}{{Spec2('CSS4 Media Queries')}}Keine Änderung.
{{SpecName('CSS3 Media Queries', '#width', 'width')}}{{Spec2('CSS3 Media Queries')}}Initiale Definition.
+ +

Browserkompatibilität

+ +{{Compat("css.at-rules.media.width")}} diff --git a/files/de/web/css/@page/bleed/index.html b/files/de/web/css/@page/bleed/index.html new file mode 100644 index 0000000000..709025d671 --- /dev/null +++ b/files/de/web/css/@page/bleed/index.html @@ -0,0 +1,77 @@ +--- +title: bleed +slug: Web/CSS/@page/bleed +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility +translation_of: Web/CSS/@page/bleed +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Übersicht

+ +

Der bleed At-Regel Deskriptor gibt den Überhang über den Beschnitt des Seitenbereichs an. Diese Eigenschaft hat nur einen Effekt, falls Schnittmarken über die {{cssxref("marks")}} Eigenschaft aktiviert werden.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+bleed: auto;
+
+/* <length> Werte */
+bleed: 8pt;
+bleed: 1cm;
+
+ +

Werte

+ +
+
auto
+
Erhält den Wert 6pt, falls der Wert von {{cssxref("marks")}} crop ist. Ansonsten ist der Wert 0.
+
{{cssxref("<length>")}}
+
Gibt an, wie weit, in jeder Richtung, der Beschnitt den Seitenbereich überragt. Werte können negativ sein, allerdings gibt es implementierungsspezifische Beschränkungen.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

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

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}{{Spec2("CSS3 Paged Media")}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

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

+ +

Siehe auch

+ + diff --git a/files/de/web/css/@page/index.html b/files/de/web/css/@page/index.html new file mode 100644 index 0000000000..ed45c12a03 --- /dev/null +++ b/files/de/web/css/@page/index.html @@ -0,0 +1,90 @@ +--- +title: '@page' +slug: Web/CSS/@page +tags: + - At-Regel + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/@page +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die @page CSS At-Regel wird verwendet, um einige CSS Eigenschaften zu ändern, wenn ein Dokument gedruckt wird. Es können nicht alle CSS Eigenschaften mit @page geändert werden. Es können nur Seitenränder, Absatzkontrolle — oben (widow); unten (orphans) — und Seitenumbrüche des Dokuments verändert werden. Versuche, andere CSS Eigenschaften zu ändern, werden ignoriert.

+ +

Die @page At-Regel kann über die CSS Objektmodellschnittstelle {{domxref("CSSPageRule")}} angesprochen werden.

+ +
Hinweis: Das W3C diskutiert, wie die viewportbezogenen {{cssxref("<length>")}} Einheiten, vh, vw, vmin, und vmax gehandhabt werden sollen. Bis dahin sollten diese nicht in einer @page At-Regel verwendet werden.
+ +

Syntax

+ +

Deskriptoren

+ +
+
{{cssxref("@page/size", "size")}}
+
Bestimmt die Zielgröße und -ausrichtung des den Seitenbereich beinhaltenden Blocks. Im allgemeinen Fall, in dem ein Seitenbereich auf einer Seitenpostille dargestellt wird, gibt sie auch die Größe der Zielseitenpostille an.
+
+ +
+
{{cssxref("@page/marks", "marks")}}
+
Fügt dem Dokument Schneide- und/oder Registrierungsmarker hinzu.
+
+ +
+
{{cssxref("@page/bleed", "bleed")}}
+
Gibt den Überhang über den Seitenbereich an, bei dem die Darstellung der Seite abgeschnitten wird.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Bitte lies die verschiedenen Pseudoklassen von @page für Beispiele.

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS Logical Properties', '#logical-page', ':recto und :verso')}}{{Spec2('CSS Logical Properties')}}Fügt die :recto und :verso Seitenselektoren hinzu.
{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}{{Spec2('CSS3 Paged Media')}}Keine Änderung bzgl. {{SpecName('CSS2.1')}}, es können jedoch mehr CSS At-Regeln innerhalb @page verwendet werden.
{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

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

diff --git a/files/de/web/css/@page/marks/index.html b/files/de/web/css/@page/marks/index.html new file mode 100644 index 0000000000..f30efcffd3 --- /dev/null +++ b/files/de/web/css/@page/marks/index.html @@ -0,0 +1,84 @@ +--- +title: marks +slug: Web/CSS/@page/marks +tags: + - CSS + - CSS Eigenschaft + - Layout + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/@page/marks +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die marks CSS Eigenschaft fügt Schneide- und/oder Registermarken zur Darstellung eines Dokuments hinzu. Schneidemarken zeigen an, wo die Seite abgeschnitten werden soll. Registermarken verden zur Ausrichtung von Blättern benutzt.

+ +

Schneidemarken und Registermarken werden außerhalb des Seitenrechtecks gedruckt. Um Platz für Schneide- und Registermarken zu haben, müssen die finalen Seiten etwas größer sein als das Seitenrechteck.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+marks: none;
+marks: crop;
+marks: cross;
+marks: crop cross;
+ +

Werte

+ +
+
crop
+
Es werden Schneidemarken angezeigt.
+
cross
+
Es werden Registermarken angezeigt.
+
none
+
Es werden keine Marken angezeigt.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

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

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Paged Media', '#marks', 'marks')}}{{Spec2('CSS3 Paged Media')}}Ursprüngliche Definition
+ +

Diese CSS Eigenschaft wurde ursprünglich in CSS Level 2 vorgeschlagen, wurde jedoch in CSS Level 2 (Revision 1) verworfen.

+ +

Browser Kompatibilität

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

Siehe auch

+ + diff --git a/files/de/web/css/@viewport/index.html b/files/de/web/css/@viewport/index.html new file mode 100644 index 0000000000..2cdcd37691 --- /dev/null +++ b/files/de/web/css/@viewport/index.html @@ -0,0 +1,96 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +translation_of: Web/CSS/@viewport +--- +

{{ CSSRef() }}

+ +

Zusammenfassung

+ +

Die @viewport CSS at-Regel enthält eine Menge aus geschachtelten Deskriptoren in einem CSS-Block, der durch geschweifte Klammern begrenzt wird. Diese Deskriptoren steuern die Viewport-Einstellungen, insbesondere auf mobilen Geräten.

+ +

Syntax

+ +

(Dieser MDN Artikel ist derzeit nur ein Abriss, ihm fehlt die vollständige Beschreibung der Syntax.)

+ +
@viewport {
+  /* viewport-Deskriptor: viewport-Wert; */
+}
+ +

 

+ +

Ein Zoomfaktor von 1.0 oder 100% beschreibt kein Zooming. Größere Werte vergrößern, kleinere Werte verkleinern.

+ +

Deskriptoren

+ +

Browser sollen unbekannte Deskriptoren ignorieren.

+ +
+
min-width
+
Verwendet für die Festlegung der Breite des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.
+
max-width
+
Verwendet für die Festlegung der Breite des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.
+
width
+
Eine Kurznotation für die Festlegung von sowohl min-width als auch max-width
+
min-height
+
Verwendet für die Festlegung der Höhe des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.
+
max-height
+
Verwendet für die Festlegung der Höhe des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.
+
height
+
Eine Kurznotation für die Festlegung von sowohl min-height als auch max-height
+
zoom
+
Legt den initialen Zoomfaktor fest.
+
min-zoom
+
Legt den minimalen Zoomfaktor fest.
+
max-zoom
+
Legt den maximalen Zoomfaktor fest.
+
user-zoom
+
Steuert, ob der Anwender den Zoomfaktor ändern darf.
+
orientation
+
Steuert die Orientierung des Dokuments (Hoch- oder Querformat).
+
+ +

Beispiele

+ +
@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+@viewport {
+  orientation: landscape;
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezificationStatusKommentar
{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}} 
+ +

Browserkompatibilität

+ +

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

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-broken/index.html b/files/de/web/css/_colon_-moz-broken/index.html new file mode 100644 index 0000000000..bf59121e5e --- /dev/null +++ b/files/de/web/css/_colon_-moz-broken/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-broken' +slug: 'Web/CSS/:-moz-broken' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/:-moz-broken' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

Übersicht

+ +

Die :-moz-broken CSS Pseudoklasse matcht Elemente, die fehlende Bildlinks repräsentieren.

+ +

Dieser Selektor ist dazu gedacht, hauptsächlich von Themeentwicklern verwendet zu werden.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-drag-over/index.html b/files/de/web/css/_colon_-moz-drag-over/index.html new file mode 100644 index 0000000000..af4b680211 --- /dev/null +++ b/files/de/web/css/_colon_-moz-drag-over/index.html @@ -0,0 +1,42 @@ +--- +title: ':-moz-drag-over' +slug: 'Web/CSS/:-moz-drag-over' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard +translation_of: 'Web/CSS/:-moz-drag-over' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-drag-over CSS Pseudoklasse wird dazu verwendet, um ein Element zu stylen, wenn das drag-over Ereignis für es ausgelöst wird.

+ +

Syntax

+ +
element:-moz-drag-over { Stileigenschaften }
+
+ +

Beispiel

+ +

CSS

+ +
td:-moz-drag-over {
+  color: red;
+}
+
+ +

HTML

+ +
<table border="1">
+  <tr>
+    <td width="100px" height="100px">Hierüber ziehen</td>
+  </tr>
+</table>
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Example")}}

diff --git a/files/de/web/css/_colon_-moz-first-node/index.html b/files/de/web/css/_colon_-moz-first-node/index.html new file mode 100644 index 0000000000..97002e8509 --- /dev/null +++ b/files/de/web/css/_colon_-moz-first-node/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-first-node' +slug: 'Web/CSS/:-moz-first-node' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard +translation_of: 'Web/CSS/:-moz-first-node' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-first-node CSS Pseudoklasse repräsentiert ein beliebiges Element, dass der erste Kindknoten eines anderen Elements ist. Es unterscheidet sich von {{cssxref(":last-child")}}, da es keine letzten Kindelemente mit darauffolgendem (nicht aus Leerzeichen bestehenden) Text matcht.

+ +

Any white space at the start of an element is ignored for the determination of :-moz-first-node.

+ +

Syntax

+ +
span:-moz-first-node { Stileigenschaften }
+
+ +

Beispiel

+ +

CSS

+ +
span:-moz-first-node {
+  background-color: lime;
+}
+
+ +

HTML

+ +
<div>
+  <span>:-moz-first-node</span>
+  <span>:-moz-last-node</span>
+</div>
+
+ +

{{EmbedLiveSample("Example", "220", "20")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-focusring/index.html b/files/de/web/css/_colon_-moz-focusring/index.html new file mode 100644 index 0000000000..ab07f48bdc --- /dev/null +++ b/files/de/web/css/_colon_-moz-focusring/index.html @@ -0,0 +1,91 @@ +--- +title: ':-moz-focusring' +slug: 'Web/CSS/:-moz-focusring' +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsLiveSample + - Non-standard +translation_of: 'Web/CSS/:-moz-focusring' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-focusring CSS Pseudoklasse ist ähnlich der {{cssxref(":focus")}} Pseudoklasse, jedoch matcht sie ein Element nur, wenn das Element aktuell fokussiert ist und der User Agent das Zeichen von Fokusringen aktiviert hat. Falls :-moz-focusring matcht, dann matcht auch :focus, aber das Umgekehrte ist nicht immer wahr - es hängt davon ab, ob der User Agent das Zeichnen von Fokusringen aktiviert hat. Ob der User Agent das Zeichen von Fokusringen aktiviert hat, kann von Dingen wie der Einstellung des Betriebssystems abhängen, das der Benutzer verwendet, sodass das Verhalten dieser Pseudoklasse von Plattform zu Plattform abhängig von den Best Practices (Standardeinstellungen) bezüglich Fokusierung der Plattform oder Benutzereinstellungen.

+ +

Syntax

+ +
:-moz-focusring
+ +

Beispiel

+ +

Um die Anzeige eines fokussierten Elements zu definieren, kann dieser Pseudoklassenselektor folgendermaßen verwendet werden:

+ +
mybutton:-moz-focusring {
+  outline: 2px dotted;
+}
+
+ +

Spezifikationen

+ +

Dieses Feature ist bisher noch in keiner Spezifikation definiert, jedoch wurde es in der Working Group diskutiert und es wurde beschlossen, es zu Selectors 4 oder 5 hinzuzufügen.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoDesktop(2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-full-screen-ancestor/index.html b/files/de/web/css/_colon_-moz-full-screen-ancestor/index.html new file mode 100644 index 0000000000..c14ed802c6 --- /dev/null +++ b/files/de/web/css/_colon_-moz-full-screen-ancestor/index.html @@ -0,0 +1,82 @@ +--- +title: ':-moz-full-screen-ancestor' +slug: 'Web/CSS/:-moz-full-screen-ancestor' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsExample + - Non-standard + - Pseudoklasse +translation_of: 'Archive/Web/CSS/:-moz-full-screen-ancestor' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Die :-moz-full-screen-ancestor CSS Pseudoklasse passt auf alle Vorfahren des Vollbild-Elements außer beinhaltende Frames in Elterndokumenten, welche das Vollbild-Element in ihren eigenen Dokumenten sind. Jedoch passt diese Pseudoklasse auf die Vorfahren dieser Elemente.

+ +

Beispiele

+ +

Benötigt Beispiele.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoDesktop("10.0")}}{{property_prefix("-moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-handler-blocked/index.html b/files/de/web/css/_colon_-moz-handler-blocked/index.html new file mode 100644 index 0000000000..df544a0487 --- /dev/null +++ b/files/de/web/css/_colon_-moz-handler-blocked/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-blocked' +slug: 'Web/CSS/:-moz-handler-blocked' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Web/CSS/:-moz-handler-blocked' +--- +

{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}

+ +

Übersicht

+ +

:-moz-handler-blocked matcht Elemente, die nicht angezeigt werden können, weil deren Handler blockiert wurden.

+ +

Dies ist hauptsächlich für Themeentwickler nützlich.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-handler-crashed/index.html b/files/de/web/css/_colon_-moz-handler-crashed/index.html new file mode 100644 index 0000000000..25f59a32c2 --- /dev/null +++ b/files/de/web/css/_colon_-moz-handler-crashed/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-crashed' +slug: 'Web/CSS/:-moz-handler-crashed' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Web/CSS/:-moz-handler-crashed' +--- +

{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}

+ +

Übersicht

+ +

:-moz-handler-crashed matcht Elemente, die nicht angezeigt werden können, weil das Plugin, das für deren Darstellung verantwortlich ist, abgestürzt ist.

+ +

Dies ist hauptsächlich für Themeentwickler nützlich.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-handler-disabled/index.html b/files/de/web/css/_colon_-moz-handler-disabled/index.html new file mode 100644 index 0000000000..4a47e9f9d6 --- /dev/null +++ b/files/de/web/css/_colon_-moz-handler-disabled/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-disabled' +slug: 'Web/CSS/:-moz-handler-disabled' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Web/CSS/:-moz-handler-disabled' +--- +

{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}

+ +

Übersicht

+ +

:-moz-handler-disabled matcht Elemente, die nicht angezeigt werden können, weil deren Handler durch den Benutzer deaktiviert wurden.

+ +

Dies ist hauptsächlich für Themeentwickler nützlich.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-last-node/index.html b/files/de/web/css/_colon_-moz-last-node/index.html new file mode 100644 index 0000000000..29f8c0b486 --- /dev/null +++ b/files/de/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard +translation_of: 'Web/CSS/:-moz-last-node' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-last-node CSS Pseudoklasse matcht ein Element, das der letzte Kindknoten eines anderen Elements ist. Es unterscheidet sich von {{cssxref(":last-child")}}, da es keine letzten Kindelemente mit darauffolgendem (nicht aus Leerzeichen bestehenden) Text matcht.

+ +

Leerzeichen am Ende eines Elements werden zur Bestimmung von :-moz-last-node ignoriert.

+ +

Syntax

+ +
span:-moz-last-node { Stileigenschaften }
+
+ +

Beispiel

+ +

CSS

+ +
span:-moz-last-node {
+  background-color: lime;
+}
+
+ +

HTML

+ +
<div>
+  <span>:-moz-first-node</span>
+  <span>:-moz-last-node</span>
+</div>
+
+ +

{{EmbedLiveSample("Beispiel", "220", "20")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-list-bullet/index.html b/files/de/web/css/_colon_-moz-list-bullet/index.html new file mode 100644 index 0000000000..f3ffef8cda --- /dev/null +++ b/files/de/web/css/_colon_-moz-list-bullet/index.html @@ -0,0 +1,47 @@ +--- +title: '::-moz-list-bullet' +slug: 'Web/CSS/:-moz-list-bullet' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsLiveSample + - Non-standard +translation_of: 'Web/CSS/:-moz-list-bullet' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Das nicht standardisierte ::-moz-list-bullet Mozilla CSS Pseudoelement wird dazu benutzt, um den Aufzählungspunkt eines Listenelements zu stylen.

+ +

Syntax

+ +
li::-moz-list-bullet { style properties }
+ +

Beispiele

+ +

CSS

+ +
.list li::-moz-list-bullet {
+  font-size: 36px;
+}
+
+ +

HTML

+ +
<ul>
+  <li>Number 1</li>
+  <li>Number 2</li>
+  <li>Number 3</li>
+</ul>
+<ul class="list">
+  <li>Number 1</li>
+  <li>Number 2</li>
+  <li>Number 3</li>
+</ul>
+
+ +

Ergebnis

+ +

Image:liug3.jpg

diff --git a/files/de/web/css/_colon_-moz-list-number/index.html b/files/de/web/css/_colon_-moz-list-number/index.html new file mode 100644 index 0000000000..92de0853ac --- /dev/null +++ b/files/de/web/css/_colon_-moz-list-number/index.html @@ -0,0 +1,45 @@ +--- +title: '::-moz-list-number' +slug: 'Web/CSS/:-moz-list-number' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard + - Pseudoelement +translation_of: 'Web/CSS/:-moz-list-number' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Das ::-moz-list-number CSS Pseudoelement erlaubt es, das Aussehen von Zahlen in Listeneinträgen ({{HTMLElement("li")}}), die in geordneten Listen ({{HTMLElement("ol")}}) auftreten, anzupassen.

+ +

Syntax

+ +
li::-moz-list-number { style properties }
+
+ +

Beispiel

+ +

CSS

+ +
li::-moz-list-number {
+  font-style: italic;
+  font-weight: bold;
+}
+
+ +

HTML

+ +
<ol>
+  <li>First item</li>
+  <li>Second item</li>
+  <li>Third item</li>
+</ol>
+
+ +

Ergebnis

+ +

moz-list-number.png
+ {{EmbedLiveSample("Beispiel")}}

diff --git a/files/de/web/css/_colon_-moz-loading/index.html b/files/de/web/css/_colon_-moz-loading/index.html new file mode 100644 index 0000000000..01a8a5cb9a --- /dev/null +++ b/files/de/web/css/_colon_-moz-loading/index.html @@ -0,0 +1,17 @@ +--- +title: ':-moz-loading' +slug: 'Web/CSS/:-moz-loading' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/:-moz-loading' +--- +
{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}
+ +

Die :-moz-loading CSS Pseudoklasse matcht Elemente, die nicht angezeigt werden können, weil sie noch nicht geladen wurden, wie beispielsweise Bilder, die noch nicht angefangen haben, anzukommen. Beachte, dass Bilder, die dabei sind, geladen zu werden, nicht von der Pseudoklasse gematcht werden.

+ +

Dies ist hauptsächlich für Themeentwickler nützlich.

diff --git a/files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html b/files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html new file mode 100644 index 0000000000..74d080b016 --- /dev/null +++ b/files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-locale-dir(ltr)' +slug: 'Web/CSS/:-moz-locale-dir(ltr)' +tags: + - CSS + - CSS Referenz + - Localisierung + - NeedsCompatTable + - NeedsExample + - Non-standard + - Pseudoklasse +translation_of: 'Web/CSS/:-moz-locale-dir(ltr)' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}
+ +

Übersicht

+ +

Die :-moz-locale-dir(ltr) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle von links nach rechts angezeigt wird. Dies wird durch das Setzen der Einstellung intl.uidirection.locale (wobei locale die aktuelle Sprachumgebung ist) auf "ltr" bestimmt.

+ +

Dies erlaubt Erweiterungen (und Themes) die einfache Anpassung ihrer Benutzerschnittstelle an die Bedürfnisse der Sprachumgebung des Benutzers. Dies kann sich von Fenster zu Fenster und sogar von Tab zu Tab unterscheiden. Dies ermöglicht es Erweiterungen, selbst dann zu funktionieren, wenn sie die standardmäßige Sprachumgebung des Benutzers nicht unterstützen, da sie sowohl links-nach-rechts als auch rechts-nach-links Layouts unterstützen können, ohne sich um die Besonderheiten der Sprachumgebung zu sorgen.

+ +

Dieser Selektor funktioniert nicht korrekt unter HTML; er matcht immer, unabhängig davon, ob das UI links-nach-rechts oder rechts-nach-links ist.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html new file mode 100644 index 0000000000..ac2045c986 --- /dev/null +++ b/files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html @@ -0,0 +1,30 @@ +--- +title: ':-moz-locale-dir(rtl)' +slug: 'Web/CSS/:-moz-locale-dir(rtl)' +tags: + - CSS + - CSS Referenz + - Lokalisierung + - NeedsCompatTable + - NeedsExample + - Non-standard + - Pseudoklasse + - Rechts-nach-links +translation_of: 'Web/CSS/:-moz-locale-dir(rtl)' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}
+ +

Übersicht

+ +

Die :-moz-locale-dir(rtl) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle von rechts nach links angezeigt wird. Dies wird durch das Setzen der Einstellung intl.uidirection.locale (wobei locale die aktuelle Sprachumgebung ist) auf "rtl" bestimmt.

+ +

Dies erlaubt Erweiterungen (und Themes) die einfache Anpassung ihrer Benutzerschnittstelle an die Bedürfnisse der Sprachumgebung des Benutzers. Dies kann sich von Fenster zu Fenster und sogar von Tab zu Tab unterscheiden. Dies ermöglicht es Erweiterungen, selbst dann zu funktionieren, wenn sie die standardmäßige Sprachumgebung des Benutzers nicht unterstützen, da sie sowohl links-nach-rechts als auch rechts-nach-links Layouts unterstützen können, ohne sich um die Besonderheiten der Sprachumgebung zu sorgen.

+ +

Dieser Selektor funktioniert nicht korrekt unter HTML; er matcht nie, unabhängig davon, ob das UI links-nach-rechts oder rechts-nach-links ist.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-lwtheme-brighttext/index.html b/files/de/web/css/_colon_-moz-lwtheme-brighttext/index.html new file mode 100644 index 0000000000..1b9aca10dd --- /dev/null +++ b/files/de/web/css/_colon_-moz-lwtheme-brighttext/index.html @@ -0,0 +1,22 @@ +--- +title: ':-moz-lwtheme-brighttext' +slug: 'Web/CSS/:-moz-lwtheme-brighttext' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-brighttext' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-lwtheme-brighttext Pseudoklasse matcht in Chrome-Dokumenten, wenn {{cssxref(":-moz-lwtheme")}} true ist und ein Lightweight Theme mit heller Farbe ausgewählt ist.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-lwtheme-darktext/index.html b/files/de/web/css/_colon_-moz-lwtheme-darktext/index.html new file mode 100644 index 0000000000..d62e9ca240 --- /dev/null +++ b/files/de/web/css/_colon_-moz-lwtheme-darktext/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-lwtheme-darktext' +slug: 'Web/CSS/:-moz-lwtheme-darktext' +tags: + - CSS + - CSS Referenz + - Non-standard + - Themes +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-darktext' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-lwtheme-darktext Pseudoklasse matcht in Chrome-Dokumenten, wenn {{cssxref(":-moz-lwtheme")}} true ist und ein Lightweight Theme mit dunkler Farbe ausgewählt ist.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-lwtheme/index.html b/files/de/web/css/_colon_-moz-lwtheme/index.html new file mode 100644 index 0000000000..6b0c439fa7 --- /dev/null +++ b/files/de/web/css/_colon_-moz-lwtheme/index.html @@ -0,0 +1,26 @@ +--- +title: ':-moz-lwtheme' +slug: 'Web/CSS/:-moz-lwtheme' +tags: + - CSS + - CSS Referenz + - Lightweight themes + - NeedsCompatTable + - NeedsExample + - Non-standard + - Themes +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-lwtheme CSS Pseudoklasse matcht in Chromedokumenten, wenn das {{xulattr("lightweightthemes")}} Attribut des Wurzelelements true ist und ein Theme ausgewählt wurde.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-only-whitespace/index.html b/files/de/web/css/_colon_-moz-only-whitespace/index.html new file mode 100644 index 0000000000..ef533f52d7 --- /dev/null +++ b/files/de/web/css/_colon_-moz-only-whitespace/index.html @@ -0,0 +1,36 @@ +--- +title: ':-moz-only-whitespace' +slug: 'Web/CSS/:-moz-only-whitespace' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard + - Pseudoklasse +translation_of: 'Web/CSS/:-moz-only-whitespace' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-only-whitespace CSS Pseudoklasse matcht ein Element, dass keine Kindelemente hat oder leere Textknoten oder Textknoten, die nur Leerzeichen enthalten. Nur falls es Elementknoten oder Textknoten mit einem oder mehreren Zeichen innerhalb des Elements gibt, matcht das Element diese Pseudoklasse nicht mehr.

+ +

Syntax

+ +
span:-moz-only-whitespace { Stileigenschaften }
+
+ +

Beispiel

+ +

CSS

+ +
span:-moz-only-whitespace::before {
+  background-color: lime;
+}
+ +

HTML

+ +
<span> </span>
+
+ +

{{EmbedLiveSample("Beispiel", "50", "20")}}

diff --git a/files/de/web/css/_colon_-moz-placeholder/index.html b/files/de/web/css/_colon_-moz-placeholder/index.html new file mode 100644 index 0000000000..2055009cf2 --- /dev/null +++ b/files/de/web/css/_colon_-moz-placeholder/index.html @@ -0,0 +1,120 @@ +--- +title: ':-moz-placeholder' +slug: 'Web/CSS/:-moz-placeholder' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - Non-standard + - Platzhalter + - Selektoren +translation_of: 'Web/CSS/:placeholder-shown' +--- +
Hinweis: Die :-moz-placeholder Pseudoklasse ist in Firefox 19 als veraltet markiert zugunsten des {{cssxref('::-moz-placeholder')}} Pseudoelements.
+ +
Hinweis:Die CSSWG hat beschlossen, :placeholder-shown einzuführen. Diese Funktionalität wird in Gecko irgendwann in der Zukunft wieder eingeführt, ohne Präfix und unter dem neuen Namen. {{bug("1069012")}}
+ +
{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-placeholder Pseudoklasse repräsentiert ein Formularelement, das Platzhaltertext anzeigt. Dies erlaubt Webentwicklern und Themedesignern die Darstellung von Platzhaltertext anzupassen, welche standardmäßig einer hellgrauen Farbe entspricht. Dies ist in manchen Fällen unvorteilhaft, beispielsweise wenn der Hintergrundfarbe von Formularfeldern eine ähnliche Farbe zugewiesen wird. Hier kann die Pseudoklasse verwendet werden, um die Textfarbe des Platzhalters zu ändern.

+ +

Beispiel

+ +

Dieses Beispiel weist dem Platzhaltertext eine grüne Farbe zu.

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Placeholder demo</title>
+  <style type="text/css">
+    input:-moz-placeholder {
+      color: green;
+    }
+  </style>
+</head>
+<body>
+  <input id="test" placeholder="Placeholder text!">
+</body>
+</html>
+
+ +

Ergibt:

+ +

{{EmbedLiveSample('Beispiel', '100%', 30)}}

+ +

Überlauf

+ +

Oft werden Suchfelder oder andere Formularelemente auf mobilen Geräten verkürzt dargestellt. Leider passt u. U. der Platzhaltertext eines {{HTMLElement("input")}} Elements in die Länge des Elements, was einen abgeschnittenen Text zur Folge hat. Um diese Darstellung zu verhindern, kann die CSS Eigenschaft text-overflow: ellipsis! verwendet werden, um den Text mit einer Ellipse abzuschließen.

+ +
input[placeholder] { text-overflow: ellipsis; }
+::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
+input:-moz-placeholder { text-overflow: ellipsis; }
+
+ +

David Walsh hat dies in seinem Blog Eintrag "Placeholders and Overflow" beschrieben.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("2.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementiert in {{bug("457801")}}.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-submit-invalid/index.html b/files/de/web/css/_colon_-moz-submit-invalid/index.html new file mode 100644 index 0000000000..af433fef51 --- /dev/null +++ b/files/de/web/css/_colon_-moz-submit-invalid/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-submit-invalid' +slug: 'Web/CSS/:-moz-submit-invalid' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - Non-standard +translation_of: 'Web/CSS/:-moz-submit-invalid' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Die :-moz-submit-invalid CSS Pseudoklasse repräsentiert jeden Submitbutton auf Formularen, deren Inhalte anhand ihrer Validierungsbeschränkungen nicht gültig sind.

+ +

Standardmäßig wird kein Stil zugewiesen. Dieser Stil kann dazu verwendet werden, um das Aussehen des Submitbuttons anzupassen, wenn es ungültige Formularfelder gibt.

+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.-moz-submit-invalid")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-suppressed/index.html b/files/de/web/css/_colon_-moz-suppressed/index.html new file mode 100644 index 0000000000..a14ef0e383 --- /dev/null +++ b/files/de/web/css/_colon_-moz-suppressed/index.html @@ -0,0 +1,17 @@ +--- +title: ':-moz-suppressed' +slug: 'Web/CSS/:-moz-suppressed' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/:-moz-suppressed' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

Die :-moz-suppressed CSS Pseudoklasse matcht Elemente, die Bilder repräsentieren, die nicht geladen werden konnten, da das Laden von Bildern von dieser Seite blockiert wurde.

+ +

Dieser Selektor ist dazu gedacht, hauptsächlich von Themeentwicklern verwendet zu werden.

diff --git a/files/de/web/css/_colon_-moz-system-metric(images-in-menus)/index.html b/files/de/web/css/_colon_-moz-system-metric(images-in-menus)/index.html new file mode 100644 index 0000000000..d9882303fd --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(images-in-menus)/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-system-metric(images-in-menus)' +slug: 'Web/CSS/:-moz-system-metric(images-in-menus)' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/images-in-menus' +--- +
{{CSSRef}}{{Non-standard_header}}{{Fx_minversion_header(3)}}
+ +

Übersicht

+ +

Die :-moz-system-metric(images-in-menus) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle des Computers Bilder in Menüs unterstützt.

+ +

Dieser Selektor ist hauptsächlich für die Benutzung durch Themeentwickler gedacht.

diff --git a/files/de/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html b/files/de/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html new file mode 100644 index 0000000000..8cd7bc0e9b --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-system-metric(mac-graphite-theme)' +slug: 'Web/CSS/:-moz-system-metric(mac-graphite-theme)' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/mac-graphite-theme' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
+ +

Übersicht

+ +

:-moz-system-metric(mac-graphite-theme) matcht ein Element, falls der Benutzer die "Graphite" Darstellung in der "Darstellung" Einstellungsseite der Mac OS X Systemeinstellungen gewählt hat.

+ +

Dieser Selektor ist hauptsächlich dazu gedacht, von Themeentwicklern verwendet zu werden.

+ +

Beispiele

+ +

Demo

+ +

Bugzilla

+ +

{{bug("448767")}}

diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html new file mode 100644 index 0000000000..689598432f --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-end-backward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-backward)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-backward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-system-metric(scrollbar-end-backward) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle des Computers einen Zurück-Button am Ende von Scrollleisten beinhaltet.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html new file mode 100644 index 0000000000..a7c84cd200 --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-end-forward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-forward)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-forward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-system-metric(scrollbar-end-forward) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle des Computers einen Vorwärts-Button am Ende von Scrollleisten beinhaltet.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html new file mode 100644 index 0000000000..0781e4b37a --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-start-backward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-backward)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-backward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-system-metric(scrollbar-start-backward) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle des Computers einen Zurück-Button am Anfang von Scrollleisten beinhaltet.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html new file mode 100644 index 0000000000..01a8b77a02 --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-start-forward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-forward)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-forward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-system-metric(scrollbar-start-forward) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle des Computers einen Vorwärts-Button am Anfang von Scrollleisten beinhaltet.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html new file mode 100644 index 0000000000..cfdd764992 --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-thumb-proportional)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-thumb-proportional)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-thumb-proportional' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-system-metric(scrollbar-thumb-proportional) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle des Computers proportionale Scrollleistenbalken verwendet; d. h. der bewegliche Balken der Scrollleiste verändert seine Größe, um die relative Größe der sichtbaren Bereichs des Dokuments zu kennzeichnen.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_colon_-moz-system-metric(touch-enabled)/index.html b/files/de/web/css/_colon_-moz-system-metric(touch-enabled)/index.html new file mode 100644 index 0000000000..c59bc203d3 --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(touch-enabled)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(touch-enabled)' +slug: 'Web/CSS/:-moz-system-metric(touch-enabled)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/touch-enabled' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-system-metric(touch-enabled) CSS Pseudoklasse matcht ein Element, falls das Gerät, auf welchem der Inhalt angezeigt wird, eine unterstützte Touchscreen Schnittstelle bietet.

+ +
Hinweis: Diese Pseudoklasse ist nicht für die Benutzung in Webinhalten gedacht. Stattdessen sollte die -moz-touch-enabled Media Query verwendet werden.
+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.9.2")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html b/files/de/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html new file mode 100644 index 0000000000..2242bb293c --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html @@ -0,0 +1,65 @@ +--- +title: ':-moz-system-metric(windows-default-theme)' +slug: 'Web/CSS/:-moz-system-metric(windows-default-theme)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/windows-default-theme' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-system-metric(windows-default-theme) CSS Pseudoklasse matcht ein Element, falls der Benutzer aktuell eines der folgenden Themes in Windows verwendet: Luna, Royale, Zune oder Aero (d. h. Vista Basic, Vista Standard oder Aero Glass). Dies schließt sowohl Windows Classic Themes als auch Drittanbieterthemes aus.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

+ +

Beispiel

+ +

HTML Inhalt

+ +
<p id="defaultThemes">
+  This paragraph should have a green background with Luna/Royale/Zune/Aero
+  Windows themes and red with other themes.
+</p>
+
+<p id="nonDefaultThemes">
+  This paragraph should have a green background with Windows Classic or
+  third-party themes and red with other themes.
+</p>
+
+<p id="notSupported">Theme detection is not supported.</p>
+ +

CSS Inhalt

+ +
#defaultThemes,
+#nonDefaultThemes {
+  background-color: #FFA0A0;
+}
+
+#defaultThemes:-moz-system-metric(windows-default-theme) {
+  background-color: #A0FFA0;
+}
+
+#nonDefaultThemes:not(-moz-system-metric(windows-default-theme)) {
+  background-color: #A0FFA0;
+}
+
+#notSupported:-moz-system-metric(windows-default-theme),
+#notSupported:not(:-moz-system-metric(windows-default-theme)) {
+  display: none;
+}
+
+ +

{{EmbedLiveSample("Beispiel", "100%", 170)}}

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.-moz-system-metric.windows-default-theme")}} diff --git a/files/de/web/css/_colon_-moz-tree-cell-text(hover)/index.html b/files/de/web/css/_colon_-moz-tree-cell-text(hover)/index.html new file mode 100644 index 0000000000..a1cf6af05c --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-cell-text(hover)/index.html @@ -0,0 +1,20 @@ +--- +title: ':-moz-tree-cell-text(hover)' +slug: 'Web/CSS/:-moz-tree-cell-text(hover)' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard + - Selektor +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text(hover)' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header(1.9)}}
+ +

Übersicht

+ +

Die :-moz-tree-cell-text(hover) CSS Pseudoklasse matcht ein Element, falls sich der Mauszeiger über dem Text innerhalb einer Baumzelle befindet.

+ +

Dieser Selektor ist hauptsächlich für die Benutzung durch Themeentwickler gedacht.

diff --git a/files/de/web/css/_colon_-moz-tree-cell-text/index.html b/files/de/web/css/_colon_-moz-tree-cell-text/index.html new file mode 100644 index 0000000000..1507e1f8c4 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-cell-text/index.html @@ -0,0 +1,30 @@ +--- +title: ':-moz-tree-cell-text' +slug: 'Web/CSS/:-moz-tree-cell-text' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-tree-cell/index.html b/files/de/web/css/_colon_-moz-tree-cell/index.html new file mode 100644 index 0000000000..f2250e3e4f --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-cell/index.html @@ -0,0 +1,38 @@ +--- +title: ':-moz-tree-cell' +slug: 'Web/CSS/:-moz-tree-cell' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-tree-column/index.html b/files/de/web/css/_colon_-moz-tree-column/index.html new file mode 100644 index 0000000000..927b64e482 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-column/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-column' +slug: 'Web/CSS/:-moz-tree-column' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-column' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-tree-drop-feedback/index.html b/files/de/web/css/_colon_-moz-tree-drop-feedback/index.html new file mode 100644 index 0000000000..607b4dfe1b --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-drop-feedback/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-drop-feedback' +slug: 'Web/CSS/:-moz-tree-drop-feedback' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard + - Pseudo-class +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-drop-feedback' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-tree-image/index.html b/files/de/web/css/_colon_-moz-tree-image/index.html new file mode 100644 index 0000000000..780d66e4bf --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-image/index.html @@ -0,0 +1,34 @@ +--- +title: ':-moz-tree-image' +slug: 'Web/CSS/:-moz-tree-image' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsLiveSample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-tree-image' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + + +

Beispiele

+ +

Bookmark icons in the Places window - Mozillazine Forum

diff --git a/files/de/web/css/_colon_-moz-tree-indentation/index.html b/files/de/web/css/_colon_-moz-tree-indentation/index.html new file mode 100644 index 0000000000..c53db78b8f --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-indentation/index.html @@ -0,0 +1,27 @@ +--- +title: ':-moz-tree-indentation' +slug: 'Web/CSS/:-moz-tree-indentation' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-indentation' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-tree-line/index.html b/files/de/web/css/_colon_-moz-tree-line/index.html new file mode 100644 index 0000000000..b6badf8db2 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-line/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-tree-line' +slug: 'Web/CSS/:-moz-tree-line' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-line' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-tree-progressmeter/index.html b/files/de/web/css/_colon_-moz-tree-progressmeter/index.html new file mode 100644 index 0000000000..1642c8f373 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-progressmeter/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-progressmeter' +slug: 'Web/CSS/:-moz-tree-progressmeter' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-progressmeter' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Aktiviert, wenn das type Attribut auf progressmeter gesetzt ist.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-tree-row(hover)/index.html b/files/de/web/css/_colon_-moz-tree-row(hover)/index.html new file mode 100644 index 0000000000..07400474ba --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-row(hover)/index.html @@ -0,0 +1,20 @@ +--- +title: ':-moz-tree-row(hover)' +slug: 'Web/CSS/:-moz-tree-row(hover)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row(hover)' +--- +
{{Non-standard_header}}{{CSSRef}}{{Fx_minversion_header(3)}}
+ +

Übersicht

+ +

Die :-moz-tree-row(hover) CSS Pseudoklasse matcht ein Element, falls der Mauszeiger sich über einer Baumzeile befindet.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

diff --git a/files/de/web/css/_colon_-moz-tree-row/index.html b/files/de/web/css/_colon_-moz-tree-row/index.html new file mode 100644 index 0000000000..72c4ae0940 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-row/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-tree-row' +slug: 'Web/CSS/:-moz-tree-row' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Das ::-moz-tree-row CSS Pseudoelement wird benutzt, um Zeilen auszuwählen und Stile auf Baumzeilen anzuwenden.

+ +

Zugehörige Elemente

+ + + +

Syntax

+ +
treechildren::-moz-tree-row { Stileigenschaften }
+
+ +

Stileigenschaften

+ + + +

Beispiele

+ +
treechildren::-moz-tree-row( foo bar )
+{
+    margin: 2%;
+}
+
+ +

...wo...

+ +
  <treerow properties="foo">...</treerow>
+
diff --git a/files/de/web/css/_colon_-moz-tree-separator/index.html b/files/de/web/css/_colon_-moz-tree-separator/index.html new file mode 100644 index 0000000000..d204747549 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-separator/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-separator' +slug: 'Web/CSS/:-moz-tree-separator' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-separator' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-tree-twisty/index.html b/files/de/web/css/_colon_-moz-tree-twisty/index.html new file mode 100644 index 0000000000..3af5a302d0 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-twisty/index.html @@ -0,0 +1,30 @@ +--- +title: ':-moz-tree-twisty' +slug: 'Web/CSS/:-moz-tree-twisty' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-twisty' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Styleeigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-ui-invalid/index.html b/files/de/web/css/_colon_-moz-ui-invalid/index.html new file mode 100644 index 0000000000..cc133a4d28 --- /dev/null +++ b/files/de/web/css/_colon_-moz-ui-invalid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-invalid' +slug: 'Web/CSS/:-moz-ui-invalid' +tags: + - CSS + - CSS Referenz + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoklasse +translation_of: 'Web/CSS/:user-invalid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-ui-invalid CSS Pseudoklasse repräsentiert jedes validierte Formularelement, dessen Wert nicht auf dessen Validierungsbeschränkungen basiert, unter bestimmten Umständen. Diese Pseudoklasse wird anhand der folgenden Regeln angewendet:

+ + + +

Das Ergebnis ist, dass wenn das Steuerungselement gültig war als der Benutzer angefangen hat, mit ihm zu interagieren, das Gültigkeitsstyling nur geändert wird, falls der Benutzer den Fokus auf ein anderes Steuerungselement setzt. Falls der Benutzer jedoch versucht, einen zuvor markierten Wert zu korrigieren, zeigt das Steuerungselement sofort an, wenn der Wert gültig wird. Auf Pflichtfelder wird die Pseudoklasse nur angewendet, falls der Benutzer diese ändert oder versucht, einen unveränderten gültigen Wert abzuschicken.

+ +

Standardmäßig wendet Gecko einen Stil an, der ein rotes "Leuchten" (unter Vernwendung der {{cssxref("box-shadow")}} Eigenschaft) um Felder erzeugt, die diese Pseudoklasse zugewiesen haben. Siehe die {{cssxref(":invalid")}} Pseudoklasse für ein Beispiel, das zeigt, wie der Standardstil überschrieben werden kann.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-ui-valid/index.html b/files/de/web/css/_colon_-moz-ui-valid/index.html new file mode 100644 index 0000000000..163ffacd79 --- /dev/null +++ b/files/de/web/css/_colon_-moz-ui-valid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-valid' +slug: 'Web/CSS/:-moz-ui-valid' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: 'Web/CSS/:-moz-ui-valid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-ui-valid CSS Pseudoklasse repräsentiert jedes validierte Formularelement, dessen Wert korrekt validiert basierend auf dessen Validierungsbeschränkungen.

+ +

Diese Pseudoklasse wird anhand der folgenden Regeln angewendet:

+ + + +

Das Ergebnis ist, dass wenn das Steuerungselement gültig war als der Benutzer angefangen hat, mit ihm zu interagieren, das Gültigkeitsstyling nur geändert wird, falls der Benutzer den Fokus auf ein anderes Steuerungselement setzt. Falls der Benutzer jedoch versucht, einen zuvor markierten Wert zu korrigieren, zeigt das Steuerungselement sofort an, wenn der Wert gültig wird. Pflichtfelder werden nur als ungültig markiert, falls der Benutzer diese ändert oder versucht, einen unveränderten ungültigen Wert abzuschicken.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-user-disabled/index.html b/files/de/web/css/_colon_-moz-user-disabled/index.html new file mode 100644 index 0000000000..50ea47366c --- /dev/null +++ b/files/de/web/css/_colon_-moz-user-disabled/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-user-disabled' +slug: 'Web/CSS/:-moz-user-disabled' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/:-moz-user-disabled' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

Übersicht

+ +

Die :-moz-user-disabled CSS Pseudoklasse matcht Elemente, die Bilder repräsentieren, die nicht geladen wurden, weil Bilder durch die Benutzereinstellungen komplett deaktiviert wurden.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

diff --git a/files/de/web/css/_colon_-moz-window-inactive/index.html b/files/de/web/css/_colon_-moz-window-inactive/index.html new file mode 100644 index 0000000000..88a73ced90 --- /dev/null +++ b/files/de/web/css/_colon_-moz-window-inactive/index.html @@ -0,0 +1,51 @@ +--- +title: ':-moz-window-inactive' +slug: 'Web/CSS/:-moz-window-inactive' +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: 'Web/CSS/:-moz-window-inactive' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-window-inactive CSS Pseudoklasse matcht jedes Element während es sich in einem inaktivem Fenster befindet.

+ +
Hinweis: Vor der Einführung dieser Pseudoklasse konnten andere Stile für Hintergrundfenster durch das Setzen eines Attributs (active="true") für das Toplevel XUL Chromefenster erreicht werden. Dieses Attribut wird nicht mehr verwendet.
+ +

:-moz-window-inactive funktioniert auch in Inhalten von HTML Dokumenten.

+ +

Beispiel

+ +

Dieses Beispiel verändert die Darstellung des Hintergrunds einer Box in Abhängigkeit davon, ob das Fenster aktiv ist oder nicht.

+ +
<style type="text/css">
+#mybox {
+  background: linear-gradient(to bottom, blue, cyan);
+}
+
+#mybox:-moz-window-inactive {
+  background: cyan;
+}
+</style>
+
+<div id="mybox" style="width:200px; height:200px;">
+  <p>Dies ist eine Box!</p>
+</div>
+
+ +

Dieses Beispiel kann als Livebeispiel betrachtet werden.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.-moz-window-inactive")}} diff --git a/files/de/web/css/_colon_-webkit-autofill/index.html b/files/de/web/css/_colon_-webkit-autofill/index.html new file mode 100644 index 0000000000..2030c723b3 --- /dev/null +++ b/files/de/web/css/_colon_-webkit-autofill/index.html @@ -0,0 +1,80 @@ +--- +title: ':-webkit-autofill' +slug: 'Web/CSS/:-webkit-autofill' +tags: + - CSS + - NeedsExample + - Non-standard + - Pseudoklasse + - Referenz +translation_of: 'Web/CSS/:-webkit-autofill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-webkit-autofill CSS Pseudoklasse matcht, wenn der Wert eines {{HTMLElement("input")}} Elements durch den Browser vorausgefüllt wird.

+ +

Hinweis: Die User Agent Stylesheets einiger Browser verwenden !important in ihren :-webkit-autofill Stildeklarationen, was sie durch Webseiten nicht überschreibbar macht, ohne dass auf JavaScript Hacks zurückgegriffen werden muss.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_active/index.html b/files/de/web/css/_colon_active/index.html new file mode 100644 index 0000000000..73bb8044dd --- /dev/null +++ b/files/de/web/css/_colon_active/index.html @@ -0,0 +1,84 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die Pseudoklasse :active entspricht jedem Element, das vom Benutzer aktiviert wurde. Beim Mauszeiger ist das die Zeitspanne, wo die Taste gedrückt gehalten wird. Deshalb wird sie meistens bei den Elementen {{HTMLElement("a")}} und {{HTMLElement("button")}} Eingesetzt, kann aber auch für jedes andere Element genutzt werden.

+ +

Die Stile können von weiteren Pseudoklassen überschrieben werden: {{cssxref(":link")}}, {{cssxref(":hover")}} und {{cssxref(":visited")}}. Deshalb ist es wichtig, die LVHA-Reihenfolge einzuhalten: :link — :visited — :hover — :active.

+ +
Hinweis: Auf Systemen mit Mäusen mit mehreren Knöpfen, definiert CSS 3, dass die :active Pseudoklasse nur dem Hauptknopf zugewiesen wird; bei Mäusen für Rechtshänder ist dies typischerweise der linkeste Knopf.
+ +

Beispiel

+ +

HTML

+ +
<body>
+    <h1>:active CSS selector example</h1>
+    <p>The following link will turn lime during the time you click it and release the click: <a href="#">Mozilla Developer Network</a>.</p>
+</body>
+ +

CSS

+ +
body { background-color: #ffffc9 }
+a:link { color: blue } /* unbesuchte Links */
+a:visited { color: purple } /* besuchte Links*/
+a:hover { font-weight: bold } /* Benutzer fährt mit der Maus darüber */
+a:active { color: lime } /* aktive Links */
+
+ +
{{EmbedLiveSample('Beispiel', 600, 140)}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}Keine Änderung
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}Keine Änderung
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Standard Wert definiert
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.active")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_default/index.html b/files/de/web/css/_colon_default/index.html new file mode 100644 index 0000000000..5055b1a2b8 --- /dev/null +++ b/files/de/web/css/_colon_default/index.html @@ -0,0 +1,83 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:default' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :default CSS Pseudoklasse repräsentiert ein Benutzerschnittstellenelement, das das Standardelement innerhalb einer Gruppe ähnlicher Elemente darstellt.

+ +

Zum Beispiel kann mithilfe dieser Pseudoklasse die Standardschaltfläche in einer Gruppe von Schaltflächen ausgewählt werden.

+ +

Benutzerschnittstellenelemente, die Mehrfachauswahlen erlauben, können mehrere Standardwerte haben, um anfangs mit mehreren selektierten Einträgen angezeigt zu werden. In diesem Fall werden alle Standardwerte über die :default Pseudoklasse angesprochen.

+ +

Syntax

+ +
:default { Stileigenschaften }
+
+ +

Beispiele

+ +
:default
+{
+  background-color: lime;
+}
+
+ +

...auf folgendes HTML angewendet...

+ +
 <form method="get">
+   <p><input type="submit" id="submit1"></p>
+   <p><input type="submit" id="submit2"></p>
+   <p><input type="reset"></p>
+ </form>
+
+ +

Dieses Beispiel färbt die Hintergrundfarbe für die Absendeschaltfläche des Formulars in lime ein.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifizationStatusKommentar
{{SpecName('HTML WHATWG', '#selector-default', ':default')}}{{Spec2('HTML WHATWG')}}Keine Änderung.
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}{{Spec2('HTML5 W3C')}}Definiert die Semantik in Bezug auf HTML und Defines the semantic regarding HTML and Beschränkungsvalidierung.
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}{{Spec2('CSS4 Selectors')}}Keine Änderung.
{{SpecName('CSS3 UI', '#pseudo-default', ':default')}}{{Spec2('CSS3 UI')}}Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.default")}} diff --git a/files/de/web/css/_colon_dir/index.html b/files/de/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..160ff8063b --- /dev/null +++ b/files/de/web/css/_colon_dir/index.html @@ -0,0 +1,69 @@ +--- +title: ':dir()' +slug: 'Web/CSS/:dir' +tags: + - CSS + - CSS Pseudoklasse + - Experimentell + - Referenz +translation_of: 'Web/CSS/:dir' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Übersicht

+ +

Die :dir CSS Pseudoklasse matcht Elemente basierend auf der Direktionalität des in ihnen beinhalteten Texts. In HTML wird die Richtung durch das {{htmlattrxref("dir", "html")}} Attribut bestimmt. Für andere Dokumenttypen können andere Methoden zur Bestimmung der Sprache existieren.

+ +

Beachte, dass die Verwendung der Pseudoklasse :dir() nicht gleichbedeutend mit den [dir=…] Attributselektoren ist. Letztere matchen einen Wert von {{htmlattrxref("dir", "html")}} und matchen nicht, falls kein Attribut gesetzt ist, auch wenn in diesem Fall das Elemente den Wert seines Elternelements erbt; ebenso matchen [dir=rtl] oder [dir=ltr] auch nicht den auto Wert, der für das dir Attribut verwendet werden kann. Im Gegensatz dazu matcht :dir() den vom User Agent berechneten, den geerbten oder den auto Wert.

+ +

Auch berücksichtigt :dir() nur den semantischen Wert der Ausrichtung, der innerhalb des Dokuments definiert wird, normalerweise in HTML. Er berücksichtigt nicht die Styling-Ausrichtung, die durch CSS Eigenschaften wie {{cssxref("direction")}}, welche rein stilistisch sind, gesetzt wird.

+ +

Syntax

+ +
/* element:dir(directionality) { Stileigenschaften }
+   wobei die Richtungn ltr oder rtl ist */
+
+div:dir(ltr) { /* Stileigenschaften */ }
+span:dir(rtl) { /* Stileigenschaften */ }
+
+ +

Beispiele

+ +
<div dir="rtl">
+  <span>test1</span>
+  <div dir="ltr">test2
+    <div dir="auto">עִבְרִית</div>
+  </div>
+</div>
+
+ +

In diesem Beispiel matcht :dir(rtl) den obersten div, span, welcher test1 beinhaltet und den div mit den hebräischen Zeichen. :dir(ltr) matcht den div, der test2 beinhaltet.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}{{Spec2('CSS4 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.dir")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_disabled/index.html b/files/de/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..cd11062408 --- /dev/null +++ b/files/de/web/css/_colon_disabled/index.html @@ -0,0 +1,139 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:disabled' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :disabled CSS Pseudoklasse steht für alle deaktivierten Elemente. Ein Element gilt als deaktiviert, wenn es nicht aktiviert (d.h. ausgewählt, angeklickt oder mit Text gefüllt) oder fokussiert werden kann. Das Element verfügt außerdem über einen Status, in dem es aktiviert oder fokussiert werden kann.

+ +

Beispiele

+ +

Beispielselektoren

+ +
+
input:disabled
+
Wählt alle deaktivierten Eingabefelder aus.
+
select.country:disabled
+
Wählt ein deaktiviertes Zielelement mit der Klasse country aus.
+
+ +

Anwendungsbeispiel

+ +

Das folgende CSS:

+ +
input[type="text"]:disabled {
+  background: #ccc;
+}
+
+ +

Angewendet auf das folgende HTML5 Beispiel:

+ +
<form action="#">
+  <fieldset>
+    <legend>Shipping address</legend>
+    <input type="text" placeholder="Name">
+    <input type="text" placeholder="Address">
+    <input type="text" placeholder="Zip Code">
+  </fieldset>
+  <fieldset id="billing">
+    <legend>Billing address</legend>
+    <label for="billing_is_shipping">Same as shipping address:</label>
+    <input type="checkbox" onchange="javascript:toggleBilling()" checked>
+    <br />
+    <input type="text" placeholder="Name" disabled>
+    <input type="text" placeholder="Address" disabled>
+    <input type="text" placeholder="Zip Code" disabled>
+  </fieldset>
+</form>
+
+ +
<form action="#">
+  <fieldset>
+    <legend>Empfängeradresse</legend>
+    <input type="text" placeholder="Name">
+    <input type="text" placeholder="Adresse">
+    <input type="text" placeholder="PLZ">
+  </fieldset>
+  <fieldset>
+    <legend>Rechnungsadresse</legend>
+    <label for="billing_is_shipping">Rechnungsadresse entspricht der Empfängeradresse:</label>
+    <input type="checkbox" onchange="javascript:toggleBilling()" checked>
+    <br />
+    <input type="text" placeholder="Name" disabled>
+    <input type="text" placeholder="Address" disabled>
+    <input type="text" placeholder="Zip Code" disabled>
+  </fieldset>
+</form>
+
+ +

Mit ein wenig JavaScript:

+ +
function toggleBilling() {
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+  for (var i = 0; i < billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+
+ +

Führt zu einem ergrautem Hintergrund aller Texteingabefelder im {{HTMLElement("fieldset")}} der Rechnungsadresse.

+ +

{{EmbedLiveSample('Anwendungsbeispiel', '300px', '250px', '', 'Web/CSS/:disabled')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}Keine Änderung
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}Beschreibt die Semantik von HTML und Formularen.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 UI', '#pseudo-classes', ':disabled')}}{{Spec2('CSS3 UI')}}Verweis auf Selektors Level 3
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}Beschreibt die Pseudoklasse,aber nicht die dazugehörige Semantik.
+ +

Browserkompatibilität

+ +{{Compat("css.selectors.disabled")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_empty/index.html b/files/de/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..ed47ba891a --- /dev/null +++ b/files/de/web/css/_colon_empty/index.html @@ -0,0 +1,66 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:empty' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Der pseudo-Klassen Selektor :empty wählt Elemente aus, die über kein Kindelement verfügen. Ein Inhalt in Form von einem Text wird dabei ebenfalls als ein Kind des Elementes angesehen, Kommentare und sonstige Verarbeitungsanweisungen jedoch nicht.

+ +

Syntax

+ +
<element>:empty { /* Deklarationsblock */ }
+
+ +

Beispiele

+ +
span:empty::before  {
+  background-color: lime;
+}
+
+ +

Die ersten beiden span Elemente sind leer, sodass der :empty Selektor angewendet wird. Auf die letzten drei trifft das jedoch nicht zu.

+ +
<span></span>
+<span><!-- Dieses Element wird grün dargestellt --></span>
+
+<span> </span>
+<span>Lorem ipsum</span>
+<span><strong></strong></span>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#empty-pseudo', ':empty')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#empty-pseudo', ':empty')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.empty")}} diff --git a/files/de/web/css/_colon_enabled/index.html b/files/de/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..1d4f3888d5 --- /dev/null +++ b/files/de/web/css/_colon_enabled/index.html @@ -0,0 +1,96 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :enabled CSS Pseudoklasse repräsentiert alle aktivierten Elemente. Ein Element ist aktiviert, falls es aktiviert werden kann (z. B. markierte, angeklickte Elemente oder solche, die Texteingaben akzeptieren) oder die fokussiert werden können. Das Element hat auch einen deaktivierten Zustand, in welchem es nicht aktiviert werden oder fokussiert werden kann.

+ +

Beispiel

+ +

Der folgende Code macht die Textfarbe grün, wenn das Element aktiviert ist, und grau, wenn es deaktiviert ist. Dies erlaubt es, dem Benutzer Feedback darüber zu geben, ob mit den Elementen interagiert werden kann oder nicht.

+ +
+

Das folgende HTML...

+ +
<form action="url_of_form">
+  <label for="FirstField">First field (enabled):</label> <input type="text" id="FirstField" value="Lorem"><br />
+  <label for="SecondField">Second field (disabled):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
+  <input type="button" value="Submit" />
+</form>
+ +

...in Verwendung mit diesem CSS...

+ +
input:enabled {
+  color: #22AA22;
+}
+
+input:disabled {
+  color: #D9D9D9;
+}
+
+ +

...ergibt:

+ +
{{EmbedLiveSample("Aktivierte_deaktivierte_Inputs_Beispiel", 550, 95)}}
+ +
Beachte, dass die Farbe des Buttontexts auch grün ist, da der Button ebenfalls aktiviert ist.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}Keine Änderung
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Definiert die Semantik in Bezug auf HTML und Formulare.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}{{Spec2('CSS3 Basic UI')}}Verknüpfung zu Selectors Level 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Definiert die Pseudoklasse, aber nicht die zugehörige Semantik.
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.enabled")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_first-child/index.html b/files/de/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..150c836d17 --- /dev/null +++ b/files/de/web/css/_colon_first-child/index.html @@ -0,0 +1,103 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :first-child CSS Pseudoklasse repräsentiert jedes Element, das das erste Kindelement seines Elternelements ist.

+ +

Syntax

+ +
element:first-child { Stileigenschaften }
+
+ +

Beispiele

+ +

Beispiel 1

+ +

HTML Inhalt

+ +
<div>
+  <span>Dieser Text ist grün!</span>
+  <span>Dieser Text nicht. :(</span>
+</div>
+
+ +

CSS Inhalt

+ +
span:first-child {
+    background-color: lime;
+}
+
+ +

... sieht folgendermaßen aus:

+ +

{{EmbedLiveSample('Beispiel_1',300,50)}}

+ +

Beispiel 2 - Verwendung von UL

+ +

HTML Inhalt

+ +
<ul>
+  <li>Eintrag 1</li>
+  <li>Eintrag 2</li>
+  <li>Eintrag 3</li>
+</ul>
+ +

CSS Inhalt

+ +
li{
+  color:red;
+}
+li:first-child{
+  color:green;
+}
+ +

... sieht folgendermaßen aus:

+ +

{{EmbedLiveSample('Beispiel_2_-_Verwendung_von_UL',300,100)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.first-child")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_first-of-type/index.html b/files/de/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..f99d9991c7 --- /dev/null +++ b/files/de/web/css/_colon_first-of-type/index.html @@ -0,0 +1,76 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:first-of-type' +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die :first-of-type CSS Pseudoklasse repräsentiert den ersten Geschwisterknoten eines Typs in der Liste der Kindknoten des Elternelements.

+ +

Syntax

+ +
element:first-of-type { Stileigenschaften }
+
+ +

Beispiel

+ +

Dieses Beispiel zeigt, wie der universelle Selektor angenommen wird, falls kein einfacher Selektor angegeben wird.

+ +
div :first-of-type {
+  background-color: lime;
+}
+ +
<div>
+  <span>Dieser Text kommt zuerst!</span>
+  <span>Dieser Text nicht. :(</span>
+  <span>Was ist mit diesem <em>verschachtelten Element</em>?</span>
+  <strike>Dies ist ein weiterer Typ.</strike>
+  <span>Dieser leider nicht...</span>
+</div>
+
+ +

...ergibt:

+ +
{{EmbedLiveSample('Beispiel','100%', '120')}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.first-of-type")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_first/index.html b/files/de/web/css/_colon_first/index.html new file mode 100644 index 0000000000..2af8daa43a --- /dev/null +++ b/files/de/web/css/_colon_first/index.html @@ -0,0 +1,65 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:first' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :first {{cssxref("@page")}} CSS Pseudoklasse beschreibt das Styling der ersten Seite, wenn ein Dokument gedruckt wird.

+ +
Hinwweis: Nicht alle CSS Eigenschaften sind veränderbar. Es können nur Ränder, Schusterjungen, Hurenkinder und Seitenumbrüche innerhalb des Dokuments geändert werden. Alle anderen CSS Eigenschaften werden ignoriert.
+ +

Beispiele

+ +
@page :first {
+  margin: 2in 3in;
+}
+
+ +
Hinwweis: Nur die absoluten Längeneinheiten können verwendet werden, wenn ein Rand definiert wird. Bitte schaue dir die Seite über Längen für mehr Informationen an.
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}Keine Änderung
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.first")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_focus/index.html b/files/de/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..6d0fb0aac5 --- /dev/null +++ b/files/de/web/css/_colon_focus/index.html @@ -0,0 +1,79 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Selektoren + - Web +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Pseudoklasse :focus steht für Elemente, welche mit einem Eingabegerät, wie z. B. der Tastatur, fokusiert wurden.

+ +

Syntax

+ +
element:focus { ... }
+ +

Beispiele

+ +
.first-name:focus {
+  color: red;
+}
+
+.last-name:focus {
+  color: lime;
+}
+ +
<input class="first-name" value="Dieser Text wird rot, wenn das Textfeld den Fokus erhält">
+<input class="last-name" value="Dieser Text wird grün, wenn das Textfeld den Fokus erhält">
+ +

{{EmbedLiveSample('Beispiele', '100%', 40)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}{{Spec2('CSS3 Selectors')}}Keine Änderung
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.selectors.focus")}}

+ +

Siehe auch

+ +

 

+ + + +

 

diff --git a/files/de/web/css/_colon_fullscreen/index.html b/files/de/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..8d10c1176d --- /dev/null +++ b/files/de/web/css/_colon_fullscreen/index.html @@ -0,0 +1,81 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - CSS Mozilla Erweiterungen + - CSS Pseudoklasse + - Experimentell + - Layout + - NeedsLiveSample + - Referenz + - Vollbild + - Web +translation_of: 'Web/CSS/:fullscreen' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Pseudoklasse :fullscreen betrifft jedes Element, welches sich im Vollbildmodus befindet. Sie selektiert nicht nur das Toplevelelement, sondern den ganzen Stapel an Elementen.

+ +
Das W3C empfiehlt das zusammengeschriebene :fullscreen, d. h. ohne Bindestrich, jedoch haben sowohl Gecko als auch Webkit eine Präfixversion mit Bindestrich implementiert : :-webkit-full-screen und :-moz-full-screen. Microsoft Edge und Internet Explorer verwenden die Syntaxen :fullscreen und :-ms-fullscreen.
+ +

Beispiele

+ +
*:fullscreen {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+ +
h1:fullscreen {
+  border: 1px solid #f00;
+}
+ +
p:fullscreen {
+  font-size: 200%;
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.fullscreen")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_hover/index.html b/files/de/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..a26cfdbed9 --- /dev/null +++ b/files/de/web/css/_colon_hover/index.html @@ -0,0 +1,122 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:hover' +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die :hover CSS Pseudoklasse wird verwendet, wenn der Nutzer einen Link auswählt, auch ohne ihn zu aktivieren. Dieser Stil kann von weiteren Link-abhängigen Pseudoklassen überschrieben werden: {{ cssxref(":link") }}, {{ cssxref(":visited") }} und {{ cssxref(":active") }}. Um nur entsprechende Links auszuwählen, ist es wichtig die :hover Regel nach den :link und :visited Regeln, aber vor der :active Regel zu erwähnen, wie beschrieben in der LVHA-Reihenfolge: :link — :visited — :hover — :active.

+ +

Die :hover Pseudoklasse kann auf alle Pseudoelemente angewendet werden. {{experimental_inline}}

+ +

Webbrowser (User-Agents) wie Firefox, Internet Explorer, Safari, Opera oder Chrome, wenden den zugehörigen Stil an, wenn der Cursor (Mauszeiger) über ein Element fährt.

+ +
Hinweis: Auf Touchscreens ist :hover problematisch oder unmöglich. Abhängig vom Browser, tritt die :hover Pseudoklasse niemals, nur für einen kurzen Moment nach dem Berühren in Kraft oder bleibt aktiviert, auch wenn der Nutzer das Element nicht mehr berührt, bis er ein anderes Element berührt. Weil Touchscreen-Geräte oft gleich sind, ist es wichtig für Webentwickler, keinen Inhalt zu haben, der nur über die :hover Pseudoklasse aufrufbar ist, da es für Nutzer von solchen Geräten schwierig oder unmöglich ist, diesen Inhalt aufzurufen.
+ +

Beispiele

+ +
:link:hover { outline: dotted red; }
+
+.foo:hover { background: gold; }
+
+ + + +

Mit der :hover Pseudoklasse kann man komplexe Algorithmen in CSS erstellen. Dies ist eine verbreitete Methode, die genutzt wird, um beispielsweise Dropdown Menüs nur mit CSS (ohne JavaScript) zu erstellen. Die Idee dieser Methode ist das Erstellen einer Regel, wie die Folgende:

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Sie kann auf folgende HTML Struktur angewendet werden:

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menü</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Untermenü</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Untermenü</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

Sieh dir unser CSS-basiertes Dropdown Menü Beispiel für eine mögliche Lösung an.

+ +

Galerie mit Vollbild-Bildern und Vorschauen

+ +

Man kann die :hover Pseudoklasse nutzen, um eine Bildergalerie mit Vollbild-Bildern, welche nur angezeigt werden, wenn der Nutzer mit der Maus über die Vorschau fährt, zu erstellen. Sieh dir dafür diese Demo an.

+ +
Hinweis: Für einen analogen Effekt, der jedoch auf der {{ cssxref(":checked") }} Pseudoklasse basiert (angewendet auf Auswahlfelder), sieh dir diese Demo an, übernommen von der {{ cssxref(":checked") }} Seite.
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS4 Selectors', '#hover', ':hover') }}{{ Spec2('CSS4 Selectors') }}Kann auf jedes Pseudoelement angewendet werden.
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}{{ Spec2('CSS3 Selectors') }}Keine wesentlichen Veränderungen
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}{{ Spec2('CSS2.1') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.hover")}} + +

Siehe auch:

+ + diff --git a/files/de/web/css/_colon_in-range/index.html b/files/de/web/css/_colon_in-range/index.html new file mode 100644 index 0000000000..0cdd2fb178 --- /dev/null +++ b/files/de/web/css/_colon_in-range/index.html @@ -0,0 +1,117 @@ +--- +title: ':in-range' +slug: 'Web/CSS/:in-range' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:in-range' +--- +
{{CSSRef}}
+ +

Die :in-range CSS Pseudoklasse entspricht einem {{htmlelement("input")}} Element, dessen aktueller Wert innerhalb eines bestimmten Bereichs liegt. Dieser Bereich wird durch die {{htmlattrxref("min", "input")}} und {{htmlattrxref("max","input")}} Attribute festgelegt.

+ +
/* Wählt jedes <input> Element aus, aber nur wenn es eine
+   Begrenzung festlegt, und sein Wert innerhalb dieser
+   Begrenzung liegt */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+ +

Diese Pseudoklasse ist nützlich um den Nutzer visuell darauf hinzuweisen, dass der aktuelle Wert des Feldes innerhalb der erlaubten Begrenzungen liegt.

+ +
Note: Diese Pseudoklasse gilt nur für Elemente, die eine Begrenzung haben. Wenn es eine solche Begrenzung nicht gibt, kann der Wert des Elements weder "in-range" (innerhalb der Begrenzung) noch "out-of-range" (außerhalb der Begrenzung) sein.
+ +

Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +
+

HTML

+ +
<form action="" id="form1">
+  <ul>Werte zwischen 1 und 10 sind gültig.
+    <li>
+      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+      <label for="value1">Der Wert ist </label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'okay.';
+}
+
+input:out-of-range + label::after {
+  content: 'außerhalb der Begrenzung!';
+}
+ +

Result

+
+ +
{{EmbedLiveSample('Example', 600, 140)}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}{{Spec2('HTML WHATWG')}}Definiert wann :in-range HTML-Elementen entspricht.
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}Standard Wert definiert.
+ +

Browser compatibility

+ +
+
+ + +

{{Compat("css.selectors.in-range")}}

+
+
+ +

See also

+ + diff --git a/files/de/web/css/_colon_indeterminate/index.html b/files/de/web/css/_colon_indeterminate/index.html new file mode 100644 index 0000000000..8f229baed2 --- /dev/null +++ b/files/de/web/css/_colon_indeterminate/index.html @@ -0,0 +1,74 @@ +--- +title: ':indeterminate' +slug: 'Web/CSS/:indeterminate' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Selektoren + - Web +translation_of: 'Web/CSS/:indeterminate' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :indeterminate CSS Pseudoklasse repräsentiert alle <input type="checkbox"> Elements, deren indeterminate DOM Eigenschaft durch JavaScript auf true gesetzt wurde. Darüber hinaus wird sie in manchen Browsern dazu verwendet, {{HTMLElement("progress")}} Elemente in einem Zwischenstatus zu finden.

+ +

Beispiel

+ +
input, span {
+  background: red;
+}
+
+:indeterminate, :indeterminate + span {
+  background: limegreen;
+}
+
+ +
<input type="checkbox"> <span>Der Inhalt dieses Absatzes hat eine grüne Hintergrundfarbe.</span>
+
+ +
document.getElementsByTagName("input")[0].indeterminate = true;
+
+ +

{{EmbedLiveSample('Beispiel', '100%', 50)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}Keine Änderung
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}Definiert die Semantik bezüglich HTML und Begrenzungsvalidierung.
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 UI', '#indeterminate', ':indeterminate')}}{{Spec2('CSS3 UI')}}Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.indeterminate")}} diff --git a/files/de/web/css/_colon_invalid/index.html b/files/de/web/css/_colon_invalid/index.html new file mode 100644 index 0000000000..4dc3873fd3 --- /dev/null +++ b/files/de/web/css/_colon_invalid/index.html @@ -0,0 +1,134 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +tags: + - CSS + - CSS Pseudoelement + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:invalid' +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die Pseudoklasse :invalid entspricht jedem {{ HTMLElement("input") }}- oder {{ HTMLElement("form") }}-Element, dessen Inhalt nicht gemäß der Eigenschaften des Eingabeelements validiert werden kann. Dadurch kann die Darstellung ungültiger Felder auf einfache Weise angepasst werden, damit Benutzer*innen fehlerhafte Eingaben gut identifizieren und korrigieren können.

+ +

Standardmäßig wendet Gecko keinen Stil auf die Pseudoklasse :invalid an. Jedoch wendet es einen Stil (ein rotes "Leuchten" mithilfe der Eigenschaft {{ Cssxref("box-shadow") }}) auf die Pseudoklasse {{ Cssxref(":-moz-ui-invalid") }} an, der einen Teil der Fälle für :invalid betrifft.

+ +

Das Leuchten kann mit dem folgenden CSS ausgeschaltet werden. Es kann auch komplett überschrieben werden, um das Aussehen von ungültigen Feldern anzupassen.

+ +
:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+ +

Syntax

+ +
{{csssyntax}}
+ +

Anmerkungen

+ +

Radio Buttons

+ +

Wenn in einer Gruppe von Radio Buttons (d.i., wenn alle den gleichen Wert für ihr name-Attribut besitzen) kein Radio Button ausgewählt ist und mindestens einer die Eigenschaft required hat, wird die Pseudoklasse :invalid auf alle Radio Buttons der Gruppe angewendet.

+ +

Beispiel

+ +

Dieses Beispiel zeigt ein einfaches Formular, dessen gültige Elemente grün und dessen ungültige Elemente rot gefärbt werden.

+ +

HTML

+ +
<form>
+  <label for="url_input">Geben Sie eine URL ein:</label>
+  <input type="url" id="url_input" />
+  <br />
+  <br />
+  <label for="email_input">Geben Sie eine E-Mail-Adresse ein:</label>
+  <input type="email" id="email_input" required/>
+</form>
+ +

CSS

+ +
input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #C00000;
+}
+ +

{{ EmbedLiveSample('Example2',600,150) }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('HTML WHATWG', '#selector-invalid', ':invalid') }}{{ Spec2('HTML WHATWG') }}Keine Änderung.
{{ SpecName('HTML5 W3C', '#selector-invalid', ':invalid') }}{{ Spec2('HTML5 W3C') }}Definiert Semantik bezogen auf HTML und Überprüfung der Einschränkungen.
{{ SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid') }}{{ Spec2('CSS4 Selectors') }}Keine Änderung.
{{ SpecName('CSS3 Basic UI', '#pseudo-validity', ':invalid') }}{{ Spec2('CSS3 Basic UI') }}Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.
+ +

Browser-Kompatibilität

+ +

{{Compat("css.selectors.invalid")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_lang/index.html b/files/de/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..4bf15acd0f --- /dev/null +++ b/files/de/web/css/_colon_lang/index.html @@ -0,0 +1,85 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :lang CSS Pseudoklasse matcht Elemente anhand der Sprache, in der das Element ist. In HTML wird die Sprache durch eine Kombination aus lang Attribut, dem {{HTMLElement("meta")}} Element und möglicherweise durch Informationen durch das Protokoll (wie z. B. HTTP Header). Für andere Dokumenttypen können andere Dokumentmethoden zur Bestimmung der Sprache existieren.

+ +

Akzeptierte language-code Strings werden in der HTML 4.0 Specification definiert.

+ +

Syntax

+ +
element:lang(language-code) { Stileigenschaften }
+
+ +

Beispiel

+ +

In diesem Beispiel wird der lang Selektor dazu verwendet, um mit Hilfe von Kindselektoren das Elternelement eines {{HTMLElement("q")}} Elements zu matchen. Es ist nicht dazu gedacht, den einzigen oder sogar den korrekten (was vom Dokumenttyp abhängt) Weg aufzuzeigen, um dies umzusetzen. Beachte, Unicodewerte werden verwendet, um spezielle Anführungszeichen anzugeben.

+ +
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+
+ +

... wo ...

+ +
  <div lang="fr"><q>Dieses französische Anführungszeichen hat ein <q>verschachteltes</q> Zitat.</q></div>
+  <div lang="de"><q>Dieses deutsche Anführungszeichen hat ein <q>verschachteltes</q> Zitat.</q></div>
+  <div lang="en"><q>Dieses englische Anführungszeichen hat ein <q>verschachteltes</q> Zitat.</q></div>
+
+ +

... wird dargestellt als ...

+ +

{{EmbedLiveSample('Beispiel', '100%', 100)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}Keine wesentliche Änderung
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.lang")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_last-child/index.html b/files/de/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..368ad9a58a --- /dev/null +++ b/files/de/web/css/_colon_last-child/index.html @@ -0,0 +1,74 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:last-child' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :last-child CSS Pseudoklasse repräsentiert jedes Element, das das letzte Kindelement seines Elternelements ist.

+ +

Syntax

+ +
element:last-child { Stileigenschaften }
+ +

Beispiel

+ +

HTML Inhalt

+ +
<ul>
+  <li>Dieser Punkt ist nicht grün.</li>
+  <li>Auch nicht dieser.</li>
+  <li>Dieser Punkt ist es! :)</li>
+</ul>
+ +

CSS Inhalt

+ +
li:last-child {
+  background-color: lime;
+}
+ +

{{EmbedLiveSample('Beispiel', '100%', 100)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition.
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.last-child")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_last-of-type/index.html b/files/de/web/css/_colon_last-of-type/index.html new file mode 100644 index 0000000000..267747715f --- /dev/null +++ b/files/de/web/css/_colon_last-of-type/index.html @@ -0,0 +1,86 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:last-of-type' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :last-of-type CSS Pseudoklasse repräsentiert den letzten Geschwisterknoten eines Typs in der Liste von Kindknoten des Elternelements.

+ +

Syntax

+ +
element:last-of-type { Stileigenschaften }
+
+ +

Beispiel

+ +

Um das letzte {{HTMLElement("em")}} Element innerhalb eines {{HTMLElement("p")}} Elements auszuwählen, kann folgender Code verwendet werden:

+ +
p em:last-of-type {
+  color: lime;
+}
+
+ +
<p>
+  <em>Ich bin nicht grün. :(</em>
+  <strong>Ich bin nicht grün. :(</strong>
+  <em>Ich bin grün! :D</em>
+  <strong>Ich bin auch nicht grün. :(</strong>
+</p>
+
+<p>
+  <em>Ich bin nicht grün. :(</em>
+  <span><em>Ich bin grün!</em></span>
+  <strong>Ich bin nicht grün. :(</strong>
+  <em>Ich bin grün! :D</em>
+  <span><em>Ich bin auch grün!</em> <strike> Ich bin nicht grün. </strike></span>
+  <strong>Ich bin auch nicht grün. :(</strong>
+</p>
+ +

...entspricht:

+ +
{{EmbedLiveSample('Beispiel','100%', '120')}}
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.last-of-type")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_link/index.html b/files/de/web/css/_colon_link/index.html new file mode 100644 index 0000000000..0ac0cb3d3d --- /dev/null +++ b/files/de/web/css/_colon_link/index.html @@ -0,0 +1,70 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:link' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :link Pseudoklasse erlaubt es, Links innerhalb von Elementen auszuwählen. Dies wählt jeden Link aus, der bisher noch nicht besucht wurde, auch die, die bereits durch andere Selektoren anderer linkbezogener Pseudoklassen wie {{cssxref(":hover")}}, {{cssxref(":active")}} oder {{cssxref(":visited")}} gestylt wurden. Um nur die unbesuchten Links anzusprechen, ist es deshalb wichtig, die LVHA-Reihenfolge einzuhalten: :link — :visited — :hover — :active. Die {{cssxref(":focus")}} Pseudoklasse wird normalerweise direkt neben :hover platziert, je nach gewünschtem Effekt davor oder danach.

+ +

Beispiele

+ +
a:link {
+  color: slategray;
+}
+
+.external:link {
+  background-color: lightblue;
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}Keine Änderung
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}Keine Änderung
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}Berenzung auf {{HTMLElement("a")}} aufgehoben
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.link")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_not/index.html b/files/de/web/css/_colon_not/index.html new file mode 100644 index 0000000000..cddf772707 --- /dev/null +++ b/files/de/web/css/_colon_not/index.html @@ -0,0 +1,76 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Selektoren + - Web +translation_of: 'Web/CSS/:not' +--- +
{{ CSSRef() }}
+ +

Übersicht

+ +

Die CSS Pseudoklasse :not(X) ist eine Negation zu einem Selektor X als Argument und wird als Funktion angegeben. Sie passt auf Elemente, die nicht durch das Argument repräsentiert werden. X darf keinen weiteren Negationsselektor beinhalten.

+ +

Die Spezifität der :not Pseudoklasse entspricht der Spezifität seines Arguments. Die :not Pseudoklasse hat im Gegensatz zu anderen Pseudoklassen keinen Einfluss auf die Spezifität.

+ +
Hinweise: + + +
+ +

Syntax

+ +
:not(selector) { Stileigenschaften }
+ +

Beispiele

+ +
p:not(.classy) { color: red; }
+:not(p) { color: green; }
+ +

auf folgendes HTML angewandt:

+ +
<p>Irgendein Text.</p>
+<p class="classy">Irgendein anderer Text.</p>
+<span>Noch mehr Text<span>
+
+ +

ergibt:

+ +

{{EmbedLiveSample('Beispiele', '100%', '150')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}Argument erweitert, um komplexe Selektoren zu ermöglichen.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.not")}} diff --git a/files/de/web/css/_colon_nth-child/index.html b/files/de/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..17dc2c3387 --- /dev/null +++ b/files/de/web/css/_colon_nth-child/index.html @@ -0,0 +1,163 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :nth-child(an+b) CSS Pseudo-Klasse passt auf ein Element, das im Dokumentbaum an+b-1 Geschwisterknoten vor sich hat, wobei n einen gegebenen positiven Wert oder den Wert 0 hat. Zudem muss das Element einen Elternknoten haben. Einfacher ausgedrückt: Beginnend bei einem Startindex b trifft der Selector auf jedes n-te folgende Element zu.

+ +

Einige Beispiele:

+ + + +

Die Werte a und b müssen beide Integer sein, und der Index des ersten Kindelements eines Knotens ist 1. In anderen Worten, diese Klasse trifft auf alle Kindelemente zu, deren Index Teil der Menge { an + b; n = 0, 1, 2, ... } ist.

+ +

Ein beliebter Anwendungsfall ist das Auswählen jeder zweiten Reihe in einer Tabelle.

+ +

Syntax

+ +
element:nth-child(an + b) { style properties }
+
+ +

Beispiele

+ +

Beispielselektoren

+ +
+
tr:nth-child(2n+1)
+
Wählt die ungeraden Reihen einer HTML-Tabelle aus.
+
tr:nth-child(odd)
+
Wählt die ungeraden Reihen einer HTML-Tabelle aus.
+
tr:nth-child(2n)
+
Wählt die geraden Reihen einer HTML-Tabelle aus.
+
tr:nth-child(even)
+
Wählt die geraden Reihen einer HTML-Tabelle aus.
+
span:nth-child(0n+1)
+
Selektiert ein span Element, welches das erste Kind seines Elternknotens ist. Dies entspricht dem {{Cssxref(':first-child')}} Selector.
+
span:nth-child(1)
+
Entspricht dem vorherigen Beispiel.
+
span:nth-child(-n+3)
+
Erzielt einen Treffer, wenn das Element vom Typ span ist und zudem eines der ersten drei Kinder seines Elternknotens ist.
+
+ +

Gesamtbeispiel

+ +

Im folgenden ein HTML-Beispiel:

+ +
<p><code>span:nth-child(2n+1)</code>, <em>ohne</em> ein <code>&lt;em&gt;</code>
+ unter den Kindelementen. Element 1, 3, 5, und 7 sind ausgewählt, wie erwartet.</p>
+
+<div class="first">
+      <span>Dieses span ist ausgewählt</span>
+      <span>Dieses span is nicht. :(</span>
+      <span>Wie sieht's mit diesem aus?</span>
+      <span>Und dieses?</span>
+      <span>Noch ein Beispiel</span>
+      <span>Und noch eins</span>
+      <span>Zu guter Letzt</span>
+</div>
+
+<p><code>span:nth-child(2n+1)</code>, <em>mit</em> einem <code>&lt;em&gt;</code>
+ unter den Kindelementen. Element 1, 5, und 7 sind ausgewählt. 3 wird beim Zählen berücksichtigt
+ weil es ein Kind ist, aber es ist nicht ausgewählt, weil es kein
+<code>&lt;span&gt;</code> ist.</p>
+
+<div class="second">
+      <span>Dieses span ist ausgewählt!</span>
+      <span>Dieses span nicht. :(</span>
+      <em>Dieses ist ein em.</em>
+      <span>Wie sieht's mit diesem aus?</span>
+      <span>Und dieses?</span>
+      <span>Noch ein Beispiel</span>
+      <span>Und noch eins</span>
+      <span>Zu guter Letzt</span>
+</div>
+
+<p><code>span:nth-of-type(2n+1)</code>, <em>mit</em> einem <code>&lt;em&gt;</code>
+ unter den Kindern. Element 1, 4, 6, und 8 sind ausgewählt. 3 ist
+ nicht bei der Zählung berücksichtigt oder ausgewählt, weil es ein <code>&lt;em&gt;</code> ist,
+und kein <code>&lt;span&gt;</code>, und <code>nth-of-type</code> selektiert nur
+ Kinder dieses Typs. Das <code>&lt;em&gt;</code> wird übersprungen und ignoriert.
+</p>
+
+<div class="third">
+      <span>Dieses span ist ausgewählt!</span>
+      <span>Dieses span nicht. :(</span>
+      <em>Dieses ist ein em.</em>
+      <span>Wie sieht's mit diesem aus?</span>
+      <span>Und dieses?</span>
+      <span>Noch ein Beispiel</span>
+      <span>Und noch eins</span>
+      <span>Zu guter Letzt</span>
+</div>
+ +

...dieses CSS wird verwendet...

+ +
html {
+  font-family: sans-serif;
+}
+
+span, div em {
+  padding: 10px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

...und erzeugt folgendes Resultat:

+ +
{{EmbedLiveSample('Gesamtbeispiel','100%', '550')}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.selectors.nth-child")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_only-child/index.html b/files/de/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..ac7ffcc7c0 --- /dev/null +++ b/files/de/web/css/_colon_only-child/index.html @@ -0,0 +1,113 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - CSS Pseudo-Klasse + - Layout + - Referenz + - Selektoren + - Web +translation_of: 'Web/CSS/:only-child' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Pseudo-Klasse :only-child  repräsentiert ein Element, welches das einzige Kindeelement innerhalb seines Elternelementes ist. Das ist das gleiche wie :first-child:last-child oder :nth-child(1):nth-last-child(1), nur mit einer geringeren Spezifizität.

+ +

Syntax

+ +
parent child:only-child {
+  property: value;
+}
+
+ +

Beispiele

+ +

Einfaches Beispiel

+ +
span:only-child {
+  color: red;
+}
+
+ +
<div>
+  <span>Dieser span ist das einzige Kind seines Elternteils</span>
+</div>
+
+<div>
+  <span>Dieser span ist eines von zwei Kindern seines Elternteils</span>
+  <span>Dieser span ist eines von zwei Kindern seines Elternteils</span>
+</div>
+
+ +

Ergebnis

+ +

{{EmbedLiveSample('Basic_example', '100%', 100)}}

+ +

Ein Beispiel für Listen

+ +
li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: #6699ff;
+  font-style: italic;
+  list-style-type: square;
+}
+ +
<ol>
+  <li>Erstens
+    <ul>
+      <li>Einziges Kind
+    </ul>
+  </li>
+  <li>Zweitens
+    <ul>
+      <li>Diese Liste hat zwei Elemente
+      <li>Diese Liste hat zwei Elemente
+    </ul>
+  </li>
+  <li>Drittens
+    <ul>
+      <li>Diese Liste hat drei Elemente
+      <li>Diese Liste hat drei Elemente
+      <li>Diese Liste hat drei Elemente
+    </ul>
+  </li>
+<ol>
+
+ +

Ergebnis

+ +

{{EmbedLiveSample('A_list_example', '100%', 150)}}

+ +
+

Spezifizierungen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifizierungStatusKommentar
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}Keine Änderung.
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}Ausgangs-Definition.
+ +

Browser-Kompatibilität

+ +{{Compat("css.selectors.only-child")}} diff --git a/files/de/web/css/_colon_optional/index.html b/files/de/web/css/_colon_optional/index.html new file mode 100644 index 0000000000..ccf6fe9770 --- /dev/null +++ b/files/de/web/css/_colon_optional/index.html @@ -0,0 +1,69 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:optional' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :optional CSS Pseudoklasse repräsentiert alle {{HTMLElement("input")}} Elemente, die kein {{htmlattrxref("required","input")}} Attribut enthalten.

+ +

Für Pflichtfelder kann man die {{cssxref(":required")}} Pseudoklasse verwenden.

+ +

Beispiele

+ +

Siehe {{cssxref(":invalid")}}.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#selector-optional', ':optional')}}{{Spec2('HTML WHATWG')}}Keine Änderung
{{SpecName('HTML5 W3C', '#selector-optional', ':optional')}}{{Spec2('HTML5 W3C')}}Definiert die Semantik bezüglich HTML und Beschränkungsvalidierung.
{{SpecName('CSS4 Selectors', '#opt-pseudos', ':optional')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 UI', '#pseudo-required-value', ':optional')}}{{Spec2('CSS3 UI')}}Definiert die Pseudoklasse, aber nicht die zugehörige Semantik.
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.optional")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_out-of-range/index.html b/files/de/web/css/_colon_out-of-range/index.html new file mode 100644 index 0000000000..c9b1c64957 --- /dev/null +++ b/files/de/web/css/_colon_out-of-range/index.html @@ -0,0 +1,94 @@ +--- +title: ':out-of-range' +slug: 'Web/CSS/:out-of-range' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:out-of-range' +--- +
{{CSSRef}}
+ +
 
+ +

Übersicht

+ +

Die :out-of-range CSS Pseudoklasse passt, wenn das value Attribut eines Elements außerhalb der angegebenen Begrenzungen für dieses Element ist. Sie erlaubt der Seite, darauf zu reagieren, dass der aktuell definierte Wert eines Elements außerhalb der Bereichsgrenzen ist. Ein Wert kann außerhalb eines Bereichs sein, wenn er entweder kleiner oder größer als die gesetzten Minimal- und Maximalwerte ist.

+ +
Hinweis: Diese Pseudoklasse trifft nur auf Elemente zu, die Bereichsbegrenzungen haben. Falls keine solchen Begrenzungen existieren, kann der Wert des Elements weder innerhalb noch außerhalb der Grenzen liegen.
+ +

Beispiel

+ +
+

HTML

+ +
<form action="" id="form1">
+    <ul>Werte zwischen 1 und 10 sind gültig.
+        <li>
+            <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+            <label for="value1">Der Wert ist </label>
+        </li>
+</form>
+ +

CSS

+ +
li {
+    list-style: none;
+    margin-bottom: 1em;
+}
+input {
+    border: 1px solid black;
+}
+input:in-range {
+    background-color: rgba(0, 255, 0, 0.25);
+}
+input:out-of-range {
+    background-color: rgba(255, 0, 0, 0.25);
+    border: 2px solid red;
+}
+input:in-range + label::after {
+    content:' OK';
+}
+input:out-of-range + label::after {
+    content:'out of range!';
+}
+
+ +
{{EmbedLiveSample('Beispielcode',600,140)}}
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Basic UI', '#pseudo-range', ':in-range')}}{{Spec2('CSS3 Basic UI')}}Ursprüngliche Spezifikation
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.out-of-range")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_required/index.html b/files/de/web/css/_colon_required/index.html new file mode 100644 index 0000000000..769f925180 --- /dev/null +++ b/files/de/web/css/_colon_required/index.html @@ -0,0 +1,67 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:required' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :required CSS Pseudoklasse repräsentiert jedes {{HTMLElement("input")}} Element, welches das Attribut {{htmlattrxref("required", "input")}} beinhaltet. So kann das Aussehen von Pflichtfeldern einfach angepasst werden.

+ +

Die {{cssxref(":optional")}} Pseudoklasse hingegen kann für die Darstellung von Nicht-Pflichtfeldern verwendet werden.

+ +

Beispiele

+ +

Siehe {{cssxref(":invalid")}}.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#selector-required', ':required')}}{{Spec2('HTML WHATWG')}}Keine Änderung
{{SpecName('HTML5 W3C', '#selector-required', ':required')}}{{Spec2('HTML5 W3C')}}Definiert die Semantik bezüglich HTML und Beschränkungsvalidierung
{{SpecName('CSS4 Selectors', '#opt-pseudos', ':required')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required')}}{{Spec2('CSS3 Basic UI')}}Definiert die Pseudoklasse, aber nicht die zugehörige Semantik
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.required")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_root/index.html b/files/de/web/css/_colon_root/index.html new file mode 100644 index 0000000000..4328605e04 --- /dev/null +++ b/files/de/web/css/_colon_root/index.html @@ -0,0 +1,48 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsExample + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:root' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Mit dem :root-Selektor kannst Du das oberste "Elternelement" im DOM oder die Dokumentstruktur als Ziel festlegen. Es ist in der Spezifikation der CSS Selectors Level 3 als „strukturelle Pseudoklasse“ definiert, was bedeutet, dass Inhalt basierend auf seiner Beziehung zu übergeordneten und gleichgeordneten Inhalten gestaltet wird.

+ +

In der überwiegenden Mehrheit der Fälle, auf die Du wahrscheinlich stößt, gilt Folgendes: :root bezieht sich auf das <html> -Element einer Webseite. In einem HTML-Dokument ist das HTML-Element immer das übergeordnete Element der höchsten Ebene, sodass das Verhalten von :root vorhersehbar ist. Da CSS jedoch eine Stilsprache ist, die mit anderen Dokumentformaten wie SVG und XML verwendet werden kann, kann die :root-Pseudoklasse in diesen Fällen auf andere Elemente verweisen. Unabhängig von der Auszeichnungssprache wählt :root immer das oberste Element des Dokuments in der Dokumentstruktur aus.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.selectors.root")}}

diff --git a/files/de/web/css/_colon_visited/index.html b/files/de/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..9816196c8a --- /dev/null +++ b/files/de/web/css/_colon_visited/index.html @@ -0,0 +1,76 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - CSS Pseudoklasse + - CSS3 + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:visited' +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die :visited Pseudoklasse betrifft nur bereits besuchte Links. Die Stile können von weiteren Pseudoklassen überschrieben werden: {{ cssxref(":link") }}, {{ cssxref(":hover") }}, und {{ cssxref(":active") }}. Um nur besuchte Links auszuwählen, ist es deshalb wichtig, die LVHA-Reihenfolge einzuhalten: :link — :visited — :hover — :active.

+ +
+

Hinweis: Aus Datenschutzgründen ist der Einsatzbereich dieser Pseudoklasse auf die folgenden Eigenschaften begränzt: {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, fill und stroke. Beachte, dass auch der Alphakanal ignoriert wird: die Alphakomponente der nicht besuchten Regel wird stattdessen verwendet (außer, wenn die Deckkraft 0 ist. In diesem Fall wird die gesamte Farbe ignoriert und die Farbe der nicht besuchten Regel verwendet).

+ +

Da sich die Farbe ändern kann, liefert getComputedStyle immer den Wert von unbesuchten Links zurück.

+ +

Für mehr informationen zu den Schutzmasnahmen siehe Privacy and the :visited selector.

+
+ +

Beispiele

+ +
a:visited { color: #4b2f89; }
+a:visited { background-color: white }
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS4 Selectors', '#link', ':visited') }}{{ Spec2('CSS4 Selectors') }}Keine Änderung
{{ SpecName('CSS3 Selectors', '#link', ':visited') }}{{ Spec2('CSS3 Selectors') }}Keine Änderung
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}{{ Spec2('CSS2.1') }}Berenzung auf {{ HTMLElement("a") }} aufgehoben. Beschränkt aus Datenschutzgründen das Browserverhalten.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}{{ Spec2('CSS1') }}Standard Wert definiert
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.visited")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-moz-page-sequence/index.html b/files/de/web/css/_doublecolon_-moz-page-sequence/index.html new file mode 100644 index 0000000000..a99a56e7fc --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-page-sequence/index.html @@ -0,0 +1,83 @@ +--- +title: '::-moz-page-sequence' +slug: 'Web/CSS/::-moz-page-sequence' +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoelement +translation_of: 'Web/CSS/::-moz-page-sequence' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Übersicht

+ +

Das ::-moz-page-sequence CSS Pseudoelement repräsentiert den Hintergrund der Druckvorschau.

+ +

Beispiele

+ +

Benötigt Beispiele.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-moz-page/index.html b/files/de/web/css/_doublecolon_-moz-page/index.html new file mode 100644 index 0000000000..e491443ea9 --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-page/index.html @@ -0,0 +1,28 @@ +--- +title: '::-moz-page' +slug: 'Web/CSS/::-moz-page' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/::-moz-page' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Das ::-moz-page CSS Pseudoelement gilt für eine einzelne Seite im Druck oder der Druckvorschau.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-moz-placeholder/index.html b/files/de/web/css/_doublecolon_-moz-placeholder/index.html new file mode 100644 index 0000000000..07de5dafea --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-placeholder/index.html @@ -0,0 +1,107 @@ +--- +title: '::-moz-placeholder' +slug: 'Web/CSS/::-moz-placeholder' +tags: + - CSS + - CSS Pseudo-class + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/::placeholder' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +
Hinweis: Das Pseudoelement ::-moz-placeholder wurde eingeführt, um die Pseudoklasse {{cssxref(":-moz-placeholder")}}, die in Firefox 19 als veraltet eingestuft wurde, zu ersetzen.
+ +

Übersicht

+ +

Das ::-moz-placeholder Pseudoelement repräsentiert Formularelemente, die Platzhaltertexte anzeigen. Damit können Webentwickler und Theme Designer die Darstellung von Platzhaltertexten anpassen.

+ +

Standardmäßig wird {{cssxref("opacity")}}: 0.54 verwendet. Sollten Sie die Hintergrundfarbe der Formularelemente angepasst haben (beispielsweise in einen ähnlichen Farbton), so kann es sein, dass der Platzhaltertext nicht gut sichtbar ist. In diesem Fall können Sie mit ::-moz-placeholder die Textdarstellung des Platzhaltertextes ändern.

+ +

Beispiel

+ +

Das folgende Beispiel färbt den Platzhaltertext grün.

+ +

HTML Inhalt

+ +
<input id="test" placeholder="Platzhaltertext!">
+
+ +

CSS Inhalt

+ +
input::-moz-placeholder {
+  color: green;
+}
+
+ +

Das Ergebnis sieht folgendermaßen aus:

+ +

{{EmbedLiveSample('Beispiel')}}

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoDesktop("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoMobile("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Firefox verwendet standardmäßig {{cssxref("opacity")}}: 0.54 für Platzhaltertexte. Siehe {{Bug("556145")}}. Die meisten anderen Browser verwenden momentan andere Standards für ihre Platzhalter Pseudoelemente oder Pseudoklassen.

+ +

Gecko hat dies zuvor als {{cssxref(":-moz-placeholder")}} Pseudoklasse implementiert. Siehe {{Bug("737786")}}.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-moz-progress-bar/index.html b/files/de/web/css/_doublecolon_-moz-progress-bar/index.html new file mode 100644 index 0000000000..858c79c319 --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-progress-bar/index.html @@ -0,0 +1,36 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsLiveSample + - Non-standard +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Das ::-moz-progress-bar CSS Pseudoelement betrifft den Bereich eines HTML {{HTMLElement("progress")}} Elements, der den erreichten Fortschritt darstellt. Dies erlaubt es beispielsweise, die Farbe von Fortschrittsbalken ändern.

+ +

Die Möglichkeiten, den Stil des Balkens anzupassen, sind recht groß. Dies kann besonders für unbestimmte Balken nützlich sein (über die {{cssxref(":indeterminate")}} Pseudoklasse), bei denen es möglich ist, die Darstellung grundlegend zu ändern; es können z. B. die Breite und die Positionierung des Balkens verändert werden. (Was die gesamten Ausmaße des Elements und seine Position meint, nicht nur den gefüllten Teil des Elements, wie im Screenshot unten verdeutlicht.)

+ +

Beispiele

+ +

Dieses Beispiel gestaltet den Fortschrittszähler des Fortschrittbalkens mit der ID redbar in rot.

+ +
#redbar::-moz-progress-bar {
+  background-color: red;
+}
+ +

Ein Balken, der diesen Stil verwendet, könnte so aussehen:

+ +

Benutzerdefiniert gestalteter Fortschrittsbalken

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html b/files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html new file mode 100644 index 0000000000..7f1fe71354 --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html @@ -0,0 +1,81 @@ +--- +title: '::-moz-scrolled-page-sequence' +slug: 'Web/CSS/::-moz-scrolled-page-sequence' +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsContent + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: 'Web/CSS/::-moz-scrolled-page-sequence' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Übersicht

+ +

Das ::-moz-scrolled-page-sequence CSS Pseudoelement repräsentiert den Hintergrund der Druckvorschau.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-ms-browse/index.html b/files/de/web/css/_doublecolon_-ms-browse/index.html new file mode 100644 index 0000000000..06b3002488 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-browse/index.html @@ -0,0 +1,79 @@ +--- +title: '::-ms-browse' +slug: 'Web/CSS/::-ms-browse' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsContent + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-browse' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Das ::-ms-browse CSS Pseudoelement repräsentiert die Schaltfläche eines {{HTMLElement("input")}} Elements mit type="file", die die Dateiauswahl öffnet.

+ +

Diese Schaltfläche und dieses Pseudoelement sind nicht standardisiert und spezifisch für Internet Explorer 10+, daher das Herstellerpräfix.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Microsoft hat eine Beschreibung von ::-ms-browse auf MSDN.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}10{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_doublecolon_-ms-check/index.html b/files/de/web/css/_doublecolon_-ms-check/index.html new file mode 100644 index 0000000000..3f5c0e1b87 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-check/index.html @@ -0,0 +1,23 @@ +--- +title: '::-ms-check' +slug: 'Web/CSS/::-ms-check' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-check' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Das ::-ms-check CSS Pseudoelement repräsentiert den Haken eines {{HTMLElement("input")}} mit type="checkbox" oder type="radio".

+ +

Spezifikation

+ +

Nicht Teil einer Spezifikation.

+ +

Microsoft hat eine Beschreibung auf MSDN.

diff --git a/files/de/web/css/_doublecolon_-ms-fill-lower/index.html b/files/de/web/css/_doublecolon_-ms-fill-lower/index.html new file mode 100644 index 0000000000..80bc10efe4 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-fill-lower/index.html @@ -0,0 +1,90 @@ +--- +title: '::-ms-fill-lower' +slug: 'Web/CSS/::-ms-fill-lower' +tags: + - CSS + - CSS Pseudoelement + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-fill-lower' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Das ::-ms-fill-lower CSS Pseudoelement repräsentiert den Teil des "Tracks" (die Spur, in der der sich der Indikator, alias Thumb, bewegt) eines {{HTMLElement("input")}} Elements mit type="range", welcher den Werten entspricht, die kleiner sind als der aktuell vom Thumb markierte.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Microsoft hat eine Beschreibung auf MSDN.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-ms-fill-upper/index.html b/files/de/web/css/_doublecolon_-ms-fill-upper/index.html new file mode 100644 index 0000000000..c897657ac2 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-fill-upper/index.html @@ -0,0 +1,90 @@ +--- +title: '::-ms-fill-upper' +slug: 'Web/CSS/::-ms-fill-upper' +tags: + - CSS + - CSS Pseudoelement + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-fill-upper' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Das ::-ms-fill-upper CSS Pseudoelement repräsentiert den Teil des "Tracks" (die Spur, in der der sich der Indikator, alias Thumb, bewegt) eines {{HTMLElement("input")}} Elements mit type="range", welcher den Werten entspricht, die größer sind als der aktuell vom Thumb markierte.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Microsoft hat eine Beschreibung auf MSDN.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-ms-fill/index.html b/files/de/web/css/_doublecolon_-ms-fill/index.html new file mode 100644 index 0000000000..972cd7a224 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-fill/index.html @@ -0,0 +1,71 @@ +--- +title: '::-ms-fill' +slug: 'Web/CSS/::-ms-fill' +tags: + - CSS + - NeedsExample + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-fill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Das ::-ms-fill CSS Pseudoelement repräsentiert die gefüllte Portion eines {{HTMLElement("progress")}} Elements. Das Pseudoelement ist nicht standardisiert und wird nur von Internet Explorer 10+ unterstützt, daher das Herstellerpräfix.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Microsoft hat eine Beschreibung auf MSDN.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}10.0{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_doublecolon_-ms-reveal/index.html b/files/de/web/css/_doublecolon_-ms-reveal/index.html new file mode 100644 index 0000000000..c3da23ecb9 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-reveal/index.html @@ -0,0 +1,24 @@ +--- +title: '::-ms-reveal' +slug: 'Web/CSS/::-ms-reveal' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-reveal' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Das ::-ms-reveal CSS Pseudoelement wird verwendet, um Stile auf den "Passwort Anzeigebutton" anzuwenden, welcher im Internet Explorer 10+ standardmäßig am Rand eines {{HTMLElement("input")}} Elements mit type="password" angezeigt wird. Der Passwort Anzeigebutton zeigt den Wert des Passwortfeldes im Klartext an (anstatt der normalen versteckt-wegen-Datenschutz nur-Sternchen Anzeige). Dieser Button und das Pseudoelement sind nicht standardisiert und spezifisch für Internet Explorer 10+, daher das Herstellerpräfix.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Microsoft hat eine Beschreibung auf MSDN.

diff --git a/files/de/web/css/_doublecolon_-ms-thumb/index.html b/files/de/web/css/_doublecolon_-ms-thumb/index.html new file mode 100644 index 0000000000..e8736b011d --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-thumb/index.html @@ -0,0 +1,24 @@ +--- +title: '::-ms-thumb' +slug: 'Web/CSS/::-ms-thumb' +tags: + - CSS + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Das ::-ms-thumb CSS Pseudoelement repräsentiert den Schieber, den der Benutzer innerhalb der Spur eines {{HTMLElement("input")}}s mit type="range" bewegen kann, um seinen numerischen Wert zu ändern.

+ +

Spezifikationen

+ +

Dies ist nicht Teil einer Spezifikation, jedoch hat Microsoft eine Beschreibung auf MSDN.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_after/index.html b/files/de/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..6eca5cbd0c --- /dev/null +++ b/files/de/web/css/_doublecolon_after/index.html @@ -0,0 +1,158 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - CSS Pseudoelement + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/::after' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Das ::after CSS Pseudoelement matcht ein virtuelles letztes Kindelement des markierten Elements. Es wird typischerweise dazu verwendet, um kosmetischen Inhalt unter Verwendung der {{cssxref("content")}} CSS Eigenschaft zu einem Element hinzuzufügen. Dieses Element ist standardmäßig inline.

+ +

Syntax

+ +
/* CSS2 Syntax */
+element:after  { Stileigenschaften }
+
+/* CSS3 Syntax */
+element::after { Stileigenschaften }
+ +

Die ::after Notation (mit zwei Doppelpunkten) wurde in CSS 3 eingeführt, um eine Unterscheidung zwischen Pseudoklassen und Pseudoelementen einzuführen. Browser unterstützen auch die :after Notation, wie sie in CSS 2 eingeführt wurde.

+ +

Beispiele

+ +

Einfache Verwendung

+ +

Lass uns zwei Klassen erstellen: eine für langweilige Absätze und eine für aufregende. Wir können anschließend jeden Absatz markieren, indem wir ein Pseudoelement an dessen Ende setzen.

+ +
<p class="boring-text">Hier ist etwas alter, langweiliger Text.</p>
+<p>Hier ist etwas mittelmäßiger Text, weder langweilig noch aufregend.</p>
+<p class="exciting-text">An MDN mitzuwirken ist einfach und macht Spaß.
+Klicke einfach auf den 'BEARBEITEN' Button und füge neue Livebeispiele hinzu oder verbessere bestehende Beispiele.</p>
+ +
.exciting-text::after {
+  content: "<- *Das* ist interessant!";
+  color: green;
+}
+
+.boring-text::after {
+   content: "<- LANGWEILIG!";
+   color: red;
+}
+ +

Ausgabe

+ +

{{EmbedLiveSample('Einfache_Verwendung', 500, 150)}}

+ +

Dekoratives Beispiel

+ +

Wir können Text oder Bilder innerhalb der {{cssxref("content")}} Eigenschaft fast beliebig stylen.

+ +
<span class="ribbon">Beachte, wo die orange Box ist.</span>
+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "Sieh dir diese orange Box an.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Ausgabe

+ +

{{EmbedLiveSample('Dekoratives_Beispiel', 450, 20)}}

+ +

Tooltips

+ +

Das folgende Beispiel zeigt die Verwendung des ::after Pseudoelements in Verbindung mit dem attr() CSS Ausdruck und einem benutzerdefinierten Datenattribut data-descr, um einen rein CSS-basierten, Wörterbuch ähnlichen Tooltip zu erstellen. Sieh dir die Livevorschau unten an oder das Beispiel auf einer separaten Seite.

+ +
<p>Hier ist ein Livebeispiel des oberen Codes.<br />
+  Wir haben ein <span data-descr="Sammlung von Wörtern und Interpunktion">text</span> mit ein paar
+  <span data-descr="kleine Popups, welche auch wieder verschwinden">Tooltips</span>.<br />
+  Sei nicht schüchtern, beweg die Maus darüber, ums dir <span data-descr="nicht wörtlich nehmen">anzusehen</span>.
+</p>
+
+ +
span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}
+ +

Ausgabe

+ +

{{EmbedLiveSample('Tooltips', 450, 120)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{Spec2('CSS4 Pseudo-Elements')}}Keine wesentlichen Änderungen zur vorherigen Spezifikation.
{{Specname("CSS3 Transitions", "#animatable-properties", "Übergängen bei Pseudoelement Eigenschaften")}}{{Spec2("CSS3 Transitions")}}Erlaubt Übergänge bei Eigenschaften, die für Pseudoelemente definiert sind.
{{Specname("CSS3 Animations", "", "Animationen bei Pseudoelement Eigenschaften")}}{{Spec2("CSS3 Animations")}}Erlaubt Animationen bei Eigenschaften, die für Pseudoelemente definiert sind.
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}{{Spec2('CSS3 Selectors')}}Führt die Zwei-Doppelpunkte-Syntax ein.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition, unter Verwendung der Ein-Doppelpunkt-Syntax
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.after")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_backdrop/index.html b/files/de/web/css/_doublecolon_backdrop/index.html new file mode 100644 index 0000000000..d0edc3021e --- /dev/null +++ b/files/de/web/css/_doublecolon_backdrop/index.html @@ -0,0 +1,49 @@ +--- +title: '::backdrop' +slug: 'Web/CSS/::backdrop' +tags: + - CSS + - Layout + - NeedsContent + - Pseudoelement + - Referenz + - Vollbild + - Web +translation_of: 'Web/CSS/::backdrop' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Jedes Element im Stack des Toplayers hat ein ::backdrop {{cssxref("pseudo-elements", "pseudo-element")}}. Dieses Pseudoelement ist eine Box, die direkt unterhalb des Elements gerendert wird (und oberhalb des Elements unterhalb des Elements im Stack, falls es eines gibt), innerhalb desselben Toplayers.

+ +

Das ::backdrop Pseudoelement kann dazu verwendet werden, um einen Hintergrund zu erstellen, der das dahinterliegende Dokument für ein Element im Stack des Toplayers versteckt, z. B. für das Element, das im Vollbild dargestellt wird, wie in dieser Spezifikation beschrieben.

+ +

Es erbt von keinem Element und vererbt auch nicht. Es gelten keine Einschränkungen bezüglich der Eigenschaften, die auf dieses Pseudoelement angewendet werden können.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.backdrop")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_before/index.html b/files/de/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..080ef608bb --- /dev/null +++ b/files/de/web/css/_doublecolon_before/index.html @@ -0,0 +1,230 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - CSS Pseudoelement + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/::before' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

::before erzeugt ein Pseudoelement, dass das erste Kind des gematchten Elements ist. Es wird oft dazu verwendet, um kosmetische Inhalte unter Verwendung der {{cssxref("content")}} Eigenschaft zu einem Element hinzuzufügen. Dieses Element ist standardmäßig inline.

+ +

Syntax

+ +
/* CSS3 Syntax */
+element::before { Stileigenschaften }
+
+/* CSS2 veraltete Syntax (nur benötigt, um IE8 zu unterstützen) */
+element:before  { Stileigenschaften }
+
+/* Fügt Inhalte vor jedem <p> Element ein */
+p::before { content: "Hallo Welt!"; }
+ +

Die ::before Notation (mit zwei Doppelpunkten) wurde in CSS 3 eingeführt, um eine Unterscheidung zwischen Pseudoklassen und Pseudoelementen einzuführen. Browser unterstützen auch die :before Notation, wie sie in CSS 2 eingeführt wurde.

+ +

Beispiele

+ +

Hinzufügen von Anführungszeichen

+ +

Ein einfaches Beispiel für die Verwendung von ::before Pseudoelementen ist das Hinzufügen von Anführungszeichen. Hier werden ::before und ::after verwendet, um Anführungszeichen einzufügen.

+ +

HTML Inhalt

+ +
<q>Ein paar Anführungszeichen</q>, sagte er, <q>sind besser als keine</q>.
+ +

CSS Inhalt

+ +
q::before {
+  content: "«";
+  color: blue;
+}
+q::after {
+  content: "»";
+  color: red;
+}
+ +

Ausgabe

+ +

{{EmbedLiveSample('Hinzufügen_von_Anführungszeichen', '500', '50')}}

+ +

Dekoratives Beispiel

+ +

Wir können Text oder Bilder innerhalb der {{cssxref("content")}} Eigenschaft fast beliebig stylen.

+ +

HTML Inhalt

+ +
<span class="ribbon">Beachte, wo die orange Box ist.</span>
+ +

CSS content

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Sieh dir diese orange Box an.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Ausgabe

+ +

{{EmbedLiveSample('Dekoratives_Beispiel', 450, 60)}}

+ +

Todo-Liste

+ +

In diesem Beispiel erstellen wir eine einfache Todo-Liste mit Hilfe von Pseudoelementen. Diese Methode kann oft dazu verwendet werden, kleine Änderungen an der Benutzerschnittstelle hinzuzufügen und die User Experience zu verbessern.

+ +

HTML Inhalt

+ +
<ul>
+  <li>Milch kaufen</li>
+  <li>Mit Hund Gassi gehen</li>
+  <li>Trainieren</li>
+  <li>Code schreiben</li>
+  <li>Musik spielen</li>
+  <li>Entspannen</li>
+</ul>
+
+ +

CSS Inhalt

+ +
li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}
+ +

JavaScript Inhalt

+ +
var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+
+ +

Das obige Beispiel ist ein Livebeispiel. Beachte, dass keine Symbole verwendet werden und dass der Haken in Wirklichkeit das ::before ist, dass durch CSS dargestellt wird.

+ +

Ausgabe

+ +

{{EmbedLiveSample('Todo-Liste', 400, 300)}}

+ +

Hinweise

+ +

Obwohl die Fehlerbehebungen in Firefox 3.5 bzgl. Positionierung es nicht erlauben, Inhalte als ein separates, vorheriges Geschwisterelement zu erstellen (wie die CSS Spezifikation sagt "The :before and :after pseudo-elements elements interact with other boxes [...] as if they were real elements inserted just inside their associated element.", etwa: "Die :before- und :after-Pseudo-Elemente interagieren mit anderen Boxen [...] so als wären sie reale Elemente, die in dem dazugehörigen Element eingefügt wären), können Sie dennoch eingesetzt werden um leichte Verbesserungen in tabellenlosen Layouts (z.B. um ein Element zu zentrieren) zu erhalten. Solange der zu zentrierende Inhalt ein Kindelement ist, können eine vorhergehende und nachfolgende Spalte eingefügt werden ohne eigene Elemente dafür zu verwenden (d.h., es ist eventuell semantisch korrekter, wie unten in dem Beispiel, ein zusätzliches span-Element anstelle jeweils eines leeres div-Elements davor und danach einzufügen). (Und denke immer daran, einem gefloateten Element eine Breite zu geben, andernfalls wird es nicht floaten!)

+ +

HTML Inhalt

+ +
<div class="example">
+<span id="floatme">"Davor umflossen" sollte links vom Viewport erstellt werden
+und Umfluss in dieser Zeile nicht erlauben, sie unterhalb zu umfließen. Genauso sollte
+"Danach umflossen" rechts vom Viewport erscheinen und dieser Zeile nicht erlauben, es unterhalb zu umfließen.</span>
+</div>
+ +

CSS Inhalt

+ +
#floatme {
+  float: left; width: 50%;
+}
+
+/* Um eine leere Spalte zu erhalten, einfach den hexadezimalen Wert für einen nicht umbrechenden Leerraum angeben: \a0 als Attributwert für content (verwende \0000a0 wenn weitere Zeichen folgen) */
+.example::before {
+  content: "Davor umflossen";
+  float: left;
+  width: 25%
+}
+.example::after {
+  content: "Danach umflossen";
+  float: right;
+  width:25%
+}
+
+/* For styling */
+.example::before, .example::after, .first {
+  background: yellow;
+  color: red;
+}
+ +

Ausgabe

+ +

{{EmbedLiveSample("Hinweise")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}Keine wesentlichen Änderungen zur vorherigen Spezifikation.
{{Specname("CSS3 Transitions", "#animatable-properties", "Übergänge bei Pseudoelement Eigenschaften")}}{{Spec2("CSS3 Transitions")}}Erlaubt Übergänge bei Eigenschaften, die für Pseudoelemente definiert sind.
{{Specname("CSS3 Animations", "", "Animationen bei Pseudoelement Eigenschaften")}}{{Spec2("CSS3 Animations")}}Erlaubt Animationen bei Eigenschaften, die für Pseudoelemente definiert sind.
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}Führt die Zwei-Doppelpunkte-Syntax ein.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition, unter Verwendung der Ein-Doppelpunkt-Syntax
+ +

Browser Kompatibililtät

+ +

{{Compat("css.selectors.before")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_placeholder/index.html b/files/de/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..d63f9b7cc7 --- /dev/null +++ b/files/de/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,150 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +tags: + - CSS + - Referenz +translation_of: 'Web/CSS/::placeholder' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Das ::placeholder CSS Pseudo-Element stellt den Platzhaltertext eines Formular-Elements dar.

+ +
::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}
+ +

Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using ::placeholder in its selector.

+ +
+

Note: In Firefox, the appearance of placeholder text is a translucent gray color by default.

+
+ +

Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Red text

+ +

HTML

+ +
<input placeholder="Type something here!">
+ +

CSS

+ +
input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample("Red_text", 200, 60)}}

+ +

Green text

+ +

HTML

+ +
<input placeholder="Type something here...">
+ +

CSS

+ +
input::placeholder {
+  color: green;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Green_text", 200, 60)}}

+ +

Accessibility concerns

+ +

Color contrast

+ +

Contrast Ratio

+ +

Placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.

+ +

It is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputed data.

+ +

Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

+ + + +

Usability

+ +

Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an {{htmlelement("input")}} element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.

+ +

An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use aria-describedby to programmatically associate the {{HTMLElement("input")}} with its hint.

+ +

With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use aria-describedby to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.

+ +
<label for="user-email">Your email address</label>
+<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
+<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
+
+ + + +

Windows High Contrast Mode

+ +

Placeholder text will appear with the same styling as user-entered text content when rendered in Windows High Contrast Mode. This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.

+ + + +

Labels

+ +

Placeholders are not a replacement for the {{htmlelement("label")}} element. Without a label that has been programmatically associated with an input using a combination of the {{htmlattrxref("for", "label")}} and {{htmlattrxref("id")}} attributes, assistive technology such as screen readers cannot parse {{htmlelement("input")}} elements.

+ + + +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}{{Spec2('CSS4 Pseudo-Elements')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("css.selectors.placeholder")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_selection/index.html b/files/de/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..d8d1197db3 --- /dev/null +++ b/files/de/web/css/_doublecolon_selection/index.html @@ -0,0 +1,86 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +tags: + - CSS + - CSS Pseudoelement + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/::selection' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Das ::selection CSS Pseudoelement weist dem durch den Benutzer ausgewählten Bereich (z. B. mit der Maus oder einem anderen Zeigegerät) eines Dokuments Regeln zu.

+ +

Nur ein kleiner Teil der CSS Eigenschaften kann innerhalb einer Regel benutzt werden, die ::selection in ihrem Selektor verwendet: {{cssxref("color")}}, {{cssxref("background")}}, {{cssxref("background-color")}} und {{cssxref("text-shadow")}}. Zu beachten ist insbesondere, dass {{cssxref("background-image")}} ignoriert wird, sowie alle anderen Eigenschaften.

+ +
+

{{cssxref("text-shadow")}} in ::selection wird von Chrome, Safari und Firefox 17+ unterstützt.

+
+ +

Obwohl dieses Pseudoelement in Entwürfen von CSS Selektoren Level 3 war, wurde es während der Candidate Recommendation Phase entfernt, da sein Verhalten nicht genau definiert erschien, besonders in Beziehung zu verschachtelten Elementen, und Interoperabilität war nicht gegeben (auf Grundlage einer Diskussion in der W3C Style Mailingliste).
+
+ Das ::selection Pseudoelement wurde in Pseudo-Elements Level 4 wieder hinzugefügt.

+ +

Beispiel

+ +

Gecko ist die einzige Engine, die einen Präfix benötigt. Dadurch, dass die CSS Parsingregeln verlangen, dass die gesamte Regel verworfen wird, falls ein ungültiges Pseudoelement gefunden wird, müssen zwei separate Regeln geschrieben werden: ::-moz-selection, ::selection {...}. Die Regel würde von nicht-Gecko Browsern verworfen werden, da ::-moz-selection für sie ungültig ist.

+ +

HTML

+ +
<div>Dies ist etwas Text für dich, um CSS' ::selection Pseudoklasse zu testen.</div>
+<p>Versuche auch, etwas Text in diesem &lt;p&gt;</p> zu markieren
+ +

CSS

+ +
/* Zeichnet jeden markierten Text gelb auf rotem Hintergrund */
+::-moz-selection {
+  color: gold; background: red;
+}
+
+::selection {
+  color: gold; background: red;
+}
+
+/* Zeichnet markierten Text innerhalb von Absätzen weiß auf schwarz */
+p::-moz-selection {
+  color: white;
+  background: black;
+}
+
+p::selection {
+  color: white;
+  background: black;
+}
+ +

Output

+ +

{{EmbedLiveSample('Beispiel')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}Ursprüngliche Definition
+ +

Das ::selection CSS Pseudoelement wurde für CSS Selectors Level 3 entworfen, aber entfernt bevor die Spezifikation Empfehlungsstatus erreicht hat. Es wurde als Teil des Pseudo-Elements Level 4 Entwurfs wieder hinzugefügt.

+ +

Browser Kompatibilität

+ +

{{Compat("css.selectors.selection")}}

diff --git a/files/de/web/css/alias/index.html b/files/de/web/css/alias/index.html new file mode 100644 index 0000000000..992dcda304 --- /dev/null +++ b/files/de/web/css/alias/index.html @@ -0,0 +1,10 @@ +--- +title: alias +slug: Web/CSS/Alias +tags: + - CSS +translation_of: Web/CSS/cursor +--- +

Der alias {{cssxref("cursor")}} Wert wird verwendet, um einen Alias oder ein Kürzel zu etwas, das erstellt wird, zu kennzeichnen. Der Aliaszeiger wird als ein Pfeil mit einem kleinen kurvigen Pfeil daneben dargestellt.

+ +

In Windows könnte der alias Zeiger so aussehen: Image:Cursor-moz_alias.png

diff --git a/files/de/web/css/align-content/index.html b/files/de/web/css/align-content/index.html new file mode 100644 index 0000000000..d899a26cfd --- /dev/null +++ b/files/de/web/css/align-content/index.html @@ -0,0 +1,212 @@ +--- +title: align-content +slug: Web/CSS/align-content +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - Layout + - Referenz +translation_of: Web/CSS/align-content +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die align-content CSS Eigenschaft richtet Flexcontainer Zeilen innerhalb des Flexcontainers aus, falls zusätzlicher Leerraum auf der Querachse zur Verfügung steht.

+ +

Diese Eigenschaft hat keine Auswirkung auf einzeilige Flexboxen.

+ +
{{cssinfo}}
+ +

Siehe die Verwendung von flexiblen Boxen für mehr Informationen.

+ +

Syntax

+ +
/* Packe Zeilen an den Start der Querachse */
+align-content: flex-start;
+
+/* Packe Zeilen an das Ende der Querachse */
+align-content: flex-end;
+
+/* Packe Zeilen um die Mitte der Querachse */
+align-content: center;
+
+/* Verteile Zeilen entlang der Querachse, Start und Ende */
+align-content: space-between;
+
+/* Verteile Zeilen gleichmäßig entlang der Querachse */
+align-content: space-around;
+
+/* Strecke Zeilen, um die gesamte Querachse auszufüllen */
+align-content: stretch;
+
+/* Globale Werte */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+
+ +

Werte

+ +
+
flex-start
+
Zeilen werden an den Start der Querachse gepackt. Der Querachsenstartrand der ersten Zeile und des Flexcontainers grenzen aneinander. Jede folgende Zeile grenzt die vorherige.
+
flex-end
+
Zeilen werden an das Ende der Querachse gepackt. Der Querachsenstartrand der letzten Zeile und des Flexcontainers grenzen aneinander. Jede vorhergehende Zeile grenzt die nächste.
+
center
+
Zeilen werden in die Mitte der Querachse gepackt. Die Zeilen grenzen aneinander und werden mittig innerhalb des des Flexcontainers ausgerichtet. Leerräume zwischen dem Querachsenstartrand des Flexcontainers und der ersten Zeile und zwischen dem Querachsenendrand des Flexcontainers und der letzten Zeile sind gleich.
+
space-between
+
Zeilen werden gleichmäßig innerhalb des Flexcontainers verteilt. Die Abstände werden so verteilt, dass sie zwischen zwei angrenzenden Elementen gleich sind. Querachsenstartrand und -endrand des Flexcontainers grenzen an den Rand der ersten bzw. letzten Zeile.
+
space-around
+
Zeilen werden gleichmäßig innerhalb des Flexcontainers verteilt, sodass die Leerräume zwischen zwei angrenzenden Zeilen gleich sind. Der Leerraum vor der ersten und nach der letzten Zeile entspricht der Hälfte des Leerraums zwischen zwei angrenzenden Zeilen.
+
stretch
+
Zeilen dehnen sich aus, um den verbleibenden Leerraum auszunutzen. Der Freiraum wird gleichmäßig auf alle Zeilen aufgeteilt.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

HTML:

+ +
<div id="container">
+  <p>align-content: flex-start</p>
+  <div id="flex-start">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: center</p>
+  <div id="center">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: flex-end</p>
+  <div id="flex-end">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: space-between</p>
+  <div id="space-between">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: space-around</p>
+  <div id="space-around">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: stretch</p>
+  <div id="stretch">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+ +

CSS:

+ +
#container > div {
+  display: flex;
+  flex-flow: row wrap;
+  width: 140px;
+  height: 140px;
+  background: linear-gradient(-45deg, #78ff8c, #b4ffc8);
+}
+
+#container > div > div {
+  margin: 2px;
+  width: 30px;
+  min-height: 30px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+#flex-start {
+  align-content: flex-start;
+}
+
+#center {
+  align-content: center;
+}
+
+#flex-end {
+  align-content: flex-end;
+}
+
+#space-between {
+  align-content: space-between;
+}
+
+#space-around {
+  align-content: space-around;
+}
+
+#stretch {
+  align-content: stretch;
+}
+ +

Ergibt:

+ +

{{ EmbedLiveSample('Beispiele', 600, 550) }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Flexbox', '#align-content', 'align-content')}}{{Spec2('CSS3 Flexbox')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

Support im Flex-Layout

+ +

{{Compat("css.properties.align-content.flex_context")}}

+ +

Support im Grid-Layout

+ +

{{Compat("css.properties.align-content.grid_context")}}

+ +

Siehe auch

+ + + +
{{CSSRef}}
diff --git a/files/de/web/css/align-items/index.html b/files/de/web/css/align-items/index.html new file mode 100644 index 0000000000..169081934b --- /dev/null +++ b/files/de/web/css/align-items/index.html @@ -0,0 +1,107 @@ +--- +title: align-items +slug: Web/CSS/align-items +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - Layout + - NeedsExample + - Referenz + - Web +translation_of: Web/CSS/align-items +--- +

{{ CSSRef("CSS Flexible Boxes") }}

+ +

Übersicht

+ +

Die align-items CSS Eigenschaft richtet Flexelemente der aktuellen Flexlinie genauso wie {{cssxref("justify-content")}} aus, jedoch in senkrechter Richtung.

+ +

{{cssinfo}}

+ +

Siehe die Verwendung von CSS Flexible Boxes für weitere Eigenschaften und Informationen.

+ +

Syntax

+ +
/* Am Kreuzungsstart ausrichten */
+align-items: flex-start;
+
+/* Am Kreuzungsende ausrichten */
+align-items: flex-end;
+
+/* Elemente um die Kreuzungsachse zentrieren */
+align-items: center;
+
+/* Basislinien der Elemente ausrichten */
+align-items: baseline;
+
+/* Elemente dehnen, um sie einzupassen */
+align-items: stretch;
+
+/* Globale Werte */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+
+ +

Werte

+ +
+
flex-start
+
Der Rand der Querachse des Flexelements grenzt an den Startrand der Querachse der Zeile.
+
flex-end
+
Der Rand der Querachse des Flexelements grenzt an den Endrand der Querachse der Zeile.
+
center
+
Die Außenabstandsbox des Flexelements wird innerhalb der Zeile auf der Querachse zentriert. Falls die vertikale Größe des Elements größer ist als der Flexcontainer, überragt es die Ränder gleichmäßig in beiden Richtungen.
+
baseline
+
Alle Flexelemente werden an deren Grundlinien ausgerichtet. Das Element mit dem größten Abstand zwischen seinem Startrand der Querachse und der Grundlinie grenzt an den Startrand der Zeile.
+
stretch
+
Flexelemente werden gedehnt, sodass die horizontale Größe der Außenabstandsbox des Elements mit der Zeile übereinstimmt, wobei Breiten- und Höhenbegrenzungen berücksichtigt werden.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

{{ TODO() }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS3 Flexbox', '#align-items', 'align-items') }}{{ Spec2('CSS3 Flexbox') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

Support im Flex-Layout

+ +

{{Compat("css.properties.align-items.flex_context")}}

+ +

Support im Grid-Layout

+ +

{{Compat("css.properties.align-items.grid_context")}}

+ +

[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

+ +

[2] In Internet Explorer 10-11 (aber nicht 12+), falls Spaltenflexelemente align-items: center; gesetzt haben und ihr Inhalt zu groß ist, überfließen sie die Grenzen ihres Containers. Siehe Flexbug #2 für mehr Informationen.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/align-self/index.html b/files/de/web/css/align-self/index.html new file mode 100644 index 0000000000..6f20312ee8 --- /dev/null +++ b/files/de/web/css/align-self/index.html @@ -0,0 +1,95 @@ +--- +title: align-self +slug: Web/CSS/align-self +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - Layout + - NeedsExample + - Referenz +translation_of: Web/CSS/align-self +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die align-self CSS Eigenschaft richtet Flexelemente der aktuellen Flexzeile aus und überschreibt dabei den Wert von {{cssxref("align-items")}}. Falls der Querachsenabstand irgendeines Flexelements auf auto gesetzt ist, wird align-self ignoriert.

+ +

{{cssinfo}}

+ +

Siehe die Verwendung von CSS Flexible Boxes für weitere Eigenschaften und Informationen.

+ +

Syntax

+ +
/* Schlüsselwort Werte */
+align-self: auto
+align-self: flex-start
+align-self: flex-end
+align-self: center
+align-self: baseline
+align-self: stretch
+
+/* Globale Werte */
+align-self: inherit;
+align-self: initial;
+align-self: unset;
+
+ +

Werte

+ +
+
auto
+
Verwendet den {{cssxref("align-items") }} Wert des Elternelements oder stretch, falls das Element kein Elternelement besitzt.
+
flex-start
+
Der Rand der Querachse des Flexelements grenzt an den Startrand der Querachse der Zeile.
+
flex-end
+
Der Rand der Querachse des Flexelements grenzt an den Endrand der Querachse der Zeile.
+
center
+
Die Außenabstandsbox des Flexelements wird innerhalb der Zeile auf der Querachse zentriert. Falls die vertikale Größe des Elements größer ist als der Flexcontainer, überragt es die Ränder gleichmäßig in beiden Richtungen.
+
baseline
+
Alle Flexelemente werden an deren Grundlinien ausgerichtet. Das Element mit dem größten Abstand zwischen seinem Startrand der Querachse und der Grundlinie grenzt an den Startrand der Zeile.
+
stretch
+
Flexelemente werden gedehnt, sodass die horizontale Größe der Außenabstandsbox des Elements mit der Zeile ist übereinstimmt, wobei Breiten- und Höhenbegrenzungen berücksichtigt werden.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS3 Box Alignment', '#align-self-property', 'align-self') }}{{ Spec2('CSS3 Box Alignment') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

Support im Flex-Layout

+ +

{{Compat("css.properties.align-self.flex_context")}}

+ +

Support im Grid-Layout

+ +

{{Compat("css.properties.align-self.grid_context")}}

+ +

[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/all/index.html b/files/de/web/css/all/index.html new file mode 100644 index 0000000000..5e2b7191e8 --- /dev/null +++ b/files/de/web/css/all/index.html @@ -0,0 +1,140 @@ +--- +title: all +slug: Web/CSS/all +tags: + - CSS + - CSS Cascade + - CSS Eigenschaft + - Layout + - Referenz +translation_of: Web/CSS/all +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die all CSS Kurzform Eigenschaft setzt alle Eigenschaften mit Ausnahme von {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} auf ihren ursprünglichen oder vererbten Wert zurück.

+ +

{{cssinfo}}

+ +

Syntax

+ +
all: initial;
+all: inherit;
+all: unset;
+
+ +

Werte

+ +
+
initial
+
Dieses Schlüsselwort gibt an, dass alle dem Element oder dem Elternelement zugewiesenen Eigenschaften auf deren ursprünglichen Wert geändert werden sollen. {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} Werte sind davon nicht betroffen.
+
inherit
+
Dieses Schlüsselwort gibt an, dass alle dem Element oder dem Elternelement zugewiesenen Eigenschaften auf den Wert des Elternelements geändert werden sollen. {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} Werte sind davon nicht betroffen.
+
unset
+
Dieses Schlüsselwort gibt an, dass alle dem Element oder dem Elternelement zugewiesenen Eigenschaften auf den Wert des Elternelements geändert werden sollen, falls sie vererbbar sind, ansonsten auf ihren ursprünglichen Wert. {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} Werte sind davon nicht betroffen.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

HTML

+ +
<blockquote id="quote">Lorem ipsum dolor sit amet.</blockquote> Phasellus eget velit sagittis.
+ +

CSS

+ +
html {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+
+ +

Ergibt:

+ +
+

Keine all Eigenschaft

+ + + + +{{EmbedLiveSample("Beispiel0", "200", "125")}} + +

Das {{HTMLElement("blockquote")}} Element verwendet die Standarddarstellung des Browsers zusammen mit einer angepassten Hintergrund- und Textfarbe. Es verhält sich auch wie ein Blockelement: Der Text, der ihm folgt, wird unter ihm angezeigt.

+
+ +
+

all:unset

+ + + + +{{EmbedLiveSample("Beispiel1", "200", "125")}} + +

Das {{HTMLElement("blockquote")}} Element verwendet nicht die Standarddarstellung des Browsers: Es ist jetzt ein Inlineelement (ursprünglicher Wert), seine {{cssxref("background-color")}} Eigenschaft ist transparent (ursprünglicher Wert), aber seine {{cssxref("font-size")}} Eigenschaft ist immer noch small (vererbter Wert) und seine {{cssxref("color")}} Eigenschaft ist blue (vererbter Wert).

+
+ +
+

all:initial

+ + + + +{{EmbedLiveSample("Beispiel2", "200", "125")}} + +

Das {{HTMLElement("blockquote")}} Element verwendet nicht die Standarddarstellung des Browsers: Es ist jetzt ein Inlineelement (ursprünglicher Wert), seine {{cssxref("background-color")}} Eigenschaft ist transparent (ursprünglicher Wert), seine {{cssxref("font-size")}} Eigenschaft ist normal (ursprünglicher Wert) und seine {{cssxref("color")}} Eigenschaft ist black (ursprünglicher Wert).

+
+ +
+

all:inherit

+ + + + +{{EmbedLiveSample("Beispiel3", "200", "125")}} + +

Das {{HTMLElement("blockquote")}} Element verwendet nicht die Standarddarstellung des Browsers: Es ist jetzt ein Blockelement (vererbter Wert seines beinhaltenden {{HTMLElement("div")}}), seine {{cssxref("background-color")}} Eigenschaft ist transparent (vererbter Wert), seine {{cssxref("font-size")}} Eigenschaft ist small (vererbter Wert) und seine {{cssxref("color")}} Eigenschaft ist blue (vererbter Wert).

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS3 Cascade') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.all")}}

+ +

Siehe auch

+ +

Die CSS-weiten Eigenschaften {{cssxref("initial")}}, {{cssxref("inherit")}} und {{cssxref("unset")}}.

diff --git a/files/de/web/css/alternative_style_sheets/index.html b/files/de/web/css/alternative_style_sheets/index.html new file mode 100644 index 0000000000..c03fa0ba1e --- /dev/null +++ b/files/de/web/css/alternative_style_sheets/index.html @@ -0,0 +1,47 @@ +--- +title: Alternative Style Sheets +slug: Web/CSS/Alternative_style_sheets +tags: + - CSS + - NeedsCompatTable +translation_of: Web/CSS/Alternative_style_sheets +--- +

Firefox unterstützt alternative Stylesheets. Seiten, die alternative Stylesheets anbieten, erlauben es dem Benutzer, über das Untermenü Ansicht > Webseiten-Stil den Stil auszuwählen, in dem die Seite angezeigt werden soll. Dies ermöglicht es Benutzern, basierend auf deren Bedürfnissen oder Vorlieben mehrere Versionen einer Seite zu sehen.

+ +

Eine Webseite kann das {{HTMLElement("link")}} verwenden, um alternative Stylesheets zu einem Dokument hinzuzufügen.

+ +

Zum Beispiel:

+ +
 <link href="default.css" rel="stylesheet" type="text/css" title="Standardstil">
+ <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Modisch">
+ <link href="basic.css" rel="alternate stylesheet" type="text/css" title="Schlicht">
+
+ +

Mittels dieser drei Stylesheets werden die Stile "Standardstil", "Modisch" und "Schlicht" im Webseiten-Stil Untermenü aufgelistet. Wenn der Benutzer einen Stil auswählt, wird die Darstellung der Seite sofort anhand des Stylesheets neu aufgebaut.

+ +

Wenn Stylesheets über ein title Attribut im {{HTMLElement("link")}} oder {{HTMLElement("style")}} Element referenziert werden, wird der Titel dem Benutzer als Auswahlmöglichkeit angeboten. Stylesheets, die mit demselben Titel eingebunden werden, sind Teil der gleichen Auswahl. Stylesheets, die ohne ein title Attribut eingebunden werden, werden immer angewandt.

+ +

rel="stylesheet" kann dazu verwendet werden, zum Standardstil zu verlinken, und rel="alternate stylesheet", um alternative Stylesheets zu verlinken. Dies teilt Firefox mit, welcher Stylesheet Titel standardmäßig ausgewählt werden soll und weist diese Standardauswahl in Browsern zu, die alternative Stylesheets nicht unterstützen.

+ +

Livebeispiel

+ +

Hier klicken, um ein funktionierendes Beispiel auszuprobieren.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}{{Spec2("HTML4.01")}}Ursprüngliche Definition
diff --git a/files/de/web/css/angle-percentage/index.html b/files/de/web/css/angle-percentage/index.html new file mode 100644 index 0000000000..6c6f726144 --- /dev/null +++ b/files/de/web/css/angle-percentage/index.html @@ -0,0 +1,50 @@ +--- +title: +slug: Web/CSS/angle-percentage +tags: + - CSS + - CSS Datentyp + - Einheiten + - Werte + - angle-percentage +translation_of: Web/CSS/angle-percentage +--- +
{{CSSRef}}
+ +

Der <angle-percentage> CSS-Datentyp stellt einen Wert dar, der entweder {{Cssxref("angle")}} oder ein {{Cssxref("percentage")}} sein kann.

+ +

Syntax

+ +

Für <angle-percentage>-Werte sind alle Werte syntaktisch gültig, die auch bei {{Cssxref("angle")}} oder {{Cssxref("percentage")}} syntaktisch gültig sind.

+ +

Verwendung mit calc()

+ +

Wenn <angle-percentage> ein zulässiger Typ ist, dann wird aus einem Prozentwert ein einfacher {{Cssxref("angle")}} errechnet. Daher kann <angle-percentage> in einem {{Cssxref("calc()")}}-Ausdruck verwendet werden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS3 Values')}}Definiert <angle-percentage>. calc() hinzugefügt.
+ +

Browser-Kompatibilität

+ +

{{Compat("css.types.angle-percentage")}}

diff --git a/files/de/web/css/angle/index.html b/files/de/web/css/angle/index.html new file mode 100644 index 0000000000..4003605ed4 --- /dev/null +++ b/files/de/web/css/angle/index.html @@ -0,0 +1,86 @@ +--- +title: +slug: Web/CSS/angle +tags: + - CSS + - CSS Data Type + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/angle +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Der CSS Datentyp <angle> steht für einen Winkel. Dieser kann positiv (rechts, im Uhrzeigersinn) oder negativ (links, gegen den Uhrzeigersinn) sein. Ein Winkel besteht immer aus einer {{cssxref("<number>")}}, gefolgt von einer Einheit (deg, grad, rad or turn). Wie auch bei anderen Werten mit Einheiten darf dazwischen kein Leerschlag sein.

+ +

Für statische Elemente können mehrere Schreibweisen zum selben Ergebnis führen (bspw. 90deg und -270deg oder 1turn und 4turn), bei dynamischen Eigenschaften wie zum Beispiel {{ cssxref("transition") }} kann die Schreibweise jedoch eine Auswirkung auf die Animation haben.

+ +

Die folgenden Einheiten können verwendet werden:

+ +
+
deg
+
definiert einen Winkel in Grad. Ein voller Kreis hat 360deg.
+
grad
+
definiert einen Winkel in Gon. Ein voller Kreis hat 400grad. +
Achtung: Nicht zu verwechseln mit Grad (siehe deg).
+
+
rad
+
definiert einen Winkel in Radianten.  Ein voller Kreis hat 2π Radianten, das entspricht etwa 6.2832rad. 1rad entspricht 180/π Grad.
+
turn
+
definiert einen Winkel in der Anzahl Umdrehungen. Ein voller Kreis besteht aus 1turn.
+
+ +

Alle Einheiten können auch den Wert 0 (oder 0deg, 0grad, 0rad, 0turn) annehmen, welcher unabhängig der Einheit immer dasselbe Ergebnis erzielt.

+ +

Beispiele

+ + + + + + + + + + + + + + + + + + + + +
Angle90.png +

Ein rechter Winkel (nach rechts, im Uhrzeigersinn): 90deg = 100grad = 0.25turn ≈ 1.5708rad

+
Angle180.pngEin flacher Winkel: 180deg = 200grad = 0.5turn ≈ 3.1416rad
AngleMinus90.pngEin rechter Winkel (nach links, gegen den Uhrzeigersinn): -90deg = -100grad = -0.25turn ≈ -1.5708rad
Angle0.png +

Ein Nullwinkel: 0 = 0deg = 0grad = 0turn = 0rad

+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Values', '#angles', '<angle>') }}{{ Spec2('CSS3 Values') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.types.angle")}}

diff --git a/files/de/web/css/angrenzende_geschwisterselektoren/index.html b/files/de/web/css/angrenzende_geschwisterselektoren/index.html new file mode 100644 index 0000000000..b5ff92dda2 --- /dev/null +++ b/files/de/web/css/angrenzende_geschwisterselektoren/index.html @@ -0,0 +1,88 @@ +--- +title: Angrenzende Geschwisterselektoren +slug: Web/CSS/Angrenzende_Geschwisterselektoren +tags: + - CSS + - CSS Referenz + - NeedsMobileBrowserCompatibility + - Selectors + - Selektoren +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +

{{CSSRef("Selectors")}}

+ +

Dies wird Nachbar- oder Nächstes-Geschwister-Element-Selektor genannt. Er selektiert nur das angegebene Element, das dem zuvor angegebenen Element direkt folgt.

+ +

Syntax

+ +
vorheriges_Element + Zielelement { Stileigenschaften }
+
+ +

Beispiel

+ +
li:first-of-type + li {
+  color: red;
+}
+
+ +
<ul>
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+</ul>
+ +

{{EmbedLiveSample('Beispiel', 200, 100)}}

+ +

Ein weiterer Anwendungsfall ist das Stylen von "Beschriftungs-spans" der darauffolgenden {{HTMLElement("img")}} Elemente:

+ +
img + span.caption {
+  font-style: italic;
+}
+
+ +

matcht die folgenden {{HTMLElement("span")}} Elemente:

+ +
<img src="photo1.jpg"><span class="caption">The first photo</span>
+<img src="photo2.jpg"><span class="caption">The second photo</span>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.adjacent_sibling")}} + +

[1] Internet Explorer 7 aktualisiert den Style nicht korrekt, wenn ein Element dynamisch vor einem Element platziert wurde, das auf den Selektor gepasst hat. Wenn in Internet Explorer 8 ein Element durch Klick auf einen Link dynamisch eingefügt wird, wird der :first-child-Stil nicht angewandt bis der Link den Fokus verliert.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation-delay/index.html b/files/de/web/css/animation-delay/index.html new file mode 100644 index 0000000000..d6dd7702b9 --- /dev/null +++ b/files/de/web/css/animation-delay/index.html @@ -0,0 +1,78 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz + - Web +translation_of: Web/CSS/animation-delay +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die animation-delay CSS Eigenschaft gibt an, wann eine Animation starten soll. Dies lässt die Animationssequenz einige Zeit später starten nachdem sie einem Element zugewiesen wurde.

+ +

Ein Wert von 0s, welcher der Standardwert für die Eigenschaft ist, gibt an, dass die Animation starten soll sobald sie zugewiesen wird. Andernfalls legt der Wert eine Verzögerung von dem Moment fest, an dem die Animation dem Element zugewiesen wird; die Animation startet um diesen Wert verzögert nachdem sie zugewiesen wurde.

+ +

Falls ein negativer Wert für die Animationsverzögerung zugewiesen wird,  wird die Animation sofort ausgeführt. Jedoch wird sie so dargestellt, als ob sie vor dem Animationszyklus begonnen hat. Zum Beispiel, wenn Sie -1s als die Animationsverzögerungszeit angeben, wird die Animation sofort starten, allerdings 1 Sekunde innerhalb der Animationssequenz.

+ +

Falls Sie einen negativen Wert für die Animationsverzögerung angeben, der Startwert jedoch implizit ist, wird der Moment, an dem die Animation dem Element zugewiesen wird, als Startwert verwendet.

+ +

Es ist oft einfacher, die Kurzform Eigenschaft {{cssxref("animation")}} zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+
+ +
animation-delay: 3s
+animation-delay: 2s, 4ms
+
+ +

Werte

+ +
+
<time>
+
Der Zeitversatz von dem Zeitpunkt, an dem die Animation dem Element zugewiesen wird, nach dem die Animation starten soll. Dieser kann entweder in Sekunden angegeben werden (mittels s als Einheit) oder in Millisekunden (mittels ms als Einheit). Falls keine Einheit angegeben wird, ist der Ausdruck ungültig.
+
+ +

Beispiele

+ +

Siehe CSS Animationen für Beispiele.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}{{Spec2('CSS3 Animations')}} 
+ +

Browser-Kompatibilität

+ +{{Compat("css.properties.animation-delay")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/animation-direction/index.html b/files/de/web/css/animation-direction/index.html new file mode 100644 index 0000000000..0f62a3b74f --- /dev/null +++ b/files/de/web/css/animation-direction/index.html @@ -0,0 +1,91 @@ +--- +title: animation-direction +slug: Web/CSS/animation-direction +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz + - Web +translation_of: Web/CSS/animation-direction +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die animation-direction CSS Eigenschaft gibt an, ob die Animation rückwärts oder in Wechelzyklen abgespielt werden soll.

+ +

Es ist oft einfacher, die Kurzschreibweise {{cssxref("animation")}} zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Einzelne Animation */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* Mehrere Animationen */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* Globale Werte */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+
+ +

Werte

+ +
+
normal
+
Die Animation wird in jedem Durchlauf vorwärts abgespielt. In anderen Worten, jedesmal, wenn der nächste Zyklus der Animation beginnt, wird die Animation auf den Anfangszustand zurückgesetzt und beginnt erneut. Dies ist die Standardeinstellung der Animationsrichtung.
+
alternate
+
Die Animation ändert in jedem Durchlauf die Richtung. Wenn die Animation umgekehrt abgespielt wird, werden die Animationsschritte rückwärts ausgeführt. Des weiteren werden Timingfunktionen ebenfalls umgekehrt; zum Beispiel wird eine ease-in Animation durch eine ease-out Animation ersetzt, wenn sie rückwärts abgespielt wird. Die Zählung zur Bestimmung, ob es sich um eine gerade oder ungerade Iteration handelt, beginnt bei eins.
+
reverse
+
Die Animation wird in jedem Durchlauf rückwärts abgespielt. Jedes Mal, wenn der nächste Zyklus der Animation beginnt, wird die Animation auf den Endzustand zurückgesetzt und beginnt erneut.
+
alternate-reverse
+
Die Animation wird beim ersten Durchlauf rückwärts abgespielt, beim nächsten vorwärts und fährt danach abwechselnd fort. Die Zählung zur Bestimmung, ob es sich um eine gerade oder ungerade Iteration handelt, beginnt bei eins.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Siehe CSS Animationen für Beispiele.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}}{{Spec2('CSS3 Animations')}}For the two new values, see the W3C discussion.
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.animation-direction")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation-duration/index.html b/files/de/web/css/animation-duration/index.html new file mode 100644 index 0000000000..e602ec194d --- /dev/null +++ b/files/de/web/css/animation-duration/index.html @@ -0,0 +1,79 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz +translation_of: Web/CSS/animation-duration +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die animation-duration CSS Eigenschaft bestimmt die Ablaufdauer einer Animation.

+ +

Der Standartwert ist 0s, somit wird keine Animation ausgeführt.

+ +

Anstelle von animation-duration kann auch die Kurzschreibweise {{ cssxref("animation") }} verwendet werden.

+ +

{{cssinfo}}

+ +

Syntax

+ +
animation-duration: 6s;
+animation-duration: 120ms;
+animation-duration: 1s, 15s;
+animation-duration: 10s, 30s, 230ms;
+
+ +

Werte

+ +
+
<time>
+
Die Ablaufdauer der Animation wird in Sekunden (s) oder Millisekunden (ms) angegeben. Ohne Angabe einer Masseinheit ist der Wert ungültig. Negative Werte sind nicht zulässig.
+
+ +
Hinweis: Einige ältere Implementierungen mit Präfix interpretieren negative Werte als 0s.
+ +

Formale Syntax

+ +
{{csssyntax}}
+
+ +

Beispiele

+ +

Siehe CSS animations

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}{{ Spec2('CSS3 Animations') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.animation-duration")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation-fill-mode/index.html b/files/de/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..adfb23a43a --- /dev/null +++ b/files/de/web/css/animation-fill-mode/index.html @@ -0,0 +1,145 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/animation-fill-mode +--- +
{{ CSSRef() }}
+ +

Übersicht

+ +

animation-fill-mode definiert den Zustand einer Animation vor und nach deren Ablauf.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+
+ +
animation-fill-mode: none
+animation-fill-mode: forwards
+animation-fill-mode: backwards
+animation-fill-mode: both
+
+The # indicates that several values may be given, separated by commas.
+Each applies to the animation defined in the same order in animation-name.
+animation-fill-mode: none, backwards
+animation-fill-mode: both, forwards, none
+
+ +

Werte

+ +
+
none
+
Das Element nimmt keine Werte der Animation an.
+
forwards
+
Das Element nimmt nach Ablauf die Werte des letzten Animationsschrittes an, unter der Berücksichtigung von {{ cssxref("animation-direction") }} und {{ cssxref("animation-iteration-count") }}: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
animation-directionanimation-iteration-countLetzte keyframe Regel
normalgerade oder ungerade100% oder to
reversegerade oder ungerade0% oder from
alternategerade0% oder from
alternateungerade100% oder to
alternate-reversegerade100% oder to
alternate-reverseungerade0% oder from
+
+
backwards
+
Das Element nimmt die Werte des ersten Animationsschrittes an und behält diesen auch während der {{ cssxref("animation-delay") }} Zeit. {{ cssxref("animation-direction") }} wird wie folgt gehandhabt: + + + + + + + + + + + + + + + + + +
animation-directionErste keyframe Regel
normal oder alternate0% oder from
reverse oder alternate-reverse100% oder to
+
+
both
+
Vereint die Werte backwards und forwards.
+
+ +

Beispiele

+ +
h1 {
+  animation-fill-mode: forwards;
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode') }}{{ Spec2('CSS3 Animations') }} 
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.animation-fill-mode")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation-iteration-count/index.html b/files/de/web/css/animation-iteration-count/index.html new file mode 100644 index 0000000000..a1e7d3c3e9 --- /dev/null +++ b/files/de/web/css/animation-iteration-count/index.html @@ -0,0 +1,75 @@ +--- +title: animation-iteration-count +slug: Web/CSS/animation-iteration-count +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/animation-iteration-count +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Eigenschaft animation-iteration-count  legt die Anzahl Wiederholungen der Animation fest.

+ +

Meistens wird die Kurzform {{ cssxref("animation") }} genutzt, um alle Eigenschaften der Animation auf einen Blick zu haben.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+
+ +
animation-iteration-count: infinite
+animation-iteration-count: 3
+animation-iteration-count: 2.3
+
+animation-iteration-count: 2, 0, infinite
+
+ +

Werte

+ +
+
infinite
+
Die Animation wird unbegrenzt wiederholt.
+
<number>
+
Die Anzahl Wiederholungen der Animation. Standartmässig ist dieser Wet 1. Negative Werte sind nicht zulässig. Es können auch Dezimalzahlen genutzt werden um nur einen Teil der Animation abzuspielen (z. B. 0.5 spielt die nur die Halbe Animation ab).
+
+ +

Beispiel

+ +

Siehe CSS Animationen.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}{{ Spec2('CSS3 Animations') }} 
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.animation-iteration-count")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation-name/index.html b/files/de/web/css/animation-name/index.html new file mode 100644 index 0000000000..5b755b8b35 --- /dev/null +++ b/files/de/web/css/animation-name/index.html @@ -0,0 +1,86 @@ +--- +title: animation-name +slug: Web/CSS/animation-name +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz + - Web +translation_of: Web/CSS/animation-name +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die animation-name CSS Eigenschaft definiert eine Liste von Animationen, welche dem Element zugeortnet werden sollen. Jeder name steht für eine {{cssxref("@keyframes")}} Regel, welche den Ablauf der Animation definiert.

+ +

Meistens wird die Kurzform {{cssxref("animation")}} genutzt, um alle Eigenschaften der Animation auf einen Blick zu haben.

+ +

{{cssinfo}}

+ +

Syntax

+ +
animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+animation-name: test1;
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+/* Globale Werte */
+animation-name: initial;
+animation-name: inherit;
+animation-name: unset;
+
+ +

Werte

+ +
+
none
+
Keine Animation soll abgespielt werden. Dieser Wert ermöglicht das deaktivieren einer Animation, ohne die dazugehörigen Eigenschaften und Regeln zu ändern.
+
IDENT
+
Eine beliebige Zeichenkette aus den Buchstaben a bis z, Zahlen 0 bis 9, Bodenstriche (_), und oder Bindestriche (-). Das erste Zeichen muss ein Buchstabe oder einer der beiden zugelassenen Striche sein. Es dürfen nicht zwei hintereinandeflogende Striche am Anfang stehen.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Siehe CSS Animationen für Beispiele.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}{{Spec2('CSS3 Animations')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.animation-name")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation-play-state/index.html b/files/de/web/css/animation-play-state/index.html new file mode 100644 index 0000000000..7520037251 --- /dev/null +++ b/files/de/web/css/animation-play-state/index.html @@ -0,0 +1,84 @@ +--- +title: animation-play-state +slug: Web/CSS/animation-play-state +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz + - Web +translation_of: Web/CSS/animation-play-state +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die animation-play-state CSS Eigenschaft bestimmt, ob eine Animation abläuft oder pausiert ist. Der Wert dieser Eigenschaft kann abgefragt werden, um festzustellen, ob die Animation gerade abläuft oder nicht; darüber hinaus kann der Wert auch gesetzt werden, um die das Abspielen der Animation anzuhalten und fortzusetzen.

+ +

Wenn eine pausierte Animation fortgesetzt wird, wird sie dort gestartet, wo sie angehalten wurde, nicht vom Anfang der Animationssequenz.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Einzelne Animation */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* Mehrere Animationen */
+animation-play-state: paused, running, running;
+
+/* Globale Werte */
+animation-play-state: inherit;
+animation-play-state: initial;
+animation-play-state: unset;
+
+ +

Werte

+ +
+
running
+
Die Animation läuft aktuell ab.
+
paused
+
Die Animation ist aktuell pausiert.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Siehe CSS Animationen für Beispiele.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}{{Spec2('CSS3 Animations')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.animation-play-state")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation-timing-function/index.html b/files/de/web/css/animation-timing-function/index.html new file mode 100644 index 0000000000..8f73828d74 --- /dev/null +++ b/files/de/web/css/animation-timing-function/index.html @@ -0,0 +1,93 @@ +--- +title: animation-timing-function +slug: Web/CSS/animation-timing-function +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Layout + - Referenz +translation_of: Web/CSS/animation-timing-function +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die animation-timing-function CSS Eigenschaft gibt an, wie eine CSS Animation über die Dauer eines Zyklus verlaufen soll. Die möglichen Werte sind eine oder mehrere {{cssxref("<timing-function>")}}.

+ +

Für Schlüsselbildanimationen wird die Timingfunktion zwischen den Schlüsselbildern angewandt, anstatt über die gesamte Animation. Mit anderen Worten, die Timingfunktion wird auf den Start des Schlüsselbildes und an dessen Ende angewandt.

+ +

Eine Animationstimingfunktion, die innerhalb eines Schlüsselbildblocks definiert wurde, wird auf dieses Schlüsselbild angewandt. Falls keine Timingfunktion für das Schlüsselbild angegeben wurde, wird die Timingfunktion verwendet, die für die gesamte Animation definiert wurde.

+ +

Es ist oftmals einfacher, die Kurzform Eigenschaft {{cssxref("animation")}} zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Funktionswerte */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* Mehrere Animationen */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Globale Werte */
+animation-timing-function: inherited;
+animation-timing-function: initial;
+animation-timing-function: unset;
+
+ +

Werte

+ +
+
<timingfunction>
+
Jeder {{cssxref("<timing-function>")}} Wert repräsentiert die Timingfunktion, die mit der dazugehörigen zu animierenden Eigenschaft verknüpft wird, die in {{ cssxref("animation-property") }} definiert wird.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Siehe CSS Animationen für Beispiele

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.animation-timing-function")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation/index.html b/files/de/web/css/animation/index.html new file mode 100644 index 0000000000..77ff733e13 --- /dev/null +++ b/files/de/web/css/animation/index.html @@ -0,0 +1,125 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/animation +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Eigenschaft animation fasst die folgenden Werte zusammen: {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}} und {{cssxref("animation-direction")}}.

+ +

Eine Beschreibung der animierbaren CSS Eigenschaften ist verfügbar; es sollte auch angemerkt werden, dass diese Beschreibung auch für CSS Übergänge gilt.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* @keyframes Dauer | Timingfunktion | Verzögerung |
+   Anzahl der Iterationen | Richtung | Füllmodus | Abspielstatus | Name */
+  animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes Dauer | Timingfunktion | Verzögerung | Name */
+  animation: 3s linear 1s slidein;
+
+/* @keyframes Dauer | Name */
+  animation: 3s slidein;
+
+ +

Die Reihenfolge innerhalb jeder Animationsdefinition ist wichtig: Der erste Wert in der Einheit {{cssxref("<time>")}} wird als {{cssxref("animation-duration")}} interpretiert, der zweite als {{cssxref("animation-delay")}}.

+ +

Beachte, dass die Reihenfolge auch innerhalb jeder Animationsdefinition wichtig ist, um {{cssxref("animation-name")}} Werte von anderen Schlüsselwörtern zu unterscheiden. Beim Parsen müssen Werte von Schlüsselwörtern, die für Eigenschaften außer {{cssxref("animation-name")}} gültig sind und nicht zuvor in der Kurzschreibweiseeigenschaft gefunden wurden, für diese Eigenschaften anstatt für {{cssxref("animation-name")}} verwendet werden. Zudem müssen bei der Serialisierung die Standardwerte anderer Eigenschaften zumindest in den Fällen ausgegeben werden, in denen es nötig ist, einen {{cssxref("animation-name")}}, der ein gültiger Wert einer anderen Eigenschaft sein könnte, zu unterscheiden, und können in zusätzlichen Fällen ausgegeben werden.

+ +

Formale Syntax

+ +
{{csssyntax}}
+
+ +

Beispiele

+ +

Siehe CSS Animationen.

+ +

Zylonenauge

+ +

Unter Berücksichtigung aller browserspezifischen Präfixe ist hier eine Zylonenauge-Animation, die lineare Farbverläufe und Animationen verwendet, die in allen Browsern funktioniert:

+ +
<div class="view_port">
+  <div class="polling_message">
+    Warte auf Nachrichten
+  </div>
+  <div class="cylon_eye"></div>
+</div>
+
+ +
.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image: -webkit-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:    -moz-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:      -o-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: move_eye 4s linear 0s infinite alternate;
+     -moz-animation: move_eye 4s linear 0s infinite alternate;
+       -o-animation: move_eye 4s linear 0s infinite alternate;
+          animation: move_eye 4s linear 0s infinite alternate;
+}
+
+@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+     @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+
+ +

{{EmbedLiveSample('Zylonenauge')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Animations', '#animation', 'animation')}}{{Spec2('CSS3 Animations')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.animation")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/appearance/index.html b/files/de/web/css/appearance/index.html new file mode 100644 index 0000000000..12a67f3f60 --- /dev/null +++ b/files/de/web/css/appearance/index.html @@ -0,0 +1,1532 @@ +--- +title: '-moz-appearance (-webkit-appearance)' +slug: Web/CSS/appearance +tags: + - CSS + - CSS Referenz + - nicht Standard +translation_of: Web/CSS/appearance +--- +
{{non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die CSS-Eigenschaft -moz-appearance wird von Gecko (Firefox) dazu verwendet, um ein Element mit dem nativen Stil der Plattform anzuzeigen, wie er im Betriebssystem eingestellt ist.

+ +

Diese Eigenschaft wird häufig in XUL-Stylesheets verwendet, um individuelle Eingabefelder passend zur Plattform zu gestalten. Auch die XBL-Implementierungen der in Mozilla enthaltenen Bedienelemente verwenden diese Eigenschaft.

+ +
+

Verwende diese Eigenschaft nicht für Websites: Sie entspricht nicht den Webstandards und ihre Auswirkungen unterscheiden sich von einem Browser zum anderen. Sogar der Wert none hat in den verschiedenen Browsern kein einheitliches Verhalten für alle Formularelemente, und teilweise wird sie überhaupt nicht unterstützt.

+
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Partielle Liste verfügbarer Werte in Gecko */
+-moz-appearance: none;
+-moz-appearance: button;
+-moz-appearance: checkbox;
+-moz-appearance: scrollbarbutton-up;
+
+/* Partielle Liste verfügbarer Werte in WebKit/Blink */
+-webkit-appearance: none;
+-webkit-appearance: button;
+-webkit-appearance: checkbox;
+-webkit-appearance: scrollbarbutton-up;
+
+ +

Werte

+ +

<appearance> ist eines der folgenden Schlüsselwörter:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WertDemoBeschreibung
none + + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}Keine besondere Formatierung wird angewandt. Dies ist der Standardwert. Beachten Sie aber {{ bug(649849) }} und {{ bug(605985) }}.
button + + {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}Das Element wird wie eine Schaltfläche gezeichnet.
button-arrow-down + + {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}} 
button-arrow-next + + {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}} 
button-arrow-previous + + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}} 
button-arrow-up + + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}} 
button-bevel + + {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}} 
button-focus + + {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}} 
caret + + {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}} 
checkbox + + {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}Das Element wird wie der innere Teil einer Checkbox gezeichnet.
checkbox-container + + {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}Das Element wird wie ein Container für eine Checkbox gezeichnet, was einen vorilluminierenden Hintergrundeffekt unter bestimmten Plattformen beinhaltet. Normalerweise beinhaltet er ein Label und eine Checkbox.
checkbox-label + + {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}} 
checkmenuitem + + {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}} 
dualbutton + + {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}} 
groupbox + + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}} 
listbox + + {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}} 
listitem + + {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}} 
menuarrow + + {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}} 
menubar + + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}} 
menucheckbox + + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}} 
menuimage + + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}} 
menuitem + + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}Das Element wird wie ein Menüeintrag dargestellt, wobei der Eintrag hervorgehoben wird, wenn sich der Mauscursor darüber befindet.
menuitemtext + + {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}} 
menulist + + {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}} 
menulist-button + + {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}Das Element wird wie eine Schaltfläche dargestellt, die eine Menüliste darstellt, die geöffnet werden kann.
menulist-text + + {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}} 
menulist-textfield + + {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}Dieses Element wird wie ein Texteingabefeld einer Menüliste dargestellt. (Nicht für die Windows Plattform implementiert.)
menupopup + + {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}} 
menuradio + + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}} 
menuseparator + + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}} 
meterbar + + {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}Neu in Firefox 16
meterchunk + + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}Neu in Firefox 16
progressbar + + {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}Das Element wird wie ein Fortschrittsbalken dargestellt.
progressbar-vertical + + {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}} 
progresschunk + + {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}} 
progresschunk-vertical + + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}} 
radio + + {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}Das Element wird wie der innere Teil eines Radiobuttons gezeichnet.
radio-container + + {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}Das Element wird wie ein Container für einen Radiobutton gezeichnet, was einen vorilluminierenden Hintergrundeffekt unter bestimmten Plattformen beinhaltet. Normalerweise beinhaltet er ein Label und einen Radiobutton.
radio-label + + {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}} 
radiomenuitem + + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}} 
resizer + + {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}} 
resizerpanel + + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}} 
scale-horizontal + + {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}} 
scalethumbend + + {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}} 
scalethumb-horizontal + + {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}} 
scalethumbstart + + {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}} 
scalethumbtick + + {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}} 
scalethumb-vertical + + {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}} 
scale-vertical + + {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}} 
scrollbarbutton-down + + {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}} 
scrollbarbutton-left + + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}} 
scrollbarbutton-right + + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}} 
scrollbarbutton-up + + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}} 
scrollbarthumb-horizontal + + {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}} 
scrollbarthumb-vertical + + {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}} 
scrollbartrack-horizontal + + {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}} 
scrollbartrack-vertical + + {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}} 
searchfield + + {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}} 
separator + + {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}} 
sheet + + {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}} 
spinner + + {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}} 
spinner-downbutton + + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}} 
spinner-textfield + + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}} 
spinner-upbutton + + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}} 
splitter + + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}} 
statusbar + + {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}} 
statusbarpanel + + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}} 
tab + + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}} 
tabpanel + + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}} 
tabpanels + + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}} 
tab-scroll-arrow-back + + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}} 
tab-scroll-arrow-forward + + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}} 
textfield + + {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}} 
textfield-multiline + + {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}} 
toolbar + + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}} 
toolbarbutton + + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}} 
toolbarbutton-dropdown + + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}} 
toolbargripper + + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}} 
toolbox + + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}} 
tooltip + + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}} 
treeheader + + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}} 
treeheadercell + + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}} 
treeheadersortarrow + + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}} 
treeitem + + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}} 
treeline + + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}} 
treetwisty + + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}} 
treetwistyopen + + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}} 
treeview + + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}} 
-moz-mac-unified-toolbar + + {{EmbedLiveSample("sampleMacUnifiedToolbar",100,50,"","", "nobutton")}}Nur Mac OS X. Dies ermöglicht die Darstellung von Toolbar und Titelleiste unter Verwendung des einheitlichen Toolbarstils, wie er in  Anwendungen unter Mac OS X 10.4 und neuer zu sehen ist.
{{ gecko_minversion_inline("2.0") }} -moz-win-borderless-glass + + {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}Nur Windows Vista und neuer. Dieser Stil wendet den Aero Glass Effekt - aber ohne einen Rahmen - auf das Element an.
-moz-win-browsertabbar-toolbox + + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}Nur Windows Vista und neuer. Dieser Toolboxstil ist dazu gedacht, um für die Tableiste in einem Browser verwendet zu werden.
-moz-win-communicationstext + + {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}} 
-moz-win-communications-toolbox + + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}Nur Windows Vista und neuer. Dieser Toolboxstil ist dazu gedacht, in Kommunikations- und Produktivitätsanwendungen verwendet zu werden. Die entsprechende Vordergrundfarbe ist -moz-win-communicationstext.
{{gecko_minversion_inline("6.0")}} -moz-win-exclude-glass + + {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}Nur Windows Vista und neuer. Dieser Stil wird dazu verwendet, um den Aero Glass Effekt für das Element auszuschließen.
-moz-win-glass + + {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}Nur Windows Vista und neuer. Dieser Stil wendet den Aero Glass Effekt auf das Element an.
-moz-win-mediatext + + {{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}} 
-moz-win-media-toolbox + + {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}Nur Windows Vista und neuer. Dieser Toolboxstil ist dazu gedacht, um in Anwendungen verwendet zu werden, die Medienobjekte verwalten. Die Entsprechende Vordergrundfarbe ist -moz-win-mediatext.
-moz-window-button-box + + {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}} 
-moz-window-button-box-maximized + + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}} 
-moz-window-button-close + + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}} 
-moz-window-button-maximize + + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}} 
-moz-window-button-minimize + + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}} 
-moz-window-button-restore + + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}} 
-moz-window-frame-bottom + + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}} 
-moz-window-frame-left + + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}} 
-moz-window-frame-right + + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}} 
-moz-window-titlebar + + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}} 
-moz-window-titlebar-maximized + + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}} 
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
.exampleone {
+	-moz-appearance: toolbarbutton;
+}
+
+ +

Spezifikationen

+ +

{The appearance property is currently not present in any newer CSS specification.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatUnknown}}3.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoMobile("1.0")}}11.0{{property_prefix("-webkit")}}[2]{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Nicht vollständig unterstützt.

+ +

[2] Nur die Werte none, button, und textfield werden unterstützt. Siehe die Dokumentation auf MSDN.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/at-rule/index.html b/files/de/web/css/at-rule/index.html new file mode 100644 index 0000000000..f32e9daee6 --- /dev/null +++ b/files/de/web/css/at-rule/index.html @@ -0,0 +1,61 @@ +--- +title: '@-Regel' +slug: Web/CSS/At-rule +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/At-rule +--- +
{{cssref}}
+ +

Eine @-Regel ist ein CSS Statement, das mit einem At-Zeichen beginnt, '@' (U+0040 COMMERCIAL AT), gefolgt von einem Bezeichner und das beim ersten Semikolon, ';' (U+003B SEMICOLON), außerhalb eines CSS Blocks endet oder am Ende des ersten Blocks.

+ +

Es gibt verschiedene @-Regeln, bestimmt durch deren Bezeichner, jede mit einer unterschiedlichen Syntax:

+ +
    +
  • {{cssxref("@charset")}} — Definiert den Zeichensatz, der vom Stylesheet verwendet wird.
    • +
  • {{cssxref("@import")}} — Teilt der CSS Engine mit, ein externes Stylesheet einzubinden.
    • +
  • {{cssxref("@namespace")}} — Teilt der CSS Engine mit, dass sie alle Inhalte mit einem XML Namespace als Präfix betrachten soll.
    • +
  • Verschachtelte @-Regeln — Eine Untermenge an verschachtelten Statements, welche als Statement eines Stylesheets als auch innerhalb von bedingten Gruppenregeln verwendet werden können: +
      +
    • {{cssxref("@media")}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls das Gerät die Kriterien der Bedingung erfüllt, die durch eine Media Query definiert wird.
      • +
    • {{cssxref("@supports")}} {{experimental_inline}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls der Browser die Kriterien der angegebenen Bedingung erfüllt.
      • +
    • {{cssxref("@document")}} {{experimental_inline}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls das Dokument, auf das das Stylesheet angewendet wird, die Kriterien der angegebenen Bedingung erfüllt. (verschoben nach Level 4 der CSS Spezifikation)
      • +
    • {{cssxref("@page")}} — Beschreibt den Aspekt von Layoutänderungen, welche angewendet werden, wenn das Dokument gedruckt wird.
      • +
    • {{cssxref("@font-face")}} — Beschreibt den Aspekt einer externen Schrift, die heruntergeladen werden soll.
      • +
    • {{cssxref("@keyframes")}} {{experimental_inline}} — Beschreibt den Aspekt von Zwischenschritten in einer CSS Animationssequenz.
      • +
    • {{cssxref("@viewport")}} {{experimental_inline}} — Beschreibt die Aspekte des Viewports auf Geräten mit kleinem Bildschirm. (aktuell im Arbeitsentwurfsstadium)
      • +
    +
    • +
+ +

Bedingte Gruppenregeln

+ +

Ähnlich wie die Werte von Eigenschaften hat jede @-Regel eine andere Syntax. Trotzdem können einige von ihnen zu einer speziellen Kategorie zusammengefasst werden, bedingte Gruppenregeln genannt. Diese Statements teilen sich eine gemeinsame Syntax und jedes von ihnen kann verschachtelte Statements — entweder Regelsets oder verschachtelte @-Regeln — beinhalten. Darüber hinaus vermitteln sie alle die gleiche semantische Bedeutung — sie alle verbindet eine Art Bedingung, welche immer entweder true oder false ergibt. Falls die Bedingung true ergibt, werden alle Statements innerhalb der Gruppe angewandt.

+ +

Bedingte Gruppenregeln werden in CSS Conditionals Level 3 definiert und sind:

+ +
    +
  • {{cssxref("@media")}},
    • +
  • {{cssxref("@supports")}},
    • +
  • {{cssxref("@document")}}. (verschoben nach Level 4 der Spezifikation)
    • +
+ +

Da jede bedingte Gruppe auch verschachtelte Statements beinhalten kann, kann es eine undefinierte Anzahl von Verschachtelungen geben.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Ursprüngliche Definition
diff --git a/files/de/web/css/attr()/index.html b/files/de/web/css/attr()/index.html new file mode 100644 index 0000000000..8da73fd80c --- /dev/null +++ b/files/de/web/css/attr()/index.html @@ -0,0 +1,189 @@ +--- +title: attr +slug: Web/CSS/attr() +tags: + - CSS + - CSS Funktion + - Layout + - Referenz + - Web +translation_of: Web/CSS/attr() +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die attr() CSS Funktion wird verwendet, um einen Wert eines Attributs des ausgewählten Elements abzurufen und innerhalb des Stylesheets zu verwenden. Sie kann auch für Pseudoelemente verwendet werden. In diesem Fall wird der Wert des Attributs seines ursprünglichen Elements zurückgegeben.

+ +

Die attr() Funktion kann innerhalb jeder CSS Eigenschaft verwendet werden. {{ experimental_inline() }}

+ +

Syntax

+ +
Formale Syntax: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
+
+ +

Werte

+ +
+
attribute-name
+
Entspricht dem Namen des Attributs des HTML Elements, das durch CSS referenziert wird.
+
<type-or-unit>
+
Ist ein Schlüsselwort, das den Typ oder die Einheit des Attributwerts angibt, da in HTML einige Attribute implizite Einheiten haben. Falls die Verwendung von <type-or-unit> als Wert für das angegebene Attribut ungültig ist, ist der attr() Ausdruck ebenfalls ungültig. Falls nicht angegeben, wird standardmäßig string verwendet. Nachfolgend ist eine Liste aller Werte aufgeführt: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SchlüsselwortAssoziierter TypAnmerkungStandardwert
string{{cssxref("<string>")}}Der Attributwert wird als CSS {{cssxref("<string>")}} Wert behandelt. Er wird nicht erneut geparst, insbesondere werden die Zeichen wie angegeben verwendet, anstatt dass CSS Escapes zu anderen Zeichen umgewandelt werden.An empty string
color {{ experimental_inline() }}{{cssxref("<color>")}}Der Attributwert wird als Hash (3- oder 6-Werthash) oder als Schlüsselwort interpretiert. Er muss ein gültiger CSS {{cssxref("<string>")}} Wert sein.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		currentColor
url {{ experimental_inline() }}{{ cssxref("<uri>") }}Der Attributwert wird als ein String interpretiert, wie er in einer url() Funktion verwendet wird. Relative URLs werden relativ zum ursprünglichen Dokument interpretiert, nicht relativ zum Stylesheet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		Die URL about:invalid, die auf ein nicht existierendes Dokument mit einer allgemeinen Fehlermeldung verweist.
integer {{ experimental_inline() }}{{cssxref("<integer>")}}Der Attributwert wird als CSS {{cssxref("<integer>")}} Wert interpretiert. Falls er nicht gültig ist, d. h. keine Ganzzahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
number {{ experimental_inline() }}{{cssxref("<number>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wertinterpretiert. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
length {{ experimental_inline() }}{{cssxref("<length>")}}Der Attributwert wird als CSS {{cssxref("<length>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 12.5em). Falls er ungültig ist, d. h. keine Länge oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Falls die angegebene Einheit eine relative Länge ist, wandelt attr()sie in eine absolute Länge um.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, oder pc {{ experimental_inline() }}{{cssxref("<length>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<length>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Falls die angegebene Einheit eine relative Länge ist, wandelt attr()sie in eine absolute Länge um.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
angle {{ experimental_inline() }}{{ cssxref("<angle>") }}Der Attributwert wird als CSS {{ cssxref("<angle>") }} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5deg). Falls er ungültig ist, d. h. kein Winkel oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0deg oder, falls 0deg kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{ cssxref("<angle>") }} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0deg oder, falls 0deg kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
time {{ experimental_inline() }}{{cssxref("<time>")}}Der Attributwert wird als CSS {{cssxref("<time>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5ms). Falls er ungültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0s oder, falls 0s kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
s, ms {{ experimental_inline() }}{{cssxref("<time>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<time>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0s oder, falls 0s kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}Der Attributwert wird als CSS {{cssxref("<frequency>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5kHz). Falls er ungültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0Hz oder, falls 0Hz kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<frequency>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0Hz oder, falls 0Hz kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
% {{ experimental_inline() }}{{cssxref("<percentage>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<percentage>")}} Wert umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Falls der Wert als Länge verwendet wird, wandelt attr()ihn in eine absolute Länge um.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0% oder, falls 0% kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
+
+
<fallback>
+
Der Wert, der verwendet wird, falls das zugehörige Attribut fehlt oder einen ungültigen Wert beinhaltet. Der Fallbackwert muss gültig sein, auch wenn er nicht verwendet wird, und darf keinen weiteren attr() Ausdruck beinhalten. Falls attr() nicht der einzige Wert einer Eigenschaft ist, muss dessen <fallback> Wert von dem Typ sein, der durch <type-or-unit> definiert wird. Falls nicht angegeben, wird CSS den Standardwert verwenden, der für jeden <type-or-unit> Wert angegeben ist.
+
+ +

Beispiele

+ +
p:before {
+  content:attr(data-foo) " ";
+}
+
+ +
<p data-foo="Hallo">Welt</p>
+
+ +

Ergebnis

+ +

{{ EmbedLiveSample("Beispiele", '100%', '60') }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}Fügt zwei optionale Parameter hinzu; kann in allen Eigenschaften verwendet werden; kann andere Werte als {{cssxref("<string>")}} zurückliefern. Diese Änderungen sind als experimentell {{ experimental_inline() }} markiert und können jederzeit während der CR Phase verworfen werden, falls die Browserunterstützung nicht groß genug ist.
{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}Beschränkt auf die {{ cssxref("content") }} Eigenschaft; gibt immer {{cssxref("<string>")}} zurück.
+ +

Browser Kompatibilität

+ +{{Compat("css.types.attr")}} diff --git a/files/de/web/css/attributselektoren/index.html b/files/de/web/css/attributselektoren/index.html new file mode 100644 index 0000000000..a4b6449af3 --- /dev/null +++ b/files/de/web/css/attributselektoren/index.html @@ -0,0 +1,122 @@ +--- +title: Attributselektoren +slug: Web/CSS/Attributselektoren +tags: + - Anfänger + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Attributselektoren wählen Elemente anhand des Vorhandenseins oder Wertes eines Attributs aus.

+ +
+
[attr]
+
Repräsentiert ein Element mit einem Attribut attr.
+
[attr=wert]
+
Repräsentiert ein Element mit einem Attribut attr, welches exakt den Wert „wert“ enthält.
+
[attr~=wert]
+
Repräsentiert ein Element mit einem Attribut attr, welches eine Liste mit durch Leerraum getrennten Wörtern enthält, von denen eines exakt dem Wert „wert“ entspricht.
+
[attr|=wert]
+
Repräsentiert ein Element mit einem Attribut attr. Es kann exakt den Wert „wert“ enthalten oder mit einem Wert „wert“ beginnen, dem ein „-“ (U+002D) folgt. Es kann benutzt werden, um anhand von Sprachsubcodes Elemente auszuwählen.
+
[attr^=wert]
+
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mit „wert“ beginnt.
+
[attr$=wert]
+
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mit „wert“ endet.
+
[attr*=wert]
+
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mindestens einmal „wert“ enthält.
+
[attr operator wert i]
+
Wenn ein i vor der schließenden Klammer eingefügt wird, wird ein Vergleich ohne Berücksichtigung der Groß-/Kleinschreibung (für Zeichen innerhalb des ASCII Bereichs) durchgeführt.
+
+ +

Beispiele

+ +
/* Alle span-Elemente mit dem „lang“-Attribut sind fett */
+span[lang] {font-weight:bold;}
+
+/* Alle span-Elemente in Portugiesisch sind grün */
+span[lang="pt"] {color:green;}
+
+/* Alle span-Elemente in amerikanischem Englisch sind blau  */
+span[lang~="en-us"] {color: blue;}
+
+/* Alle span-Elemente sowohl in vereinfachtem (zh-CN) als auch traditionellem (zh-TW) Chinesisch sind rot */
+span[lang|="zh"] {color: red;}
+
+/* Alle internen Links haben einen goldenen Hintergrund */
+a[href^="#"] {background-color:gold}
+
+/* Alle Links zu mit „.cn“ endenden URLs sind rot */
+a[href$=".cn"] {color: red;}
+
+/* Alle Links zu URLs, die „beispiel“ enthalten, haben einen grauen Hintergrund */
+a[href*="beispiel"] {background-color: #CCCCCC;}
+
+/* Alle email Eingabefelder haben einen blauen Rahmen */
+/* Das matcht jede Großschreibung von "email", z. B. "email", "EMAIL", "eMaIL", etc. */
+input[type="email" i] {border-color: blue;}
+
+ +
<div class="hallo-beispiel">
+    <a href="http://example.com">English:</a>
+    <span lang="en-us en-gb en-au en-nz">Hallo Welt!</span>
+</div>
+<div class="hallo-beispiel">
+    <a href="#portugiesisch">Portugiesisch:</a>
+    <span lang="pt">Olá Mundo!</span>
+</div>
+<div class="hallo-beispiel">
+    <a href="http://example.cn">Chinesisch (Vereinfacht):</a>
+    <span lang="zh-CN">世界您好！</span>
+</div>
+<div class="hallo-beispiel">
+    <a href="http://example.cn">Chinesisch (Traditionell):</a>
+    <span lang="zh-TW">世界您好！</span>
+</div>
+
+ +

{{EmbedLiveSample('Beispiele', 250, 100)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Hat den Modifizierer für ASCII schreibungsunabhängige Attributwertselektierung hinzugefügt.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.attribute")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/aural/index.html b/files/de/web/css/aural/index.html new file mode 100644 index 0000000000..37d115443e --- /dev/null +++ b/files/de/web/css/aural/index.html @@ -0,0 +1,17 @@ +--- +title: aural +slug: Web/CSS/Aural +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/@media/aural +--- +
{{CSSRef}}{{obsolete_header("6.0")}}
+ +

Eine Mediengruppe definiert durch die CSS Standards.

+ +
+

Hinweis: Diese Mediengruppe wurde in Gecko nie vollständig implementiert und wurde in {{Gecko("6.0")}} entfernt.

+
+ +

 

diff --git a/files/de/web/css/auto/index.html b/files/de/web/css/auto/index.html new file mode 100644 index 0000000000..1827bb39d6 --- /dev/null +++ b/files/de/web/css/auto/index.html @@ -0,0 +1,26 @@ +--- +title: auto +slug: Web/CSS/auto +translation_of: Web/CSS/width +--- +
+ {{CSSRef}}
+

Übersicht

+

auto ist ein Wert, der vom jeweiligen user agent definiert wird. Das Ergebnies variert von Eigenschaft zu Eigenschaft.

+

Verwendet in

+
    +
  • {{ Cssxref("overflow") }}
    • +
  • {{ Cssxref("overflow-x") }}
    • +
  • {{ Cssxref("overflow-y") }}
    • +
  • {{ Cssxref("cursor") }}
    • +
  • {{ Cssxref("width") }}
    • +
  • {{ Cssxref("height") }}
    • +
  • {{ Cssxref("marker-offset") }}
    • +
  • {{ Cssxref("margin") }}
    • +
  • margin-* (left|bottom|top|right|start|end)
    • +
  • {{ Cssxref("bottom") }}
    • +
  • {{ Cssxref("left") }}
    • +
  • {{ Cssxref("table-layout") }}
    • +
  • {{ Cssxref("z-index") }}
    • +
  • {{ Cssxref("column-width") }}
    • +
diff --git a/files/de/web/css/backdrop-filter/index.html b/files/de/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..910ecc40f8 --- /dev/null +++ b/files/de/web/css/backdrop-filter/index.html @@ -0,0 +1,97 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - CSS + - CSS Eigenschaft + - Grafik + - Layout + - NeedsContent + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz + - SVG + - SVG Filter + - Web +translation_of: Web/CSS/backdrop-filter +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Übersicht

+ +

Die backdrop-filter CSS Eigenschaft beschreibt den Bereich hinter einem Element für Effekte wie Unschärfe oder Farbverschiebung, welcher anschließend durch das Element gesehen werden kann, indem die Transparenz/Deckkraft des Elements angepasst wird.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwert */
+backdrop-filter: none;
+
+/* URL zu SVG-Filter */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* Filterfunktionen */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* Mehrere Filterfunktionen */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* Globale Werte */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+
+ +

Werte

+ +

TODO

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
backdrop-filter: blur(10px);
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.backdrop-filter")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/backface-visibility/index.html b/files/de/web/css/backface-visibility/index.html new file mode 100644 index 0000000000..f69c76b4d3 --- /dev/null +++ b/files/de/web/css/backface-visibility/index.html @@ -0,0 +1,208 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +tags: + - CSS + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/backface-visibility +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Übersicht

+ +

Die backface-visibility CSS Eigenschaft bestimmt, ob die Rückfläche eines Elements sichtbar ist, wenn diese dem Benutzer zugewandt ist. Die Rückfläche eines Elements ist immer ein transparenter Hintergrund, der, wenn sichtbar, ein Spiegelbild der Vorderfläche zeigt.

+ +

Es gibt Fälle, in denen es nicht gewollt ist, die Vorderfläche eines Elements durch die Rückfläche sehen zu können, wie beispielsweise bei einem Kartenumdreheffekt, bei dem zwei Elemente Seite an Seite gelegt werden.

+ +

Diese Eigenschaft hat keine Auswirkung auf 2D-Transformationen, da es bei diesen keine Perspektive gibt.

+ +

{{cssinfo}}

+ +

Syntax

+ +
backface-visibility: visible;
+backface-visibility: hidden;
+
+ +

Werte

+ +

Diese Eigenschaft kann zwei verschiedene (exclusive) Werte annehmen:

+ +
    +
  • visible bedeutet, dass die Rückfläche sichtbar ist, sodass sie die Vorderfläche gespiegelt darstellt;
    • +
  • hidden bedeutet, dass die Rückfläche nicht sichtbar ist und damit die Vorderfläche versteckt wird.
    • +
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Würfel mit transparenten Flächen

+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <th><code>backface-visibility: visible;</code></th>
+      <th><code>backface-visibility: hidden;</code></th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube showbf">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+        <p>Alle Flächen sind transparent und die drei Rückflächen sind durch die Vorderflächen sichtbar.</p>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube hidebf">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+        <p>Obwohl die Flächen halbtransparent sind, sind die drei Rückflächen nun nicht sichtbar.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+ +

CSS

+ +
/* Klassen, die die drei Rückflächen des "Würfels" entweder zeigen oder verstecken */
+.hidebf div {
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.showbf div {
+  backface-visibility: visible;
+  -webkit-backface-visibility: visible;
+}
+
+/* Definiert den Container-DIV, den Würfel-DIV und allgemeine Fläche */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+  -webkit-perspective: 300px;
+  -webkit-perspective-origin: 150% 150%;
+  -webkit-transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Definiert jede Fläche basierend auf deren Position */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+  -webkit-transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+  -webkit-transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+  -webkit-transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+  -webkit-transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+  -webkit-transform: rotateX(90deg) translateZ(50px)
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+  -webkit-transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Verschönert die Tabelle ein wenig */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}
+ +

Ergebnis

+ +

{{ EmbedLiveSample('Beispiele', 620, 460) }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}}{{Spec2('CSS3 Transforms')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.backface-visibility")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/background-attachment/index.html b/files/de/web/css/background-attachment/index.html new file mode 100644 index 0000000000..fe0d426df2 --- /dev/null +++ b/files/de/web/css/background-attachment/index.html @@ -0,0 +1,158 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS + - CSS Background + - CSS Eigenschaft + - CSS Hintergrund + - CSS Referenz + - Referenz +translation_of: Web/CSS/background-attachment +--- +
{{CSSRef}}
+ +

Die CSS Eigenschaft background-attachmentlegt fest, ob die Position eines Hintergrundbildes innerhalb des {{glossary("viewport")}} fixiert ist, oder ob es mit seinem enthaltenden Block scrollt.

+ +
{{EmbedInteractiveExample("pages/css/background-attachment.html")}}
+ + + +

Syntax

+ +
/* Keyword values */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* Global values */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+
+ +

Die Eigenschaft background-attachment wird als einer der Schlüsselwortwerte aus der folgenden Liste angegeben.

+ +

Werte

+ +
+
fixed
+
Der Hintergrund ist relativ zum Ansichtsfenster fixiert. Selbst wenn ein Element über einen Bildlaufmechanismus verfügt, bewegt sich der Hintergrund nicht mit dem Element. (Dies ist nicht kompatibel mit {{cssxref("background-clip", "background-clip: text", "#text")}}.)
+
local
+
Der Hintergrund ist relativ zum Inhalt des Elements fixiert. Wenn das Element über einen Bildlaufmechanismus verfügt, wird der Hintergrund mit dem Inhalt des Elements gescrollt, und der Hintergrundmalbereich und der Hintergrundpositionierungsbereich sind relativ zum scrollbaren Bereich des Elements und nicht zum Rand, der sie umrahmt.
+
scroll
+
Der Hintergrund ist relativ zum Element selbst fixiert und scrollt nicht mit seinem Inhalt. (Er ist effektiv an den Rand des Elements gebunden).
+
{{cssxref("<initial>")}}
+
Setzt den Standardwert für diese Eigenschaft
+
{{cssxref("<inherit>")}}
+
Diese Eigenschaft erbt den Wert von seinem Elternelement.
+
+ +

Formale Definition

+ +

{{cssinfo}}

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Einfaches Beispiel

+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample("Simple_example")}}

+ +

Mehrere Hintergründe

+ +

Diese Eigenschaft unterstützt mehrere Hintergrundbilder. Sie können für jeden Hintergrund ein anderes <attachment> , durch Kommata getrennt, angeben. Jedes Bild, vom ersten bis zum letzten, wird dem entsprechenden <attachment> Typ zugeordnet.

+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
+      url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample("Multiple_background_images")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}{{Spec2('CSS3 Backgrounds')}}Das Kurzformat-Eigenschaft wurde erweitert, um mehrere Hintergründe und den local Wert zu unterstützen.
{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}{{Spec2('CSS2.1')}}Keine wesentliche Änderung.
{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}{{Spec2('CSS1')}}Keine wesentliche Änderung.
+ +

Browser-Kompatibilität

+ + + +

{{Compat("css.properties.background-attachment")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/background-blend-mode/index.html b/files/de/web/css/background-blend-mode/index.html new file mode 100644 index 0000000000..2423929b79 --- /dev/null +++ b/files/de/web/css/background-blend-mode/index.html @@ -0,0 +1,129 @@ +--- +title: background-blend-mode +slug: Web/CSS/background-blend-mode +tags: + - CSS + - CSS Compositing + - CSS Eigenschaft + - Referenz +translation_of: Web/CSS/background-blend-mode +--- +
{{CSSRef}}
+ +

Die CSS Eigenschaft background-blend-mode beschreibt, wie sich die Hintergrundbilder eines Elementes, sowie dessen Hintergrundfarbe, miteinander vemischen

+ +
{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}
+ + + +

Die Blending-Verfahren sollten in der selben Reihenfolge wie die Bilder der background-image Eigenschaft definiert werden. Wenn die Anzahl der Blending-Verfahren nicht mit der Anzahl der Hintergrundbilder übereinstimmt, werden sie wiederholt oder abgeschnitten, bis jedem Hintergrundbild ein Blending-Verfahren zugeordnet werden kann.

+ +

Syntax

+ +
/* Ein Wert */
+background-blend-mode: normal;
+
+/* Zwei Werte, einer pro Hintergrund */
+background-blend-mode: darken, luminosity;
+
+/* Globale Werte */
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: unset;
+
+ +

Werte

+ +
+
{{cssxref("<blend-mode>")}}
+
Ein {{cssxref("<blend-mode>")}} welcher das Verfahren zur Vermischung von Hintergrundbildern und -farbe beschreibt. Es können mehrere Werte mit Kommas getrennt angegeben werden.
+
+ +

Formale Definition

+ +

{{cssinfo}}

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Einfaches Beispiel

+ +

HTML

+ +
.item {
+    width: 300px;
+    height: 300px;
+    background: url('image1.png'),url('image2.png');
+    background-blend-mode: screen;
+}
+ +

Probieren Sie verschiedene Mischmodi aus

+ + + + + + + +

Ergebnis

+ +

{{ EmbedLiveSample('Examples', "330", "330") }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Compositing', '#background-blend-mode', 'background-blend-mode')}}{{Spec2('Compositing')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.background-blend-mode")}}

+ +

Siehe auch

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("mix-blend-mode")}}
    • +
diff --git a/files/de/web/css/background-clip/index.html b/files/de/web/css/background-clip/index.html new file mode 100644 index 0000000000..c627b66ce2 --- /dev/null +++ b/files/de/web/css/background-clip/index.html @@ -0,0 +1,110 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-clip +--- +

{{ CSSRef() }}

+

Übersicht

+

Die background-clip Eigenschaft legt fest, ob ein Hintergrundbild oder eine Hintergrundfarbe auch unterhalb des Elementrahmens erweitert werden soll. Es können mehrere Werte (durch Kommata getrennt) definiert werden, um unterschiedliche Einstellungen für mehrere Hintergrundbilder festzulegen.
+ Die Eigenschaft -moz-background-clip wird bis einschließlich Gecko 1.9.2 (Firefox 3.6) unterstützt.

+
+ Hinweis: Um ältere und neuere Versionen von Gecko (Firefox) zu unterstützen, sollten Sie beide Eigenschaften (mit und ohne -moz-) im Stylesheet notieren. Siehe Beispiele.
+

Wenn kein background-image vorhanden ist, hat diese Eigenschaft nur einen sichtbaren Effekt, wenn der Rahmen über transparente oder teilweise transparente Bereiche verfügt (siehe border-style). Andernfalls sind nur die Effekte des Rahmens selbst zu sehen.

+
    +
  • Standardwert: border-box
    • +
  • Anwendbar auf: alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: wie festgelegt
    • +
+

Syntax

+
background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*
+
+-moz-background-clip:  [border | padding][, [border | padding]]*  /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */
+
+

Werte

+
+
+ border-box {{ gecko_minversion_inline("2.0") }} bzw. border (Firefox 1.0-3.6)
+
+ Standardwert.Der Hintergrund erstreckt sich bis zur äußeren Ecke des Rahmens (aber unterhalb des Rahmens auf der Z-Achse).
+
+ padding-box {{ gecko_minversion_inline("2.0") }} bzw. padding (Firefox 1.0-3.6)
+
+ Es wird kein Hintergrund unterhalb des Rahmens gezeichnet (der Hintergrund erstreckt sich bis zur äußeren Ecke des Innenabstands (padding).
+
+ content-box {{ gecko_minversion_inline("2.0") }}
+
+ Der Hintergrund wird innerhalb des Inhalts (content box) gezeichnet.
+
+

Beispiele

+
pre {
+   border: 1em navy;
+   border-style: dotted double;
+   background: tomato;
+   /* Der rote Hintergrund wird nicht unter den Rahmen wandern */
+   -moz-background-clip: padding;         /* Firefox 1.0-3.6 */
+   -webkit-background-clip: padding-box;  /* Safari, Chrome */
+           background-clip: padding-box;  /* Firefox 4.0+, Opera */
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browserab VersionUnterstützung von
Chrome1.0background-clip:  padding-box | border-box | content-box
Firefox (Gecko)1.0-3.6 (1.2-1.9.2)-moz-background-clip: padding | border
4.0 (2.0)background-clip:  padding-box | border-box | content-box
Internet Explorer9.0background-clip:  padding-box | border-box | content-box
Opera10.5background-clip:  padding-box | border-box
Safari (WebKit)3.0 (522)-webkit-background-clip:  padding | border | content
+ -webkit-background-clip:  padding-box | border-box | content-box
+
    +
  • [*]: Der IE 7 (keine anderen IE-Versionen) verhält sich wie background-clip:padding wenn overflow: hidden | auto | scroll festgelegt wurde.
    • +
  • Konqueror 3.5.4 unterstützt -khtml-background-clip.
    • +
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/background-clip", "fr": "fr/CSS/-moz-background-clip", "ja": "ja/CSS/-moz-background-clip", "pl": "pl/CSS/-moz-background-clip" } ) }}

diff --git a/files/de/web/css/background-color/index.html b/files/de/web/css/background-color/index.html new file mode 100644 index 0000000000..6db5caa387 --- /dev/null +++ b/files/de/web/css/background-color/index.html @@ -0,0 +1,133 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - CSS Eigenschaft + - CSS Hintergrund + - Grafik + - Layout + - Referenz +translation_of: Web/CSS/background-color +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die background-color CSS Eigenschaft setzt die Hintergrundfarbe eines Elements, entweder durch einen Farbwert oder das Schlüsselwort transparent.

+ +
{{cssinfo}}
+ +

Syntax

+ +
/* Schlüsselwortwerte */
+background-color: red;
+
+/* Hexadezimalwert */
+background-color: #bbff00;
+
+/* RGB-Wert */
+background-color: rgb(255, 255, 128);
+
+/* HSLA-Wert */
+background-color: hsla(50, 33%, 25%, 0.75);
+
+/* Spezielle Schlüsselwortwerte */
+background-color: currentColor;
+background-color: transparent;
+
+/* Globale Werte */
+background-color: inherit;
+background-color: initial;
+background-color: unset;
+
+ +

Werte

+ +
+
<color>
+
Ist ein CSS {{cssxref("<color>")}} Wert, der die einheitliche Farbe des Hintergrunds beschreibt. Sogar wenn ein oder mehrere {{cssxref("background-image")}} definiert sind, kann diese Farbe die Darstellung durch Transparenzen in den Bildern beeinflussen. In CSS ist transparent eine Farbe.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

HTML

+ +
<div class="exampleone">
+ Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Beispiele","200","150")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}Obwohl das Schlüsselwort transparent technisch entfernt wurde, ändert dies nichts, da es als echter {{cssxref("<color>")}} integriert wurde.
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}Keine Änderung
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.background-color")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/background-image/index.html b/files/de/web/css/background-image/index.html new file mode 100644 index 0000000000..2c49b17489 --- /dev/null +++ b/files/de/web/css/background-image/index.html @@ -0,0 +1,155 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-image +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die background-image-Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest. Die einzelnen Bilder werden übereinander gestapelt, wobei die erste Schicht so dargestellt wird, dass sie dem Benutzer am nächsten erscheint. Hintergrundbilder werden immer über Hintergrundfarben gelegt.

+ +

Um bei ausgeschalteten Grafiken oder Fehlern beim Laden des Bildes einen ausreichenden Kontrast zu gewährleisten, ist es deshalb sinnvoll, immer eine Hintergrundfarbe mittels background-color anzugeben. Die Kurzform background bietet sich an, um beides zu notieren.

+ +
Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundbilder, durch Kommata getrennt, definiert werden.
+Das zuerst definierte Hintergrundbild ist dabei das Oberste.
+ +
    +
  • Standardwert: none
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: absolute URI oder none
    • +
+ +

Syntax

+ +
background-image:  <Hintergrundbild>[, <Hintergrundbild>]*
+
+<Hintergrundbild>:
+none | url | inherit | -moz-linear-gradient() | -moz-radial-gradient()
+
+
+ +

Werte

+ +
+
none
+
Standardwert. Es wird kein Hintergrundbild verwendet.
+
url
+
Der Pfad des Bildes, das als Hintergrund angezeigt werden soll.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Mozilla Erweiterungen:

+ +
+
-moz-linear-gradient() {{ gecko_minversion_inline("1.9.2") }}
+
Linearer Verlauf
+
-moz-radial-gradient() {{ gecko_minversion_inline("1.9.2") }}
+
Radialer Verlauf
+
+ +

Beispiele

+ +

Es ist zu beachten, dass das Bild des Sterns teilweise transparent ist und das Katzenbild überlagert. 

+ +

HTML

+ +
<div>
+    <p class="catsandstars">
+        This paragraph is full of cats<br />and stars.
+    </p>
+    <p>This paragraph is not.</p>
+    <p class="catsandstars">
+        Here are more cats for you.<br />Look at them!
+    </p>
+    <p>And no more.</p>
+</div>
+ +

CSS

+ +
pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample('Beispiele')}}

+ +

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browserab Versionmehrere HintergrundbilderVerläufe
Internet Explorer4.0------
Firefox (Gecko)1.0 (1.0)3.6 (1.9.2)3.6 (1.9.2) [-moz-]
Opera3.510.5---
Safari (WebKit)1.0 (85)1.3 (312)4.0 (528) [-webkit-]
+ +

Spezifikation

+ + + +

Siehe auch

+ + + +

{{ languages( {"en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}

diff --git a/files/de/web/css/background-origin/index.html b/files/de/web/css/background-origin/index.html new file mode 100644 index 0000000000..694b12b3e4 --- /dev/null +++ b/files/de/web/css/background-origin/index.html @@ -0,0 +1,60 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-origin +--- +

{{ CSSRef() }}

+

Übersicht

+

Die background-origin Eigenschaft legt den Bereich des Hintergrundbildes fest (bzw. den Ausgangspunkt eines background-image). background-origin hat keinen Effekt, wenn background-attachment auf fixed gesetzt wurde. Es können mehrere Werte (durch Kommata getrennt) definiert werden, um unterschiedliche Einstellungen für mehrere Hintergrundbilder festzulegen.

+

Die Eigenschaft -moz-background-origin wird bis einschließlich Gecko 1.9.2 (Firefox 3.6) unterstützt.

+

 

+
Hinweis: Um ältere und neuere Versionen von Gecko (Firefox) zu unterstützen, sollten Sie beide Eigenschaften (mit und ohne -moz-) im Stylesheet notieren. Siehe Beispiele.
+

Der Wert dieser Eigenschaft wird durch die Kurzformeigenschaft background auf den Standardwert (padding-box) zurückgesetzt.

+
  • Standardwert: padding-box
  • Anwendbar auf: alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: wie festgelegt
    • +
+

Syntax

+
/* seit Gecko 2.0 (Firefox 4.0) */
+background-origin: [padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*
+
+/* ältere Versionen (mehrere Hintergründe seit Gecko 1.9.2 / Firefox 3.6) */
+-moz-background-origin: [padding | border | content][, [border | padding | content]]*
+
+

Werte

+
padding-box {{ gecko_minversion_inline("2.0") }} bzw. padding (Firefox 1.0-3.6)
Standardwert. Die Hintergrundposition ist relativ zum padding. (Für einzelne Boxen ist "0 0" die obere linke Ecke der padding edge und "100% 100%" ist die untere rechte Ecke.)
border-box {{ gecko_minversion_inline("2.0") }} bzw. border (Firefox 1.0-3.6)
Die Hintergrundposition ist relativ zum Rahmen (border), sodass sich das Hintergrundbild hinter dem Rahmen befinden kann.
content-box {{ gecko_minversion_inline("2.0") }} bzw. content (Firefox 1.0-3.6)
Die Hintergrundposition ist relativ zum Inhalt.
+
+

Beispiele

+

Hintergrundbild im padding-Bereich

+
 .example {
+   border: 10px double;
+   padding: 10px;
+   background: url('image.jpg');
+   background-position: center left;
+   -moz-background-origin: content;          /* Firefox 1.0-3.6 */
+   -webkit-background-origin: content-box;   /* Safari, Chrome */
+           background-origin: content-box;   /* Firefox 4.0+ */
+}
+
+

Mehrere Hintergrundbilder {{ gecko_minversion_inline("1.9.2") }}

+
div {
+  background-image: url('mainback.png'), url('logo.jpg');
+  background-position: 0px 0px, top right;
+  -moz-background-origin: padding, content;
+  -webkit-background-origin: padding-box, content-box;
+          background-origin: padding-box, content-box;
+}
+
+

Browser Kompatibilität

+ +
Browser ab Version Unterstützung von
Internet Explorer --- --- [*]
Firefox (Gecko) 1.0-3.6 (1.2-1.9.2) -moz-background-origin: padding | border | content
4.0 (1.9.3) background-origin: padding-box | border-box | content-box
Opera 10.5 background-origin: padding-box | border-box | content-box
Safari (WebKit) 3.0 (522) -webkit-background-origin: padding | border | content
-webkit-background-origin: padding-box | border-box | content-box
+
  • [*]: Der Standardwert ist bis einschließlich IE7 border-box.
  • Der IE8 kennt padding-box als Standard.
  • Konqueror 3.5.4 unterstützt -khtml-background-origin.
    • +
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/background-origin", "fr": "fr/CSS/-moz-background-origin", "ja": "ja/CSS/-moz-background-origin", "pl": "pl/CSS/-moz-background-origin" } ) }}

diff --git a/files/de/web/css/background-position/index.html b/files/de/web/css/background-position/index.html new file mode 100644 index 0000000000..03c3c64c4e --- /dev/null +++ b/files/de/web/css/background-position/index.html @@ -0,0 +1,86 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-position +--- +

{{ CSSRef() }}

+

Übersicht:

+

Die background-position Eigenschaft bestimmt die Position des Hintergrundbildes

+
Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundpositionen, durch Kommata getrennt, definiert werden.
+Vorherige Versionen unterstützen nur einen Wert.
+
  • Standardwert: 0% 0%
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Beziehen sich auf den Positionierungsbereich (z.B. Größe eines <div>) minus der Bildgröße
  • Medium: visuell
  • berechneter Wert: für <Länge> der absolute Wert; sonst eine Prozentzahl
    • +
+

Syntax

+
background-position:  <Hintergrundposition>[, <Hintergrundposition>]*
+
+<Hintergrundposition>:
+  [ [ <Prozentzahl> | <Länge> | left | center | right ] ]
+  [ [ <Prozentzahl> | <Länge> | top | center | bottom ] ]?
+|
+  [ center | [ left | right ] [ <Prozentzahl> | <Länge> ]? ] || [ center | [ top | bottom ] [ <Prozentzahl> | <Länge> ]? ] ]
+|
+  inherit
+
+

Werte

+

Möglich sind ein oder zwei Werte. Negative <Prozentzahlen> und <Längen> sind erlaubt.
+Wenn nur ein Wert angegeben wird, ist der zweite automatisch center.
+Der erste Wert gibt die horizontale, der zweite die vertikale Position an (Es sei denn, mindestens ein Wert ist ein Schlüsselwort).

+
<Prozentwert>
Mit einem Wert von 0% 0% (gleichbedeutend zu 0 0) wird das Bild an der oberen linken Ecke ausgerichtet.
Mit einem Wert von 100% 100% wird das Bild an der unteren rechten Ecke ausgerichtet.
Mit einem Wert von 50% 50% wird das Bild horizontal und vertikal zentriert.
Die absoluten Werte werden aus der Größe des Postionierungsbereichs minus der Bildgröße berechnet (Siehe Berechnung der Prozentwerte).
<Länge>
Verschiebung vom Ursprung (obere linke Ecke)
left
Gleichbedeutend für 0% für die horizontale Postion
center
Gleichbedeutend für 50% für die horizontale Position, wenn diese nicht festgelegt ist, sonst gleichbedeutend für 50% für die vertikale Postion.
right
Gleichbedeutend für 100% für die horizontale Postion
top
Gleichbedeutend für 0% für die vertikale Postion
bottom
Gleichbedeutend für 100% für die vertikale Postion
inherit
Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+

Berechnung der Prozentwerte

+
.beispielNull {
+  width: 320px;                   /* 50% der Bereichsbreite = 160px  */
+  height: 320px;                  /* 50% Bereichshöhe = 160px  */
+
+  background-image: url(32x32.jpg)/* 50% der Bildbreite/Bildhöhe = 16px  */
+
+  background-position: 50% 50%;   /* 160px-16px = 144px */
+                                  /* 50% 50% entspricht also: 144px 144px /*
+}
+
+

Positionen für einzelne Hintergrundbilder

+
.beispielEins {
+  background-image: url("logo.png");
+  background-position: top;
+}
+
+.beispielZwei {
+  background-image: url("logo.png");
+  background-position: 25% 75%;
+}
+
+.beispielDrei {
+  background: url("logo.png") 2cm bottom;
+}
+
+.beispielVier {
+  background-image: url("logo.png");
+  background-position: center 10%;
+}
+
+.beispielFuenf {
+  background: url("logo.png") 3em 50%;
+}
+
+
+

Positionen für mehrere Hintergrundbilder {{ gecko_minversion_inline("1.9.2") }}

+
.beispielSechs {
+  background-image: url("img1.png"), url("img2.png");
+  background-position: 0px 0px, center;
+}
+
+
+

Browser Kompatibilität

+ +
Browser ab Version mehrere Hintergrundbilder
Internet Explorer 4.0 ---
Firefox (Gecko) 1.0 (1.0) 3.6 (1.9.2)
Opera 3.5 10.5
Safari (WebKit) 1.0 (85) 1.3 (312)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/background-position", "fr": "fr/CSS/background-position", "pl": "pl/CSS/background-position", "es": "es/CSS/background-position" } ) }}

diff --git a/files/de/web/css/background-repeat/index.html b/files/de/web/css/background-repeat/index.html new file mode 100644 index 0000000000..7dd8a25693 --- /dev/null +++ b/files/de/web/css/background-repeat/index.html @@ -0,0 +1,166 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-repeat +--- +

{{ CSSRef() }}

+ +

Übersicht:

+ +

Die background-repeat Eigenschaft bestimmt, ob und wie Hintergrundbilder wiederholt werden.

+ +
Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundwiederholungen, durch Kommata getrennt, definiert werden.
+Vorherige Versionen unterstützen nur einen Wert.
+ +
    +
  • Standardwert: repeat
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: wie festgelegt
    • +
+ +

Syntax

+ +
background-repeat:  <Hintergrundwiederholung>[, <Hintergrundwiederholung>]*
+
+<Hintergrundwiederholung>:
+repeat | repeat-x | repeat-y | no-repeat | round | space | inherit
+
+ +

Werte

+ +
+
repeat
+
Das Hintergrundbild wird horizontal und vertikal wiederholt.
+
repeat-x
+
Das Hintergrundbild wird nur horizontal wiederholt.
+
repeat-y
+
Das Hintergrundbild wird nur vertikal wiederholt.
+
no-repeat
+
Das Hintergrundbild wird nicht wiederholt. Nur ein Exemplar wird angezeigt.
+
round
+
{{ unimplemented_inline() }} Das Hintergrundbild wird so oft wiederholt, wie es in das Element hinein passt. Dabei kann das Hintergrundbild in seiner Größe angepasst werden, um auf die volle Breite bzw. Höhe des Elements ausgestreckt zu werden.
+
space
+
{{ unimplemented_inline() }} Das Hintergrundbild wird so oft wiederholt, wie es in das Element hinein passt. Allerdings wird die Bildgröße nicht angepasst, sondern soviel Platz zwischen den Hintergrundbildern gelassen, sodass sich der Hintergrund auf das gesamte Element verteilt.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Beispiele

+ +

HTML

+ +
<ol>
+    <li>no-repeat
+        <div class="one">&nbsp;</div>
+    </li>
+    <li>repeat
+        <div class="two">&nbsp;</div>
+    </li>
+    <li>repeat-x
+        <div class="three">&nbsp;</div>
+    </li>
+    <li>repeat-y
+        <div class="four">&nbsp;</div>
+    </li>
+    <li>repeat-x, repeat-y (multiple images)
+        <div class="five">&nbsp;</div>
+    </li>
+</ol>
+ +

CSS

+ +
/* Shared for all DIVS in example */
+li {margin-bottom: 12px;}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 144px;
+    height: 84px;
+}
+
+/* background repeat CSS */
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+/* Multiple images */
+.five {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}
+ +

Result

+ +

In this example, each list item is matched with a different value of background-repeat.

+ +

{{EmbedLiveSample('Beispiele', 240, 360)}}

+ +

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browserab Versionmehrere Hintergrundbilderround und space Werte
Internet Explorer4.0------
Firefox (Gecko)1.0 (1.0)3.6 (1.9.2)---
Opera3.510.510.5
Safari (WebKit)1.0 (85)1.3 (312)---
+ +

Spezifikation

+ + + +

Siehe auch

+ + + +

{{ languages( { "en": "en/CSS/background-repeat", "es": "es/CSS/background-repeat", "fr": "fr/CSS/background-repeat", "pl": "pl/CSS/background-repeat" } ) }}

diff --git a/files/de/web/css/background-size/index.html b/files/de/web/css/background-size/index.html new file mode 100644 index 0000000000..de6629ef6b --- /dev/null +++ b/files/de/web/css/background-size/index.html @@ -0,0 +1,151 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - CSS + - CSS Eigenschaft + - CSS Hintergrund + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/background-size +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die background-size CSS Eigenschaft definiert die Abmessungen eines Hintergrundbildes. Die Abmessungen des Bildes können komplett festgelegt werden oder nur teilweise, um das eigentliche Seitenverhältnis zu erhalten.

+ +
Hinweis: Folgt auf background-size die {{cssxref("background")}} Kurzform und es wird in ihr kein Wert für diese Eigenschaft angegeben, wird der Wert auf den Standardwert zurückgesetzt.
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwort Syntax */
+background-size: cover;
+background-size: contain;
+
+/* Ein-Wert Syntax: Der Wert definiert die Bildbreite,
+   die Höhe wird auf 'auto' gesetzt */
+background-size: 50%;
+background-size: 3em;
+background-size: 12px;
+background-size: auto;
+
+/* Zwei-Wert Syntax: Der erste Wert definiert die Bildbreite,
+   der Zweite die Höhe */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* Werte für mehrere Hintergründe, die durch background-image definiert wurden,
+   können kommagetrennt aufgelistet werden */
+background-size: auto, auto     /* Nicht zu verwechseln mit background-size: auto auto */
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* Globale Werte */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+
+ +

Werte

+ +
+
<length>
+
Ein {{cssxref("<length>")}} Wert, der das Hintergrundbild auf die angegebene Länge in der entsprechenden Maßeinheit skaliert. Negative Werte sind nicht erlaubt.
+
<percentage>
+
Ein {{cssxref("<percentage>")}} Wert,  der das Hintergrundbild auf den angegebenen Prozentwert des Hintergrund-Positionierungsbereich skaliert (angegeben durch {{cssxref("background-origin")}}). Standardmäßig umfasst der Positionierungsbereich den Inhalt des Elements und dessen Innenabstand (Padding), kann aber auch so abgeändert werden, dass er nur den Inhalt umfasst oder Inhalt, Innenabstand und Rahmen. Ist die {{cssxref("background-attachment","attachment")}} Eigenschaft auf fixed gesetzt, entspricht der Positionierungsbereich dem Browser-Fenster abzüglich des von eventuellen Scroll-Leisten genutzten Bereichs. Negative Prozentwerte sind nicht erlaubt.
+
auto
+
Das auto Schlüsselwort skaliert das Hintergrundbild so in die entsprechende Richtung, dass das ursprüngliche Seitenverhältnis beibehalten wird.
+
cover
+
Das cover Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so klein wie möglich ist, aber den Hintergrund-Positionierungsbereichs vollständig abdeckt.
+
contain
+
Das contain Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so groß wie möglich ist, aber vollständig im Hintergrund-Positionierungsbereichs enthalten ist.
+
+ +

Die Interpretation möglicher Werte hängt von den Maßen (Breite und Höhe) und der Proportion (Verhältnis von Breite zu Höhe) des Bildes ab. Eine Rastergrafik hat immer eigene Maße und eine eigene Proportion. Eine Vektorgrafik kann beide eigenen Maße haben (und somit auch eine eigene Proportion). Sie kann aber auch nur ein oder kein eigenes Maß haben. In beiden Fällen kann sie (muss aber nicht) eine eigen Proportion haben. Farbverläufe werden als Grafiken ohne eigene Maße und eigener Proportion behandelt.

+ +
Hinweis: Dieses Verhalten hat sich in Gecko 8.0 {{geckoRelease("8.0")}} geändert. Vorher wurden Farbverläufe als Grafiken ohne eigene Maße, aber mit einer eigenen Proportion behandelt. Die Proportion entsprach dabei derjenigen des Positionierungsbereich des Hintergrunds.
+ +

Hintergrundbilder, die mittels {{cssxref("-moz-element")}} generiert wurden, werden momentan als Bilder mit den Maßen des Elements behandelt. Außer es handelt sich um ein SVG-Element, dann werden die Maße des Hintergrund-Positionierungsbereich mit der eigenen Proportion verwendet.

+ +
Hinweis: Die entspricht nicht dem spezifizierten Verhalten, wonach die Maße und die Proportion stets denjenigen Werten des Elements entsprechen müssen.
+ +

Die gerenderte Größe des Hintergrundbildes wird folgendermaßen berechnet:

+ +
+
Falls beide Werte von background-size angegeben werden und nicht auto sind:
+
Das Hintergrundbild wird mit den angegebenen Werten gerendert.
+
Falls die Schlüsselwörter contain oder cover gesetzt werden:
+
Das Bild behält seine eigene Proportion bei, wobei die Maße so berechnet werden, dass das Bild im Hintergrund-Positionierungsbereich enthalten ist beziehungsweise ihn abdeckt. Besitzt das Bild keine eigene Proportion, wird es auf die Größe des Hintergrund-Positionierungsbereichs gerendert.
+
Falls background-size auto oder auto auto ist:
+
Besitzt das Bild beide Maße, wird es in dieser Größe gerendert. Hat es keine eigenen Maße und keine eigene Proportion, wird es in der Größe des Hintergrund-Positionierungsbereich gerendert. Hat es keine Maße, aber eine Proportion, wird es so gerendert als ob contain angegeben wurde. Hat es ein Maß angegeben und besitzt eine Proportion, wird es entsprechend dieser Angaben gerendert. Hat es ein Maß und keine Proportion, wird es mit diesem eigenen Maß und dem entsprechenden Maß des Hintergrund-Positionierungsbereichs gerendert.
+
Falls background-size ein auto und ein nicht-auto Wert besitzt:
+
Hat das Bild eine eigene Proportion, wird das nicht spezifizierte Maß aus dem angegebenen Maß und der Proportion berechnet. Hat das Bild keine eigene Proportion, wird das angebene Maß und das entsprechende eigene Maß des Bilds verwendet, falls vorhanden. Existiert kein eigenes Maß, wird dasjenige des Hintergrund-Positionierungsbereichs verwendet. 
+
+ +

Es ist zu beachten, dass Vektorgrafiken ohne Maße oder Proportion noch nicht vollständig in allen Browsern implementiert sind. Aus diesem Grund sollte man nicht zu sehr auf das oben beschriebene Verhalten vertrauen. Tests in unterschiedlichen Browsern (insbesondere Firefox 7 oder älter und Firefox 8 oder neuer) sind nötig, um festzustellen, ob die verschiedenen Darstellungen akzeptabel sind.

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Diese Demonstration von background-size: cover und diese Demonstration von background-size: contain sollten in einem neuen Fenster geöffnet werden, damit man das Verhalten von cover und contain bei ändernder Größe des Hintergrund-Positionierungsbereichs beobachten kann. Diese Demos zeigen das Zusammenspiel von background-size mit anderen background-* Attributen.

+ +

Hinweise

+ +

Wird ein Farbverlauf als HIntergrund und zusätzliche eine background-size angegeben, ist es empfehlenswert, die Hintergrund-Größe nicht mit einem einzelnen auto Wert oder nur mit einer Breite zu definieren (zum Beispiel background-size: 50%). Das Rendern solcher Farbverläufe hat sich mit Firefox 8 geändert und führt generell zu einer inkonsistenten Darstellung in Browsern, die die beiden Spezifikationen the CSS3 background-size specification und the CSS3 Image Values gradient specification nicht vollständig implementieren.

+ +
.bar {
+       width: 50px; height: 100px;
+       background-image: gradient(...);
+
+       /* NICHT EMPFOHLEN */
+       background-size: 25px;
+       background-size: 50%;
+       background-size: auto 50px;
+       background-size: auto 50%;
+
+       /* OKAY */
+       background-size: 25px 50px;
+       background-size: 50% 50%;
+}
+
+ +

Insbesondere ist es nicht empfohlen, ein Pixel-Wert und ein auto Wert zusammen mit einem Farbverlauf zu verwenden, da die Darstellung in Firefox-Versionen vor 8 oder in anderen Browsern, die nicht das Firefox 8 Rendering verwenden nicht nachzuvollziehen ist, wenn die genaue Größe des Elements nicht bekannt ist.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}{{Spec2('CSS3 Backgrounds')}} 
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.background-size")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/background/index.html b/files/de/web/css/background/index.html new file mode 100644 index 0000000000..d4e50112d0 --- /dev/null +++ b/files/de/web/css/background/index.html @@ -0,0 +1,182 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - CSS Background + - CSS Eigenschaft + - CSS Hintergrund + - Referenz +translation_of: Web/CSS/background +--- +
+

{{CSSRef("CSS Background")}}

+ +

Die CSS Kurzformat-Eigenschaft backgroundsetzt alle Hintergrundstileigenschaften auf einmal, wie Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode.

+ +
{{EmbedInteractiveExample("pages/css/background.html")}}
+ + + +

Eigenschaftsbestandteile

+ +

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

+ +
    +
  • {{cssxref("background-attachment")}}
    • +
  • {{cssxref("background-clip")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("background-origin")}}
    • +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-repeat")}}
    • +
  • {{cssxref("background-size")}}
    • +
+
+ +

Syntax

+ +
/* Verwendung von <background-color> */
+background: green;
+
+/* Verwendung von <bg-image> und <repeat-style> */
+background: url("test.jpg") repeat-y;
+
+/* Verwendung von <box> und <background-color> */
+background: border-box red;
+
+/* Ein einzelnes Bild, zentriert und skaliert */
+background: no-repeat center/80% url("../img/image.png");
+
+ +

Die Eigenschaft background wird als eine oder mehrere Hintergrundebenen, durch Kommata getrennt, angegeben.

+ +

Die Syntax der einzelnen Schichten ist wie folgt:

+ +
    +
  •  Jede Schicht kann null oder ein Vorkommen eines der folgenden Werte enthalten: + +
    • +
  • Der Wert <bg-size>  darf nur unmittelbar nach <position>, getrennt durch das Zeichen '/', wie folgt eingefügt werden: "center/80%".
    • +
  • Der Wert <box> kann Null, eins oder zwei Mal eingeschlossen werden. Wenn er einmal eingeschlossen wird, setzt er sowohl {{cssxref("background-origin")}} als auch {{cssxref("background-clip")}}. Bei zweimaligem Einschließen setzt das erste Vorkommen {{cssxref("background-origin")}} und das zweite Vorkommen {{cssxref("background-clip")}}.
    • +
  • Der Wert <background-color> darf nur in der zuletzt angegebenen Ebene enthalten sein.
    • +
+ +
Hinweis: Die {{cssxref("background-color")}} kann nur für den letzten Hintergrund definiert werden, da es nur eine Hintergrundfarbe für das gesamte Element gibt.
+ +

Werte

+ +

Einer oder mehrere der folgenden Werte, in beliebiger Reihenfolge:

+ +
+
<attachment>
+
Siehe {{cssxref("background-attachment")}}
+
<box>
+
Siehe {{cssxref("background-clip")}} and {{cssxref("background-origin")}}
+
<background-color>
+
Siehe {{cssxref("background-color")}}
+
<bg-image>
+
See {{Cssxref("background-image")}}
+
<position>
+
Siehe {{cssxref("background-position")}}
+
<repeat-style>
+
Siehe {{cssxref("background-repeat")}}
+
<bg-size>
+
Siehe {{cssxref("background-size")}}.
+
+ +

Bedenken zur Zugänglichkeit

+ +

Browser bieten keine speziellen Informationen über Hintergrundbilder zu unterstützenden Technologien. Dies ist vor allem für Bildschirmleseprogramme wichtig, da ein Bildschirmleseprogramm seine Anwesenheit nicht ankündigt und seinen Benutzern daher nichts vermittelt. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, diese im Dokument semantisch zu beschreiben.

+ + + +

Formale Definition

+ +

{{cssinfo}}

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Hintergründe mit farbigen Schlüsselwörtern und Bildern setzen

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

+ +
.warning {
+  background: pink;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_images")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}{{Spec2('CSS3 Backgrounds')}}Die Kurzformat-Eigenschaft wurde erweitert, sodass sie mehrere Hintergründe und die neuen Eigenschaften {{cssxref("background-size")}}, {{cssxref("background-origin")}} und {{cssxref("background-clip")}} unterstützt.
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}{{Spec2('CSS2.1')}}Keine wesentlichen Änderungen
{{SpecName('CSS1', '#background', 'background')}}{{Spec2('CSS1')}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +
+ + +

{{Compat("css.properties.background")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/basic-shape/index.html b/files/de/web/css/basic-shape/index.html new file mode 100644 index 0000000000..9c53920461 --- /dev/null +++ b/files/de/web/css/basic-shape/index.html @@ -0,0 +1,176 @@ +--- +title: +slug: Web/CSS/basic-shape +tags: + - CSS + - CSS Datentyp + - CSS Formen + - Referenz +translation_of: Web/CSS/basic-shape +--- +

{{CSSRef}}

+ +

Der <basic-shape> CSS Datentyp stellt eine geometrische Grundform dar. Er kann in den {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} und {{cssxref("offset-path")}} CSS-Eigenschaften verwendet werden.

+ +

Syntax

+ +

Die unten aufgelisteten Funktionen definieren <basic-shape> -Werte.

+ +

Wenn eine Form erstellt wird, definiert sich der Referenzrahmen durch jede CSS-Eigenschaft, die <basic-shape> -Werte benutzt. Der Koordinatenursprung für die Form liegt in der oberen linken Ecke des Referenzrahmens, wobei die x-Achse nach rechts und die y-Achse nach unten verläuft. Dieses Koordinatensystem ist in vielen Computergrafiksystemen üblich.

+ +

Form-Funktionen

+ +

Die folgenden Formen werden unterstützt. Alle <basic-shape> Werte verwenden die funktionale Schreibweise und werden mithilfe der Wertdefinitionssyntax definiert.

+ +
+
inset()
+
+ 
inset( <shape-arg>{1,4} [round <border-radius>]? )
+ +

Definiert ein nach innen versetztes Rechteck.

+ +

Wenn alle vier ersten Argumente vorhanden sind, stellen sie den Versatz des Rechtecks oben, links, rechts und unten dar. Der Versatz bezieht sich auf den Referenzrahmen. Wie auch bei der {{cssxref("margin")}}-Eigenschaft können weniger als vier Werte als Kurzform angegeben werden.

+ +

Die optionalen {{cssxref("<border-radius>")}}-Argumente definieren abgerundete Ecken für das Rechteck. Auch hier ist die <border-radius>-Kurzform-Syntax zulässig.

+
+
circle()
+
+ 
circle( [<shape-radius>]? [at <position>]? )
+ +

Definiert einen Kreis.

+ +

Das <shape-radius>-Argument stellt den Radius r des Kreises dar, negative Werte sind verboten. Ein Prozentwert bezieht sich auf sqrt(a^2+b^2)/sqrt(2), wobei a und b Höhe und Breite des Referenzrahmens darstellen. Dieser Referenzwert ist die Länge einer Seite eines Quadrats, das dieselbe Fläche wie der Referenzrahmen hat.

+ +

Das {{cssxref("<position>")}}-Argument definiert den Mittelpunkt des Kreises. Standardmäßig wird der Kreis in der Mitte des Referenzrahmens platziert.

+
+
ellipse()
+
+ 
ellipse( [<shape-radius>{2}]? [at <position>]? )
+ +

Definiert eine Ellipse, deren Hauptachse und Nebenachse entlang der x- oder y-Achsen verlaufen.

+ +

Das <shape-radius> Argument repräsentiert den Radius entlang der x- bzw. y-Achse. Negative Werte sind ungültig. Prozentwerte werden im Verhältnis zur Breite (für die x-Achse) und Höhe (für die y-Achse) des Referenzrahmens bestimmt.

+ +

Das {{cssxref("<position>")}}-Argument definiert den Mittelpunkt der Ellipse. Standardmäßig wird die Ellipse in der Mitte des Referenzrahmens platziert.

+
+
+ +
+
polygon()
+
+ 
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
+ +

Definiert ein Vieleck (Polygon).

+ +

<fill-rule> definiert die Füllregel, die zur Bestimmung der Innenfläche des Polygons verwendet werden soll. Mögliche Werte sind nonzero und evenodd. Der Standardwert ist nonzero.

+ +

Jedes Argumentpaar der Liste stellt die x- und y-Koordinate einer Ecke des Vielecks dar.

+
+
path()
+
+ 
path( [<fill-rule>,]? <string>)
+ +

Definiert einen SVG-Pfad, also eine Kombination aus Kurven, Strecken und Punkten.

+ +

<fill-rule> definiert die Füllregel, die zur Bestimmung der Innenfläche des Polygons verwendet werden soll. Mögliche Werte sind nonzero und evenodd. Der Standardwert ist nonzero.

+ +

<string> entspricht dem d-Attribut des SVG-Pfades und ist der SVG-Pfad-Text in Anführungszeichen.

+
+
+ +

Die Argumente, die oben nicht definiert sind, werden folgendermaßen definiert:

+ +
<shape-arg> = <length> | <percentage>
+<shape-radius> = <length> | <percentage> | closest-side | farthest-side
+ +

closest-side verwendet den Abstand des Mittelpunkts der Form zur nächsten Seite des Referenzrahmens. Für Kreise ist dies die nächste Seite in beliebiger Richtung. Für Ellipsen ist dies die nächste Seite in Radiusrichtung.

+ +

farthest-side verwendet die Länge vom Mittelpunkt der Form zur entferntesten Seite der Referenzrahmens. Für Kreise ist dies die entfernteste Seite in beliebiger Richtung. Für Ellipsen ist dies die entfernteste Seite in Radiusrichtung.

+ +

Berechnete Werte von Grundformen

+ +

Die Werte in einer <basic-shape> Funktion werden wie angegeben berechnet, mit folgenden Ausnahmen:

+ +
    +
  • Anstelle von ausgelassenen Werten werden Standardwerte verwendet.
    • +
  • Ein {{cssxref("<position>")}}-Wert in circle() oder  ellipse() wird als ein Versatzpaar (horizontal, dann vertikal) vom Ursprung berechnet, wobei jeder Versatz als Kombination einer absoluten Länge und einem Prozentwert angegeben wird.
    • +
  • Ein <border-radius> Wert in inset() wird als eine erweiterte Liste aller acht {{cssxref("<length>")}}-Werte oder Prozentwerte berechnet.
    • +
+ +

Interpolation von Grundformen

+ +
Zur Interpolation zwischen zwei Grundformen werden die folgenden Regeln angewandt. In den Formfunktionen werden alle Werte als Liste interpoliert. Die Listenwerte werden, soweit möglich, als {{cssxref("<length>")}}, {{cssxref("<percentage>")}} oder {{cssxref("calc")}}-Ausdruck interpoliert. Falls die Listenwerte nicht diesen Typen entsprechen, jedoch identisch sind (wie beispielsweise Zahlen ungleich null an der gleichen Position innerhalb beider Listen), werden diese Werte interpoliert.
+ +
+ +
    +
  • Beide Formen müssen den gleichen Referenzrahmen verwenden.
    • +
  • Falls beide Formen vom gleichen Typ sind, d. h. vom Typ ellipse() oder circle(), und keiner der Radien die Schlüsselwörter closest-side oder farthest-side verwendt, wird zwischen jedem Wert der Formfunktionen interpoliert.
    • +
  • Falls beide Formen vom Typ inset() sind, wird zwischen jedem Wert der Formfunktionen interpoliert.
    • +
  • Falls beide Formen vom Typ polygon() sind, beide Vielecke die gleiche Anzahl an Eckpunkten haben und die gleiche <fill-rule> verwenden, wird zwischen jedem Wert der Formfunktionen interpoliert.
    • +
  • In allen anderen Fällen findet keine Interpolation statt.
    • +
+ +

Beispiele

+ +

Animiertes Polygon

+ +

In diesem Beispiel nutzten wir eine @keyframes Regel, um den Pfad zwischen zwei Vielecken zu animieren. (In diesem Beispiel müssen beide Vielecke dieselbe Anzahl Kanten haben.)

+ +

HTML

+ +
<div></div>
+ +

CSS

+ +
div {
+  width: 300px;
+  height: 300px;
+  background: repeating-linear-gradient(red, orange 50px);
+  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  animation: 4s poly infinite alternate ease-in-out;
+  margin: 10px auto;
+}
+
+@keyframes poly {
+  from {
+    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  }
+
+  to {
+    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
+  }
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample('Animated_polygon','340', '340')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}{{ Spec2('CSS Shapes') }}Ursprüngliche Definition.
+ +

Browser Kompatibilität

+ +

{{Compat("css.types.basic-shape")}}

+ +

Siehe auch

+ +
    +
  • {{cssxref("shape-outside")}}
    • +
diff --git a/files/de/web/css/berechneter_wert/index.html b/files/de/web/css/berechneter_wert/index.html new file mode 100644 index 0000000000..d98a8be023 --- /dev/null +++ b/files/de/web/css/berechneter_wert/index.html @@ -0,0 +1,32 @@ +--- +title: Berechneter Wert +slug: Web/CSS/berechneter_Wert +tags: + - CSS + - Guide + - Web +translation_of: Web/CSS/computed_value +--- +
+ {{cssref}}
+

Übersicht

+

Der berechnete Wert einer CSS Eigenschaft wird aus dem angegebenen Wert berechnet durch:

+
    +
  • Verarbeitung der speziellen Werte {{ cssxref("inherit") }} und {{ cssxref("initial") }} und
    • +
  • durch die Berechnung, die benötigt wird, um den Wert zu erreichen, der in der Zeile "Berechneter Wert" in der Übersicht der Eigenschaft beschrieben wird.
    • +
+

Die Berechnung, die benötigt wird, um den "berechneten Wert" für die Eigenschaft zu erreichen, beinhaltet typischerweise die Konvertierung relativer Werte (wie die in em Einheiten oder Prozentangaben) zu absoluten Werten.

+

Wenn zum Beispiel ein Element einen Wert font-size:16px und padding-top:2em definiert hat, dann ist der berechnete Wert von padding-top gleich 32px (zweimal die Schriftgröße).

+

Für einige Eigenschaften jedoch (jene, für die Prozentangaben relativ zu etwas sind, das Layout zur Bestimmung benötigt, wie width, margin-right, text-indent und top), werden definierte Prozentwerte zu berechneten Prozentwerten. Des weiteren werden in line-height definierte einheitenlose Zahlen zu berechneten Werten, wie angegeben. Diese relativen Werte, die im berechneten Wert gleich bleiben, werden absolut sobald der benutzte Wert ermittelt wird.

+

Der Hauptnutzen des berechneten Wertes (außer als ein Schritt zwischen dem angegebenen Wert und dem benutzten Wert) ist Vererbung inklusive dem {{ cssxref("inherit") }} Schlüsselwort.

+

Hinweis

+

Die {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API gibt den aufgelösten Wert zurück, welcher abhängig von der Eigenschaft entweder der berechnete Wert oder der benutzte Wert ist.

+

Spezifikation

+ +

Siehe auch

+ diff --git a/files/de/web/css/border-bottom-color/index.html b/files/de/web/css/border-bottom-color/index.html new file mode 100644 index 0000000000..86561e834a --- /dev/null +++ b/files/de/web/css/border-bottom-color/index.html @@ -0,0 +1,99 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - CSS Eigenschaft + - CSS Rahmen + - Referenz +translation_of: Web/CSS/border-bottom-color +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die border-bottom-color CSS Eigenschaft legt die Farbe des unteren Rahmens eines Elements fest. Beachte, dass in vielen Fällen die Kurzschreibweisen {{cssxref("border-color")}} oder {{cssxref("border-bottom")}} geeigneter und daher zu bevorzugen sind.

+ +

{{cssinfo}}

+ +

Syntax

+ +
border-bottom-color: yellow;
+border-bottom-color: #F5F6F7;
+
+ +

Werte

+ +
+
<color>
+
Ist ein {{cssxref("<color>")}} CSS Wert, der die Farbe des unteren Rahmens beschreibt.
+
inherit
+
Ist ein Schlüsselwort, das die Farbe des unteren Rahmens des Elternelements kennzeichnet (welche sich vom Standardwert von border-bottom-color unterscheiden kann).
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Ein einfacher div mit einem Rahmen

+ +

HTML Inhalt

+ +
<div class="mybox">
+    <p>Dies ist eine Box mit einem Rahmen außenrum.
+       Beachte welche Seite der Box
+       <span class="redtext">rot</span> ist.</p>
+</div>
+ +

CSS Inhalt

+ +
.mybox {
+    border: solid 0.3em gold;
+    border-bottom-color: red;
+    width: auto;
+}
+.redtext {
+    color: red;
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample("Ein_einfacher_div_mit_einem_Rahmen")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName("CSS3 Backgrounds", "#border-bottom-color", "border-bottom-color")}}{{Spec2("CSS3 Backgrounds")}}Keine nennenswerten Änderungen, jedoch wurde das Schlüsselwort transparent entfernt, das nun in {{cssxref("<color>")}} beinhaltet ist, welcher erweitert wurde.
{{SpecName("CSS2.1", "box.html#border-color-properties", "border-bottom-color")}}{{Spec2('CSS2.1')}}Erstmalige Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-bottom-color")}} + +

Siehe auch

+ +
    +
  • Die rahmenbezogenen CSS Kurzschreibweise Eigenschaften {{Cssxref("border")}}, {{Cssxref("border-bottom")}} und {{Cssxref("border-color")}}.
    • +
  • Die farbbezogenen CSS Eigenschaften, die sich auf die anderen Ränder beziehen: {{Cssxref("border-right-color")}}, {{Cssxref("border-top-color")}} und {{Cssxref("border-left-color")}}.
    • +
  • Die anderen rahmenbezogenen CSS Eigenschaften, die sich auf denselben Rand beziehen: {{cssxref("border-bottom-style")}} und {{cssxref("border-bottom-width")}}.
    • +
diff --git a/files/de/web/css/border-bottom-left-radius/index.html b/files/de/web/css/border-bottom-left-radius/index.html new file mode 100644 index 0000000000..ad1aea03ac --- /dev/null +++ b/files/de/web/css/border-bottom-left-radius/index.html @@ -0,0 +1,51 @@ +--- +title: border-bottom-left-radius +slug: Web/CSS/border-bottom-left-radius +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-bottom-left-radius +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die CSS Eigenschaft border-bottom-left-radius legt die Abrundung der unteren, linken Ecke eines Elements fest. Vor Gecko 2.0 (Firefox) war diese Eigenschaft unter dem Namen -moz-border-radius-bottomleft bekannt.

+ +

Weitere Informationen sind unter border-top-left-radius verfügbar.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("border-bottom-left-radius")}}
+ +
border-bottom-left-radius: radius               /* the corner is a circle    */  E.g. border-bottom-left-radius: 3px
+border-bottom-left-radius: horizontal vertical  /* the corner is an ellipsis */  E.g. border-bottom-left-radius: 0.5em 1em
+
+border-bottom-left-radius: inherit
+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

{{cssinfo}}

+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.border-bottom-left-radius")}}

diff --git a/files/de/web/css/border-bottom-right-radius/index.html b/files/de/web/css/border-bottom-right-radius/index.html new file mode 100644 index 0000000000..786a7a21a7 --- /dev/null +++ b/files/de/web/css/border-bottom-right-radius/index.html @@ -0,0 +1,56 @@ +--- +title: border-bottom-right-radius +slug: Web/CSS/border-bottom-right-radius +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - CSS Ränder + - Layout + - NeedsContent +translation_of: Web/CSS/border-bottom-right-radius +--- +

{{CSSRef}}

+ +

Die CSS Eigenschaft border-bottom-right-radius legt die Abrundung der unteren rechten Ecke eines Elements fest. Vor Gecko 2.0 (Firefox 4) war diese Eigenschaft unter dem Namen -moz-border-radius-bottomright bekannt.

+ +

Weitere Informationen sind unter border-top-left-radius verfügbar.

+ +

{{cssinfo("border-bottom-right-radius")}}

+ +

Syntax

+ +
border-bottom-right-radius: radius               /* the corner is a circle    */  E.g. border-bottom-right-radius: 3px
+border-bottom-right-radius: horizontal vertical  /* the corner is an ellipsis */  E.g. border-bottom-right-radius: 0.5em 1em
+
+border-bottom-right-radius: inherit
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

{{cssinfo}}

+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.border-bottom-right-radius")}}

diff --git a/files/de/web/css/border-bottom-style/index.html b/files/de/web/css/border-bottom-style/index.html new file mode 100644 index 0000000000..bfd0ec4249 --- /dev/null +++ b/files/de/web/css/border-bottom-style/index.html @@ -0,0 +1,99 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-bottom-style +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die border-bottom-style Eigenschaft legt die Rahmenart des unteren Rahmens fest.

+ +

{{cssinfo}}

+ +

Syntax

+ +
border-bottom-style: {{csssyntax("border-bottom-style")}}
+
+ +

Werte

+ +
+
none
+
Standardwert. Es wird kein unterer Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.
+
hidden
+
Genau wie bei none wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.
+ Wenn border-collapse: collapse gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.
+
dotted
+
Punktierte Linie.
+
dashed
+
Gestrichelte Linie.
+
solid
+
Durchgehende Linie.
+
double
+
Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der border-bottom-width Angabe groß.
+
groove
+
Der Rahmen wirkt eingekerbt (3D-Effekt).
+
ridge
+
Der Rahmen wirkt wie eine Kante (3D-Effekt).
+
inset
+
Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).
+
outset
+
Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Beispiele

+ +
.beispielEins {
+  border-bottom-style: dashed;      /* gestrichelt */
+}
+
+.beispielZwei {
+  border-bottom-style: groove;      /* Einkerbung */
+}
+
+.beispielDrei {
+ border-bottom-style: hidden;       /* Collapsing Border Model */
+ border-collapse: collapse;
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Backgrounds', '#border-bottom-style', 'border-bottom-style') }}{{ Spec2('CSS3 Backgrounds') }}keine Änderung
{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}{{ Spec2('CSS2.1') }}Standardwert definiert
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-bottom-style")}} + +

Siehe auch

+ +
    +
  • {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, and {{ Cssxref("border-bottom-width") }}
    • +
  • {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, and {{ Cssxref("border-style") }}
    • +
diff --git a/files/de/web/css/border-bottom-width/index.html b/files/de/web/css/border-bottom-width/index.html new file mode 100644 index 0000000000..6f67816001 --- /dev/null +++ b/files/de/web/css/border-bottom-width/index.html @@ -0,0 +1,82 @@ +--- +title: border-bottom-width +slug: Web/CSS/Border-bottom-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-bottom-width +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die border-bottom-width Eigenschaft legt die Breite des unteren Rahmens fest.

+ +

{{cssinfo("border-bottom-width")}}

+ +

Syntax

+ +
border-bottom-width: {{csssyntax("border-bottom-width")}}
+
+
+ +

Werte

+ +
+
<Länge>
+
Eine Längenangabe die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.
+
thin
+
Eine dünne Rahmenlinie (1px).
+
medium
+
Standardwert. Eine mitteldicke Rahmenlinie (3px).
+
thick
+
Eine dicke Rahmenlinie (5px).
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Beispiele

+ +
.beispielEins {
+  border-bottom-width: 10px;
+}
+
+.beispielZwei {
+  border-bottom-width: thin;
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width') }}{{ Spec2('CSS3 Backgrounds') }}Keine Änderung
{{ SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width') }}{{ Spec2('CSS2.1') }}Standardwert definiert
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-bottom-width")}} + +

Siehe auch

+ +
    +
  • {{Cssxref("border")}}, {{Cssxref("border-bottom")}}, {{Cssxref("border-bottom-style")}} und {{Cssxref("border-bottom-color")}}
    • +
  • {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}} und {{Cssxref("border-width")}}
    • +
diff --git a/files/de/web/css/border-bottom/index.html b/files/de/web/css/border-bottom/index.html new file mode 100644 index 0000000000..8d93a330f4 --- /dev/null +++ b/files/de/web/css/border-bottom/index.html @@ -0,0 +1,89 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - CSS Eigenschaft + - CSS Rahmen + - Referenz +translation_of: Web/CSS/border-bottom +--- +

{{ CSSRef("CSS Borders") }}

+ +

Übersicht

+ +

Die border-bottom Eigenschaft legt den unteren Rahmen eines Elementes fest und ist eine Kurzform für
+ border-bottom-color, border-bottom-style und border-bottom-width. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+
+ +

Werte

+ +
+
<Rahmenbreite>
+
Optional. Wenn nichts festgelegt ist, wird medium verwendet. Siehe: border-bottom-width.
+
<Rahmenstil>
+
Erforderlich. Wenn nichts festgelegt ist, wird none verwendet. Siehe: border-bottom-style.
+
<Rahmenfarbe>
+
Optional. Wenn nichts festgelegt ist, wird der Wert der color Eigenschaft des Elements genommen. Siehe: border-bottom-color.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Beispiele

+ +
.beispielEins {
+  border-bottom: 1px solid #000;
+}
+
+.beispielZwei {
+  border-bottom-style: dotted;
+  border-bottom: thick green;
+
+  /* Bedeutet das gleiche wie: */
+
+  border-bottom-style: dotted;
+  border-bottom: none thick green;
+
+  /* border-bottom-style wird nach Angabe von border-bottom ignoriert.
+  Es wird kein unterer Rahmen gezeichnet. */
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom') }}{{ Spec2('CSS3 Backgrounds') }}No direct changes, though the modification of values for the {{ cssxref("border-bottom-color") }} do apply to it.
{{ SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom') }}{{ Spec2('CSS2.1') }}No significant changes
{{ SpecName('CSS1', '#border-bottom', 'border-bottom') }}{{ Spec2('CSS1') }} 
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-bottom")}} diff --git a/files/de/web/css/border-collapse/index.html b/files/de/web/css/border-collapse/index.html new file mode 100644 index 0000000000..52a2fcb4f1 --- /dev/null +++ b/files/de/web/css/border-collapse/index.html @@ -0,0 +1,155 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - CSS Border + - CSS Rahmen + - CSS Referenz + - CSS Table + - Referenz +translation_of: Web/CSS/border-collapse +--- +

{{CSSRef}}

+ +

Die CSS Eigenschaft border-collapse bestimmt, ob die Zellen innerhalb einer Tabelle mite einem gemeinsamen oder getrennten Rahmen dargestellt werden.

+ +
{{EmbedInteractiveExample("pages/css/border-collapse.html")}}
+ + + +
Hinweis: Wenn der Wert auf collapsed gesetzt ist, so verhält sich der Wert inset für {{cssxref("border-style")}} wie der Wert groove und der Wert outset wie ridge.
+ +
Hinweis: When cells are separated, the distance between cells is defined by the {{cssxref("border-spacing")}} property.
+ +

Syntax

+ +
/* Keyword values */
+border-collapse: collapse;
+border-collapse: separate;
+
+/* Global values */
+border-collapse: inherit;
+border-collapse: initial;
+border-collapse: unset;
+
+ +

Die Eigenschaft border-collapse wird als ein einziges Schlüsselwort angegeben, das aus der folgenden Liste ausgewählt werden kann.

+ +

Werte

+ +
+
separate
+
Standardwert. Jede Zelle besitzt ihre eigenen Rahmen, deren Abstand mit border-spacing angegeben wird.
+
collapse
+
Benachbarte Zellen haben einen gemeinsame Rahmen.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Formal definition

+ +

{{CSSInfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ + + +

A colorful table of browser engines

+ +

HTML

+ +
<table class="separate">
+  <caption><code>border-collapse: separate</code></caption>
+  <tbody>
+    <tr><th>Browser</th> <th>Layout Engine</th></tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
+    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
+  </tbody>
+</table>
+<table class="collapse">
+  <caption><code>border-collapse: collapse</code></caption>
+  <tbody>
+    <tr><th>Browser</th> <th>Layout Engine</th></tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
+    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
+  </tbody>
+</table>
+ +

CSS

+ +
.collapse {
+  border-collapse: collapse;
+}
+
+.separate {
+  border-collapse: separate;
+}
+
+table {
+  display: inline-table;
+  margin: 1em;
+  border: dashed 5px;
+}
+
+table th,
+table td {
+  border: solid 3px;
+}
+
+.fx { border-color: orange blue; }
+.gk { border-color: black red; }
+.ed { border-color: blue gold; }
+.tr { border-color: aqua; }
+.sa { border-color: silver blue; }
+.wk { border-color: gold blue; }
+.ch { border-color: red yellow green blue; }
+.bk { border-color: navy blue teal aqua; }
+.op { border-color: red; }
+ +

Ergebnis

+ +

{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS2.1', 'tables.html#borders', 'border-collapse') }}{{ Spec2('CSS2.1') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("css.properties.border-collapse")}}

+ +

Siehe auch

+ +
    +
  • {{cssxref("border-spacing")}}, {{cssxref("border-style")}}, {{cssxref("caption-side")}}, {{cssxref("empty-cells")}}, {{cssxref("table-layout")}}
    • +
diff --git a/files/de/web/css/border-color/index.html b/files/de/web/css/border-color/index.html new file mode 100644 index 0000000000..bfac86d3ca --- /dev/null +++ b/files/de/web/css/border-color/index.html @@ -0,0 +1,107 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-color +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die border-color Eigenschaft legt die Farbe des oberen, rechten, unteren und linken Rahmens fest.

+ +

{{cssinfo}}

+ +

Syntax

+ +
border-color:  {{csssyntax("border-color")}}
+
+ +

Werte

+ +
+
<Farbe>
+
Farbangabe [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]
+
transparent
+
Der Rahmen hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
Ein Wert
+
Gilt für alle vier Seiten: border-top-color, border-right-color, border-bottom-color und border-left-color.
+
Zwei Werte
+
Der erste Wert gilt für border-top-color und border-bottom-color, der zweite Wert für border-right-color und border-left-color.
+
Drei Werte
+
Der erste Wert gilt für border-top-color, der zweite Wert für border-right-color und border-left-color und der dritte Wert für border-bottom-color.
+
Vier Werte
+
Der erste Wert gilt für border-top-color, der zweite Wert für border-right-color, der dritte Wert für border-bottom-color und der vierte Wert für border-left-color.
+
+ +

Beispiele

+ +
.beispielEins {
+  border: solid;
+  border-color: blue;
+}
+
+ +
.beispielZwei {
+  border: solid;
+  border-color: blue #f00;
+}
+
+ +
.beispielDrei {
+  border: solid;
+  border-color: blue #f00 rgb(0,150,0);
+}
+
+ +
.beispielVier {
+  border: solid;
+  border-color: blue #f00 rgb(0,150,0) transparent;
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Backgrounds', '#border-color', 'border-color') }}{{ Spec2('CSS3 Backgrounds') }}The transparent keyword has been removed as it is now a part of the {{cssxref("<color>")}} data type.
{{ SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color') }}{{ Spec2('CSS2.1') }}The property is now a shorthand property
{{ SpecName('CSS1', '#border-color', 'border-color') }}{{ Spec2('CSS1') }} 
+ +

Browser Kompatibilität

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

Siehe auch

+ +
    +
  • {{CSSxRef("border")}}
    • +
  • {{CSSxRef("border-top-color")}}, {{CSSxRef("border-right-color")}}, {{CSSxRef("border-bottom-color")}}, {{CSSxRef("border-left-color")}}
    • +
  • {{CSSxRef("<color>")}}</color>
    • +
  • {{CSSxRef("color")}}, {{CSSxRef("background-color")}}, {{CSSxRef("outline-color")}}, {{CSSxRef("text-decoration-color")}}, {{CSSxRef("text-emphasis-color")}}, {{CSSxRef("text-shadow")}}, {{CSSxRef("caret-color")}}, and {{CSSxRef("column-rule-color")}}
    • +
diff --git a/files/de/web/css/border-image-outset/index.html b/files/de/web/css/border-image-outset/index.html new file mode 100644 index 0000000000..7cd1f0410c --- /dev/null +++ b/files/de/web/css/border-image-outset/index.html @@ -0,0 +1,77 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - CSS + - CSS Eigenschaft + - CSS Rahmen + - Grafik + - Layout + - Referenz + - Web +translation_of: Web/CSS/border-image-outset +--- +
{{CSSRef("CSS Borders")}}
+ +

Übersicht

+ +

Die border-image-outset CSS Eigenschaft beschreibt, um welchem Wert der Randbildbereich über die Borderbox hinausragt.

+ +
{{cssinfo}}
+ +

Syntax

+ +
{{csssyntax}}
+
+ +
border-image-outset: Seiten                  /* Ein-Wert Syntax   */  z. B. border-image-outset: 30%;
+border-image-outset: vertikal horizontal     /* Zwei-Werte Syntax   */  z. B. border-image-outset: 10% 30%;
+border-image-outset: oben horizontal unten   /* Drei-Werte Syntax */  z. B. border-image-outset: 30px 30% 45px;
+border-image-outset: oben rechts unten links /* Vier-Werte syntax  */  z. B. border-image-outset: 7px 12px 14px 5px;
+
+border-image-repeat: inherit
+
+ +

Werte

+ +
+
Seiten
+
Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich die Borderbox in allen vier Richtungen überragt.
+
horizontal
+
Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich die Borderbox in beiden horizontalen Richtungen überragt.
+
vertikal
+
Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich die Borderbox in beiden vertikalen Richtungen überragt.
+
oben
+
Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den oberen Rand der Borderbox hinausragt.
+
unten
+
Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den unteren Rand der Borderbox hinausragt.
+
rechts
+
Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den rechten Rand der Borderbox hinausragt.
+
links
+
Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den linken Rand der Borderbox hinausragt.
+
inherit
+
Ist ein Schlüsselwort, das angibt, dass alle vier Werte vom berechneten Wert des Elternelements geerbt werden.
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-image-outset")}} diff --git a/files/de/web/css/border-image-repeat/index.html b/files/de/web/css/border-image-repeat/index.html new file mode 100644 index 0000000000..b721074674 --- /dev/null +++ b/files/de/web/css/border-image-repeat/index.html @@ -0,0 +1,83 @@ +--- +title: border-image-repeat +slug: Web/CSS/border-image-repeat +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Grafik + - Layout + - Referenz +translation_of: Web/CSS/border-image-repeat +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die border-image-repeat CSS Eigenschaft definiert, wie der mittlere Teil eines Randbildes gehandhabt wird, sodass es in die Ausmaße des Randes passt. Sie hat eine Einwert-Syntax, welche das Verhalten aller Seiten beschreibt, und eine Zweiwert-Syntax, welche unterschiedliche Werte für das horizontale und vertikale Verhalten setzt.

+ +
{{cssinfo}}
+ +

Syntax

+ +
/* border-image-repeat: Typ */
+border-image-repeat: stretch;
+
+/* border-image-repeat: horizontal vertikal */
+border-image-repeat: round stretch;
+
+/* Globale Werte */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+
+ +

Werte

+ +
+
type
+
Eins der Schlüsselwörter stretch, repeat, round oder space, die angeben, wie das Bild wiederholt wird. Dies wird nur in der Einwert-Syntax verwendet.
+
horizontal
+
Eins der Schlüsselwörter stretch, repeat, round oder space, die angeben, wie das Bild horizontal wiederholt wird. Dies wird nur in der Zweiwert-Syntax verwendet.
+
vertical
+
Eins der Schlüsselwörter stretch, repeat, round oder space, die angeben, wie das Bild vertikal wiederholt wird. Dies wird nur in der Zweiwert-Syntax verwendet.
+
stretch
+
Schlüsselwort, das angibt, dass das Bild gedehnt werden soll, um den Leerraum zwischen beiden Rändern zu füllen.
+
repeat
+
Schlüsselwort, das angibt, dass das Bild wiederholt werden soll, um den Leerraum zwischen beiden Rändern zu füllen.
+
round
+
Schlüsselwort, das angibt, dass das Bild wiederholt werden soll bis es den Leerraum zwischen beiden Rändern füllt. Falls das Bild nach einer ganzzahligen Wiederholung nicht den gesamten Leerraum ausfüllt, wird es skaliert, damit es passt.
+
inherit
+
Schlüsselwort, das angibt, dass die Werte vom berechneten Wert des Elternelements geerbt werden sollen.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Siehe {{cssxref("border-image")}} für Beispiele, welche Auswirkungen Wiederholungswerte haben.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}}{{Spec2('CSS3 Backgrounds')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-image-repeat")}} diff --git a/files/de/web/css/border-image-slice/index.html b/files/de/web/css/border-image-slice/index.html new file mode 100644 index 0000000000..c52c885c16 --- /dev/null +++ b/files/de/web/css/border-image-slice/index.html @@ -0,0 +1,102 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Grafik + - Layout + - NeedsExample + - Referenz +translation_of: Web/CSS/border-image-slice +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die border-image-slice CSS Eigenschaft teilt das Bild, welches von {{cssxref("border-image-source")}} spezifiziert wird, in neun Regionen ein: Die vier Ecken, die vier Kanten und die Mitte. Diese werden von 4 Werten festgelegt.

+ +

The nine slices defined by the CSS border-image shorthand or border-image-slice longhand propertiesVier Werte kontrollieren die Position der Schneidelinien, die das Bild einteilen. Werden nicht alle Werte definiert, werden sie von den anderen angegebenen, mit der üblichen 4-Werte CSS Syntax, abgeleitet.

+ +

Die Mitte des Bildes wird nicht im Rand verwendet, kann allerdings als Hintergrundbild benutzt werden, wenn das Schlüsselwort fill gesetzt wurde. Dies kann an jeder Position der CSS-Eigenschaft geschehen (vor, hinter oder zwischen anderen Werten).

+ +

Die Eigenschaften {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} definieren die weitere Verwendung des Bildes.

+ +

Die Kurzschreibweise {{cssxref("border-image")}} kann diese Eigenschaft zu ihrem Standardwert zurücksetzen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* border-image-slice: slice */
+border-image-slice: 30%;
+
+/* border-image-slice: horizontal vertikal */
+border-image-slice: 10% 30%;
+
+/* border-image-slice: oben vertikal unten */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice: oben rechts unten links */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill */
+/* Der fill Wert kann zwischen beliebigen Werten platziert werden */
+border-image-slice: 10% fill 7 12;
+
+/* Globale Werte */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+
+ +

Werte

+ +
+
slice
+
ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der vier Schneidelinien vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
+
horizontal
+
ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der zwei horizontalen Schneidelinien, die von oben und unten, vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
+
vertical
+
ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der zwei vertikalen Schneidelinien, die von rechts und links, vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
+
top
+
ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der oberen Schneidelinie vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
+
bottom
+
ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der unteren Schneidelinie vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
+
right
+
ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der rechten Schneidelinie vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
+
left
+
ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der linken Schneidelinie vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
+
fill
+
ist ein Schlüsselwort, das die mittlere Region des Bildes über dem Hintergrundbild abbildet. Seine Größe wird dabei jeweils an die der oberen und linken Bildregionen angepasst.
+
inherit
+
ist ein Schlüsselwort, welches bewirkt, dass alle vier Werte von den berechneten Werten des Elternelements übernommen (vererbt) werden.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-image-slice")}} diff --git a/files/de/web/css/border-image-source/index.html b/files/de/web/css/border-image-source/index.html new file mode 100644 index 0000000000..1ec0a50134 --- /dev/null +++ b/files/de/web/css/border-image-source/index.html @@ -0,0 +1,67 @@ +--- +title: border-image-source +slug: Web/CSS/border-image-source +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Referenz +translation_of: Web/CSS/border-image-source +--- +
{{CSSRef("CSS Borders")}}
+ +

Übersicht

+ +

Die border-image-source CSS Eigenschaft definiert den {{cssxref("<image>")}} Wert, der anstatt dem Stil des Randes verwendet wird. Falls diese Eigenschaft auf none gesetzt wird, wird der Stil verwendet, der durch {{cssxref("border-style")}} definiert wird.

+ +
Hinweis: Obwohl jeder {{cssxref("<image>")}} Wert innerhalb dieser CSS Eigenschaft verwendet werden kann, ist die Browserunterstützung bisher noch begrenzt und einige Browser unterstützen nur Bilder, die über die url() Funktion angegeben werden.
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Kein Randbild, stattdessen wird der angegebene border-style verwendet */
+border-image-source: none;
+
+/* image.jpg wird als Bild verwendet */
+border-image-source: url(image.jpg);
+
+/* Farbverlauf wird als Bild verwendet */
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* Globale Werte */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Siehe {{cssxref("border-image")}} für Beispiele, welchen Einfluss die verschiedenen Werte haben.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Backgrounds', '#border-image-source', 'border-image-source')}}{{Spec2('CSS3 Backgrounds')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-image-source")}} diff --git a/files/de/web/css/border-image-width/index.html b/files/de/web/css/border-image-width/index.html new file mode 100644 index 0000000000..e367bc1406 --- /dev/null +++ b/files/de/web/css/border-image-width/index.html @@ -0,0 +1,119 @@ +--- +title: border-image-width +slug: Web/CSS/border-image-width +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Grafik + - Layout + - Referenz +translation_of: Web/CSS/border-image-width +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Eigenschaft border-image-width definiert die Breite des Randbilds. Wenn sie definiert wird, wird die Eigenschaft {{cssxref("border-width")}} durch ihren Wert überschrieben.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* border-image-width: all */
+border-image-width: 3;
+
+/* border-image-width: vertical horizontal */
+border-image-width: 2em 3em;
+
+/* border-image-width: top horizontal bottom */
+border-image-width: 5% 15% 10%;
+
+/* border-image-width: top right bottom left */
+border-image-width: 5% 2em 10% auto;
+
+/* Globale Werte */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+
+ +

wobei:

+ +
+
width
+
Ist ein Wert, der die Breite des Bildes angibt, das als Rand für alle vier Ränder verwendet wird. Er wird ausschließlich in der Einwert-Syntax verwendet.
+
vertical
+
Ist ein Wert, der die Breite des Bildes angibt, das für alle vertikalen Ränder, d. h. den oberen und unteren Rand, verwendet wird. Er wird ausschließlich in der Zweiwert-Syntax verwendet.
+
horizontal
+
Ist ein Wert, der die Breite des Bildes angibt, das für alle horizontalen Ränder, d. h. den rechten und linken Rand, verwendet wird. Er wird ausschließlich in der Zweiwert-Syntax verwendet.
+
top
+
Ist ein Wert, der die Breite des Bildes angibt, das für den oberen Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.
+
bottom
+
Ist ein Wert, der die Breite des Bildes angibt, das für den unteren Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.
+
right
+
Ist ein Wert, der die Breite des Bildes angibt, das für den rechten Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.
+
left
+
Ist ein Wert, der die Breite des Bildes angibt, das für den linken Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.
+
inherit
+
Ist ein Schlüsselwort, welches bewirkt, dass alle vier Werte von den berechneten Werten des Elternelements geerbt werden.
+
+ +

Werte

+ +
+
<length>
+
Repräsentiert die Länge des Teilbilds. Sie kann eine absolute oder relative Länge sein. Dieser Wert darf nicht negativ sein.
+
<percentage>
+
Repräsentiert den Prozentwert des Teilbilds relativ zur Höhe oder Breite des Randbildbereichs. Dieser Wert darf nicht negativ sein.
+
<number>
+
Repräsentiert ein Vielfaches des berechneten Wertes der {{cssxref("border-width")}} Eigenschaft des Elements dar, die als Teilbildgröße verwendet wird. Dieser Wert darf nicht negativ sein.
+
auto
+
Gibt an, dass die Breite oder Höhe des Bildes die tatsächliche Größe dieser Dimension sein muss.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

HTML-Inhalt

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+ +

CSS-Inhalt

+ +
p{
+   border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+   border-image-slice:30;
+   border-image-width:20px;
+   border-image-repeat: round;
+   padding:40px
+}
+ +

{{ EmbedLiveSample('Beispiele', '480', '320') }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Backgrounds', '#border-image-width', 'border-image-width')}}{{Spec2('CSS3 Backgrounds')}}Ursprüngliche Spezifikation
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-image-width")}} diff --git a/files/de/web/css/border-image/index.html b/files/de/web/css/border-image/index.html new file mode 100644 index 0000000000..d489fa343d --- /dev/null +++ b/files/de/web/css/border-image/index.html @@ -0,0 +1,101 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Grafik + - Layout + - Referenz + - Web +translation_of: Web/CSS/border-image +--- +
{{CSSRef("CSS Borders")}}
+ +

Übersicht

+ +

Die border-image CSS Eigenschaft ermöglicht das Zeichnen eines Bildes an den Rändern eines Elements. Dies vereinfacht das Zeichnen von komplex wirkenden Widgets deutlich und macht den Gebrauch von neun Kästen um das Element für einige Fälle überflüssig.
+
+ border-image wird anstatt der Randstile benutzt, die durch die {{cssxref("border-style")}} Eigenschaft definiert werden. Es ist wichtig anzumerken, dass, wenn der berechnete Wert von {{cssxref("border-image-source")}}, welcher entweder durch border-image-source oder die Kurzschreibweise border-image gesetzt werden kann, none ist, oder falls das Bild nicht angezeigt werden kann, die Randstile verwendet werden.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+ +

Werte

+ +

Siehe die entsprechenden Eigenschaften der verschiedenen Werte.

+ +

Beispiele

+ +

Bild wiederholt (repeat)

+ +

Das Bild wird aufgeteilt und einfach gekachelt, um den Randbereich zu füllen.

+ +
.beispiel {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 repeat;
+}
+
+ +

Ergibt:
+ Beispiel für border-image: repeat

+ +

Bild wiederholt (round)

+ +

Die Option round ist eine Variante der repeat Option, die die Kacheln so verteilt, dass die Enden sauber verbunden sind.

+ +
.beispiel {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 round;
+}
+ +

Ergibt:
+ Beispiel für border-image: round

+ +

Bild gestreckt

+ +

Die stretch Option streckt die Bilder, um den Randbereich zu füllen.

+ +
.beispiel {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 stretch;
+}
+ +

Ergibt:
+ Beispiel für border-image: stretch

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}}{{Spec2('CSS3 Backgrounds')}} 
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-image")}} diff --git a/files/de/web/css/border-left-color/index.html b/files/de/web/css/border-left-color/index.html new file mode 100644 index 0000000000..270f7b1cd6 --- /dev/null +++ b/files/de/web/css/border-left-color/index.html @@ -0,0 +1,36 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-left-color +--- +

{{ CSSRef() }}

+

Übersicht:

+

Die border-left-color Eigenschaft legt die Farbe des linken Rahmens fest. Da der Standardwert für die Rahmenart none ist, muss eine Angabe der border-left-style Eigenschaft erfolgen, damit ein linker Rahmen sichtbar werden kann. Es ist daher sinnvoll mit der Kurzform border-left gleich die Farbe und die Art des linken Rahmens festzulegen.

+
  • Standardwert: Wert der color Eigenschaft
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: wie festgelegt
    • +
+

Syntax

+
border-left-color:  <Farbe> | transparent | inherit
+
+

Werte

+
<Farbe>
Farbangabe [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]
transparent
Das Element hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.
inherit
Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
pre {
+  border-left-style: solid;
+  border-left-color: red;
+
+}
+
+

Browser Kompatibilität

+ +
Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-left-color", "fr": "fr/CSS/border-left-color", "ja": "ja/CSS/border-left-color", "pl": "pl/CSS/border-left-color" } ) }}

diff --git a/files/de/web/css/border-left-style/index.html b/files/de/web/css/border-left-style/index.html new file mode 100644 index 0000000000..30b17926a9 --- /dev/null +++ b/files/de/web/css/border-left-style/index.html @@ -0,0 +1,120 @@ +--- +title: border-left-style +slug: Web/CSS/border-left-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-left-style +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-left-style Eigenschaft legt die Rahmenart des linken Rahmens fest.

+
    +
  • Standardwert: none
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: wie festgelegt
    • +
+

Syntax

+
border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
+
+

Werte

+
+
+ none
+
+ Standardwert. Es wird kein linker Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.
+
+ hidden
+
+ Genau wie bei none wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.
+ Wenn border-collapse: collapse gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.
+
+ dotted
+
+ Punktierte Linie.
+
+ dashed
+
+ Gestrichelte Linie.
+
+ solid
+
+ Durchgehende Linie.
+
+ double
+
+ Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der border-left-width Angabe groß.
+
+ groove
+
+ Der Rahmen wirkt eingekerbt (3D-Effekt).
+
+ ridge
+
+ Der Rahmen wirkt wie eine Kante (3D-Effekt).
+
+ inset
+
+ Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).
+
+ outset
+
+ Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-left-style: dashed;      /* gestrichelt */
+}
+
+.beispielZwei {
+  border-left-style: groove;      /* Einkerbung */
+}
+
+.beispielDrei {
+ border-left-style: hidden;       /* Collapsing Border Model */
+ border-collapse: collapse;
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-left-style", "fr": "fr/CSS/border-left-style", "ja": "ja/CSS/border-left-style", "pl": "pl/CSS/border-left-style" } ) }}

diff --git a/files/de/web/css/border-left-width/index.html b/files/de/web/css/border-left-width/index.html new file mode 100644 index 0000000000..05734d57da --- /dev/null +++ b/files/de/web/css/border-left-width/index.html @@ -0,0 +1,38 @@ +--- +title: border-left-width +slug: Web/CSS/Border-left-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-left-width +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-left-width Eigenschaft legt die Breite des linken Rahmens fest.

+
  • Standardwert: medium
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: absolute Länge; 0 wenn none oder hidden festgelegt wurde
    • +
+

Syntax

+
border-left-width: <Länge> | thin | medium | thick | inherit
+
+

Werte

+
<Länge>
Eine Längenangabe die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.
thin
Eine dünne Rahmenlinie (1px).
medium
Standardwert. Eine mitteldicke Rahmenlinie (3px).
thick
Eine dicke Rahmenlinie (5px).
inherit
Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-left-width: 10px;
+}
+
+.beispielZwei {
+  border-left-width: thin;
+}
+
+

Browser Kompatibilität

+ +
Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-left-width", "fr": "fr/CSS/border-left-width", "ja": "ja/CSS/border-left-width", "pl": "pl/CSS/border-left-width" } ) }}

diff --git a/files/de/web/css/border-left/index.html b/files/de/web/css/border-left/index.html new file mode 100644 index 0000000000..f4fb458b27 --- /dev/null +++ b/files/de/web/css/border-left/index.html @@ -0,0 +1,48 @@ +--- +title: border-left +slug: Web/CSS/border-left +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-left +--- +

{{ CSSRef() }}

+

Übersicht:

+

Die border-left Eigenschaft legt den linken Rahmen eines Elementes fest und ist eine Kurzform für
+border-left-color, border-left-style und border-left-width. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.

+
  • Standardwert: siehe einzelne Eigenschaften
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: siehe einzelne Eigenschaften
    • +
+

Syntax

+
border-left: [ <Rahmenbreite> || <Rahmenstil> || <Rahmenfarbe> ] | inherit
+
+

Werte

+
<Rahmenbreite>
Optional. Wenn nichts festgelegt ist, wird medium verwendet. Siehe: border-left-width.
<Rahmenstil>
Erforderlich. Wenn nichts festgelegt ist, wird none verwendet. Siehe: border-left-style.
<Rahmenfarbe>
Optional. Wenn nichts festgelegt ist, wird der Wert der color Eigenschaft des Elements genommen. Siehe: border-left-color.
inherit
Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-left: 1px solid #000;
+}
+
+.beispielZwei {
+  border-left-style: dotted;
+  border-left: thick green;
+
+  /* Bedeutet das gleiche wie: */
+
+  border-left-style: dotted;
+  border-left: none thick green;
+
+  /* border-left-style wird nach Angabe von border-left ignoriert.
+  Es wird kein linker Rahmen gezeichnet. */
+}
+
+

Browser Kompatibilität

+ +
Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-left", "es": "es/CSS/border-left", "fr": "fr/CSS/border-left", "ja": "ja/CSS/border-left", "pl": "pl/CSS/border-left" } ) }}

diff --git a/files/de/web/css/border-radius/index.html b/files/de/web/css/border-radius/index.html new file mode 100644 index 0000000000..a4674ee265 --- /dev/null +++ b/files/de/web/css/border-radius/index.html @@ -0,0 +1,141 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-radius +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die Eigenschaft border-radius kann verwendet werden, um Rahmen mit abgerundeten Ecken zu versehen. Der Radius wird auch auf Hintergründe und Schatteneffekte angewendet, selbst wenn das Element über keinen Rahmen verfügt.

+ +

border-radius ist die Kurzform für die für Eigenschaften {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} und {{ Cssxref("border-bottom-left-radius") }}.

+ +

{{cssinfo}}

+ +

Syntax

+ +
border-radius: {{csssyntax("border-radius")}}
+
+bzw.
+
+border-radius: [ <Länge> | <Prozentzahl> ]{1,4}
+               [ / [ <Länge> | <Prozentzahl> ]{1,4} ]?
+
+ +

Werte

+ +

Es werden bis zu vier Angaben akzeptiert und nach einem Slash ("/") können vier weitere Angaben folgen.

+ +
+
<Länge>
+
Siehe {{cssxref("<length>")}} für mögliche Einheiten.
+
<Prozentzahl>
+
Ab Gecko 2.0 (Firefox 4.0):
+ Prozentuale Angaben für den horizontalen Radius beziehen sich auf die Breite der Box. Die Prozentzahl für den vertikalen Radius ist allerdings relativ zur Höhe der Box.
+ In vorherigen Gecko- & Firefox-Versionen:
+ {{ non-standard_inline() }} Eine prozentuale Angabe, die sich auf die Breite der Box bezieht. Die Prozentzahl ist auch dann relativ zur Breite, wenn ein Radius für die Höhe festgelegt wird.
+
Ein Wert
+
Gilt für alle vier Ecken.
+
Zwei Werte
+
Der erste Wert bestimmt die Ecken oben links und unten rechts, der zweite Wert legt die Ecken oben rechts und unten links fest.
+
Drei Werte
+
Der erste Wert bestimmt die Ecke oben links, der zweite Wert legt die Ecke für oben rechts und unten links zusammen fest und der dritte Wert bestimmt die Ecke unten rechts.
+
Vier Werte
+
Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben links, oben rechts, unten rechts, unten links.
+
Slash ("/") Schreibweise
+
Wenn weitere Werte nach einem Slash ("/") folgen, werden die Werte vor dem Slash verwendet, um den horizontalen Radius festzulegen, während die Werte nach dem Slash für vertikalen Radius benutzt werden. Wird der Slash weggelassen, werden die festgelegten Werte für horizontale und vertikale Radien verwendet.
+
+ +

Beispiel zur Slash-Notation:

+ +
-moz-border-radius: 1em/5em;
+     border-radius: 1em/5em;
+
+/* ist gleichbedeutend zu: */
+
+-moz-border-radius-topleft:      1em 5em;
+-moz-border-radius-topright:     1em 5em;
+-moz-border-radius-bottomright:  1em 5em;
+-moz-border-radius-bottomleft:   1em 5em;
+     border-top-left-radius:     1em 5em;
+     border-top-right-radius:    1em 5em;
+     border-bottom-right-radius: 1em 5em;
+     border-bottom-left-radius:  1em 5em;
+
+ +
-moz-border-radius: 4px 3px 6px / 2px 4px;
+     border-radius: 4px 3px 6px / 2px 4px;
+
+/* ist gleichbedeutend zu: */
+
+-moz-border-radius-topleft:      4px 2px;
+-moz-border-radius-topright:     3px 4px;
+-moz-border-radius-bottomright:  6px 2px;
+-moz-border-radius-bottomleft:   3px 4px;
+     border-top-left-radius:     4px 2px;
+     border-top-right-radius:    3px 4px;
+     border-bottom-right-radius: 6px 2px;
+     border-bottom-left-radius:  3px 4px;
+
+ +
Hinweis: Elliptische Rahmen (Slash mit erweitertem border-radius Syntax) werden von Versionen vor Gecko 1.9.1 (Firefox 3.5) nicht unterstützt.
+ +

Beispiele

+ +
border: solid 10px;
+
+  /* Der Rahmen ergibt ein 'D' */
+  -moz-border-radius: 0 50px 50px 0;
+       border-radius: 0 50px 50px 0;
+
+ +
    border: groove 1em red;
+
+           -moz-border-radius: 2em;
+        -webkit-border-radius: 2em;
+                border-radius: 2em;
+
+ +
     {{ fx_minversion_inline(3.5) }}
+           background: gold;
+           border: ridge gold;
+
+             -moz-border-radius: 13em/3em;
+          -webkit-border-radius: 13em 3em;
+                  border-radius: 13em/3em;
+
+ +
    background: gold;
+
+       -moz-border-radius: 40px 10px;
+            border-radius: 40px 10px;
+
+ +
background: black;
+color: gray;
+border-radius: 50%;
+
+ +

 

+ +

Hinweise

+ +
    +
  • Gepunktete und gestrichelte Rahmenecken werden als durchgehende Linie gerendert. Siehe {{ bug("382721") }}.
    • +
  • border-radius wird nicht auf Tabellen angewendet, wenn border-collapse auf collapse gesetzt ist.
    • +
  • Safari/WebKit behandelt mehrere mehrere Werte anders (siehe unten).
    • +
+ +

Browser Kompatibilität

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

Spezifikation

+ + diff --git a/files/de/web/css/border-right-color/index.html b/files/de/web/css/border-right-color/index.html new file mode 100644 index 0000000000..b70d0ade28 --- /dev/null +++ b/files/de/web/css/border-right-color/index.html @@ -0,0 +1,36 @@ +--- +title: border-right-color +slug: Web/CSS/border-right-color +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-right-color +--- +

{{ CSSRef() }}

+

Übersicht:

+

Die border-right-color Eigenschaft legt die Farbe des rechten Rahmens fest. Da der Standardwert für die Rahmenart none ist, muss eine Angabe der border-right-style Eigenschaft erfolgen, damit ein rechter Rahmen sichtbar werden kann. Es ist daher sinnvoll mit der Kurzform border-right gleich die Farbe und die Art des rechten Rahmens festzulegen.

+
  • Standardwert: Wert der color Eigenschaft
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: wie festgelegt
    • +
+

Syntax

+
border-right-color:  <Farbe> | transparent | inherit
+
+

Werte

+
<Farbe>
Farbangabe [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]
transparent
Das Element hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.
inherit
Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
pre {
+  border-right-style: solid;
+  border-right-color: red;
+
+}
+
+

Browser Kompatibilität

+ +
Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-right-color", "fr": "fr/CSS/border-right-color", "ja": "ja/CSS/border-right-color", "pl": "pl/CSS/border-right-color" } ) }}

diff --git a/files/de/web/css/border-right-style/index.html b/files/de/web/css/border-right-style/index.html new file mode 100644 index 0000000000..eee81bd976 --- /dev/null +++ b/files/de/web/css/border-right-style/index.html @@ -0,0 +1,120 @@ +--- +title: border-right-style +slug: Web/CSS/border-right-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-right-style +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-right-style Eigenschaft legt die Rahmenart des rechten Rahmens fest.

+
    +
  • Standardwert: none
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: wie festgelegt
    • +
+

Syntax

+
border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
+
+

Werte

+
+
+ none
+
+ Standardwert. Es wird kein rechter Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.
+
+ hidden
+
+ Genau wie bei none wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.
+ Wenn border-collapse: collapse gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.
+
+ dotted
+
+ Punktierte Linie.
+
+ dashed
+
+ Gestrichelte Linie.
+
+ solid
+
+ Durchgehende Linie.
+
+ double
+
+ Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der border-right-width Angabe groß.
+
+ groove
+
+ Der Rahmen wirkt eingekerbt (3D-Effekt).
+
+ ridge
+
+ Der Rahmen wirkt wie eine Kante (3D-Effekt).
+
+ inset
+
+ Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).
+
+ outset
+
+ Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-right-style: dashed;      /* gestrichelt */
+}
+
+.beispielZwei {
+  border-right-style: groove;      /* Einkerbung */
+}
+
+.beispielDrei {
+ border-right-style: hidden;       /* Collapsing Border Model */
+ border-collapse: collapse;
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-right-style", "fr": "fr/CSS/border-right-style", "ja": "ja/CSS/border-right-style", "pl": "pl/CSS/border-right-style" } ) }}

diff --git a/files/de/web/css/border-right-width/index.html b/files/de/web/css/border-right-width/index.html new file mode 100644 index 0000000000..c3aa02724f --- /dev/null +++ b/files/de/web/css/border-right-width/index.html @@ -0,0 +1,90 @@ +--- +title: border-right-width +slug: Web/CSS/Border-right-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-right-width +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-right-width Eigenschaft legt die Breite des rechten Rahmens fest.

+
    +
  • Standardwert: medium
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Werte: absolute Länge; 0 wenn none oder hidden festgelegt wurde
    • +
+

Syntax

+
border-right-width: <Länge> | thin | medium | thick | inherit
+
+

Werte

+
+
+ <Länge>
+
+ Eine Längenangabe die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.
+
+ thin
+
+ Eine dünne Rahmenlinie (1px).
+
+ medium
+
+ Standardwert. Eine mitteldicke Rahmenlinie (3px).
+
+ thick
+
+ Eine dicke Rahmenlinie (5px).
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-right-width: 10px;
+}
+
+.beispielZwei {
+  border-right-width: thin;
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-right-width", "fr": "fr/CSS/border-right-width", "ja": "ja/CSS/border-right-width", "pl": "pl/CSS/border-right-width" } ) }}

diff --git a/files/de/web/css/border-right/index.html b/files/de/web/css/border-right/index.html new file mode 100644 index 0000000000..664b3ded4d --- /dev/null +++ b/files/de/web/css/border-right/index.html @@ -0,0 +1,48 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-right +--- +

{{ CSSRef() }}

+

Übersicht:

+

Die border-right Eigenschaft legt den rechten Rahmen eines Elementes fest und ist eine Kurzform für
+border-right-color, border-right-style und border-right-width. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.

+
  • Standardwert: siehe einzelne Eigenschaften
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: siehe einzelne Eigenschaften
    • +
+

Syntax

+
border-right: [ <Rahmenbreite> || <Rahmenstil> || <Rahmenfarbe> ] | inherit
+
+

Werte

+
<Rahmenbreite>
Optional. Wenn nichts festgelegt ist, wird medium verwendet. Siehe: border-right-width.
<Rahmenstil>
Erforderlich. Wenn nichts festgelegt ist, wird none verwendet. Siehe: border-right-style.
<Rahmenfarbe>
Optional. Wenn nichts festgelegt ist, wird der Wert der color Eigenschaft des Elements genommen. Siehe: border-right-color.
inherit
Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-right: 1px solid #000;
+}
+
+.beispielZwei {
+  border-right-style: dotted;
+  border-right: thick green;
+
+  /* Bedeutet das gleiche wie: */
+
+  border-right-style: dotted;
+  border-right: none thick green;
+
+  /* border-right-style wird nach Angabe von border-right ignoriert.
+  Es wird kein rechter Rahmen gezeichnet. */
+}
+
+

Browser Kompatibilität

+ +
Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-right", "fr": "fr/CSS/border-right", "ja": "ja/CSS/border-right", "pl": "pl/CSS/border-right" } ) }}

diff --git a/files/de/web/css/border-spacing/index.html b/files/de/web/css/border-spacing/index.html new file mode 100644 index 0000000000..e20300171a --- /dev/null +++ b/files/de/web/css/border-spacing/index.html @@ -0,0 +1,143 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - CSS Tabellen + - Referenz +translation_of: Web/CSS/border-spacing +--- +
{{CSSRef}}
+ +

Die CSS Eigenschaft border-spacing legt die Abstände zwischen Tabellenzellen fest.
+ Die Eigenschaft hat nur dann Auswirkungen, wenn border-collapse: separate definiert ist.

+ +
{{EmbedInteractiveExample("pages/css/border-spacing.html")}}
+ + + +

Der Wert für border-spacing wird auch entlang der Außenkante der Tabelle verwendet, wobei der Abstand zwischen dem Rand der Tabelle und den Zellen in der ersten/letzten Spalte oder Zeile die Summe des relevanten Randabstands (horizontalen oder vertikalen) border-spacing und des relevanten (oben, rechts, unten oder links) {{cssxref("padding")}} in der Tabelle ist.

+ +

value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) {{cssxref("padding")}} on the table.

+ +
+

Hinweis: Die border-spacing Eigenschaft entspricht demveraltetem <table> Attribut  cellspacing, mit der Ausnahme, dass es einen optionalen zweiten Wert hat, mit dem unterschiedliche horizontale und vertikale Abstände eingestellt werden können.

+
+ +

Syntax

+ +
/* <length> */
+border-spacing: 2px;
+
+/* horizontal <length> | vertical <length> */
+border-spacing: 1cm 2em;
+
+/* Global values */
+border-spacing: inherit;
+border-spacing: initial;
+
+ +

Die Eigenschaft border-spacing kann entweder als ein oder zwei Werte angegeben werden.

+ +
    +
  • Wenn ein <length> Wert angegeben wird, definiert er sowohl die horizontalen als auch die vertikalen Abstände zwischen den Zellen.
    • +
  • Wenn zwei <length> Werte angegeben werden, definiert der erste Wert den horizontalen Abstand zwischen Zellen (d.h. den Abstand zwischen Zellen in benachbarten Spalten) und der zweite Wert den vertikalen Abstand zwischen Zellen (d.h. den Abstand zwischen Zellen in benachbarten Zeilen).
    • +
+ +

Werte

+ +
+
{{cssxref("<length>")}}
+
Die Größe des Abstands als fester Wert.
+
{{cssxref("<initial>")}}
+
Setzt den Standardwert für diese Eigenschaft
+
{{cssxref("<inherit>")}}
+
Diese Eigenschaft erbt den Wert von seinem Elternelement.
+
+ +

Formale Definition

+ +

{{CSSInfo}}

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Abstände und Padding von Tabellenzellen

+ +
+

In diesem Beispiel wird ein Abstand von .5em vertikal und 1em horizontal zwischen den Zellen einer Tabelle angewendet. Beachten Sie, wie die padding Werte der Tabelle entlang ihrer Außenkanten zu ihren Randabstandswerten border-spacing addiert werden.

+ +

HTML

+ +
<table>
+  <tr>
+    <td>1</td><td>2</td><td>3</td>
+  </tr>
+  <tr>
+    <td>4</td><td>5</td><td>6</td>
+  </tr>
+  <tr>
+    <td>7</td><td>8</td><td>9</td>
+  </tr>
+</table>
+
+ +

CSS

+ +
table {
+  border-spacing: 1em .5em;
+  padding: 0 2em 1em 0;
+  border: 1px solid orange;
+}
+
+td {
+  width: 1.5em;
+  height: 1.5em;
+  background: #d2d2d2;
+  text-align: center;
+  vertical-align: middle;
+}
+
+ +

Ergebnis

+ +

{{ EmbedLiveSample('Spacing_and_padding_table_cells', 400, 200) }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}{{ Spec2('CSS2.1') }}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ + + +

{{Compat("css.properties.border-spacing")}}

+
+ +

Siehe auch

+ + + +

{{ languages( { "en": "en/CSS/border-spacing", "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "es": "es/CSS/border-spacing" } ) }}

diff --git a/files/de/web/css/border-style/index.html b/files/de/web/css/border-style/index.html new file mode 100644 index 0000000000..32aa331b10 --- /dev/null +++ b/files/de/web/css/border-style/index.html @@ -0,0 +1,219 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-style +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die border-style CSS Eigenschaft ist eine Kurzschreibweise zum Setzen des Linienstils für alle vier Seiten des Elementrands.

+ +
Hinweis: Der Standardwert von border-style ist none. Das bedeutet, falls die {{cssxref("border-width")}} und die {{cssxref("border-color")}} geändert werden, wird der Rand nicht angezeigt, solange diese Eigenschaft nicht auf etwas anderes als none oder hidden gesetzt wird.
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Auf alle vier Seiten anwenden */
+border-style: dashed;
+
+/* horizontal | vertikal */
+border-style: dotted solid;
+
+/* open | horizontal | vertikal */
+border-style: hidden double dashed;
+
+/* open | rechts | unten | links */
+border-style: none solid dotted dashed;
+
+/* Global values */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+
+ +

Werte

+ +
+
<br-style>
+
Ist ein Schlüsselwort, das den Stil des unteren Rahmens beschreibt. Es kann die folgenden Werte annehmen: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
+ 		Wie beim hidden Schlüsselwort wird kein Rahmen angezeigt. In diesem Fall sind die berechneten Werte von {{cssxref("border-width")}} 0, außer ein Hintergrundbild ist gesetzt, auch wenn die Eigenschaft anders gesetzt wurde. Im Fall von Zusammenfallen von Tabellenzellen und Rahmen hat der none Wert die niedrigste Priorität: Das bedeutet, dass falls irgendein anderer, gegensätzlicher Rahmen gesetzt ist, wird er angezeigt.
hidden +
+ 		Wie beim none Schlüsselwort wird kein Rahmen angezeigt. In diesem Fall sind die berechneten Werte von {{cssxref("border-width")}} 0, außer ein Hintergrundbild ist gesetzt, auch wenn die Eigenschaft anders gesetzt wurde. Im Fall von Zusammenfallen von Tabellenzellen und Rahmen hat der hidden Wert die höchste Priorität: Das bedeutet, dass falls irgendein anderer, gegensätzlicher Rahmen gesetzt ist, wird er nicht angezeigt.
dotted +
+ 		Zeigt eine Reihe von runden Punkten an. Die Abstände der Punkte werden nicht durch die Spezifikation bestimmt und sind implementationsspezifisch. Der Radius der Punkte ist die halbe {{cssxref("border-width")}}.
dashed +
+ 		Zeigt eine Reihe von kurzen Strichen mit quadratischen Enden oder Liniensegmenten an. Die exakte Größe und Länger der Segmente werden nicht durch die Spezifikation bestimmt und sind implementationsspezifisch.
solid +
+ 		Zeigt eine einfache, gerade, ausgefüllte Linie an.
double +
+ 		Zeigt zwei gerade Linien an, die zum Pixelwert hinzugefügt werden, der durch {{cssxref("border-width")}} definiert wird.
groove +
+ 		Zeigt einen Rahmen an, der zu einem eingeritzten Effekt führt. Er ist das Gegenteil von ridge.
ridge +
+ 		Zeigt einen Rahmen mit einem 3D-Effekt an, so als ob es aus der Seite herauskommt. Er ist das Gegenteil von groove.
inset +
+ 		Zeigt einen Rahmen an, der die Box so darstellt, als wäre sie eingelassen. Es ist das Gegenteil von outset. Auf eine Tabellenzelle mit {{cssxref("border-collapse")}} auf collapsed gesetzt angewendet, verhält sich dieser Wert wie groove.
outset +
+ 		+

Zeigt einen Rahmen an, der die Box in 3D wie geprägt darstellt. Es ist das Gegenteil von inset. Auf eine Tabellenzelle mit {{cssxref("border-collapse")}} auf collapsed gesetzt angewendet, verhält sich dieser Wert wie ridge.

+
+
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Tabelle mit allen Eigenschaftswerten

+ +

Hier ist ein Beispiel aller Eigenschaftswerte.

+ +

HTML Inhalt

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS Inhalt

+ +
/* Definiert das Aussehen der Tabelle */
+table {
+  border-width: 3px;
+  background-color: #52E396;
+}
+
+tr, td {
+  padding: 2px;
+}
+
+/* border-style Beispielklassen */
+.b1 { border-style: none; }
+.b2 { border-style: hidden; }
+.b3 { border-style: dotted; }
+.b4 { border-style: dashed; }
+.b5 { border-style: solid; }
+.b6 { border-style: double; }
+.b7 { border-style: groove; }
+.b8 { border-style: ridge; }
+.b9 { border-style: inset; }
+.b10  { border-style: outset; }
+ +

Ausgabe

+ +

{{EmbedLiveSample('Tabelle_mit_allen_Eigenschaftswerten', 300, 200)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}{{Spec2('CSS3 Backgrounds')}}Keine Änderung
{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}{{Spec2('CSS2.1')}}2-, 3- und 4-Wert-Syntaxen hinzugefügt
{{SpecName('CSS1', '#border-style', 'border-style')}}{{Spec2('CSS1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.border-style")}}

+ +

Siehe auch

+ +
    +
  • Die Rahmen-bezogenen Kurzschreibweise CSS Eigenschaften: {{cssxref("border")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-radius")}}
    • +
diff --git a/files/de/web/css/border-top-color/index.html b/files/de/web/css/border-top-color/index.html new file mode 100644 index 0000000000..3bf2e95cb2 --- /dev/null +++ b/files/de/web/css/border-top-color/index.html @@ -0,0 +1,81 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-color +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-top-color Eigenschaft legt die Farbe des oberen Rahmens fest. Da der Standardwert für die Rahmenart none ist, muss eine Angabe der border-top-style Eigenschaft erfolgen, damit ein oberer Rahmen sichtbar werden kann. Es ist daher sinnvoll mit der Kurzform border-top gleich die Farbe und die Art des oberen Rahmens festzulegen.

+
    +
  • Standardwert: Wert der color Eigenschaft
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: die berechnete Farbe
    • +
+

Syntax

+
border-top-color:  <Farbe> | transparent | inherit
+
+

Werte

+
+
+ <Farbe>
+
+ Farbangabe [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]
+
+ transparent
+
+ Das Element hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
pre {
+  border-top-style: solid;
+  border-top-color: red;
+
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-top-color", "fr": "fr/CSS/border-top-color", "ja": "ja/CSS/border-top-color", "pl": "pl/CSS/border-top-color" } ) }}

diff --git a/files/de/web/css/border-top-left-radius/index.html b/files/de/web/css/border-top-left-radius/index.html new file mode 100644 index 0000000000..9c3408d8a5 --- /dev/null +++ b/files/de/web/css/border-top-left-radius/index.html @@ -0,0 +1,91 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-left-radius +--- +

{{ CSSRef }}

+ +

Übersicht

+ +

Die border-top-left-radius Eigenschaft die Abrundung der oberen, linken Ecke eines Elements fest.

+ +

Vor Gecko 2.0 (Firefox 4.0) war diese Eigenschaft als -moz-border-radius-topleft bekannt. Diese Eigenschaft wird weiterhin übergangsweise unterstützt.

+ +

Weitere Informationen sind unter border-radius verfügbar.

+ +

{{cssinfo("border-top-left-radius")}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("border-top-left-radius")}}
+-moz-border-radius-topleft: [ <Länge> | <Prozentzahl> ] [ <Länge> | <Prozentzahl> ]?
+     border-top-left-radius:[ <Länge> | <Prozentzahl> ] [ <Länge> | <Prozentzahl> ]?
+
+ +

Werte

+ +

Seit Gecko 1.9.1 (Firefox 3.5) wird ein zweiter, optionaler Wert unterstützt, welcher Längenwerte für elliptische Ecken akzeptiert. Es gibt zwei Werte, die die Form der Ecke beschreiben: Der erste Wert ist der horizontale, der zweite Wert der vertikale Radius. Wird nur ein Wert angegeben, gilt dieser für beide Richtungen (horizontal und vertikal).

+ +
+
<Länge>
+
Siehe Längen für mögliche Einheiten.
+
<Prozentzahl>
+
In Gecko 2.0 (Firefox 4.0):
+ Prozentuale Angaben für den horizontalen Radius beziehen sich auf die Breite der Box. Die Prozentzahl für den vertikalen Radius ist allerdings relativ zur Höhe der Box.
+ In vorherigen Gecko- & Firefox-Versionen:
+ {{ non-standard_inline() }} Eine prozentuale Angabe, die sich auf die Breite der Box bezieht. Die Prozentzahl ist selbst dann relativ zur Breite, wenn ein Radius für die Höhe festgelegt wird.
+
+ +

Beispiele

+ +
div { -moz-border-radius-topleft:  20px;  /* Firefox bis Version 3.6 */
+   -webkit-border-top-left-radius: 20px;  /* Safari, Chrome (vor WebKit Version 533) */
+           border-top-left-radius: 20px;  /* Firefox 4; Browser mit CSS3 Unterstützung */
+}
+
+ +
/* Elliptische Ecke (unterstützt seit Firefox 3.5 [Gecko 1.9.1]) */
+
+div { -moz-border-radius-topleft:   20px;       /* Runde Ecke, Fallback für Firefox 1-3.0 */
+      -moz-border-radius-topleft:   20px 10px;  /* elliptischer Rahmen für Firefox 3.5-3.6 */
+    -webkit-border-top-left-radius: 20px 10px;  /* Safari, Chrome (vor WebKit Version 532.5) */
+            border-top-left-radius: 20px 10px;  /* Firefox 4; Browser mit CSS3 Unterstützung */
+}
+
+ + +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-top-left-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

{{cssinfo}}

+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.border-top-left-radius")}}

+ +

Siehe auch

+ + + +

{{ languages( { "en": "en/CSS/border-top-left-radius", "fr": "fr/CSS/border-top-left-radius", "ja": "ja/CSS/border-top-left-radius", "pl": "pl/CSS/-moz-border-radius-topleft" } ) }}

diff --git a/files/de/web/css/border-top-right-radius/index.html b/files/de/web/css/border-top-right-radius/index.html new file mode 100644 index 0000000000..dd04ae2d87 --- /dev/null +++ b/files/de/web/css/border-top-right-radius/index.html @@ -0,0 +1,47 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-right-radius +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die CSS Eingenschaft border-top-right-radius legt die Abrundung der oberen rechten Ecke eines Elements fest. Vor Gecko 2.0 (Firefox 4) war diese Eigenschaft unter dem Namen -moz-border-radius-topright bekannt.

+ +

Weitere Informationen sind unter border-top-left-radius verfügbar.

+ +

{{cssinfo("border-top-right-radius")}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("border-top-right-radius")}}
+ + +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-top-right-radius', 'border-top-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

{{cssinfo}}

+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.border-top-right-radius")}}

diff --git a/files/de/web/css/border-top-style/index.html b/files/de/web/css/border-top-style/index.html new file mode 100644 index 0000000000..10fbe13a5b --- /dev/null +++ b/files/de/web/css/border-top-style/index.html @@ -0,0 +1,120 @@ +--- +title: border-top-style +slug: Web/CSS/border-top-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-style +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-top-style Eigenschaft legt die Rahmenart des oberen Rahmens fest.

+
    +
  • Standardwert: none
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: wie festgelegt
    • +
+

Syntax

+
border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
+
+

Werte

+
+
+ none
+
+ Standardwert. Es wird kein oberer Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.
+
+ hidden
+
+ Genau wie bei none wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.
+ Wenn border-collapse: collapse gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.
+
+ dotted
+
+ Punktierte Linie.
+
+ dashed
+
+ Gestrichelte Linie.
+
+ solid
+
+ Durchgehende Linie.
+
+ double
+
+ Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der border-top-width Angabe groß.
+
+ groove
+
+ Der Rahmen wirkt eingekerbt (3D-Effekt).
+
+ ridge
+
+ Der Rahmen wirkt wie eine Kante (3D-Effekt).
+
+ inset
+
+ Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).
+
+ outset
+
+ Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-top-style: dashed;      /* gestrichelt */
+}
+
+.beispielZwei {
+  border-top-style: groove;      /* Einkerbung */
+}
+
+.beispielDrei {
+ border-top-style: hidden;       /* Collapsing Border Model */
+ border-collapse: collapse;
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-top-style", "fr": "fr/CSS/border-top-style", "ja": "ja/CSS/border-top-style", "pl": "pl/CSS/border-top-style" } ) }}

diff --git a/files/de/web/css/border-top-width/index.html b/files/de/web/css/border-top-width/index.html new file mode 100644 index 0000000000..b740149b3c --- /dev/null +++ b/files/de/web/css/border-top-width/index.html @@ -0,0 +1,90 @@ +--- +title: border-top-width +slug: Web/CSS/Border-top-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-width +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-top-width Eigenschaft legt die Breite des oberen Rahmens fest.

+
    +
  • Standardwert: medium
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: absolute Länge; 0 wenn none oder hidden festgelegt wurde
    • +
+

Syntax

+
border-top-width: <Länge> | thin | medium | thick | inherit
+
+

Werte

+
+
+ <Länge>
+
+ Eine Längenangabe die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.
+
+ thin
+
+ Eine dünne Rahmenlinie (1px).
+
+ medium
+
+ Standardwert. Eine mitteldicke Rahmenlinie (3px).
+
+ thick
+
+ Eine dicke Rahmenlinie (5px).
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-top-width: 10px;
+}
+
+.beispielZwei {
+  border-top-width: thin;
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-top-width", "fr": "fr/CSS/border-top-width", "ja": "ja/CSS/border-top-width", "pl": "pl/CSS/border-top-width" } ) }}

diff --git a/files/de/web/css/border-top/index.html b/files/de/web/css/border-top/index.html new file mode 100644 index 0000000000..4724a57ad7 --- /dev/null +++ b/files/de/web/css/border-top/index.html @@ -0,0 +1,98 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top +--- +

{{ CSSRef() }}

+

Übersicht:

+

Die border-top Eigenschaft legt den oberen Rahmen eines Elementes fest und ist eine Kurzform für
+ border-top-color, border-top-style und border-top-width. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.

+
    +
  • Standardwert: siehe einzelne Eigenschaften
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: siehe einzelne Eigenschaften
    • +
+

Syntax

+
border-top: [ <Rahmenbreite> || <Rahmenstil> || <Rahmenfarbe> ] | inherit
+
+

Werte

+
+
+ <Rahmenbreite>
+
+ Optional. Wenn nichts festgelegt ist, wird medium verwendet. Siehe: border-top-width.
+
+ <Rahmenstil>
+
+ Erforderlich. Wenn nichts festgelegt ist, wird none verwendet. Siehe: border-top-style.
+
+ <Rahmenfarbe>
+
+ Optional. Wenn nichts festgelegt ist, wird der Wert der color Eigenschaft des Elements genommen. Siehe: border-top-color.
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-top: 1px solid #000;
+}
+
+.beispielZwei {
+  border-top-style: dotted;
+  border-top: thick green;
+
+  /* Bedeutet das gleiche wie: */
+
+  border-top-style: dotted;
+  border-top: none thick green;
+
+  /* border-top-style wird nach Angabe von border-top ignoriert.
+  Es wird kein oberer Rahmen gezeichnet. */
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-top", "fr": "fr/CSS/border-top", "ja": "ja/CSS/border-top", "pl": "pl/CSS/border-top" } ) }}

diff --git a/files/de/web/css/border-width/index.html b/files/de/web/css/border-width/index.html new file mode 100644 index 0000000000..fe0e129bfa --- /dev/null +++ b/files/de/web/css/border-width/index.html @@ -0,0 +1,118 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-width +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-width Eigenschaft legt die Breite des oberen, rechten, unteren und linken Rahmens fest.

+
    +
  • Standardwert: medium
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: absolute Länge; 0 wenn none oder hidden festgelegt wurde
    • +
+

Syntax

+
border-width:  [<Länge> | thin | medium | thick] {1,4} | inherit
+
+

Werte

+
+
+ <Länge>
+
+ Eine Längenangabe die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.
+
+ thin
+
+ Eine dünne Rahmenlinie (1px; IE 4-7: 2px).
+
+ medium
+
+ Standardwert. Eine mitteldicke Rahmenlinie (3px; IE 4-7: 4px).
+
+ thick
+
+ Eine dicke Rahmenlinie (5px; IE 4-7: 6px).
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+ Ein Wert
+
+ Gilt für alle vier Seiten: border-top-width, border-right-width, border-bottom-width und border-left-width.
+
+ Zwei Werte
+
+ Der erste Wert gilt für border-top-width und border-bottom-width, der zweite Wert für border-right-width und border-left-width.
+
+ Drei Werte
+
+ Der erste Wert gilt für border-top-width, der zweite Wert für border-right-width und border-left-width und der dritte Wert für border-bottom-width.
+
+ Vier Werte
+
+ Der erste Wert gilt für border-top-width, der zweite Wert für border-right-width, der dritte Wert für border-bottom-width und der vierte Wert für border-left-width.
+
+

Beispiele

+
.beispielEins {
+  border: solid #ccc;
+  border-width: 3px;
+}
+
+
.beispielZwei {
+  border: solid #ccc;
+  border-width: thin thick;
+}
+
+
.beispielDrei {
+  border: solid #ccc;
+  border-width: thin thick 10px;
+}
+
+
.beispielVier {
+  border: solid #ccc;
+  border-width: thin thick 10px 2em;
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-width", "fr": "fr/CSS/border-width", "ja": "ja/CSS/border-width", "pl": "pl/CSS/border-width", "es": "es/CSS/border-width" } ) }}

diff --git a/files/de/web/css/border/index.html b/files/de/web/css/border/index.html new file mode 100644 index 0000000000..ffcf4c2631 --- /dev/null +++ b/files/de/web/css/border/index.html @@ -0,0 +1,99 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS + - CSS Eigenschaft + - CSS Rahmen + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/border +--- +
{{CSSRef("CSS Borders")}}
+ +

Übersicht

+ +

Die border Eigenschaft legt den kompletten Rahmen eines Elementes fest und ist eine Kurzform für
+ border-color, border-style und border-width. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.
+ Unterschiedliche Einstellungen für den oberen, unteren, linken und rechten Rahmen können nur unter den Kurzformen
+ border-bottom, border-top, border-left und border-right festgelegt werden.

+ +

{{cssinfo}}

+ +

Syntax

+ +
border: 1px;
+border: 2px dotted;
+border: medium dashed green;
+ +

Werte

+ +
+
<Rahmenbreite>
+
Optional. Wenn nichts festgelegt ist, wird medium verwendet. Siehe: border-width.
+
<Rahmenstil>
+
Erforderlich. Wenn nichts festgelegt ist, wird none verwendet. Siehe: border-style.
+
<Rahmenfarbe>
+
Optional. Wenn nichts festgelegt ist, wird der Wert der color Eigenschaft des Elements genommen. Siehe: border-color.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Live Beispiel

+ +
  border: dashed;           /* gestrichelter Rahmen mit mittlerer Breite und gleicher Farbe wie der Text */
+  border: dotted 1.5em;     /* gestrichelt, 1.5em breit, gleiche Farbe wie der Text */
+  border: solid red;        /* durchgezogener, roter Rahmen mit mittelgroßer Breite */
+  border: solid blue 10px;  /* durchgezogene Linie, blaue Farbe, 10px Breite */
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusArgument
{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}{{Spec2('CSS3 Backgrounds')}}Technically removes the support for transparent as it is now a valid {{cssxref("<color>")}}; this has no practical influence.
+ Though it cannot be set to another value using the shorthand, border does now reset {{cssxref("border-image")}} to its initial value (none).
{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}{{Spec2('CSS2.1')}}Accepts the inherit keyword. Also accepts transparent as a valid color.
{{SpecName('CSS1', '#border', 'border')}}{{Spec2('CSS1')}} 
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/bottom/index.html b/files/de/web/css/bottom/index.html new file mode 100644 index 0000000000..5f9ed69a02 --- /dev/null +++ b/files/de/web/css/bottom/index.html @@ -0,0 +1,74 @@ +--- +title: bottom +slug: Web/CSS/Bottom +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/bottom +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die bottom Eigenschaft macht eine Angabe zur Position von Elementen und wird daher zusammen mit der position Eigenschaft notiert, wenn für die Positionsart der Wert absolute, fixed oder relative definiert wurde.

+ +

Bei absolut positionierten Elementen (position: absolute oder position: fixed) wird der Abstand zwischen der unteren, äußeren Kante (margin edge) des Elements und der unteren Kante des umschließenden Blocks definiert.

+ +

Bei relativ positionierten Elementen (position: relative) wird das Element aus seiner normalen Position im Elementfluss verschoben. Dabei gilt: Wenn die top Eigenschaft definiert wurde, überschreibt diese den Wert der bottom Eigenschaft. Wenn top den Wert auto besitzt, ist der berechnete Wert für bottom gleich dem Wert der top Eigenschaft mit umgedrehtem Vorzeichen.
+ Wenn beide Eigenschaften nicht den Wert auto besitzen, wird bottom ignoriert und auf auto gesetzt.

+ +
    +
  • Standardwert: auto
    • +
  • Anwendbar auf: positionierte Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Beziehen sich auf die Höhe des umschließenden Blocks
    • +
  • Medium: visuell
    • +
  • berechneter Wert: absolute Länge, Prozentwert oder auto
    • +
+ +

Syntax

+ +
bottom: <Länge> | <Prozentzahl> | auto | inherit
+
+ +

Werte

+ +
+
<Länge>
+
Eine Längenangabe, die positive und negative Werte sowie Null erlaubt.
+
<Prozentzahl>
+
Eine prozentuale Angabe, die sich auf den umschließenden Block bezieht. Die Prozentangabe kann nur berücksichtigt werden, wenn die Höhe des umschließenden Blocks festgelegt wurde, andernfalls wird die definierte Prozentzahl wie auto behandelt.
+
auto
+
Standardwert. Die vertikale Position des Elementes wird nicht weiter beeinflusst, es sei denn durch top, margin, padding oder durch die Höhe.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Beispiele

+ +
element {
+    position: absolute;
+    bottom: 20px;
+    height: 200px;
+    border: 1px solid #000;
+}
+
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.bottom")}} + +

Spezifikation

+ + + +

Siehe auch

+ + + +

{{ languages( { "en": "en/CSS/bottom", "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom", "es": "es/CSS/bottom" } ) }}

diff --git a/files/de/web/css/box-decoration-break/index.html b/files/de/web/css/box-decoration-break/index.html new file mode 100644 index 0000000000..d1f0261fc2 --- /dev/null +++ b/files/de/web/css/box-decoration-break/index.html @@ -0,0 +1,136 @@ +--- +title: box-decoration-break +slug: Web/CSS/box-decoration-break +tags: + - CSS + - CSS Fragmentation + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/box-decoration-break +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

Summary

+ +

The box-decoration-break CSS property specifies how the {{ Cssxref("background") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }}, {{ Cssxref("margin") }} and {{ Cssxref("clip") }} of an element is applied when the box for the element is fragmented.  Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed.  Each piece of the rendering for the element is called a fragment.

+ +

{{cssinfo}}

+ +

Syntax

+ +
box-decoration-break: slice;
+box-decoration-break: clone;
+
+box-decoration-break: initial;
+box-decoration-break: inherit;
+box-decoration-break: unset;
+
+ +

Values

+ +
+
slice
+
The element is rendered as if its box were not fragmented, and then the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details.
+
clone
+
Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }} and {{ Cssxref("box-shadow") }}, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with {{ Cssxref("background-repeat") }}: no-repeat may be repeated multiple times.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Inline box fragments

+ +

An inline element that contains line-breaks styled with:

+ +
.example {
+  background: linear-gradient(to bottom right, yellow, green);
+  box-shadow:
+    8px 8px 10px 0px deeppink,
+    -5px -5px 5px 0px blue,
+    5px 5px 15px 0px yellow;
+  padding: 0em 1em;
+  border-radius: 16px;
+  border-style: solid;
+  margin-left: 10px;
+  font: 24px sans-serif;
+  line-height: 2;
+}
+
+...
+<span class="example">The<br>quick<br>orange fox</span>
+ +

Results in:

+ +

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

+ +

Adding box-decoration-break:clone to the above styles:

+ +
  -webkit-box-decoration-break: clone;
+  -o-box-decoration-break: clone;
+  box-decoration-break: clone;
+
+ +

Results in:

+ +

A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

+ +

You can try the two inline examples above in your browser.

+ +

Here's an example of an inline element using a large border-radius value. The second "iM" has a line-break between the "i" and the "M". For comparison, the first "iM" is without line-breaks. Note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering.

+ +

A screenshot of the rendering of the second inline element example.

+ +

Try the above example in your browser.

+ +

Block box fragments

+ +

A block element with similar styles as above, first without any fragmentation:

+ +

A screenshot of the rendering of the block element used in the examples without any fragmentation.

+ +

Fragmenting the above block into three columns results in:

+ +

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

+ +

Note that stacking these pieces vertically will result in the non-fragmented rendering.

+ +

Now the same example styled with box-decoration-break:clone

+ +

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.

+ +

Note here that each fragment has an identical replicated border, box-shadow and background.

+ +

You can try the block examples above in your browser.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}{{ Spec2('CSS3 Fragmentation') }}Initial definition
+ +

Browser compatibility

+ +{{Compat("css.properties.box-decoration-break")}} + +

See also

+ + diff --git a/files/de/web/css/box-shadow/index.html b/files/de/web/css/box-shadow/index.html new file mode 100644 index 0000000000..637e204327 --- /dev/null +++ b/files/de/web/css/box-shadow/index.html @@ -0,0 +1,107 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - CSS Eigenschaft + - CSS Hintergrund + - Referenz +translation_of: Web/CSS/box-shadow +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS-Eigenschaft box-shadow beschreibt einen oder mehrere Schatteneffekte als eine kommaseparierte Liste. Sie erlaubt es, den Rahmen fast jedes Elements einen Schatten werfen zu lassen. Falls ein {{cssxref("border-radius")}} für das Element mit einem Schlagschatten angegeben ist, übernimmt der Schatten diese abgerundeten Ecken. Die z-Anordnung mehrerer Schlagschatten ist die gleiche wie bei mehreren Textschatten (der zuerst angegebene Schatten ist der oberste).

+ +

Box-shadow-Generator ist ein interaktives Werkzeug, das es erlaubt, einen Schlagschatten zu generieren.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Beliebige Anzahl an Schatten, durch Kommas getrennt */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+ +

Werte

+ +
+
inset
+
Falls nicht angegeben (Standardwert), wird angenommen, dass der Schatten ein Schlagschatten ist (als ob die Box über dem Inhalt schweben würde).
+ Die Angabe des Schlüsselworts inset ändert den Schatten so, dass er innerhalb des Rahmens angezeigt wird (als ob der Inhalt innerhalb der Box nach innen gedrückt wäre). Innere Schatten werden innerhalb des Randes (sogar transparenten) gezeichnet, über dem Hintergrund aber unterhalb des Inhalts.
+
<offset-x> <offset-y>
+
Diese zwei {{cssxref("<length>")}}-Werte setzen den Schattenabstand. <offset-x> beschreibt die horizontale Distanz. Negative Werte platzieren den Schatten links des Elements. <offset-y> beschreibt die vertikale Distanz. Negative Werte platzieren den Schatten oberhalb des Elements. Siehe {{cssxref("<length>")}} für mögliche Einheiten.
+ Falls beide Werte 0 sind, wird der Schatten hinter dem Element platziert (und können einen Unschärfeeffekt erzeugen, falls <blur-radius> und/oder <spread-radius> gesetzt sind).
+
<blur-radius>
+
Dies ist ein dritter {{cssxref("<length>")}}-Wert. Je größer dieser Wert ist, desto größer ist die Unschärfe, sodass der Schatten größer und schwächer wird. Negative Werte sind nicht erlaubt. Falls nicht angegeben, ist der Wert 0 (der Rand des Schattens wird scharf dargestellt).
+
<spread-radius>
+
Dies ist ein vierter {{cssxref("<length>")}}-Wert. Positive Werte erweitern den Schatten und machen ihn größer, negative Werte verkleinern den Schatten. Falls nicht angegeben, ist der Wert 0 (der Schatten hat die gleiche Größe wie das Element).
+
<color>
+
Siehe {{cssxref("<color>")}}-Werte für mögliche Schlüsselwörter und Notationen.
+ Falls nicht angegeben, hängt die Farbe vom Browser ab – sie ist normalerweise der Wert der {{cssxref("color")}}-Eigenschaft, aber Safari zeichnet in diesem Fall aktuell einen transparenten Schatten.
+
+ +

Interpolation

+ +

Jeder Schatten innerhalb der Liste (none wird als eine leere Liste interpretiert) wird über die Farbkomponente (als Farbe) interpoliert und x-, y-, Unschärfe- und (falls zutreffend) Ausbreitungskomponenten (als Länge). Für jeden Schatten gilt, falls beide angegebenen Schatten inset sind oder nicht, muss der interpolierte Schatten diesbezüglich mit den angegebenen Schatten übereinstimmen. Falls ein Schatten eines beliebigen Paares von angegebenen Schatten inset ist und der andere nicht, ist die gesamte Schattenliste nicht interpolierbar. Falls die Listen von Schatten verschiedene Längen haben, wird die kürzere Liste mit Schatten aufgefüllt, deren Farbe transparent ist, alle Längen 0 und dessen inset (oder nicht) mit dem der längeren Liste übereinstimmt.

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Live-Beispiele

+ + + +
box-shadow: 60px -16px teal;
+ +
box-shadow: 10px 5px 5px black;
+ +
box-shadow: 3px 3px red, -1em 0 0.4em olive;
+ +
box-shadow: inset 5em 1em gold;
+ +
box-shadow: 0 0 1em gold;
+ +
box-shadow: inset 0 0 1em gold;
+ +
box-shadow: inset 0 0 1em gold, 0 0 1em red;
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}{{Spec2('CSS3 Backgrounds')}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +{{Compat("css.properties.box-shadow")}} diff --git a/files/de/web/css/box-sizing/index.html b/files/de/web/css/box-sizing/index.html new file mode 100644 index 0000000000..7c07a9c554 --- /dev/null +++ b/files/de/web/css/box-sizing/index.html @@ -0,0 +1,137 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/box-sizing +--- +
+

{{CSSRef}}

+ +

Die CSS Eigenschaft box-sizing legt fest, wie die Gesamtbreite und -höhe eines Elements berechnet wird.

+ +
{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
+ + + +

Im CSS box model wird die Breite width und die Höhe height, die Sie einem Element zuweisen, standardmäßig nur auf die Inhaltsbox des Elements angewendet. Wenn das Element über einen Rahmen border oder Innenabstände padding verfügt, wird diese zu der Breite width und Höhe height hinzugefügt, um die Größe der Box zu erreichen, die auf dem Bildschirm angezeigt wird. Das bedeutet, dass Sie bei der Einstellung von Breite width und Höhe height den Wert anpassen müssen, um einen eventuell hinzugefügten Rahmen oder Auffüllen zu berücksichtigen. Wenn Sie z.B. vier Boxen mit einer Breite width: 25%; haben, wenn eine davon einen linken oder rechten Rand oder einen linken oder rechten Rand hat, passen sie standardmäßig nicht auf eine Zeile innerhalb der Beschränkungen des Elterncontainers.

+ +

Die box-sizing Eigenschaft kann verwendet werden, um dieses Verhalten anzupassen:

+ +
    +
  • content-box gibt Ihnen das standardmäßige CSS-Box-Größenverhalten. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, dann wird die Inhaltsbox des Elements 100 Pixel breit sein, und die Breite von Rahmen oder Auffüllungen wird zur endgültigen gerenderten Breite hinzugefügt, wodurch das Element breiter als 100px wird.
    • +
  • border-box +

    weist den Browser an, bei den Werten, die Sie für die Breite und Höhe eines Elements angeben, alle Ränder und Auffüllungen zu berücksichtigen. Wenn Sie die Breite eines Elements auf 100 Pixel festlegen, werden diese 100 Pixel alle von Ihnen hinzugefügten Ränder oder Füllungen enthalten, und das Inhaltsfeld wird verkleinert, um diese zusätzliche Breite zu absorbieren. Dadurch wird die Größenanpassung von Elementen normalerweise viel einfacher.

    +
    • +
+ +
+

Hinweis: Es ist oft nützlich, bei Layoutelementen die box-sizing auf border-box zu setzen. Dies erleichtert den Umgang mit der Größe von Elementen erheblich und eliminiert im Allgemeinen eine Reihe von Fallstricken, auf die Sie beim Layouten Ihres Inhalts stoßen können.  Bei der Verwendung von position: relative oder position: absolute und der Nutzung von box-sizing: content-box können die Positionswerte relativ zum Inhalt und unabhängig von Änderungen der Rahmen- und Füllungsgrößen eingestellt werden, was manchmal wünschenswert ist.

+
+
+ +

Syntax

+ +

Das box-sizing Eigenschaft wird als ein einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.

+ +
/* Schlüsselwortwerte */
+box-sizing: content-box;
+box-sizing: border-box;
+
+/* Globale Werte */
+box-sizing: inherit;
+box-sizing: initial;
+box-sizing: unset;
+
+ +

Werte

+ +
+
content-box
+
Dies ist der Standard-Stil, der vom CSS Standard definiert wurde. Die Werte {{Cssxref("width")}} und {{Cssxref("height")}} berechnen sich nur aus dem Inhalt des Elementes und enthalten weder border, margin oder padding.
+
border-box
+
Die Werte {{Cssxref("width")}} und {{Cssxref("height")}} enthalten padding und border, aber nicht margin. Das ist das Boxmodell, das der Internet Explorer im Quirks mode verwendet.
+
+ +

Formale Definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Box sizes mit content-box und border-box

+ +

Dieses Beispiel zeigt, wie unterschiedliche box-sizing Werte die gerenderte Größe von zwei ansonsten identischen Elementen verändern.

+ +

HTML

+ +
<div class="content-box">Content box</div>
+<br>
+<div class="border-box">Border box</div>
+ +

CSS

+ +
div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
+     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
+     Content box width: 160px
+     Content box height: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Total width: 160px
+     Total height: 80px
+     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
+     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Box_sizes_with_content-box_and_border-box', 'auto', 300)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Ursprüngliche Definition
+ +

Browser Kompabilität

+ +

{{Compat("css.properties.box-sizing")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/break-after/index.html b/files/de/web/css/break-after/index.html new file mode 100644 index 0000000000..6bbcdb52d2 --- /dev/null +++ b/files/de/web/css/break-after/index.html @@ -0,0 +1,114 @@ +--- +title: break-after +slug: Web/CSS/break-after +tags: + - CSS + - CSS Eigenschaft + - CSS Fragmentierung + - NeedsExample + - Referenz +translation_of: Web/CSS/break-after +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die break-after CSS Eigenschaft gibt an, wie die Seite, die Spalte oder der Abschnitt nach der generierten Box umbricht. Wenn es keine generierte Box gibt, wird die Eigenschaft ignoriert.

+ +

Jeder mögliche Brechpunkt, das sind alle Begrenzungen des Elements, ist unter dem Einfluss von drei Eigenschaften: dem break-after Wert des vorhergehenden Elements, dem {{cssxref("break-before")}} des nächsten Elements und dem {{cssxref("break-inside")}} Wert von dem beinhaltenden Elements.

+ +

Um zu ermitteln ob ein Umbruch erfolgen muss, werden folgende Regeln angwendet:

+ +
    +
  1. Wenn einer der drei Betroffenen Werte ein forced break value ist (das sind always, left, right, page, column oder region), hat er Vorrang. Wenn mehrere der betroffenen Werte solch ein Umbruch sind, wird der Wert des Elements, welches als letztes im Flow auftritt, verwendet (der {{cssxref("break-before")}} hat Vorrang gegenüber dem break-after Wert, welches wiederum Vorrang gegebüber dem {{cssxref("break-inside")}} Wert hat).
    2. +
  2. Wenn einer der drei betroffenen Werte ein avoid break value ist (das sind avoid, avoid-page, avoid-region oder avoid-column), wird kein Umbruch gemacht.
    3. +
+ +

Wenn einmal ein gezwungener Umbruch gemacht worden ist, werden bei Bedarf weiche Umbrüche hinzugefügt. Aber nicht auf Elementbegrenzungen, welche zu einem entsprechenden avoid Wert führen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
break-after: auto;
+break-after: always;
+break-after: left;
+break-after: right;
+break-after: recto;
+break-after: verso;
+break-after: page;
+break-after: column;
+break-after: region;
+break-after: avoid;
+break-after: avoid-page;
+break-after: avoid-column;
+break-after: avoid-region;
+
+ +

Werte

+ +
+
auto
+
Initialwert. Erlaubt (bedeutet kein Verbot oder Zwang) das Einfügen jeden Umbruchs (entweder Seite, Spalte oder Abschnitt) nach der hauptsächlichen Box.
+
always
+
Erzwingt immer Umbrüche nach der hauptsächlichen Box. Das ist ein Synonym für page, welches beibehalten wurde, um Übergänge von {{cssxref("page-break-after")}} zu ermöglichen, welche eine Teilmenge dieser Eigenschaft sind.
+
avoid
+
Verhindert das Einfügen jeglicher Umbrüche für page, column oder region nach der hauptsächlichen Box.
+
left
+
Erzwingt immer einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als linke Seite formatiert wird.
+
right
+
Erzwingt immer einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als rechte Seite formatiert wird.
+
page
+
Erzwingt immer einen Seitenumbruch direkt nach der hauptsächlichen Box.
+
column
+
Erzwingt immer einen Spaltenumbruch direkt nach der hauptsächlichen Box.
+
region {{experimental_inline}}
+
Erzwing immer einen Abschnittsumbruch direkt nach der hauptsächlichen Box.
+
recto {{experimental_inline}}
+
Erzwingt einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als eine recto Seite (eine rechte Seite in einer links-nach-rechts Ausdehnung oder eine linke Seite in einer rechts-nach-links Ausdehnung) formatiert wird.
+
verso {{experimental_inline}}
+
Erzwingt einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als eine verso Seite (eine linke Seite in einer links-nach-rechts Ausdehnung oder eine rechte Seite in einer rechts-nach-links Ausdehnung) formatiert wird.
+
avoid-page
+
Verhindert jeden Seitenumbruch direkt nach der hauptsächlichen Box.
+
avoid-column
+
Verhindert jeden Spaltenumbruch direkt nach der hauptsächlichen Box.
+
avoid-region {{experimental_inline}}
+
Verhindert jeden Anschnittsumbruch direkt nach der hauptsächlichen Box.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName('CSS3 Fragmentation', '#break-after', 'break-after')}}{{Spec2('CSS3 Fragmentation')}}Fügt die Schlüsselwörter recto und verso hinzu. Ändert dne Medientyp dieser Eigenschaft von paged zu {{xref_cssvisual}}. Präzisiert den Algorithmus für verschiedene Arten von Umbrüchen.
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}{{Spec2('CSS3 Regions')}}Erweitert die Eigenschaft, um Abschnittsumbrüche handhaben zu können. Für die Schlüsselwörter avoid-region und region hinzu.
{{SpecName('CSS3 Multicol', '#break-after', 'break-after')}}{{Spec2('CSS3 Multicol')}}Initiale Spezifikation. Erweitert die CSS 2.1 {{cssxref("page-break-after")}} Eigenschaft, um Seiten- und Spaltenumbrüche handhaben zu können.
+ +

Webbrowserkompatibilität

+ +{{Compat("css.properties.break-after")}} diff --git a/files/de/web/css/break-inside/index.html b/files/de/web/css/break-inside/index.html new file mode 100644 index 0000000000..8090a69267 --- /dev/null +++ b/files/de/web/css/break-inside/index.html @@ -0,0 +1,127 @@ +--- +title: break-inside +slug: Web/CSS/break-inside +translation_of: Web/CSS/break-inside +--- +
{{CSSRef}}
+ +

Die CSS-Eigenschaft break-inside gibt an, wie Seiten, Spalten oder Abschnitte innerhalb einer generierten Box umbrechen. Wenn es keine generierte Box gibt, wird die Eigenschaft ignoriert.

+ +
/* Spezifische Werte */
+break-inside: auto;
+break-inside: avoid;
+break-inside: avoid-page;
+break-inside: avoid-column;
+break-inside: avoid-region;
+
+/* Globale Werte */
+break-inside: inherit;
+break-inside: initial;
+break-inside: unset;
+
+ +

Alle Begrenzungen eines Elements sind ein möglicher Brechpunkt. Dieser wird von drei Eigenschaften beeinflusst:

+ +
    +
  • Dem Wert für {{cssxref("break-after")}} des vorherigen Elements.
    • +
  • Dem Wert für {{cssxref("break-before")}} des nachfolgenden Elements.
    • +
  • Dem Wert für break-inside des Elternelements.
    • +
+ +

Um zu ermitteln, ob ein Umbruch erfolgen muss, werden folgende Regeln angewendet:

+ +
    +
  1. Besitzt eine der drei Eigenschaften einen forced break value (always, left, right, page, column, oder region), so hat sie Vorrang. Wenn mehrere Eigenschaften einen forced break value besitzen, gewinnt das Element, welches als letztes im Flow auftritt. Das heißt: break-before überwiegt break-after, welches wiederum break-inside überwiegt.
    2. +
  2. Besitzt eine der drei Eigenschaften einen avoid break value (avoid, avoid-page, avoid-region, or avoid-column), so erfolgt kein Umbruch.
    3. +
+ +

Nachdem erzwungene Umbrüche gemacht wurden, werden bei Bedarf weiche Umbrüche hinzugefügt. Davon ausgenommen sind Elementbegrenzungen, für die der Wert avoid gilt.

+ +

{{cssinfo}}

+ +

Syntax

+ +

Die break-inside-Eigenschaft wird durch einen der folgenden Werte spezifiziert.

+ +

Werte

+ +
+
auto
+
Initialwert. Erlaubt jede Art von Umbruch (Seiten-, Spalten- oder Abschnittsumbruch) innerhalb der Box, erzwingt ihn aber nicht.
+
avoid
+
Vermeidet jede Art von Umbruch (Seiten-, Spalten- oder Abschnittsumbruch) innerhalb der Box.
+
avoid-page
+
Vermeidet Seitenumbrüche innerhalb der Box.
+
avoid-column
+
Vermeidet Spaltenumbrüche innerhalb der Box.
+
avoid-region {{experimental_inline}}
+
Vermeidet Regionsumbrüche innerhalb der Box.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Page-break-Aliasse

+ +

Aus Gründen der Kompatibilität soll die veraltete Eigenschaft {{cssxref("page-break-inside")}} von Browsern als ein Alias für break-inside behandelt werden. So wird sichergestellt, dass Projekte mit page-break-inside sich weiterhin wie konzipiert verhalten. Für folgende Werte sollen die aufgeführten Aliasse gelten:

+ + + + + + + + + + + + + + + + + + +
page-break-insidebreak-inside
autoauto
avoidavoid
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}{{Spec2('CSS3 Fragmentation')}}Keine Änderungen.
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}{{Spec2('CSS3 Regions')}}Erweitert die Eigenschaft um Regionsumbrüche.
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}{{Spec2('CSS3 Multicol')}}Initiale Spezifikation.
+ +

Browser-Kompatibilität

+ + + +

{{Compat("css.properties.break-inside", 4)}}

+ +

Anmerkungen zur Kompatibilität

+ +

Vor Firefox 65 kann die veraltete {{cssxref("page-break-inside")}}-Eigenschaft zur Vermeidung von Spalten- und Seitenumbrüchen genutzt werden. Verwenden Sie für Rückwärtskompatibilität beide Eigenschaften.

+ +

Für ältere WebKit-basierte Browser können Sie die Präfix-Eigenschaft -webkit-column-break-inside verwenden, um Spaltenumbrüche zu steuern.

diff --git a/files/de/web/css/calc()/index.html b/files/de/web/css/calc()/index.html new file mode 100644 index 0000000000..357b7d1036 --- /dev/null +++ b/files/de/web/css/calc()/index.html @@ -0,0 +1,106 @@ +--- +title: calc +slug: Web/CSS/calc() +tags: + - CSS + - CSS Funktion + - Referenz +translation_of: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Mit der CSS-Funktion calc() lassen sich Werte für CSS-Eigenschaften berechnen.

+ +

calc() kann überall verwendet werden, wo {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}} und {{cssxref("<integer>")}} eingesetzt werden dürfen.

+ +

Syntax

+ +
{{csssyntax}}
+ +
/* Eigenschaft: calc(Ausdruck) */
+width: calc(100% - 80px);
+ +

Werte

+ +
+
Ausdruck
+
Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.
+
+ +

Ausdrücke

+ +

Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:

+ +
+
+
+
Addition.
+
-
+
Subtraktion.
+
*
+
Multiplikation (muss mindestens eine {{cssxref("<number>")}} enthalten).
+
/
+
Division (Divisor muss eine {{cssxref("<number>")}} sein).
+
+ +

Bei den Operanden darf es sich um jeden Wert vom Typ {{cssxref("<length>")}} handeln, insbesondere können auch verschiedene Einheiten miteinander verrechnet werden.
+ Das Setzen von Klammern ist ebenfalls möglich.

+ +

calc()-Funktionen können ineinander verschachtelt werden.

+ +
Hinweis: Die Operatoren + und - erfordern zwingend ein Leerzeichen zwischen dem Operator und den Werten. Zum Beispiel würde calc(50% -8px) als Prozentwert, gefolgt von einer negativen Pixel-Länge interpretiert. Eine korrekte Subtraktion ergibt sich nur mit einem Leerzeichen zwischen - und 8px: calc(50% - 8px)
+Bei einer Multiplikation oder Division spielen Leerzeichen keine Rolle, sind aber der Lesbarkeit wegen empfohlen.
+ +
Berechnungen für die Breite oder Höhe von Tabellenspalten und -spaltengruppen sowie Tabellenzeilen und -zeilengruppen, sowie Tabellenzellen können vom Browser als Wert auto behandelt werden. Dies gilt für Tabellen mit dem Typ auto oder fixed.
+ +

Beispiele

+ +

Relative Größe eines Objekts mit einer absoluten Positionierung

+ +

Mit calc() ist es kein Problem mehr, die Maße eines Objekts in Abhängigkeit anderer Maße festzulegen.

+ +

In diesem Beispiel wurde ein Banner erstellt, das die gesamte verfügbare Breite einnehmen, dabei jedoch auf beiden Seiten einen Abstand einnehmen soll, der exakt 40 Pixeln beträgt.

+ +

Links ist die Position mit left: 40px definiert. Mit calc(100% - 80px) werden von der Gesamtbreite 80 Pixel abgezogen (2 * 40 Pixel), so verbleibt am rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.

+ +
.banner {
+  position: absolute;
+  left: 40px;
+  width: 90%;               /* fallback for browsers without support for calc() */
+  width: calc(100% - 80px);
+}
+
+ +
<div class="banner">This is a banner!</div>
+ +

{{ EmbedLiveSample('Relative_Gr%C3%B6sse_eines_Objekts_mit_einer_absoluten_Positionierung', '100%', '60') }}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}
+ +

Browserkompatibilität

+ +

{{Compat("css.types.calc")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/caption-side/index.html b/files/de/web/css/caption-side/index.html new file mode 100644 index 0000000000..042981c576 --- /dev/null +++ b/files/de/web/css/caption-side/index.html @@ -0,0 +1,153 @@ +--- +title: caption-side +slug: Web/CSS/caption-side +tags: + - CSS + - CSS Eigenschaft + - CSS Tabellen + - Layout + - Referenz +translation_of: Web/CSS/caption-side +--- +
{{CSSRef}}
+ +

Die CSS Eigenschaft caption-side positioniert den Inhalt einer {{HTMLElement("caption") }} einer Tabelle auf der angegebenen Seite.

+ +
{{EmbedInteractiveExample("pages/css/caption-side.html")}}
+ + + +

Syntax

+ +
/* Directional values */
+caption-side: top;
+caption-side: bottom;
+
+/* Warning: non-standard values */
+caption-side: left;
+caption-side: right;
+caption-side: top-outside;
+caption-side: bottom-outside;
+
+/* Global values */
+caption-side: inherit;
+caption-side: initial;
+caption-side: unset;
+
+ +

Die Eigenschaft caption-side property wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.

+ +

Werte

+ +
+
top
+
Die Überschriftenbox soll oberhalb der Tabelle positioniert werden.
+
bottom
+
Die Überschriftenbox soll unterhalb der Tabelle positioniert werden.
+
left {{ non-standard_inline() }}
+
Die Überschriftenbox soll links von der Tabelle positioniert werden.
+
+
Hinweis: Dieser Wert wurde für CSS 2 vorgeschlagen, aber aus der endgültigen CSS 2.1-Spezifikation entfernt. Er ist nicht standardisiert.
+
+
right {{ non-standard_inline() }}
+
Die Überschriftenbox soll rechts von der Tabelle positioniert werden.
+
+
Hinweis: Dieser Wert wurde für CSS 2 vorgeschlagen, aber aus der endgültigen CSS 2.1-Spezifikation entfernt. Er ist nicht standardisiert.
+
+
top-outside {{non-standard_inline}}
+
Das Überschriftenbox sollte oberhalb der Tabelle positioniert werden, während die Breite und das horizontale Ausrichtungsverhalten nicht an das horizontale Layout der Tabelle gebunden sind.
+
+
Die CSS 2.1-Spezifikation stellt fest, dass die CSS 2-Spezifikation ein anderes Verhalten für den top Wert beschrieben hat, der in einer zukünftigen Spezifikation durch diesen Wert wieder eingeführt wird.
+
+
bottom-outside {{non-standard_inline}}
+
Das Überschriftenbox sollte unterhalb der Tabelle positioniert werden, während die Breite und das horizontale Ausrichtungsverhalten nicht an das horizontale Layout der Tabelle gebunden sind.
+
+
Die CSS 2.1-Spezifikation stellt fest, dass die CSS 2-Spezifikation ein anderes Verhalten für den bottom Wert beschrieben hat, der in einer zukünftigen Spezifikation durch diesen Wert wieder eingeführt wird
+
+
+ +

Formale Definition

+ +

{{cssinfo}}

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Setzen von Beschriftungen oben und unten

+ +

HTML

+ +
<table class="top">
+  <caption>Caption ABOVE the table</caption>
+  <tr>
+    <td>Some data</td>
+    <td>Some more data</td>
+  </tr>
+</table>
+
+<br>
+
+<table class="bottom">
+  <caption>Caption BELOW the table</caption>
+  <tr>
+    <td>Some data</td>
+    <td>Some more data</td>
+  </tr>
+</table>
+
+ +

CSS

+ +
.top caption {
+  caption-side: top;
+}
+
+.bottom caption {
+  caption-side: bottom;
+}
+
+table {
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid blue;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample('Setting_captions_above_and_below', 'auto', 160)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS Logical Properties', '#caption-side', 'caption-side') }}{{ Spec2('CSS Logical Properties') }}Definiert die oberen top und unteren bottom Werte relativ zum Schreibmodus writing-mode Wert.
{{ SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side') }}{{ Spec2('CSS2.1') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("css.properties.caption-side")}}

diff --git a/files/de/web/css/clear/index.html b/files/de/web/css/clear/index.html new file mode 100644 index 0000000000..9d2be4ab3c --- /dev/null +++ b/files/de/web/css/clear/index.html @@ -0,0 +1,250 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - CSS Eigenschaft + - CSS Positionierung + - Layout + - Referenz +translation_of: Web/CSS/clear +--- +
{{CSSRef}}
+ +

Die CSS Eigenschaft clear legt fest, ob ein Element unter einem fließenden (float) Element verschoben werden muss, die ihm vorausgehen. Die clear Eigenschaft gilt für fließende und nicht fließenden Elemente.

+ +
{{EmbedInteractiveExample("pages/css/clear.html")}}
+ + + +

Wenn sie auf nicht fließende Blöcke angewendet wird, verschiebt sie den Rahmen (border edge) des Elements nach unten, bis sie unter den Rand (margin edge) aller relevanten fließende Elemente liegt. Der obere Rand (margin) des nicht fließenden Blocks kollabiert.

+ +

Vertikale Ränder (margins) zwischen zwei fließenden Elementen hingegen kollabieren nicht. Wenn sie auf fließenden Elemente angewendet werden, wird der Rand des unteren Elements unter den Rand aller relevanten fließenden Elementen verschoben. Dies wirkt sich auf die Position späterer fließenden Elementen aus, da spätere fließende Elemente nicht höher positioniert werden können als frühere.

+ +

Die relevanen fließenden Elemente, deren Fließeigenschaft beendet werden soll, sind die früheren fließenden Elemente mit der selben Blockformatierungskontexts .

+ +
+

Hinweis: Wenn ein Element nur fließenden (float) Elemente enthält, kollabiert seine Höhe zu null. Wenn Sie möchten, dass es immer in der Lage ist, seine Größe zu ändern, so dass es in seinem Inneren schwebende Elemente enthält, müssen Sie das float für seine Kinder selbst beenden. Dies wird clearfix genannt, und eine Weg, besteht darin, ein clear zu einem ersetzten {{cssxref("::after")}} Pseudoelement hinzuzufügen.

+ +
#container:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+
+ +

Syntax

+ +

+
+
/* Keyword values */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* Global values */
+clear: inherit;
+clear: initial;
+clear: unset;
+

+
+
Werte

+
+

+ 
none

+ 
Der Umfluss von vorherigen Elementen wird nicht beendet.

+ 
left

+ 
Der Umfluss von vorherigen Elementen wird auf der linken Seite beendet.

+ 
right

+ 
Der Umfluss von vorherigen Elementen wird auf der rechten Seite beendet.

+ 
both

+ 
Der Umfluss von vorherigen Elementen wird auf beiden Seiten beendet.

+ 
inline-start

+ 
Beendet die Fließeigenschaft des Elementes, das nach unten an den Startrand eines seines enthaltenden Blocks verschoben wird. Wenn die Textrichtung ltr (von links nach rechts) ist, dann wird es linksseitig sein. Falls die Textrichtung rtl (von rechts nach links) ist, dann wird es rechtsseitig sein.

+ 
inline-end

+ 
Beendet die Fließeigenschaft des Elementes, das nach unten an den Endrand eines seines enthaltenden Blocks verschoben wird. Wenn die Textrichtung ltr (von links nach rechts) ist, dann wird es linksseitig sein. Falls die Textrichtung rtl (von rechts nach links) ist, dann wird es rechtsseitig sein.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Formale Definition

+
+
{{cssinfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
clear: left

+
+
HTML

+
+
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="left">This paragraph clears left.</p>
+</div>
+

+
+
CSS

+
+
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+

+
+
Ergebnis

+
+
{{ EmbedLiveSample('clear-left','100%','250') }}

+
+
clear: right

+
+
HTML

+
+
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="right">This paragraph clears right.</p>
+</div>
+

+
+
CSS

+
+
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}

+
+
Ergebnis

+
+
{{ EmbedLiveSample('clear-right','100%','250') }}

+
+
clear: both

+
+
HTML

+
+
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="both">This paragraph clears both.</p>
+</div>
+

+
+
CSS

+
+
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 45%;
+}

+
+
Ergebnis

+
+
{{ EmbedLiveSample('clear-both','100%','300') }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}Die Werte inline-start und inline-end hinzugefügt.
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}Keine signifikanten Änderungen, jedoch werden Details geklärt.
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
+
+
{{Compat("css.properties.clear")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/clip-path/index.html b/files/de/web/css/clip-path/index.html
new file mode 100644
index 0000000000..63df0e6248
--- /dev/null
+++ b/files/de/web/css/clip-path/index.html
@@ -0,0 +1,128 @@
+---
+title: clip-path
+slug: Web/CSS/clip-path
+tags:
+  - CSS
+  - Experimentell
+  - Layout
+  - NeedsBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/clip-path
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
Übersicht

+
+
Die clip-path CSS Eigenschaft verhindert, dass ein Teil eines Elements angezeigt wird, indem es einen Schnittbereich definiert, der angezeigt werden soll, d. h. nur ein bestimmter Bereich des Elements wird angezeigt.

+
+
Der Schnittbereich ist ein Pfad, der als URL, die eine Inline- oder externe SVG-Grafik oder eine Formfunktion wie circle() definiert wird. Die clip-path Eigenschaft ersetzt die nun als veraltet geltende clip Eigenschaft.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+clip-path: none;
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+
+/* Bildwerte */
+clip-path: url(resources.svg#c1);
+clip-path: linear-gradient(blue, transparent);
+
+/* Geometriewerte */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+
+/* Globale Werte */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+

+
+
Werte

+
+

+ 
<clip-source>

+ 
Repräsentiert eine URL, die ein Schnittpfad Element referenziert.

+ 
<basic-shape>

+ 
Eine Grundform Funktion, wie sie in der CSS Shapes Specifikation definiert wird. Eine Grundform macht Gebrauch von der angegebenen Referenzbox, um die Grundform zu skalieren und positionieren. Falls keine Referenzbox angegeben wurde, wird border-box als Referenzbox verwendet.

+ 
<geometry-box>

+ 

+ 
Falls in Kombination mit <basic-shape> angegeben, gibt dieser Wert die Referenzbox für die Grundform an. Falls alleine angegeben, werden die Ränder der angegebenen Box inklusive etwaiger Randformen (z. B. definiert durch {{cssxref("border-radius")}}) als Schnittpfad verwendet.

+ 

+ 
fill-box

+ 

+ 
Verwendet den Objektrahmen als Referenzbox.

+ 

+ 
stroke-box

+ 

+ 
Verwendet die Strichrahmenbox als Referenzbox.

+ 

+ 
view-box

+ 

+ 
Verwendet den nähesten SVG-Viewport als Referenzbox. Falls ein {{SVGAttr("viewBox")}} Attribut für das den SVG-Viewport erstellende Element angegeben wurde, wird die Referenzbox am Ursprung des Koordinatensystems positioniert, das durch das viewBox Attribut erzeugt wird und die Ausmaße der Referenzbox werden auf die Breite und Höhe des viewBox Attributs gesetzt.

+ 

+ 
none

+ 
Es wird kein Schnittpfad erzeugt.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
/* Inline-SVG  */
+.target {
+  clip-path: url(#c1);
+}
+
+/* externes SVG */
+.anothertarget {
+  clip-path: url(resources.svg#c1);
+}
+
+/* Kreis */
+.circleClass {
+  clip-path: circle(15px at 20px 20px);
+}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}{{Spec2('CSS Masks')}}Erweitert die Anwendung auf HTML Elemente
{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}{{Spec2('SVG1.1')}}Ursprüngliche Definition (gilt nur für SVG Elemente)

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.clip-path")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/clip/index.html b/files/de/web/css/clip/index.html
new file mode 100644
index 0000000000..a23c3ec708
--- /dev/null
+++ b/files/de/web/css/clip/index.html
@@ -0,0 +1,131 @@
+---
+title: clip
+slug: Web/CSS/clip
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Veraltet
+translation_of: Web/CSS/clip
+---
+
{{CSSRef}}{{deprecated_header}}

+
+
Übersicht

+
+
Die clip CSS Eigenschaft definiert, welcher Teil eines Elements sichtbar ist. Sie gilt nur für Elemente mit {{cssxref("position","position:absolute")}}.

+
+

+
Warnung: Diese Eigenschaft ist veraltet. Es sollte stattdessen {{cssxref("clip-path")}} verwendet werden.

+

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwert */
+clip: auto;
+
+/* <shape> Werte */
+clip: rect(1px 10em 3rem 2ch);
+clip: rect(1px, 10em, 3rem, 2ch);
+
+/* Globale Werte */
+clip: inherit;
+clip: initial;
+clip: unset;
+

+
+
Werte

+
+

+ 
<shape>

+ 
Ein rechteckiger {{cssxref("<shape>")}} Wert der Form rect(<top>, <right>, <bottom>, <left>) oder  rect(<top> <right> <bottom> <left>) wobei <top> und <bottom> Versätze von der Innenseite des oberen Randes der Box angeben und <right> und <left> Versätze von der Innenseite des linken Randes der Box — d. h. die Ausmaße der Innenabstandsbox.

+ 
<top>, <right>, <bottom> und <left> können entweder einen {{cssxref("<length>")}} Wert haben oder auto. Falls der Wert irgendeiner Seite auto ist, wird das Element an der Innenseite des Randes dieser Seite abgeschnitten.

+ 
auto

+ 
Das Element wird nicht abgeschnitten (Standardwert). Zu beachten ist, dass sich dies von rect(auto, auto, auto, auto) unterscheidet, welches das Element an den Innenseiten der Ränder des Elements abschneidet.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
.dotted-border {
+   border: dotted;
+   position: relative;
+   width: 536px;
+   height: 350px;
+}
+
+#top-left, #middle, #bottom-right {
+   position: absolute;
+   top: 0px;
+}
+
+#top-left {
+   left: 360px;
+   clip: rect(0px, 175px, 113px, 0px);
+}
+
+
+#middle {
+   left: 280px;
+   clip: rect(119px, 255px, 229px, 80px);
+   /* Standardsyntax, nicht unterstützt von Internet Explorer 4-7 */
+}
+
+#bottom-right {
+   left: 200px;
+   clip: rect(235px 335px 345px 160px);
+   /* Nicht-standardisierte Syntax, jedoch von allen gängigen Browsern unterstützt */
+}

+
+
<p class="dotted-border">
+   <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Originalgrafik" />
+   <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die oben links abgeschnitten ist">
+   <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die zur Mitte hin abgeschnitten ist">
+   <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die unten rechts abgeschnitten ist">
+</p>

+
+
{{EmbedLiveSample('Beispiele', '689px', '410px')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Masks', '#clip-property', 'clip')}}{{Spec2('CSS Masks')}}Markiert die clip Eigenschaft als veraltet, schlägt {{cssxref("clip-path")}} als Ersatz vor.
{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}{{Spec2('CSS3 Transitions')}}Definiert clip als animierbar.
{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.clip")}}
+
+
Siehe auch

+
+
    
+ 
  • Verwandte CSS Eigenschaften: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("overflow")}}, {{Cssxref("display")}}, {{Cssxref("position")}}
    • 
+

diff --git a/files/de/web/css/color/index.html b/files/de/web/css/color/index.html
new file mode 100644
index 0000000000..1465dd3a1f
--- /dev/null
+++ b/files/de/web/css/color/index.html
@@ -0,0 +1,121 @@
+---
+title: color
+slug: Web/CSS/color
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/color
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS Eigenschaft color setzt die Vordergrundfarbe des Textinhalts eines Elements und seiner Dekorationen. Sie hat keinen Einfluss auf andere Charakteristiken des Elements; sie sollte eigentlich text-color genannt werden, jedoch wurde sie aus historischen Gründen und ihrem Auftreten in CSS Level 1 so genannt.

+
+
Beachte, dass der Farbwert eine gleichmäßige Farbe sein muss, welche seit CSS3 einen Transparenzwert beinhalten kann. Sie kann kein {{cssxref("<gradient>")}} sein, welcher in CSS ein {{cssxref("<image>")}} ist.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Eine CSS Level 1 Farbe */
+color: red;
+
+/* Die einzige in CSS Level 2 (Revision 1) hinzugefügte Farbe */
+color: orange;
+
+/* CSS Level 3 Farbe, manchmal SVG- oder X11-Farbe genannt */
+color: antiquewhite;
+
+/* Die Farbe lindgrün in der 3-Zeichen-Notation */
+color: #0f0;
+
+/* Die Farbe lindgrün in der 6-Zeichen-Notation */
+color: #00ff00;
+
+/* Eine Farbe, die die verfügbaren funktionalen Notationen verwendet */
+color: rgba(34, 12, 64, 0.3);
+
+/* Verwende die Farbe des direkten Vorfahren des Elements */
+color: currentcolor;
+
+/* Globale Werte */
+color: inherit;
+color: initial;
+color: unset;
+

+
+
Werte

+
+

+ 
<color>

+ 
Ist ein {{cssxref("<color>")}} Wert, der die Farbe von Textelementen innerhalb des Elements bestimmt.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Die folgenden Zeilen sind Beispiele, wie der Text des Elements rot eingefärbt werden kann:

+
+
element { color: red; }
+element { color: #f00; }
+element { color: #ff0000; }
+element { color: rgb(255, 0, 0); }
+element { color: rgb(100%, 0%, 0%); }
+element { color: hsl(0, 100%, 50%); }
+
+/* 50% translucent */
+element { color: rgba(255, 0, 0, 0.5); }
+element { color: hsla(0, 100%, 50%, 0.5); }
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}{{Spec2('CSS3 Transitions')}}Definiert color als animierbar.
{{SpecName('CSS3 Colors', '#color', 'color')}}{{Spec2('CSS3 Colors')}}Markiert Systemfarben als veraltet; fügt SVG-Farben hinzu; fügt die funktionalen Notationen rgba(), hsl(), hsla() hinzu.
{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}{{Spec2('CSS2.1')}}Fügt die Farbe orange und die Systemfarben hinzu.
{{SpecName('CSS1', '#color', 'color')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.color")}}
+
+
Siehe auch

+
+
    
+ 
  • Der {{cssxref("<color>")}} Datentyp
    • 
+ 
  • Weitere Farbeigenschaften: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} und {{cssxref("color-adjust")}}
    • 
+

diff --git a/files/de/web/css/column-count/index.html b/files/de/web/css/column-count/index.html
new file mode 100644
index 0000000000..0e7117c49b
--- /dev/null
+++ b/files/de/web/css/column-count/index.html
@@ -0,0 +1,106 @@
+---
+title: column-count
+slug: Web/CSS/column-count
+translation_of: Web/CSS/column-count
+---
+
{{CSSRef("CSS Multi-columns")}}

+
+
Übersicht

+
+
Die CSS Eigenschaft column-count bestimmt die Spaltenanzahl innerhalb eines Elements.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formal syntax: {{csssyntax("column-count")}}
+

+
+
column-count: 3
+column-count: auto

+
+
Werte

+
+

+ 
auto

+ 
Besagt, dass die Anzahl Spalten von anderen Werten Abhängig ist, wie z. B. {{cssxref("column-width")}}.

+ 
<number>

+ 
Ein positiver {{cssxref("<integer>")}}, welcher die Anzahl der Spalten genau festlegt. Falls der Wert von {{cssxref("column-width")}} nicht auto ist, stellt dieser Wert die maximale Anzahl an Spalten dar.

+

+
+
Beispiel

+
+
.content-box {
+  border: 10px solid #000000;
+  column-count:3;
+}
+

+
+
Spezifikations

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Multicol', '#column-count', 'column-count')}}{{Spec2('CSS3 Multicol')}} 

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix('-webkit')}}1.5 (1.8){{property_prefix('-moz')}}1011.13.0 (522){{property_prefix('-webkit')}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

+

diff --git a/files/de/web/css/column-fill/index.html b/files/de/web/css/column-fill/index.html
new file mode 100644
index 0000000000..3750096c9f
--- /dev/null
+++ b/files/de/web/css/column-fill/index.html
@@ -0,0 +1,74 @@
+---
+title: column-fill
+slug: Web/CSS/column-fill
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten
+  - NeedsBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/column-fill
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS Eigenschaft column-fill bestimmt die Aufteilung von Inhalten auf Spalten. Inhalte können entweder gleichmäßig verteilt werden, damit alle Spalten dieselbe Höhe haben, oder sie nehmen den Raum ein, den der Inhalt benötigt, sofern auto verwendet wird.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+column-fill: auto;
+column-fill: balance;
+
+/* Globale Werte */
+column-fill: inherit;
+column-fill: initial;
+column-fill: unset;
+

+
+
Werte

+
+

+ 
auto

+ 
Die Spalten werden fortlaufend gefüllt.

+ 
balance

+ 
Der Inhalt wird gleichmäßig aufgeteilt.

+

+
+
{{csssyntax}}

+
+
Beispiel

+
+
.content-box {
+  column-count: 4;
+  column-rule: 1px solid black;
+  column-fill: balance;
+  height: 200px;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Multicol', '#column-fill', 'column-fill')}}{{Spec2('CSS3 Multicol')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.column-fill")}}
diff --git a/files/de/web/css/column-gap/index.html b/files/de/web/css/column-gap/index.html
new file mode 100644
index 0000000000..9e41194a52
--- /dev/null
+++ b/files/de/web/css/column-gap/index.html
@@ -0,0 +1,94 @@
+---
+title: column-gap
+slug: Web/CSS/column-gap
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/column-gap
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS Eigenschaft column-gap bestimmt die Größe der Lücke zwischen den Spalten für Elemente, die als mehrspaltige Elemente dargestellt werden.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwert */
+column-gap: normal;
+
+/* <length> Werte */
+column-gap: 3px;
+column-gap: 2.5em;
+
+/* Globale Werte */
+column-gap: inherit;
+column-gap: initial;
+column-gap: unset;
+

+
+
Werte

+
+

+ 
normal

+ 
Übernimmt den vom Browser vordefinierten Wert. Laut Spezifikation sollte dieser Wert 1em entsprechen.

+ 
<length>

+ 
Ein {{cssxref("<length>")}} Wert, welcher den Abstand der Lücke festlegt. Der Wert darf nicht negativ sein, 0 ist jedoch zulässig.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
.content-box {
+  border: 10px solid #000000;
+  column-count: 3;
+  column-gap: 20px;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Multicol', '#column-gap', 'column-gap')}}{{Spec2('CSS3 Multicol')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
Support im Flex Layout

+
+
{{Compat("css.properties.column-gap.flex_context")}}

+
+
Support im Grid Layout

+
+
{{Compat("css.properties.column-gap.grid_context")}}

+
+
Support im Multi-column Layout

+
+
{{Compat("css.properties.column-gap.multicol_context")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/column-rule-color/index.html b/files/de/web/css/column-rule-color/index.html
new file mode 100644
index 0000000000..750321ff5e
--- /dev/null
+++ b/files/de/web/css/column-rule-color/index.html
@@ -0,0 +1,67 @@
+---
+title: column-rule-color
+slug: Web/CSS/column-rule-color
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspaltiges Layout
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/column-rule-color
+---
+
{{CSSRef("CSS Multi-columns")}}

+
+
Übersicht

+
+
Die column-rule-color CSS Eigenschaft definiert die Farbe der Linie, die zwischen den Spalten in mehrspaltigen Layouts gezeichnet wird.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("column-rule-color")}}
+

+
+
column-rule-color: red
+column-rule-color: rgb(192, 56, 78)
+column-rule-color: transparent
+column-rule-color: hsla(0, 100%, 50%, 0.6)
+
+column-rule-color: inherit
+

+
+
Werte

+
+

+ 
<color>

+ 
Ist ein {{cssxref("<color>")}} Wert, der die Farbe der Linie angibt, die die Spalten trennt.

+

+
+
Beispiel

+
+
#header { column-rule-color: blue; }
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Multicol', '#crc', 'column-rule-color')}}{{Spec2('CSS3 Multicol')}} 

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.column-rule-color")}}
diff --git a/files/de/web/css/column-rule-style/index.html b/files/de/web/css/column-rule-style/index.html
new file mode 100644
index 0000000000..612ec4008b
--- /dev/null
+++ b/files/de/web/css/column-rule-style/index.html
@@ -0,0 +1,72 @@
+---
+title: column-rule-style
+slug: Web/CSS/column-rule-style
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspaltiges Layout
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/column-rule-style
+---
+
{{ CSSRef("CSS Multi-columns") }}

+
+
Übersicht

+
+
Die column-rule-style CSS Eigenschaft definiert den Stil der Linie, die zwischen den Spalten in mehrspaltigen Layouts gezeichnet wird.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("column-rule-style")}}
+

+
+
column-rule-style: none
+column-rule-style: hidden
+column-rule-style: dotted
+column-rule-style: dashed
+column-rule-style: solid
+column-rule-style: double
+column-rule-style: groove
+column-rule-style: ridge
+column-rule-style: inset
+column-rule-style: outset
+
+column-rule-style: inherit
+

+
+
Werte

+
+

+ 
<br-style> 

+ 
Ist ein Schlüsselwort, das durch {{ cssxref("border-style") }} definiert wird und der den Stil der Linie angibt, die die Spalten trennt. Die Gestaltung muss wie im zusammenfallenden Border Model interpretiert werden.

+

+
+
Beispiel

+
+
#header {-moz-column-rule-style: inset;}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Multicol', '#crs', 'column-rule-style') }}{{ Spec2('CSS3 Multicol') }} 

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.column-rule-style")}}
diff --git a/files/de/web/css/column-rule-width/index.html b/files/de/web/css/column-rule-width/index.html
new file mode 100644
index 0000000000..b087970e95
--- /dev/null
+++ b/files/de/web/css/column-rule-width/index.html
@@ -0,0 +1,78 @@
+---
+title: column-rule-width
+slug: Web/CSS/column-rule-width
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspaltiges Layout
+  - Layout
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/column-rule-width
+---
+
{{ CSSRef}}

+
+
Übersicht

+
+
Die column-rule-width CSS Eigenschaft definiert die Breite der Linie, die zwischen den Spalten in mehrspaltigen Layouts gezeichnet wird.

+
+
{{cssinfo('column-rule-width')}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+column-rule-width: thin;
+column-rule-width: medium;
+column-rule-width: thick;
+
+/* Längenwerte */
+column-rule-width: 1px;
+column-rule-width: 2.5em;
+
+/* Globale Werte */
+column-rule-width: inherit;
+column-rule-width: initial;
+column-rule-width: unset;
+

+
+
Werte

+
+

+ 
<'border-width'> 

+ 
Ist ein {{cssxref("border-width")}} Wert oder eines der Schlüsselwörter thin, medium oder thick, und beschreibt die Breite der Linie, die zwei Spalten trennt.

+

+
+
Formale Syntax

+
+
{{csssyntax('column-rule-width')}}

+
+
Beispiel

+
+
#header {
+  column-rule-width: thick;
+}
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Multicol', '#crw', 'column-rule-width') }}{{ Spec2('CSS3 Multicol') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.column-rule-width")}}

diff --git a/files/de/web/css/column-rule/index.html b/files/de/web/css/column-rule/index.html
new file mode 100644
index 0000000000..5df71109ef
--- /dev/null
+++ b/files/de/web/css/column-rule/index.html
@@ -0,0 +1,74 @@
+---
+title: column-rule
+slug: Web/CSS/column-rule
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspaltenlayout
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/column-rule
+---
+
{{CSSRef("CSS Multi-columns")}}

+
+
Übersicht

+
+
In mehrspaltigen Layouts beschreibt die column-rule CSS Eigenschaft eine gerade Linie, welche zwischen jeder Spalte dargestellt wird. Sie ist eine komfortable Kurzform, um das separate Setzen der einzelnen column-rule-* Eigenschaften zu vermeiden: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}} und {{Cssxref("column-rule-color")}}.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("column-rule")}}
+

+
+
Werte

+
+
Akzeptiert einen, zwei oder drei Werte in beliebiger Reihenfolge:

+
+

+ 
<column-rule-width>

+ 
Ist eine {{cssxref("<length>")}} oder eins der drei Schlüsselwörter thin, medium oder thick. Siehe {{cssxref("border-width")}} für Details.

+ 
<column-rule-style>

+ 
Siehe {{cssxref("border-style")}} für mögliche Werte und Details.

+ 
<column-rule-color>

+ 
Ist ein {{cssxref("<color>")}} Wert.

+

+
+
Beispiele

+
+
p.foo { column-rule: dotted; }          /* entspricht "medium dotted currentColor" */
+p.bar { column-rule: solid blue; }      /* entspricht "medium solid blue" */
+p.baz { column-rule: solid 8px; }       /* entspricht "8px solid currentColor" */
+p.abc { column-rule: thick inset blue; }
+

+
+
Live Beispiel

+
+

+
padding:0.3em; background:gold; border:groove 2px gold; column-rule: inset 2px gold; column-width:17em;

+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}{{Spec2('CSS3 Multicol')}} 

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.column-rule")}}
diff --git a/files/de/web/css/column-span/index.html b/files/de/web/css/column-span/index.html
new file mode 100644
index 0000000000..c441af6d43
--- /dev/null
+++ b/files/de/web/css/column-span/index.html
@@ -0,0 +1,67 @@
+---
+title: column-span
+slug: Web/CSS/column-span
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten
+  - Referenz
+translation_of: Web/CSS/column-span
+---
+
{{CSSRef("CSS Multi-columns")}}

+
+
Übersicht

+
+
Die CSS Eigenschaft column-span bestimmt die Laufweite eines Elements inerhalb eines Mehrspaltigen Containers.

+
+
{{cssinfo}}

+
+
Syntax

+
+
{{csssyntax}}
+

+
+
column-span: none
+column-span: all
+
+column-span: inherit
+

+
+
Werte

+
+

+ 
none

+ 
Das Element fliesst nicht über mehrere Spalten hinweg.

+ 
all

+ 
Das Element fliesst über sämtliche Spalten hinweg. Der Inhalt davor wird automatisch zwischen den Spalten ausgeglichen.

+

+
+
Beispiele

+
+
h1, h2 {
+  column-span: all;
+}
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Multicol', '#column-span0', 'column-width') }}{{ Spec2('CSS3 Multicol') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.column-span")}}
diff --git a/files/de/web/css/column-width/index.html b/files/de/web/css/column-width/index.html
new file mode 100644
index 0000000000..2ba1dc5e11
--- /dev/null
+++ b/files/de/web/css/column-width/index.html
@@ -0,0 +1,99 @@
+---
+title: column-width
+slug: Web/CSS/column-width
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten
+  - Referenz
+translation_of: Web/CSS/column-width
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die column-width CSS Eigenschaft schlägt eine optimale Spaltenbreite vor. Dies ist kein absoluter Wert, sondern lediglich ein Hinweis an den Browser, welcher die Breite der Spalte anhand des vorgeschlagenen Wertes anpasst, was skalierbare Designs ermöglicht, die sich verschiedenen Bildschirmgrößen anpassen. Besonders wenn die {{cssxref("column-count")}} CSS Eigenschaft angegeben ist, welche Vorrang hat, wenn es darum geht, eine exakte Spaltenbreite zu setzen, müssen alle Längenwerte angegeben werden. In horizontalem Text sind dies {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}} und {{cssxref('column-rule-width')}}.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwert */
+column-width: auto;
+
+/* Verschiedene <length> Werte */
+column-width: 6px;
+column-width: 25em;
+column-width: 0.3vw;
+
+/* Globale Werte */
+column-width: inherit;
+column-width: initial;
+column-width: unset;
+

+
+
Werte

+
+

+ 
<length>

+ 
Ist ein {{cssxref("<length>")}} Wert, der einen Hinweis auf die optimale Breite der Spalte gibt. Die tatsächliche Spaltenbreite kann größer (um den verfügbaren Platz auszufüllen) oder schmaler (nur, falls der verfügbare Platz kleiner als die angegebene Spaltenbreite ist) sein. Die Länge muss positiv sein, ansonsten ist sie ungültig.

+ 
auto

+ 
Ist ein Schlüsselwort, das angibt, dass die Breite der Spalte durch andere CSS Eigenschaften wie {{cssxref("column-count")}} bestimmt werden soll.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
HTML Inhalt

+
+
<div class="content-box">
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+</div>

+
+
CSS Inhalt

+
+
.content-box {
+  border: 10px solid #0ff;
+
+  /* Chrome, Safari, Opera Präfix */
+  -webkit-column-width: 100px;
+
+  /* Mozilla Firefox Präfix */
+  -moz-column-width: 100px;
+
+  column-width: 100px;
+}
+

+
+
{{EmbedLiveSample('Beispiele', '300px', '200px')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Writing Modes', '#multicol-intrinsic', 'column-width')}}{{Spec2('CSS3 Writing Modes')}}Fügt innere Größen über die Schlüsselwörter min-content, max-content, fill-available und fit-content hinzu.
{{SpecName('CSS3 Multicol', '#cw', 'column-width')}}{{Spec2('CSS3 Multicol')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.column-width")}}

diff --git a/files/de/web/css/columns/index.html b/files/de/web/css/columns/index.html
new file mode 100644
index 0000000000..5a243ed703
--- /dev/null
+++ b/files/de/web/css/columns/index.html
@@ -0,0 +1,113 @@
+---
+title: columns
+slug: Web/CSS/columns
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten Layout
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/columns
+---
+
{{CSSRef}}

+
+
Die CSS Eigenschaft columns ist eine Kurzform Eigenschaft, die es erlaubt, sowohl die {{ cssxref('column-width') }} als auch die {{ cssxref("column-count") }} Eigenschaft auf einmal zu setzen.

+
+
{{EmbedInteractiveExample("pages/css/columns.html")}}

+
+
+
+
Syntax

+
+
/* Column width */
+columns: 18em;
+
+/* Column count */
+columns: auto;
+columns: 2;
+
+/* Both column width and count */
+columns: 2 auto;
+columns: auto 12em;
+columns: auto auto;
+
+/* Global values */
+columns: inherit;
+columns: initial;
+columns: unset;

+
+
Die Eigenschaft columns kann mit einem oder mit zwei von den unten aufgelisteten Werten in beliebiger Reihenfolge spezifiziert.

+
+
Werte

+
+

+ 
<column-width>

+ 
The ideal column width, defined as a {{cssxref("<length>")}} or the keyword auto. The actual width may be wider or narrower to fit the available space. See {{cssxref("column-width")}}.

+ 
<column-count>

+ 
The ideal number of columns into which the element's content should be flowed, defined as an {{cssxref("<integer>")}} or the keyword auto. If neither this value nor the column's width are auto, it merely indicates the maximum allowable number of columns. See {{cssxref("column-count")}}.

+

+
+
Formale Definition

+
+
{{cssinfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
Sets drei gleiche Spalten

+
+
HTML

+
+
<p class="content-box">
+  This is a bunch of text split into three columns
+  using the CSS `columns` property. The text
+  is equally distributed over the columns.
+</p>
+

+
+
CSS

+
+
.content-box {
+  columns: 3 auto;
+}

+
+
Ergebnis

+
+
{{EmbedLiveSample('Setting_three_equal_columns', 'auto', 120)}}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Multicol', '#columns', 'columns') }}{{ Spec2('CSS3 Multicol') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
+
+
{{Compat("css.properties.columns")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/content/index.html b/files/de/web/css/content/index.html
new file mode 100644
index 0000000000..686e098723
--- /dev/null
+++ b/files/de/web/css/content/index.html
@@ -0,0 +1,238 @@
+---
+title: content
+slug: Web/CSS/content
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/content
+---
+
{{ CSSRef() }}

+
+
Zusammenfassung

+
+
Die content CSS Eigenschaft wird mit {{ cssxref("::before") }} und {{ cssxref("::after") }} Pseudo-elementen genutzt um Inhalte in einen Element zu generieren. Die Inhalte die in content eingefügt werden sind Anonym, sie werden nur gerendert und sind nicht im DOM vorhanden. Siehe: replaced elements.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formal syntax: {{csssyntax("content")}}
+

+
+
content: normal                                /* Keywords die nicht mit anderen Werten kombiniert werden können */
+content: none
+
+content: 'prefix'                              /* <string> Wert, nicht-lateinische Zeichen müssen codiert werden z.B. \00A0 for &nbsp; */
+content: url(http://www.example.com/test.html) /* <uri> Wert */
+content: chapter_counter                       /* <counter> Werte */
+content: attr(value string)                    /* attr() Wert verbunden mit dem HTML Attribut Wert */
+content: open-quote                            /* Sprach- und positionsabhängige Keywords */
+content: close-quote
+content: no-open-quote
+content: no-close-quote
+
+content: open-quote chapter_counter            /* Außer für normal und none, können mehrere Werte gleichzeitig verwendet werden */
+
+content: inherit
+

+
+
Werte

+
+

+ 
none

+ 
Das Pseudo-Element wird nicht erzeugt.

+ 
normal

+ 
Berechnet auf none für :before und :after Pseudo-elemente.

+ 
<string>

+ 
Text Inhalt.

+ 
<uri> url()

+ 
Der Wert ist ein URI, die eine externe Ressource bezeichnet (beispielsweise ein Bild). Wenn die Ressource oder das Bild nicht angezeigt werden kann, wird es entweder ignoriert oder ein Platzhalter wird angezeigt.

+ 
<counter>

+ 
Die Zähler (Counters) können mit zwei verschiedenen Funktionen angegeben werden: 'counter()' oder 'counters()'. Ersteres hat zwei Formen: 'counter(name) "oder" counter(name, style). Der erzeugte Text ist der Wert des counter innersten, im Scope dieses Pseudoelements; es wird in der angegebenen Art ('dezimal' als Standard) formatiert. Die letztere Funktion hat auch zwei Formen: "counter(name, string) 'oder' counters(name, string, style) '. Der erzeugte Text ist der Wert aller Zähler mit dem angegebenen Namen im Scope dieses Pseudoelements, von außen nach innen, durch den angegebenen String getrennt. Die counter werden in der angegebenen Art ('dezimal' als Standard) wiedergegeben. Siehe den Abschnitt über automatische Counter und Nummerierung für weitere Informationen. Der Name darf nicht "none", "inherit" oder "initial" sein. Ein solcher Name bewirkt, dass die Deklaration ignoriert wird.

+ 
attr(X)

+ 
Gibt den Wert des Elementen Attributes X als String zurück. Gibt es kein Attribut X wird ein leerer String zurückgegeben. Die Groß- und Kleinschreibung von Attributnamen hängt von der Dokumentsprache ab.

+ 
open-quote | close-quote

+ 
Diese Werte werden durch die entsprechende Zeichenfolge aus der {{ cssxref("quotes") }} Eigenschaft ersetzt. 

+ 
no-open-quote | no-close-quote

+ 
Stellt keine Inhalte, sondern erhöht (verringert) die Ebene der Schachtelung für Zitate.

+

+
+
Beispiele

+
+
Code Beispiele - Überschriften und Zitate

+
+
HTML

+
+
<h1>5</h1>
+<p> We shall start this with a quote from Sir Tim Berners-Lee,
+    <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
+        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q>  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
+</p>
+
+<h1>6</h1>
+<p> Here we shall quote the Mozilla Manifesto,
+    <q cite="http://www.mozilla.org/en-US/about/manifesto/">
+        Individuals must have the ability to shape the Internet and their own experiences on the Internet.</q> And so, we can infer that contributing to the open web, can protect our own individual experiences on it.
+</p>

+
+
CSS

+
+
q {
+    color: #00008B;
+    font-style: italic;
+}
+
+q::before   { content: open-quote }
+q::after    { content: close-quote }
+
+h1::before  { content: "Chapter "; }

+
+
Ausgabe

+
+
{{ EmbedLiveSample('Code_sample_-_headings_and_quotes', 460, 100) }}

+
+
Code sample - content with multiple values adding an icon before a link

+
+
HTML

+
+
<a href="http://www.mozilla.org/en-US/">Home Page</a>

+
+
CSS

+
+
a::before{
+    content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
+    font:    x-small Arial,freeSans,sans-serif;
+    color:   gray;
+}

+
+
Ausgabe

+
+
{{ EmbedLiveSample('Code_sample_-_content_with_multiple_values', 200, 60) }}

+
+
Code sample - adding an icon after text in a custom list

+
+
HTML

+
+
<div>
+  <ul class="brightIdea">
+    <li>This is my first idea</li>
+    <li>and another good idea</li>
+  </ul>
+</div>

+
+
CSS

+
+
/* first import the icon from a suitable site */
+@import url(http://weloveiconfonts.com/api/?family=entypo);
+
+.brightIdea li::after{
+    content: '\1f4a1';
+    font-family: 'entypo', sans-serif;
+}

+
+
Ausgabe

+
+
{{ EmbedLiveSample('Code_sample_-_adding_an_icon_after_text', 300, 100) }}

+
+
Code sample - class based example

+
+
HTML

+
+
<h2>Paperback best sellers</h2>
+<ol>
+    <li>Political thriller</li>
+    <li class="newEntry">Halloween Stories</li>
+    <li>My Biography</li>
+    <li class="newEntry">Vampire Romance</li>
+</ol>

+
+
CSS

+
+
/* use a class rather that an element selector to give more flexibility.
+Simple string example, but don't forget add a leading space in the text string
+for spacing purposes  */
+
+.newEntry::after {
+    content: " New!";
+    color: red;
+}

+
+
Ausgabe

+
+
{{ EmbedLiveSample('Code_sample_-_class_based_example', 300, 200) }}

+
+
Code sample - rich link styling

+
+
HTML

+
+
<ul>
+    <li><a id="moz" href="http://www.mozilla.org/">
+        Mozilla Home Page</a></li>
+    <li><a id="mdn" href="https://developer.mozilla.org/">
+        Mozilla Developer Network</a></li>
+    <li><a id="w3c" href="http://www.w3c.org/">
+        World Wide Web Consortium</a></li>
+</ul>

+
+
CSS

+
+
a {
+    text-decoration: none;
+    border-bottom: 3px dotted navy;
+}
+
+a::after {
+    content: " (" attr(id) ")";
+}
+
+#moz::before {
+    content:url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) ;
+}
+
+#mdn::before {
+    content:url(https://mdn.mozillademos.org/files/7691/mdn-favicon16.png) ;
+}
+
+#w3c::before {
+    content:url(http://w3c.org/2008/site/images/favicon.ico) ;
+}
+
+li {
+    margin: 1em;
+}
+
+

+
+
Ausgabe

+
+
{{ EmbedLiveSample('Code_sample_-_rich_link_styling', 340, 200) }}

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('CSS2.1', 'generate.html#content', 'content') }}{{ Spec2('CSS2.1') }}

+
+
Browser compatibility

+
+
{{Compat("css.properties.content")}}

+
+
See also

+
+
    
+ 
  • {{ Cssxref("::after") }}, {{ Cssxref("::before") }}, {{ Cssxref("quotes") }}
    • 
+

diff --git a/files/de/web/css/counter-increment/index.html b/files/de/web/css/counter-increment/index.html
new file mode 100644
index 0000000000..07c649e290
--- /dev/null
+++ b/files/de/web/css/counter-increment/index.html
@@ -0,0 +1,99 @@
+---
+title: counter-increment
+slug: Web/CSS/counter-increment
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Liste
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/counter-increment
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die counter-increment CSS Eigenschaft wird verwendet, um den Wert von CSS Zählern um einen bestimmten Wert zu erhöhen. Der Wert des Zählers kann durch die {{cssxref("counter-reset")}} CSS Eigenschaft zurückgesetzt werden.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Erhöht 'counter-name' um 1 */
+counter-increment: counter-name;
+
+/* Verringert 'counter-name' um 1 */
+counter-increment: counter-name -1;
+
+/* Erhöht 'counter1' um 1 und verringert 'counter2' um 4 */
+counter-increment: counter1 counter2 -4;
+
+/* Belässt die Zähler unverändert: wird verwendet, um weniger spezifische Werte zu verstecken */
+counter-increment: none;
+
+/* Globale Werte */
+counter-increment: inherit;
+counter-increment: initial;
+counter-increment: unset;
+

+
+
Werte

+
+

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

+ 
Der Name des Zählers, der erhöht bzw. verringert werden soll. Dieser Bezeichner besteht aus einer Kombination von den schreibungsunabhängigen Buchstaben a bis z, den Zahlen 0 bis 9, Unterstrichen (_), und/oder Bindestrichen (-). Das erste Zeichen, das kein Bindestrich ist, muss ein Buchstabe sein (d. h. am Anfang darf keine Zahl stehen, auch nicht, wenn davor ein Bindestrich steht). Zudem sind zwei Bindestriche am Anfang des Bezeichners verboten. Er darf weder none, unset, initial oder inherit unabhängig von Groß- und Kleinschreibung sein.

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

+ 
Der Wert, der dem Zähler hinzugefügt wird. Falls nicht angegeben, wird 1 verwendet.

+ 
none

+ 
Keiner der Zähler wird verändert. Dieser Wert wird als Standardwert verwendet oder um eine Erhöhung bzw. Verringerung in spezifischeren Regeln zurückzusetzen.

+

+
+
Es können beliebig viele Zähler erhöht bzw. verringert werden, jeder durch ein Leerzeichen getrennt.

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
h1 {
+  counter-increment: chapter section 2 page;
+  /* Erhöht den Wert der 'chapter' und 'page' Zähler um 1
+     und den 'section' Zähler um 2. */
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS3 Lists", "#counter-increment", "counter-increment")}}{{Spec2("CSS3 Lists")}}Keine Änderung
{{SpecName("CSS2.1", "generate.html#propdef-counter-increment", "counter-increment")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.counter-increment")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/counter-reset/index.html b/files/de/web/css/counter-reset/index.html
new file mode 100644
index 0000000000..3b35441a61
--- /dev/null
+++ b/files/de/web/css/counter-reset/index.html
@@ -0,0 +1,100 @@
+---
+title: counter-reset
+slug: Web/CSS/counter-reset
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Liste
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/counter-reset
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die counter-reset CSS Eigenschaft wird verwendet, um CSS Zähler auf einen bestimmten Wert zurückzusetzen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Setzt 'counter-name' auf 0 */
+counter-reset: counter-name;
+
+/* Setzt 'counter-name' auf -1 */
+counter-reset: counter-name -1;
+
+/* Setzt 'counter1' auf 1 und 'counter2' auf 4 */
+counter-reset: counter1 1 counter2 4;
+
+/* Bricht alle Rücksetzungen ab, die in weniger spezifischen Regeln gesetzt würden */
+counter-reset: none;
+
+/* Globale Werte */
+counter-reset: inherit;
+counter-reset: initial;
+counter-reset: unset;
+

+
+
Werte

+
+

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

+ 
Der Name des Zählers, der zurückgesetzt werden soll. Dieser Bezeichner besteht aus einer Kombination von den schreibungsunabhängigen Buchstaben a bis z, den Zahlen 0 bis 9, Unterstrichen (_), und/oder Bindestrichen (-). Das erste Zeichen, das kein Bindestrich ist, muss ein Buchstabe sein (d. h. am Anfang darf keine Zahl stehen, auch nicht, wenn davor ein Bindestrich steht). Zudem sind zwei Bindestriche am Anfang des Bezeichners verboten. Er darf weder none, unset, initial oder inherit unabhängig von Groß- und Kleinschreibung sein.

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

+ 
Der Wert, auf den der Zähler bei jedem Vorkommen des Elements zurückgesetzt werden soll. Falls nicht angegeben, wird 0 verwendet.

+ 
none

+ 
Ist ein Schlüsselwort, das angibt, dass keiner der Zähler zurückgesetzt wird. Es kann dazu verwendet werden, um counter-reset Werte zu verstecken, die in weniger spezifischen Regeln definiert wurden.

+

+
+
Es können beliebig viele Zähler zurückgesetzt werden, jeder durch ein Leerzeichen getrennt.

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
h1 {
+  counter-reset: chapter section 1 page;
+  /* Setzt den 'chapter' und 'page' Zähler auf 0
+     und den 'section' Zähler auf 1. */
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}{{Spec2('CSS3 Lists')}}Keine Änderung
{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.counter-reset")}}
+
+
Siehe auch

+
+
    
+ 
  • CSS Zähler
    • 
+ 
  • {{Cssxref("counter-increment")}}
    • 
+ 
  • {{cssxref("@counter-style")}}
    • 
+

diff --git a/files/de/web/css/css_animations/css_animationen_nutzen/index.html b/files/de/web/css/css_animations/css_animationen_nutzen/index.html
new file mode 100644
index 0000000000..ea0dc4e7de
--- /dev/null
+++ b/files/de/web/css/css_animations/css_animationen_nutzen/index.html
@@ -0,0 +1,365 @@
+---
+title: CSS Animationen nutzen
+slug: Web/CSS/CSS_Animations/CSS_Animationen_nutzen
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+
{{SeeCompatTable}}{{CSSRef}}

+
+
CSS Animationen ermöglichen animierte Übergänge von einem CSS Style-Konfiguration zur nächsten. Die Animationen bestehen aus zwei Komponenten: Einem Style, der die Animation beschreibt, sowie einer Menge von Keyframes, die Start, Ende und mögliche Zwischenpositionen der Animation festlegt.

+
+
Es gibt drei zentrale Vorteile von CSS-Animationen gegenüber traditionellen skriptgetriebenen Animationstechniken:

+
+
    
+ 
  1. Sie sind einfach zu nutzen für simple Animationen; man kann sie ohne Javascript-Kenntnisse erstellen. 
    2. 
+ 
  2. Die Animationen laufen performant, sogar unter mäßiger Systemauslastung. Im Gegensatz dazu fallen selbst simple Javascript-Animationen durch schlechte Performance auf. Die Engine kann einzelne Frames überspringen und kennt weitere Techniken, um die Ausführung so sauber wie möglich zu gestalten. 
    3. 
+ 
  3. Da der Browser die Animation kontrolliert, kann er selbstständig die Performance optimieren, zum Beispiel durch das Drosseln der Freqenz von Animationen in aktuell nicht sichtbaren Browser-Tabs.
    4. 
+

+
+
Konfigurieren der Animation

+
+
Um eine CSS-Animation zu erstellen, fügt man dem zu animierenden Element die {{ cssxref("animation") }}-Eigenschaft oder seine Sub-Eigenschaften zu. So lassen sich Timing und Dauer der Animation sowie weitere Details des Animationsablaufes bestimmen. Man legt damit nicht die eigentliche Darstellung der Animation fest, die mittels {{ cssxref("@keyframes") }} definiert wird. Siehe {{ anch("Definieren der Animationssequenz mittels Keyframes") }} weiter unten.

+
+
Die Sub-Eigenschaften der {{ cssxref("animation") }}-Eigenschaft sind:

+
+

+ 
{{ cssxref("animation-name") }}

+ 
Spezifiziert den Namen der {{ cssxref("@keyframes") }}-at-Regel, welche die einzelnen Keyframes beschreibt.

+ 
{{ cssxref("animation-duration") }}

+ 
Legt die Dauer der Animation für einen kompletten Durchgang fest.

+ 
{{ cssxref("animation-timing-function") }}

+ 
Konfiguriert das Timing der Animation. Konkret werden die Übergänge zwischen den einzelnen Keyframes mittels Beschleunigungskurven festgelegt.

+ 
{{ cssxref("animation-delay") }}

+ 
Setzt den Abstand zwischen dem Zeitpunkt, an dem die Animation vollständig geladen ist und dem Start der Animationssequenz.

+ 
{{ cssxref("animation-iteration-count") }}

+ 
Konfiguriert wie oft die Animation wiederholt wird; mittels infinite wird die Animation unendlich wiederholt.

+ 
{{ cssxref("animation-direction") }}

+ 
Legt fest, ob die Animation nach jedem Durchgang die Abspielrichtung wechselt oder zum Startpunkt zurückspringt und sich wiederholt. 

+ 
{{ cssxref("animation-fill-mode") }}

+ 
Legt fest, welche Styles vor und nach dem Ausführen der Animation auf das animierte Element angewendet werden.

+ 
{{ cssxref("animation-play-state") }}

+ 
Ermöglicht das Pausieren und Wiederaufnehmen einer Animationssequenz.

+ 

+ 
Definieren der Animationssequenz mittels Keyframes

+ 

+

+
+
Nachdem Sie den zeitlichen Ablauf der Animation festgelegt haben, müssen Sie die Erscheinung der Animation festlegen. Sie erreichen dies, indem Sie zwei oder mehr Keyframes mit Hilfe der {{ cssxref("@keyframes") }} at-Regel erstellen. Jeder Keyframe beschreibt den Darstellungszustand des animierten Elements zum gegebenen Zeitpunkt der Animationssequenz.

+
+
Da der zeitliche Ablauf der Animation im CSS-Style, welcher die Animation konfiguriert, festgelegt ist, verwenden Keyframes {{ cssxref("percentage") }} um den Zeitpunkt festzulegen, wann die Animationssequenz beginnen soll. 0% steht für den ersten Moment der Animationssequenz, wohingegen 100%  den letzten Zustand der Animation beschreibt. Weil diese beiden Keyframes so wichtg sind gibt es zwei Wörter für sie: from und to. Sie sind beide optional. Falls from/0% oder to/100% nicht definiert sind , startet oder stoppt der Browser die Animation gemäß der berechneten Werte aller Attribute.

+
+
Sie können optional zusätzliche Keyframes einfügen, die jeweils Zwischenschritte auf dem Weg vom Start- zum Endpunkt der Animation beschreiben.

+
+
Beispiele

+
+
Hinweis: Einige ältere Browser (vor 2017) benötigen unter Umständen Präfixe; die Live-Beispiele, welche durch einen Klick im Browser betrachtet werden können, beinhalten die -webkit Präfix-Syntax.

+
+
Einen Text übers Fenster gleiten lassen.

+
+
Dieses einfache Beispiel an einem {{ HTMLElement("p") }}-Element lässt einen Text von rechts über das Browserfenster gleiten.

+
+
Beachte, dass solche Animationen dafür sorgen können, dass die Seite breiter als das Browser-Fenster wird. Um dieses Problem zu umgehen, wird das zu animierende Element in einen Container gepackt. Der Container erhält anschließend die {{cssxref("overflow")}}:hidden Eigenschaft.

+
+
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+

+
+
In diesem Beispiel, bestimmt der Style für das {{ HTMLElement("p") }}-Element, dass durch den Einsatz von {{ cssxref("animation-duration") }} die Animation von Anfang bis Ende in drei Sekunden ausgeführt werden soll. Der Name der {{ cssxref("@keyframes") }} at-Regel, welche die Keyframes der Animation beschreibt, lautet "slidein".

+
+
Falls Sie weitere angepasste Styles auf das {{ HTMLElement("p") }}-Element anwenden wollen, die keine CSS-Animationen unterstützen, würden diese hier ebenfalls eingefügt werden. In diesem Falle wollen wir aber außer der Animation keine weiteren Styles festlegen.

+
+
Die Keyframes werden anhand der {{ cssxref("@keyframes") }} at-Regel festgelegt. In diesem Beispiel haben wir nur zwei Keyframes. Der erste tritt bei 0% (aufgrund des Aliases from) ein. Hier bestimmen wir einen linken Außenabstand des Elements von 100% (das heißt, am rechten äußeren Rand des umschließenden Elements). Darüberhinaus wird die Breite des Elements auf 300% gesetzt (oder drei Mal der Breite des umgebenden Elements). Dadurch wird der Header im ersten Frame der Animation außerhalb des rechten Randes des Browser-Fensters gezeichnet.

+
+
Der zweite (und letzte) Keyframe tritt bei 100% ein (aufgrund des Aliases to). Der linke Außenabstand wird auf 0% gesetzt und die Breite des Elements auf 100% aktualisiert. Dadurch beendet der Header seine Animation mit einer Ausrichtung am linken Rand des Inhaltsbereichs.

+
+
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+

+
+

+
Hinweis: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.

+

+
+
{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

+
+
Hinzufügen eines weiteren Keyframes

+
+
Lassen Sie uns eine weitere Keyframe zur Animation des vorigen Beispiels hinzufügen. Sagen wir, wir wollen zunächst für eine Weile die Schriftgröße des Headers erhöhen, während er sich von rechts nach links bewegt. Am Ende soll sie wieder auf ihre ursprüngliche Größe schrumpfen. Das ist so einfach wie das Hinzufügen dieser Keyframe:

+
+
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+

+
+
Der vollständige Code sieht nun so aus:

+
+
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}

+
+
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>

+
+
Dies teilt dem Browser mit, dass nach 75% der Animationssequenz der linke Außenabstand des Headers bei 25% und die Breite bei 150% liegen sollte.

+
+

+
Hinweis: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.

+

+
+
{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}

+
+
Lass es sich wiederholen

+
+
Damit die Animation sich wiederholt, nutzen Sie die {{ cssxref("animation-iteration-count") }}-Eigenschaft, um festzulegen, wie oft sich die Animation wiederholen soll. In diesem Beispiel setzen wir sie auf infinite, damit sich die Animation unendlich oft wiederholt:

+
+
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+

+
+
Nach Hinzufügen zum bisherigen Code:

+
+
@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}

+
+
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>

+
+
{{EmbedLiveSample("Making_it_repeat","100%","250")}}

+
+
Lassen Sie es sich vor- und zurück bewegen

+
+
Die vorige Anpassung sorgte dafür, dass sich die Animation wiederholte. Aber es ist sehr eigenartig, dass die Animation jedes Mal zum Anfang zurückspringt, wenn sie sich wiederholt. Was wir wirklich wollen ist ein Vor- und Zurückbewegen über den Bildschirm. Dazu muss die {{ cssxref("animation-direction") }}-Eigenschaft auf alternate gesetzt werden:

+
+
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+

+
+
Damit sieht der übrige Code folgendermaßen aus:

+
+
@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}

+
+
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>

+
+
{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}

+
+
Benutzen der Animation Kurzversion

+
+
Die {{cssxref("animation")}}-Kurzversion ist hilfreich, um Platz zu sparen. Zum Beispiel haben wir diese Regel während dieses Artikels genutzt:

+
+
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+

+
+
Sie könnte durch Folgendes ersetzt werden:

+
+
p {
+  animation: 3s infinite alternate slidein;
+}
+

+
+

+
Hinweis: Sie können weitere Beispiele auf der Referenzseite von {{cssxref("animation")}} finden.

+

+
+
Setzen mehrere Animationseigenschaftswerte

+
+
Die Langversion der CSS-Animation akzeptiert mehrere durch Komma getrennte Werte — eine Eigenschaft, die genutzt werden kann, um mehrere Animationen in einer einzigen Regel anzuwenden. Daneben lassen sich für die verschiedenen Animationen die Dauer, Anzahl der Wiederholungen usw. einzeln festlegen. Sehen Sie sich die folgenden kurzen Beispiele an, die die verschiedenen Kombinationen erklären:

+
+
In diesem ersten Beispiel wurden drei Animations-Namen gesetzt, aber nur eine Dauer und Anzahl der Wiederholungen gesetzt. In diesem Falle erhalten alle drei Animationen die gleiche Dauer und Anzahl der Wiederholungen:

+
+
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;

+
+
In diesem zweiten Beispiel wurden drei Werte für drei Eigenschaften gesetzt. In diesem Falle entsprechen die Werte an der selben Position jeder Eigenschaft der jeweiligen Animation. So hat die fadeInOut Animation beispielsweise eine Dauer von 2.5s und wiederholt sich zwei Mal usw.

+
+
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;

+
+
In diesem dritten Beispiel wurden drei Animationen festgelegt, aber nur zwei Dauern und Anzahl der Wiederholungen. In Fällen wie diesen, in denen es nicht genug Werte gibt, um jeder Animation ihren eigenen Wert zuzuweisen, wiederholt sich der Wertze-Zyklus von Anfang bis Ende. Beispielsweise erhält fadeInOut eine Dauer von 2.5s und moveLeft300px eine von 5s. Damit sind wir am Ende der verfügbaren Werte für die Dauer angelangt, also fangen wir von vorne an — bounce bekommt daher eine dauer von 2.5s zugewiesen. Die Anzahl der Wiederholungen (und alle weiteren Eigenschaften, die Sie so festlegen), werden auf die selbe Weise zugewiesen.

+
+
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;

+
+
Benutzen von Animations-Ereignissen

+
+
Sie können zusätzliche Kontrolle über Animationen — sowie mehr nützliche Informationen — erhalten, indem sie Animations-Ereignisse nutzen. Diese Ereignisse werden durch das {{domxref("AnimationEvent")}}-Objekt repräsentiert. Es kann genutzt werden, um den Start, das Ende oder den Beginn einer Wiederholung zu erkennen. Jedes Ereignis beinhaltet die Zeit, an der es auftrat sowie den Namen der Animation, welche es getriggert hat.

+
+
Wir passen das Beispiel mit dem gleitenden Text an, um einige Informationen über jedes Animations-Ereignis bei Eintritt auszugeben, um zu sehen, wie sie funktionieren.

+
+
Hinzufügen des CSS

+
+
Wir beginnen mit dem Schreiben des CSS für die Animation. Diese Animation wird drei Sekunden dauern, “slidein” genannt werden, sich drei Mal wiederholen, und dabei jedes Mal die Richtung ändern. In den {{cssxref("@keyframes")}} wird die Breite under linke Außenabstand manipuliert, um das Element über den Bildschirm gleiten zu lassen.

+
+
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}

+
+
Hinzufügen der Animations-Ereignis-Listener

+
+
Wir verwenden JavaScript-Code, um auf alle drei möglichen Animationsereignisse zu aluschen. Der folgende Code konfiguriert unsere Event Listener. Wir rufen ihn auf, wenn das Dokument das erste Mal geladen wurde, um die Dinge einzurichten.

+
+
var element = document.getElementById("watchme");
+element.addEventListener("animationstart", listener, false);
+element.addEventListener("animationend", listener, false);
+element.addEventListener("animationiteration", listener, false);
+
+element.className = "slidein";
+

+
+
Dies ist ziemlich üblicher Code; Sie können mehr über die Details der Funktionsweise in der Dokumentation zu {{domxref("eventTarget.addEventListener()")}} erfahren. Als letztes setzt dieser Code die class des Elements, welches wir animieren wollen, auf “slidein”, um die Animation damit zu starten.

+
+
Warum? Weil das animationstart Ereignis mit dem Beginn der Animation gestartet wird. In unserem Falle vor Ausführung des Codes. Daher starten wir die Animation selber durch das Setzen von class auf dem Element zu dem Werte, welches die Animation steuert.

+
+
Empfangen von Ereignissen

+
+
Die Ereignisse werden an die untenstehende listener() Funktion durchgereicht.

+
+
function listener(event) {
+  var l = document.createElement("li");
+  switch(event.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + event.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + event.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + event.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+

+
+
Auch dieser Code ist sehr einfach. Es schaut auf den {{domxref("event.type")}}, um zu bestimmen, welche Art von Animation eingetreten ist. Danach fügt es die entsprechende Notiz zur {{HTMLElement("ul")}} (ungeordneten Liste) hinzu, welche wir benutzen, um die Ereignisse mitzuschneiden.

+
+
Schlussendlich sieht die Ausgabe in etwa folgendermaßen aus:

+
+
    
+ 
  • Started: elapsed time is 0
    • 
+ 
  • New loop started at time 3.01200008392334
    • 
+ 
  • New loop started at time 6.00600004196167
    • 
+ 
  • Ended: elapsed time is 9.234000205993652
    • 
+

+
+
Beachten Sie, dass die Zeiten ziemlich nah, aber nicht exakt denen entsprechen, die wir in der Animation konfiguriert haben. Beachten Sie außerdem, dass bei der letzten Animation, das animationiteration Ereignis nicht gesetzt wurde. Stattdessen wurde ein animationend Ereignis gesendet.

+
+
Das HTML

+
+
Der Vollständigkeit halber ist hier das HTML, welches den Seiteninhalt darstellt und die Liste beinhaltet, welche vom Skript mit Informationen über empfangene Ereignisse gefüllt wird:

+
+
<h1 id="watchme">Watch me move</h1>
+<p>
+  This example shows how to use CSS animations to make <code>H1</code>
+  elements move across the page.
+</p>
+<p>
+  In addition, we output some text each time an animation event fires,
+  so you can see them in action.
+</p>
+<ul id="output">
+</ul>
+

+
+
Hier gibt es eine Live-Ausgabe:

+
+

+
Hinweis: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.

+

+
+
{{EmbedLiveSample('Using_animation_events', '600', '300')}}

+
+
Zum Weiterlesen

+
+
diff --git a/files/de/web/css/css_animations/index.html b/files/de/web/css/css_animations/index.html
new file mode 100644
index 0000000000..35df3692b4
--- /dev/null
+++ b/files/de/web/css/css_animations/index.html
@@ -0,0 +1,79 @@
+---
+title: CSS Animations
+slug: Web/CSS/CSS_Animations
+tags:
+  - CSS
+  - CSS Animations
+  - Experimental
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
CSS Animations is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.

+
+
Reference

+
+
CSS Properties

+
+

+
    
+ 
  • {{cssxref("animation")}}
    • 
+ 
  • {{cssxref("animation")}}
    • 
+ 
  • {{cssxref("animation-delay")}}
    • 
+ 
  • {{cssxref("animation-direction")}}
    • 
+ 
  • {{cssxref("animation-duration")}}
    • 
+ 
  • {{cssxref("animation-fill-mode")}}
    • 
+ 
  • {{cssxref("animation-iteration-count")}}
    • 
+ 
  • {{cssxref("animation-name")}}
    • 
+ 
  • {{cssxref("animation-play-state")}}
    • 
+ 
  • {{cssxref("animation-timing-function")}}
    • 
+

+

+
+
CSS At-rules

+
+

+
    
+ 
  • {{cssxref("@keyframes")}}
    • 
+

+

+
+
Guides

+
+

+ 
Detecting CSS animation support

+ 
Describes a technique for detecting if the browser supports CSS animations.

+ 
Using CSS animations

+ 
Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.

+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('CSS3 Animations') }}{{ Spec2('CSS3 Animations') }}Initial definition.

+
+
Browser compatibility

+
+{{Compat("css.properties.animation")}}
+
+
See also

+
+
    
+ 
  • Related to CSS Animations, CSS Transitions can trigger animations on user actions.
    • 
+

diff --git a/files/de/web/css/css_background_and_borders/border-image_generator/index.html b/files/de/web/css/css_background_and_borders/border-image_generator/index.html
new file mode 100644
index 0000000000..ff2740480a
--- /dev/null
+++ b/files/de/web/css/css_background_and_borders/border-image_generator/index.html
@@ -0,0 +1,2626 @@
+---
+title: Border-image Generator
+slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - Werkzeuge
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+
Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-image")}} Werte zu erzeugen.

+
+

+
Border Image Generator

+
+
HTML Content

+
+
    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
+            </div>
+        </div>
+
+        <div id="load-actions" class="group section">
+            <div id="toggle-gallery" data-action="hide"> </div>
+            <div id="load-image" class="button"> Upload image </div>
+            <input id="remote-url" type="text" placeholder="Load an image from URL"/>
+            <div id="load-remote" class="button"> </div>
+        </div>
+
+        <div id="general-controls" class="group section">
+            <div class="name"> Control Box </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">scale</div>
+                <div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">draggable</div>
+                <div class="ui-checkbox" data-topic='drag-subject'></div>
+            </div>
+            <div class="property right">
+                <div class="name">section height</div>
+                <div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000">
+                </div>
+            </div>
+        </div>
+
+        <div id="preview_section" class="group section">
+            <div id="subject">
+                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
+                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+        <!-- controls -->
+        <div id="controls" class="group section">
+
+            <!-- border-image-slice -->
+            <div id="border-slice-control" class="category">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox" data-topic='slice-fill'></div>
+                </div>
+            </div>
+
+            <!-- border-image-width -->
+            <div id="border-width-control" class="category">
+                <div class="title"> border-image-width </div>
+            </div>
+
+            <!-- border-image-outset -->
+            <div id="border-outset-control" class="category">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+            <!-- other-settings -->
+            <div id="aditional-properties" class="category">
+                <div class="title"> aditional-properties </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
+                        <div data-value="0">repeat</div>
+                        <div data-value="0">stretch</div>
+                        <div data-value="0">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
+                        <div data-value="1">repeat</div>
+                        <div data-value="1">stretch</div>
+                        <div data-value="1">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
+                    </div>
+                </div>
+            </div>
+
+
+            <div id="output" class="category">
+                <div class="title"> CSS Code </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span id="out-border-slice" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span id="out-border-width" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span id="out-border-outset" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span id="out-border-repeat" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span id="out-border-source" class="value">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div>

+
+
CSS Content

+
+
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+

+
+
JavaScript Content

+
+
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+

+

+
+
{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git a/files/de/web/css/css_background_and_borders/border-radius_generator/index.html b/files/de/web/css/css_background_and_borders/border-radius_generator/index.html
new file mode 100644
index 0000000000..0193a207e7
--- /dev/null
+++ b/files/de/web/css/css_background_and_borders/border-radius_generator/index.html
@@ -0,0 +1,1600 @@
+---
+title: Border-radius Generator
+slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+tags:
+  - CSS
+  - Werkzeuge
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+
Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-radius")}} Effekte zu erzeugen.

+
+

+
border-radius

+
+
HTML Content

+
+
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> rounded corner </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> select border units </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+

+
+
CSS Content

+
+
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+

+
+
JavaScript Content

+
+
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+

+

+
+
{{EmbedLiveSample('border-radius-generator', '100%', '800px')}}

diff --git a/files/de/web/css/css_background_and_borders/index.html b/files/de/web/css/css_background_and_borders/index.html
new file mode 100644
index 0000000000..87b26bd607
--- /dev/null
+++ b/files/de/web/css/css_background_and_borders/index.html
@@ -0,0 +1,154 @@
+---
+title: CSS Background and Borders
+slug: Web/CSS/CSS_Background_and_Borders
+tags:
+  - CSS
+  - CSS Backgrounds and Borders
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+
{{CSSRef}}

+
+
CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

+
+
Reference

+
+
CSS Properties

+
+

+
    
+ 
  • {{cssxref("background")}}
    • 
+ 
  • {{cssxref("background-attachment")}}
    • 
+ 
  • {{cssxref("background-clip")}}
    • 
+ 
  • {{cssxref("background-color")}}
    • 
+ 
  • {{cssxref("background-image")}}
    • 
+ 
  • {{cssxref("background-origin")}}
    • 
+ 
  • {{cssxref("background-position")}}
    • 
+ 
  • {{cssxref("background-repeat")}}
    • 
+ 
  • {{cssxref("background-size")}}
    • 
+ 
  • {{cssxref("box-shadow")}}
    • 
+ 
  • {{cssxref("border")}}
    • 
+ 
  • {{cssxref("border-bottom")}}
    • 
+ 
  • {{cssxref("border-bottom-color")}}
    • 
+ 
  • {{cssxref("border-bottom-left-radius")}}
    • 
+ 
  • {{cssxref("border-bottom-right-radius")}}
    • 
+ 
  • {{cssxref("border-bottom-style")}}
    • 
+ 
  • {{cssxref("border-bottom-width")}}
    • 
+ 
  • {{cssxref("border-collapse")}}
    • 
+ 
  • {{cssxref("border-color")}}
    • 
+ 
  • {{cssxref("border-image")}}
    • 
+ 
  • {{cssxref("border-image-outset")}}
    • 
+ 
  • {{cssxref("border-image-repeat")}}
    • 
+ 
  • {{cssxref("border-image-slice")}}
    • 
+ 
  • {{cssxref("border-image-source")}}
    • 
+ 
  • {{cssxref("border-image-width")}}
    • 
+ 
  • {{cssxref("border-left")}}
    • 
+ 
  • {{cssxref("border-left-color")}}
    • 
+ 
  • {{cssxref("border-left-style")}}
    • 
+ 
  • {{cssxref("border-left-width")}}
    • 
+ 
  • {{cssxref("border-radius")}}
    • 
+ 
  • {{cssxref("border-right")}}
    • 
+ 
  • {{cssxref("border-right-color")}}
    • 
+ 
  • {{cssxref("border-right-style")}}
    • 
+ 
  • {{cssxref("border-right-width")}}
    • 
+ 
  • {{cssxref("border-style")}}
    • 
+ 
  • {{cssxref("border-top")}}
    • 
+ 
  • {{cssxref("border-top-color")}}
    • 
+ 
  • {{cssxref("border-top-left-radius")}}
    • 
+ 
  • {{cssxref("border-top-right-radius")}}
    • 
+ 
  • {{cssxref("border-top-style")}}
    • 
+ 
  • {{cssxref("border-top-width")}}
    • 
+ 
  • {{cssxref("border-width")}}
    • 
+

+

+
+
Guides

+
+

+ 
Using CSS multiple backgrounds

+ 
Explains how to set backgrounds on elements and how they will interact with it.

+ 
Scaling background images

+ 
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.

+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 

+
+
Browser compatibility

+
+
{{CompatibilityTable()}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0

+

diff --git "a/files/de/web/css/css_background_and_borders/mehrere_hintergr\303\274nde_in_css_verwenden/index.html" "b/files/de/web/css/css_background_and_borders/mehrere_hintergr\303\274nde_in_css_verwenden/index.html"
new file mode 100644
index 0000000000..4c0b1e58ec
--- /dev/null
+++ "b/files/de/web/css/css_background_and_borders/mehrere_hintergr\303\274nde_in_css_verwenden/index.html"
@@ -0,0 +1,69 @@
+---
+title: Mehrere Hintergründe in CSS verwenden
+slug: Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden
+tags:
+  - Beispiel
+  - CSS
+  - CSS Hintergrund
+  - Guide
+  - Intermediate
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+
{{CSSRef}}

+
+
Mit CSS3 können einem Element mehrere Hintergründe zugewiesen werden. Diese werden aufeinander gestapelt wobei der erste Hintergrund zuoberst ist und der letzte zuunterst. Nur dem untersten Hintergrund kann eine Hintergrundfarbe zugewiesen werden.

+
+
Mehrere Hintergründe festzulegen ist einfach:

+
+
.myclass {
+  background: background1, background 2, ..., background;
+}
+

+
+
Du kannst dies mit beiden Varianten, der verkürzten {{cssxref("background")}} Eigenschaft und dem Einzel-Eigenschafts-Selektor davon ausser {{cssxref("background-color")}}. Die folgenden Hintergrund Eigenschaften können als Liste festgelegt werden, eine pro Hintergrund: {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.

+
+
Beispiel

+
+
In diesem Beispiel werden drei Hintergründe übereinandergelegt: das Firefox Logo, ein linearer Farbverlauf und ein Bild mit Blasen:

+
+
.multi_bg_example {
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
+                    url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+                    linear-gradient(to right, rgba(30, 75, 115, 1),  rgba(255, 255, 255, 0));
+
+  background-repeat: no-repeat,
+                     no-repeat,
+                     no-repeat;
+
+  background-position: bottom right,
+                       left,
+                       right;
+}
+

+
+
+
+
Ergebnis

+
+
{{EmbedLiveSample('Beispiel', '100%', '400')}}

+
+
Wie oben zu erkennen ist, liegt das Firefox Logo (als erstes aufgelistet) zuoberst, gefolgt vom Hintergrund mit Blasen, welcher wiederum auf dem Farbverlauf liegt. Jede nachfolgende Untereigenschaft ({{cssxref("background-repeat")}} und {{cssxref("background-position")}}) gilt für den entsprechenden Hintergrund. Demzufolge gilt der erste aufgelistete Wert für {{cssxref("background-repeat")}} für den ersten (vordersten) Hintergrund und so weiter.

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/css_basic_user_interface/index.html b/files/de/web/css/css_basic_user_interface/index.html
new file mode 100644
index 0000000000..6b0f5e652e
--- /dev/null
+++ b/files/de/web/css/css_basic_user_interface/index.html
@@ -0,0 +1,76 @@
+---
+title: CSS Basic User Interface
+slug: Web/CSS/CSS_Basic_User_Interface
+tags:
+  - CSS
+  - CSS Basic User Interface
+  - Overview
+  - Reference
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Basic_User_Interface
+---
+
{{CSSRef}}

+
+
CSS Basic User Interface ist ein CSS Modul, das es erlaubt, die Darstellung und Funktionalität von Benutzerschnittstellenfeatures zu definieren.

+
+
Referenz

+
+
Einstellungen

+
+

+
    
+ 
  • {{CSSxRef("appearance")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("box-sizing")}}
    • 
+ 
  • {{CSSxRef("cursor")}}
    • 
+ 
  • {{CSSxRef("ime-mode")}} {{Deprecated_Inline}}
    • 
+ 
  • {{CSSxRef("nav-down")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("nav-left")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("nav-right")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("nav-up")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("outline")}}
    • 
+ 
  • {{CSSxRef("outline-width")}}
    • 
+ 
  • {{CSSxRef("outline-style")}}
    • 
+ 
  • {{CSSxRef("outline-color")}}
    • 
+ 
  • {{CSSxRef("outline-offset")}}
    • 
+ 
  • {{CSSxRef("resize")}}
    • 
+ 
  • {{CSSxRef("text-overflow")}}
    • 
+ 
  • {{CSSxRef("user-select")}} {{Experimental_Inline}}
    • 
+

+

+
+
Anleitungen

+
+

+ 
Verwendung von URL Werten für die cursor Eigenschaft

+ 
Erklärt und zeigt, wie ein URL für die {{cssxref('cursor')}} Eigenschaft angegeben werden kann, um benutzerdefinierte Mauszeiger zu erstellen.

+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezificationStatusKommentar
{{SpecName("CSS4 Basic UI")}}{{Spec2("CSS4 Basic UI")}} 
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}} 
{{SpecName("CSS2.1", "ui.html")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition.

diff --git a/files/de/web/css/css_boxmodell/box-shadow_generator/index.html b/files/de/web/css/css_boxmodell/box-shadow_generator/index.html
new file mode 100644
index 0000000000..b087898d03
--- /dev/null
+++ b/files/de/web/css/css_boxmodell/box-shadow_generator/index.html
@@ -0,0 +1,2884 @@
+---
+title: Box-shadow Generator
+slug: Web/CSS/CSS_Boxmodell/Box-shadow_generator
+tags:
+  - CSS3
+  - Werkzeuge
+  - box-shadow
+translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+---
+
Dieses Werkzeug erlaubt es, CSS {{cssxref("box-shadow")}} Effekte zu erstellen, um Schlagschatteneffekte zu CSS Objekten hinzuzufügen.

+
+

+
box-shadow generator

+
+
HTML Content

+
+
<div id="container">
+    <div class="group section">
+        <div id="layer_manager">
+            <div class="group section">
+                <div class="button" data-type="add"> </div>
+                <div class="button" data-type="move-up"> </div>
+                <div class="button" data-type="move-down"> </div>
+            </div>
+            <div id="stack_container"></div>
+        </div>
+
+        <div id="preview_zone">
+            <div id="layer_menu" class="col span_12">
+                <div class="button" id="element" data-type="subject" data-title="element"> element </div>
+                <div class="button" id="before" data-type="subject" data-title=":before">
+                    :before
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="button" id="after" data-type="subject" data-title=":after">
+                    :after
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="ui-checkbox" data-topic='before' data-label=":before"></div>
+                <div class="ui-checkbox" data-topic='after' data-label=":after"></div>
+            </div>
+
+            <div id="preview">
+                <div id="obj-element">
+                    <div class="content"> </div>
+                    <div id="obj-before"> </div>
+                    <div id="obj-after"> </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="controls" class="group section">
+        <div class="wrap-left">
+            <div class="colorpicker category">
+                <div class="title"> </div>
+                <div id="colorpicker" class="group">
+                    <div id="gradient" class="gradient">
+                        <div id="gradient_picker"> </div>
+                    </div>
+                    <div id="hue" data-topic="hue" class="hue">
+                        <div id="hue_selector"> </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div>
+                        <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div>
+                        <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div>
+                    </div>
+                    <div class="alpha">
+                        <div id="alpha" data-topic="alpha">
+                            <div id="alpha_selector"> </div>
+                        </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div>
+                        <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div>
+                        <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div>
+                    </div>
+                    <div class="preview block">
+                        <div id="output_color"> </div>
+                    </div>
+                    <div class="block info">
+                        <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div>
+                        <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="wrap-right">
+
+            <div id="shadow_properties" class="category">
+                <div class="title"> Shadow properties </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> inset </div>
+                        <div class="ui-checkbox" data-topic='inset'></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position x </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posX" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position y </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posY" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Blur </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="blur" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Spread </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="spread" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="element_properties" class="category">
+                <div class="title"> Class element properties </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> border </div>
+                        <div class="ui-checkbox" data-topic='border-state' data-state="true"></div>
+                    </div>
+                    <div id="z-index" class="slidergroup">
+                        <div class="ui-slider-name"> z-index </div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"></div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="z-index"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> top </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="top" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> left </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="left" data-unit="px"></div>
+                    </div>
+                    <div id="transform_rotate" class="slidergroup">
+                        <div class="ui-slider-name"> Rotate </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Width </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="width"  data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Height </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="height" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="output" class="category">
+                <div id="menu" class="menu"></div>
+                <div class="title">    CSS Code </div>
+                <div class="group" style="border-top-left-radius: 0;">
+                    <div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow">
+                    </div>
+                    <div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                    <div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+

+
+
CSS Content

+
+
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input > input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox > label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox > input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left > * {
+	float: left;
+}
+
+.wrap-right > * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview > * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] > span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] > span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] > input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+

+
+
JavaScript Content

+
+

+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value <= max && value >= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step <= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step >= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos < 0) pos = 0;
+		if (pos > width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision > this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value > slider.max || value < slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x > size)
+				x = size;
+			if (y > size)
+				y = size;
+
+			if (x < 0) x = 0;
+			if (y < 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value < 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null && this.stack.children.length >= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'shadow ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count <= 1 || this.layer === null)
+				return;
+			if (direction === -1 && this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 && this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index > this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count >= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index < this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i < size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false && active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false && active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+

+

+
+
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}

+
+
Related Tool: Box Shadow CSS Generator

diff --git "a/files/de/web/css/css_boxmodell/einf\303\274hrung_in_das_css_boxmodell/index.html" "b/files/de/web/css/css_boxmodell/einf\303\274hrung_in_das_css_boxmodell/index.html"
new file mode 100644
index 0000000000..1bf796b36b
--- /dev/null
+++ "b/files/de/web/css/css_boxmodell/einf\303\274hrung_in_das_css_boxmodell/index.html"
@@ -0,0 +1,52 @@
+---
+title: Boxmodell
+slug: Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Eine Box hat in CSS vier Bereiche: margin edge (weiß außen), border edge (grau), padding edge (grün), und content edge (weiß mitte). Das Folgende Diagramm zeigt die unterschiedlichen Höhen und Breiten anhand der Eigenschaften, die Veränderungen an einer CSS Box zulassen:

+
+
Thanks to Hannes Kraft.

+
+
 

+
+
Details

+
+
    
+ 
  • Die komplette Breite eines Elements berechnet sich wie folgt:
+  
    
+   
    margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right
    
+  
    
+ 
    • 
+ 
  • Die komplette Höhe eines Elements berechnet sich wie folgt:
+  
    
+   
    margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom
    
+  
    
+ 
    • 
+ 
  • Der MS Internet Explorer verwendet die width- und die height-Eigenschaft als Innenabstand des Rahmens, nicht des padding-Bereiches.
+  
    
+   
    width = padding-left + width + padding-right
    
+   
    height = padding-top + height + padding-bottom
    
+  
    
+ 
    • 
+

+
+
Spezifikation

+
+
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/css_boxmodell/index.html b/files/de/web/css/css_boxmodell/index.html
new file mode 100644
index 0000000000..37440c9523
--- /dev/null
+++ b/files/de/web/css/css_boxmodell/index.html
@@ -0,0 +1,165 @@
+---
+title: CSS Boxmodell
+slug: Web/CSS/CSS_Boxmodell
+tags:
+  - CSS
+  - CSS Boxmodell
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Box_Model
+---
+
{{CSSRef}}

+
+
CSS Box Model ist ein CSS Modul, das die rechteckigen Boxen einschließlich deren Innen- und Außenabständen definiert, die für Elemente generiert werden und gemäß des visuellen Formatierungsmodells dargestellt werden.

+
+
Referenz

+
+
Eigenschaften

+
+
Den Inhaltsfluss innerhalb einer Box beeinflussende Eigenschaften

+
+

+
    
+ 
  • {{cssxref("box-decoration-break")}}
    • 
+ 
  • {{cssxref("box-sizing")}}
    • 
+ 
  • {{cssxref("overflow")}}
    • 
+ 
  • {{cssxref("overflow-x")}}
    • 
+ 
  • {{cssxref("overflow-y")}}
    • 
+

+

+
+
Die Größe einer Box beeinflussende Eigenschaften

+
+

+
    
+ 
  • {{cssxref("height")}}
    • 
+ 
  • {{cssxref("width")}}
    • 
+ 
  • {{cssxref("max-height")}}
    • 
+ 
  • {{cssxref("max-width")}}
    • 
+ 
  • {{cssxref("min-height")}}
    • 
+ 
  • {{cssxref("min-width")}}
    • 
+

+

+
+
Außenabstände einer Box beeinflussende Eigenschaften

+
+

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

+

+
+
Innenabstände einer Box beeinflussende Eigenschaften

+
+

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

+

+
+
Andere Eigenschaften

+
+

+
    
+ 
  • {{cssxref("box-shadow")}}
    • 
+ 
  • {{cssxref("visibility")}}
    • 
+

+

+
+
Anleitungen und Werkzeuge

+
+

+ 
Einführung in das CSS Boxmodell

+ 
Erklärt eines der grundlegenden Konzepte von CSS, das Boxmodell: Beschreibt die Bedeutung von Außen- und Innenabständen als auch der verschiedenen Bereiche einer Box.

+ 
Zusammenfallen von Außenabständen meistern

+ 
In mehreren Fällen werden zwei anliegende Außenabstände zu einem zusammengelegt. Dieser Artikel beschreibt, wann dies passiert und wie es gesteuert werden kann.

+ 
Box-shadow Generator

+ 
Ein interaktives Werkzeug, das es erlaubt, Schatten visuell zu erstellen und die benötigte Syntax für die {{cssxref("box-shadow")}} Eigenschaft zu generieren.

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}6.06.01.0

+

diff --git "a/files/de/web/css/css_boxmodell/zusammenfallen_von_au\303\237enabst\303\244nden_meistern/index.html" "b/files/de/web/css/css_boxmodell/zusammenfallen_von_au\303\237enabst\303\244nden_meistern/index.html"
new file mode 100644
index 0000000000..edf1fa050c
--- /dev/null
+++ "b/files/de/web/css/css_boxmodell/zusammenfallen_von_au\303\237enabst\303\244nden_meistern/index.html"
@@ -0,0 +1,60 @@
+---
+title: Zusammenfallen von Außenabständen meistern
+slug: Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern
+tags:
+  - CSS
+  - CSS Boxmodell
+  - Referenz
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+
{{CSSRef}}

+
+
Obere und untere Außenabstände von Blöcken werden manchmal zu einem einzelnen Außenabstand zusammengefasst (kollabiert), dessen Größe der größte der Außenabstände ist, die in ihm zusammengefasst werden, ein Verhalten bekannt als Außenabstandszusammenfassung (engl. margin collapsing).

+
+
Außenabstandszusammenfassung tritt in drei grundlegenden Fällen auf:

+
+

+ 
Angrenzende Geschwisterelemente

+ 
Die Außenabstände von angrenzenden Geschwisterelementen werden zusammengefasst (außer, wenn des nachfolgende Geschwisterelement nach Seitenumflüssen freigestellt ist). Zum Beispiel:
+ 
 <p>Der untere Außenabstand dieses Absatzes fällt ...</p>
+ <p>...mit dem oberen Außenabstand dieses Absatzes zusammen.</p>
+

+ 

+ 
Eltern- und erstes/letztes Kindelement

+ 
Falls es keinen Rahmen, Innenabstand, Inlineinhalt oder Freilegung gibt, um den {{cssxref("margin-top")}} eines Blocks vom {{cssxref("margin-top")}} seines ersten Kindblocks zu trennen, oder keinen Rahmen, Innenabstand Inlineinhalt, {{cssxref("height")}}, {{cssxref("min-height")}} oder {{cssxref("max-height")}} gibt, um den {{cssxref("margin-bottom")}} des Blocks vom {{cssxref("margin-bottom")}} seines letzten Kindelements zu trennen, dann fallen diese Außenabstände zusammen. Der zusammengefallene Außenabstand verläuft dabei außerhalb des Elternelements.

+ 
Leere Blöcke

+ 
Falls es keinen Rahmen, Innenabstand, Inlineinhalt, {{cssxref("height")}} oder {{cssxref("min-height")}} gibt, um den {{cssxref("margin-top")}} des Blocks vom {{cssxref("margin-bottom")}} zu trennen, fallen sein oberer und unterer Außenabstand zusammen.

+

+
+
Kompliziertere Außenabstandszusammenfassung (von mehr als zwei Außenabständen) tritt auf, wenn diese Fälle kombiniert werden.

+
+
Diese Regeln gelten sogar für Außenabstände, die null sind, sodass ein Außenabstand eines ersten/letzten Kinds sich (gemäß den oben genannten Regeln) am Ende außerhalb seines Elternelements befindet, unabhängig davon, ob der Außenabstand des Elternelements null ist oder nicht.

+
+
Falls negative Außenabstände involviert sind, ist die Größe des zusammengefassten Außenabstands die Summe des größten positiven Abstands und dem kleinsten (meist negativen) negativen Abstands.

+
+
Außenabstände von umfließenden und absolut positionierten Elementen werden niemals zusammengefasst.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/css_charsets/index.html b/files/de/web/css/css_charsets/index.html
new file mode 100644
index 0000000000..1b12d996a6
--- /dev/null
+++ b/files/de/web/css/css_charsets/index.html
@@ -0,0 +1,50 @@
+---
+title: CSS Charsets
+slug: Web/CSS/CSS_Charsets
+tags:
+  - CSS
+  - CSS Zeichensätze
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Charsets
+---
+
{{CSSRef}}

+
+
CSS Charsets ist ein CSS Modul, das es erlaubt, den Zeichensatz zu bestimmen, der im Stylesheet verwendet wird.

+
+
Referenz

+
+
@-Regeln

+
+

+
    
+ 
  • {{cssxref("@charset")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.at-rules.charset")}}
diff --git a/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html b/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html
new file mode 100644
index 0000000000..3f822f9f73
--- /dev/null
+++ b/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html
@@ -0,0 +1,3225 @@
+---
+title: Farbauswahl-Werkzeug
+slug: Web/CSS/CSS_Colors/farbauswahl_werkzeug
+tags:
+  - CSS
+  - Farbauswahl
+  - Farbe
+  - Hilfsmittel
+  - Pipette
+  - Werkzeug
+translation_of: Web/CSS/CSS_Colors/Color_picker_tool
+---
+

+
ColorPicker tool

+
+
HTML Content

+
+
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+

+
+
CSS Content

+
+
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+

+
+
JavaScript Content

+
+
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+

+

+
+
+
{{CSSRef}}

+
+
Dieses Werkzeug vereinfacht es, beliebige Farben zu kreieren, um sie dann für das Internet zu verwenden. Außerdem erlaubt es, Farben in verschiedene von CSS unterstützte Formate zu konvertieren. Dazu zählen: HEXA-Farben, RGB (Rot/Grün/Blau) und HSL (Farbton/Sättigung/relative Helligkeit). Bei Verwendung der Farbformate RGB (rgba) und HSL (hsla) wird es auch unterstützt, den Alphakanal einzustellen.

+
+
Jede Farbe wird in allen drei im Internet üblichen CSS-Formaten ausgedrückt. Weiters wird für die ausgewählte Farbe jeweils eine Palette für HSL (Farbton/Sättigung/relative Helligkeit), HSV (Farbton/Sättigung/Hellwert) und den Alphakanal angezeigt. Das Spektrum des Farbauswahl-Werkzeuges kann man zwischen dem HSL- und HSV-Farbraum umschalten.

+
+
{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

+
+
 

diff --git a/files/de/web/css/css_colors/index.html b/files/de/web/css/css_colors/index.html
new file mode 100644
index 0000000000..b9ef3a636f
--- /dev/null
+++ b/files/de/web/css/css_colors/index.html
@@ -0,0 +1,117 @@
+---
+title: CSS Farben
+slug: Web/CSS/CSS_Colors
+tags:
+  - CSS
+  - CSS Farben
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Color
+---
+
{{CSSRef}}

+
+
CSS Colors ist ein CSS Modul, das um Farben, Farbtypen und Transparenz geht.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("color")}}
    • 
+ 
  • {{cssxref("opacity")}}
    • 
+

+

+
+
CSS Datentypen

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

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}3.03.51.0

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}6.06.01.0

+

+
+
Siehe auch

+
+
    
+ 
  • In CSS sind Farbverläufe keine Farben, sondern Bilder.
    • 
+

diff --git a/files/de/web/css/css_columns/index.html b/files/de/web/css/css_columns/index.html
new file mode 100644
index 0000000000..f637773da4
--- /dev/null
+++ b/files/de/web/css/css_columns/index.html
@@ -0,0 +1,60 @@
+---
+title: CSS Columns
+slug: Web/CSS/CSS_Columns
+tags:
+  - CSS
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Columns
+---
+
{{CSSRef("CSS3 Multicol")}}

+
+
CSS Spalten ist ein CSS Modul, das ein Mehrspaltenlayout definiert, das es erlaubt, auszudrücken, wie Inhalte zwischen Spalten aufgeteilt werden und wie Lücken und Linien dazwischen gehandhabt werden.

+
+
Referenz

+
+
CSS Eigenschaften

+
+

+
    
+ 
  • {{cssxref("break-after")}}
    • 
+ 
  • {{cssxref("break-before")}}
    • 
+ 
  • {{cssxref("break-inside")}}
    • 
+ 
  • {{cssxref("column-count")}}
    • 
+ 
  • {{cssxref("column-fill")}}
    • 
+ 
  • {{cssxref("column-gap")}}
    • 
+ 
  • {{cssxref("column-rule")}}
    • 
+ 
  • {{cssxref("column-rule-color")}}
    • 
+ 
  • {{cssxref("column-rule-style")}}
    • 
+ 
  • {{cssxref("column-rule-width")}}
    • 
+ 
  • {{cssxref("column-span")}}
    • 
+ 
  • {{cssxref("column-width")}}
    • 
+ 
  • {{cssxref("columns")}}
    • 
+

+

+
+
Guides

+
+

+ 
Verwendung von mehrspaltigen Layouts

+ 
Schritt für Schritt Tutorial darüber, wie Layouts mit mehreren Spalten erstellt werden.

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}Ursprüngliche Definition

diff --git a/files/de/web/css/css_compositing_and_blending/index.html b/files/de/web/css/css_compositing_and_blending/index.html
new file mode 100644
index 0000000000..61e43b48e5
--- /dev/null
+++ b/files/de/web/css/css_compositing_and_blending/index.html
@@ -0,0 +1,98 @@
+---
+title: CSS Compositing and Blending
+slug: Web/CSS/CSS_Compositing_and_Blending
+tags:
+  - CSS
+  - CSS Compositing and Blending
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/Compositing_and_Blending
+---
+
{{CSSRef}}

+
+
CSS Compositing and Blending ist ein CSS Modul, das definiert, wie Formen verschiedener Elemente zu einem einzelnen Bild kombiniert werden.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("background-blend-mode")}}
    • 
+ 
  • {{cssxref("mix-blend-mode")}}
    • 
+ 
  • {{cssxref("isolation")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("Compositing")}}{{Spec2("Compositing")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatChrome("41.0")}}{{CompatGeckoDesktop("36.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatChrome("41.0")}}{{CompatGeckoMobile("36.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}

+

diff --git a/files/de/web/css/css_conditional_rules/index.html b/files/de/web/css/css_conditional_rules/index.html
new file mode 100644
index 0000000000..a0c6192fc1
--- /dev/null
+++ b/files/de/web/css/css_conditional_rules/index.html
@@ -0,0 +1,100 @@
+---
+title: CSS Conditional Rules
+slug: Web/CSS/CSS_Conditional_Rules
+tags:
+  - CSS
+  - CSS Conditional Rules
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Conditional_Rules
+---
+
{{CSSRef}}

+
+
CSS Conditional Rules ist ein CSS Modul, das es erlaubt, eine Reihe von Regeln zu definieren, die nur basierend auf den Fähigkeiten des Prozessors oder des Dokuments angewendet werden, auf das das Stylesheet angewendet wird.

+
+
Referenz

+
+
@-Regeln

+
+

+
    
+ 
  • {{cssxref("@document")}}
    • 
+ 
  • {{cssxref("@media")}}
    • 
+ 
  • {{cssxref("@supports")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

diff --git a/files/de/web/css/css_device_adaptation/index.html b/files/de/web/css/css_device_adaptation/index.html
new file mode 100644
index 0000000000..13b3bba03c
--- /dev/null
+++ b/files/de/web/css/css_device_adaptation/index.html
@@ -0,0 +1,104 @@
+---
+title: CSS Device Adaptation
+slug: Web/CSS/CSS_Device_Adaptation
+tags:
+  - CSS
+  - CSS Device Adaption
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Device_Adaptation
+---
+
{{CSSRef}}

+
+
CSS Device Adapation ist ein CSS Modul, das es erlaubt, die Größe, den Zoomfaktor und die Ausrichtung des Viewports zu definieren.

+
+
Referenz

+
+
@-Regeln

+
+

+
    
+ 
  • {{cssxref("@viewport")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS3 Device")}}{{Spec2("CSS3 Device")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung29[1]{{CompatNo}}10 {{property_prefix("-ms")}}11.10

+    {{CompatNo}}15

+    16[1]		{{CompatNo}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung4.429.0{{CompatNo}}10{{property_prefix("-ms")}}11.10

+    {{CompatNo}}15

+    16[1]		{{CompatNo}}

+

+
+
[1] Hinter einem Flag.

diff --git a/files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
new file mode 100644
index 0000000000..1401a93f7f
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
@@ -0,0 +1,210 @@
+---
+title: Aligning Items in a Flex Container
+slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+tags:
+  - Flex-Container
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+---
+
{{CSSRef}}

+
+
Einer der Gründe, warum Flexbox das Interesse von Webentwicklern schnell geweckt hat, ist, dass es zum ersten Mal die richtigen Ausrichtungsfunktionen für das Web bereitgestellt hat. Es ermöglichte die richtige vertikale Ausrichtung, so dass wir endlich eine Box leicht zentrieren können. In diesem Handbuch werden wir uns eingehend mit der Funktionsweise der Ausrichtungs- und Ausrichtungseigenschaften in Flexbox befassen.

+
+
Um unsere Box zu zentrieren, verwenden wir die align-itemsEigenschaft, um unser Element auf der Querachse auszurichten, in diesem Fall der vertikal verlaufenden Blockachse. Wir verwenden justify-content, um das Element auf der Hauptachse auszurichten, in diesem Fall der horizontal verlaufenden Inline-Achse.

+
+
A containing element with another box centered inside it.

+
+
Sie können sich den Code dieses Beispiels unten ansehen. Ändern Sie die Größe des Containers oder des verschachtelten Elements, und das verschachtelte Element bleibt immer zentriert.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+
+
Eigenschaften, die die Ausrichtung steuern

+
+
Die Eigenschaften, die wir in diesem Handbuch betrachten werden, sind wie folgt.

+
+
    
+ 
  • {{cssxref("justify-content")}} — steuert die Ausrichtung aller Elemente auf der Hauptachse.
    • 
+ 
  • {{cssxref("align-items")}} — steuert die Ausrichtung aller Elemente auf der Querachse.
    • 
+ 
  • {{cssxref("align-self")}} — steuert die Ausrichtung eines einzelnen Flex-Elements auf der Querachse.
    • 
+ 
  • {{cssxref("align-content")}} — in der Spezifikation als „Packing Flex Lines“ beschrieben; Steuert den Abstand zwischen den Flexlinien auf der Querachse.
    • 
+

+
+
Wir werden auch herausfinden, wie automatische Ränder für die Ausrichtung in der Flexbox verwendet werden können.

+
+

+
Hinweis : Die Ausrichtungseigenschaften in Flexbox wurden in eine eigene Spezifikation eingefügt - CSS Box Alignment Level 3 . Es wird erwartet, dass diese Spezifikation letztendlich die in Flexbox Level One definierten Eigenschaften ersetzt.

+

+
+
Die Querachse

+
+
Die Eigenschaften align-itemsund align-selfsteuern die Ausrichtung unserer Flex-Elemente auf der Querachse in den Spalten if flex-directionis rowund entlang der Zeile if flex-directionis column.

+
+
Wir verwenden die Achsenausrichtung im einfachsten Flex-Beispiel. Wenn wir display: flexeinem Container hinzufügen , werden alle untergeordneten Elemente zu flexiblen Elementen, die in einer Reihe angeordnet sind. Sie werden alle so groß wie der höchste Gegenstand, da dieser Gegenstand die Höhe der Gegenstände auf der Querachse definiert. Wenn für Ihren Flex-Container eine Höhe festgelegt ist, werden die Elemente auf diese Höhe gedehnt, unabhängig davon, wie viel Inhalt sich im Element befindet.

+
+
Three items, one with additional text causing it to be taller than the others.

+
+
Three items stretched to 200 pixels tall

+
+
The reason the items become the same height is that the initial value of align-items, the property that controls alignment on the cross axis, is set to stretch.

+
+
We can use other values to control how the items align:

+
+
    
+ 
  • align-items: flex-start
    • 
+ 
  • align-items: flex-end
    • 
+ 
  • align-items: center
    • 
+ 
  • align-items: stretch
    • 
+ 
  • align-items: baseline
    • 
+

+
+
In the live example below, the value of align-items is stretch. Try the other values and see how all of the items align against each other in the flex container.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

+
+
Aligning one item with align-self

+
+
The align-items property sets the align-self property on all of the flex items as a group. This means you can explicitly declare the align-self property to target a single item. The align-self property accepts all of the same values as align-items plus a value of auto, which will reset the value to that which is defined on the flex container.

+
+
In this next live example, the flex container has align-items: flex-start, which means the items are all aligned to the start of the cross axis. I have targeted the first item using a first-child selector and set that item to align-self: stretch; another item has been selected using its class of selected and given align-self: center. You can change the value of align-items or change the values of align-self on the individual items to see how this works.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}

+
+
Changing the main axis

+
+
So far we have looked at the behaviour when our flex-direction is row, and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.

+
+
Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis.

+
+
If we change our flex-direction to column, align-items and align-self will align the items to the left and right.

+
+
Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis.

+
+
You can try this out in the example below, which has a flex container with flex-direction: column yet otherwise is exactly the same as the previous example.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} 

+
+
Aligning content on the cross axis — the align-content property

+
+
So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the align-content property to control the distribution of space between the rows. In the specification this is described as packing flex lines.

+
+
For align-content to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.

+
+
The align-content property takes the following values:

+
+
    
+ 
  • align-content: flex-start
    • 
+ 
  • align-content: flex-end
    • 
+ 
  • align-content: center
    • 
+ 
  • align-content: space-between
    • 
+ 
  • align-content: space-around
    • 
+ 
  • align-content: stretch
    • 
+ 
  • align-content: space-evenly (not defined in the Flexbox specification)
    • 
+

+
+
In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of align-content is space-between, which means that the available space is shared out between the flex lines, which are placed flush with the start and end of the container on the cross axis.

+
+
Try out the other values to see how the align-content property works.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

+
+
Once again we can switch our flex-direction to column in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

+
+

+
Note: the value space-evenly is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.

+

+
+
See the documentation for justify-content on MDN for more details on all of these values and browser support.

+
+
Aligning content on the main axis

+
+
Now that we have seen how alignment works on the cross axis, we can take a look at the main axis. Here we only have one property available to us — justify-content. This is because we are only dealing with items as a group on the main axis. With justify-content we control what happens with available space, should there be more space than is needed to display the items.

+
+
In our initial example with display: flex on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of justify-content being flex-start. Any available space is placed at the end of the items.

+
+
Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.

+
+
The justify-content property accepts the same values as align-content.

+
+
    
+ 
  • justify-content: flex-start
    • 
+ 
  • justify-content: flex-end
    • 
+ 
  • justify-content: center
    • 
+ 
  • justify-content: space-between
    • 
+ 
  • justify-content: space-around
    • 
+ 
  • justify-content: space-evenly (not defined in the Flexbox specification)
    • 
+

+
+
In the example below, the value of justify-content is space-between. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} 

+
+
If the main axis is in the block direction because flex-direction is set to column, then justify-content will distribute space between items in that dimension as long as there is space in the flex container to distribute.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} 

+
+
Alignment and Writing Modes

+
+
Remember that with all of these alignment methods, the values of flex-start and flex-end are writing mode-aware. If the value of justify-content is start and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.

+
+
Three items lined up on the left

+
+
However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.

+
+
Three items lined up from the right

+
+
The live example below has the direction property set to rtl to force a right-to-left flow for our items. You can remove this, or change the values of justify-content to see how flexbox behaves when the start of the inline direction is on the right.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

+
+
Alignment and flex-direction

+
+
The start line will also change if you change the flex-direction property — for example using row-reverse instead of row.

+
+
In this next example I have items laid out with flex-direction: row-reverse and justify-content: flex-end. In a left to right language the items all line up on the left. Try changing flex-direction: row-reverse to flex-direction: row. You will see that the items now move to the right hand side.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

+
+
While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. flex-start will be where the start of a sentence of text would begin.

+
+
Diagram showing start on the left and end on the right.

+
+
You can switch them to display in the block direction for the language of your document by selecting flex-direction: column. Then flex-start will then be where the top of your first paragraph of text would start.

+
+
Diagram showing start at the top and end at the bottom.

+
+
If you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. flex-start will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.

+
+
Diagram showing start on the right and end on the left.

+
+
Diagram showing end at the top and start at the bottom

+
+
Using auto margins for main axis alignment

+
+
We don’t have a justify-items or justify-self property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.

+
+
A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a justify-self property, however consider the image below. I have three items on one side and two on the other. If I were able to use justify-self on item d, it would also change the alignment of item e that follows, which may or may not be my intention.

+
+
Five items, in two groups. Three on the left and two on the right.

+
+
Instead we can target item 4 and separate it from the first three items by giving it a margin-left value of auto. Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.

+
+
In this live example, I have flex items arranged simply into a row with the basic flex values, and the class push has margin-left: auto. You can try removing this, or adding the class to another item to see how it works.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

+
+
Future alignment features for Flexbox

+
+
At the beginning of this article I explained that the alignment properties currently contained in the Level 1 flexbox specification are also included in Box Alignment Level 3, which may well extend these properties and values in the future. We have already seen one place where this has happened, with the introduction of the space-evenly value for align-content and justify-content properties.

+
+
The Box Alignment module also includes other methods of creating space between items, such as the column-gap and row-gap feature as seen in CSS Grid Layout. The inclusion of these properties in Box Alignment means that in future we should be able to use column-gap and row-gap in flex layouts too, and in Firefox 63 you will find the first browser implementation of the gap properties in flex layout.

+
+
My suggestion when exploring flexbox alignment in depth is to do so alongside looking at alignment in Grid Layout. Both specifications use the alignment properties as detailed in the Box Alignment specification. You can see how these properties behave when working with a grid in the MDN article Box Alignment in Grid Layout, and I have also compared how alignment works in these specifications in my Box Alignment Cheatsheet.

+
+
See Also

+
+
diff --git a/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html b/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html
new file mode 100644
index 0000000000..86354499d2
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html
@@ -0,0 +1,138 @@
+---
+title: Flex Elemente Sortieren
+slug: Web/CSS/CSS_Flexible_Box_Layout/Flex_Elemente_Sortieren
+tags:
+  - Barrierefreiheit
+  - CSS
+  - Flex
+  - Reihenfolge
+  - Richtung
+  - flexbox
+  - umgekehrt
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
+---
+
{{CSSRef}}

+
+
Neue Layout-Methoden wie z.B Flexbox und Grid geben die Möglichkeit, die Reihenfolge dessen Inhaltes zu verändern. Dieser Artikel handelt von den verschiedenen Möglichkeiten wie man die visuelle Reihenfolge des Inhalts, mithilfe von Flexbox, ändern kann. Dazu werden wir uns das Thema aus der perspektive der Barrierefreiheit betrachten.

+
+
Die Anzeige der Elemente umkehren

+
+
Die {{cssxref("flex-direction")}} Eigenschaft kann einer der 4 folgenden Werte bekommen:

+
+
    
+ 
  • row // Reihe
    • 
+ 
  • column // Spalte
    • 
+ 
  • row-reverse // Reihe-umgekehrt
    • 
+ 
  • column-reverse // Spalte-umgekehrt
    • 
+

+
+
Bei den ersten 2 Werten, bleibt die Reihenfolge wie sie auch im Quelltext angegeben ist und zeigt diese nacheinander von der Startlinie an an. Die Elemente werden dabei entweder in einer Reihe (row), oder in einer Spalte (column) angezeigt.

+ The items are displayed in a row starting on the left.

+
+
The items are displayed as a column starting from the top 

+
+
Die letzten beiden Werte, kehren die Reihenfolge der Elemente um, indem Sie die Start und End-Linien wechseln

+
+
The items are displayed in reverse order starting on the right-hand line.

+
+
The items are displayed in a column in reverse order starting at the bottom line.

+
+
Denk dran das der Start der Linie mit den Schreibmodis verbunden ist. Das Reihenbeispiel oben demonstriert wie row und row-reverse in einer links-zu-rechts Sprache wie z.B. Deutsch funktioniert. Wenn du aber in einer rechts-zu-links Sprache wie z.B. Arabisch arbeitest dann würde row rechts starten und row-reverse links.

+
+
Flex containers with Arabic letters showing how row starts from the right hand side and row-reverse from the left.

+
+
Das kann zwar nach einer schönen Möglichkeit aussehen, Elemente in einer umgekehrten Reihenfolge anzuzeigen, es sollte einem jedoch bewusst sein, das elemente nur visuell in einer umgekehrten Reihenfolge angezeigt werden. Die Spezifikation sagt diesbezüglich folgendes:

+
+

+
“Hinweis: Die Umsortierungs-möglichkeiten betreffen absichtlich nur die visuelle Ansicht und lassen dabei Sprech- und Navigationsbasierte Reihenfolgen außen vor. Das ermöglicht Autoren die Möglichkeit die visuelle Ansicht zu ändern, während sie die Quellen-Reihenfolge in intakt hält für nicht-CSS UAs und für lineare Modelle, wie z.B. Sprachmodelle und Sequentielle Navigationen” - Reigenfolge und Orientation

+

+
+
Wenn die Elemente Hyperlinks sind, oder irgendwelche anderen Elemente zu denen der User hintabben kann, dann wäre die tab-reihenfolge die selbe, wie sie im Dokumenten-Quellcode vorkommt und nicht wie sie visuell angezeigt wird.

+
+
Wenn man einen reverse Wert benuzt, oder in irgendeiner Weise die Reihenfolge der Elemente beeinflusst, dann musst du schauen, ob man nicht doch die logische Reihenfolge im Quelltext ändert. Die Spezifikitation fährt fort mit einer Warnung, das man umsortierung nicht nutzen soll um Probleme im Quellcode zu fixen.

+
+

+
“Autoren sollten die Reihenfolgen- oder Umgekehrtwerte der flex-flow/flex-direction Eigenschaften nicht als Ersatz für die tatsächliche Änderung des Dokumentes nutzen, da das die Barrierefreiheit des Dokumentes einschränkt.”

+

+
+

+
Hinweis: Firefox hatte ein paar Jahre lang einen Bug, bei dem es versucht hatte der visuellen Reihenfolge und nicht der Quelltext-Reihenfolge zu folgen, daruch verhielt es sich anders als andere Browser. Dieser Bug ist mittlerweile gefixt. Man sollte immer Quelltext-Reihenfolge als die logische Reihenfolge für das Dokument benutzen, da alle aktuellen User Agents diesem Schema folgen.

+

+
+
In dem Live-Beispiel unten habe ich einen focus-style hinzugefügt, damit man, wenn man mit tab von link zu link wechselt, sieht welcher link markiert wird. Wenn man die Reihenfolge mit flex-direction wechselst, dann sieht man wie die tab Reihenfolge immernoch der Reihenfolge der Elemente im Quelltext folgen.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

+
+
Auf die gleiche Weise, wie das ändern des Wertes flex-direction nicht die Reihenfolge ändert, in denen zu Elementen navigiert werden, ändert es auch nicht die Reihenfolge in denen die Elemente gemalt werden. Es ist nur eine visuelle umkehrung der Elemente.

+
+
Die order Eigenschaft

+
+
Zusätzlich zum umkehren der Reihenfolge, in welcher flex-elemente visuell dargestellt werden, kann man die Elemente individuell ansprechen und die visuelle Reihenfolge mit der {{cssxref("order")}} Eigenschaft.

+
+
Die order Eigenschaft legt die Elemente in Ordnungsgruppen. Das heißt, das den Elementen eine Zahl zugewiesen werden, welche die dazugehörige Gruppe repräsentieren. Danach werden die Elemente, in die Reihenfolge gebracht, wie die Zahlen es vorgeben, der kleinste Wert zuerst. Wenn mehr als ein Element, den selben Wert besitzen, dann werden die Elemente innerhalb ihrer Gruppe so ausgelegt, wie sie im Quelltext vorkommen.

+
+
Beispiel: Ich habe 5 flex-items und weise order Eigenschaften folgendermaßen zu:

+
+
    
+ 
  • Quellelement 1: order: 2
    • 
+ 
  • Quellelement 2: order: 3
    • 
+ 
  • Quellelement 3: order: 1
    • 
+ 
  • Quellelement 4: order: 3
    • 
+ 
  • Quellelement 5: order: 1
    • 
+

+
+
Diese Elemente werden dann wie folgt dargestellt:

+
+
    
+ 
  • Quellelement 3: order: 1
    • 
+ 
  • Quellelement 5: order: 1
    • 
+ 
  • Quellelement 1: order: 2
    • 
+ 
  • Quellelement 2: order: 3
    • 
+ 
  • Quellelement 4: order: 3
    • 
+

+
+
Items have a number showing their source order which has been rearranged.

+
+
Um zu sehen, wie das die Reihenfolge beeinflusst, kann man im Live-Beispiel unten die Werte für order ändern. Man kann auch flex-direction zu row-reverse wechseln und sehen was passiert — die Start Linie ist getauscht, damit startet das sortieren von der anderen Seite.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}

+
+
Flex-items haben einen natürlichen order Wert von 0, deshalb werden alle Elemente mit einem Zahlen-Wert größer als 0 nach Elementen angezeigt, welche noch keinen Expliziten order Wert erhalten haben.

+
+
Man kann auch negative Zahlenwerte verwenden, das ist ziemlich hilfreich. Wenn man ein Element als erstes anzeigen lassen will, aber die Reihenfolge aller anderen Elemente so lassen will wie sie sind, dann kann man diesem Element eine Reihenfolge von -1 geben. Da das kleiner als 0 ist, wird dieses Element als erstes angezeigt.

+
+
Im Live-Code Beispiel unten habe Ich Elemente mithilfe einer Flexbox ausgelegt. Wenn man ändert welches Element die Klasse active besitzt, dann kann man ändern, welches Element als erstes angezeigt werden soll, mit allen anderen Elementen darunter.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

+
+
Die Elemente werden anhand der, wie es in der Spezifikation beschrieben ist, order-modified- document order angezeigt. Der Wert der order-Eigenschaft wird berücksichtigt, bevor die Elemente angezeigt werden

+
+
Order ändert auch die Malreihenfolge der Elemente; Elemente mit einem geringerem order Wert, werden vor den Elementen mit einem höherem order Wert gemalt.

+
+
Die order Eigenschaft und Barrierefreiheit

+
+
Wenn man die order Eigenschaft nutzt, dann hat man exakt die gleichen Implikationen, wenn es ums Thema Barrierefreiheit geht, wie beim ändern der flex-direction. Die Eigenschaft order ändert die Reihenfolge, in der Elemente gemalt werden und die Reihenfolge in der diese Elemente visuell auftauchen. Es ändert nichts an der sequentiellen Navigationsreihenfolge der Elemente. Deshalb könnte es passieren, dass wenn ein Benutzer auf einer Website durch die Zeilen tabbt, das dieser in einem ziemlich verwirrendem Weg durch das Layout springt.

+
+
Wenn man in irgendeinem Live-Beispiel auf dieser Seite hin und her tabbt, dann kann man sehen, wie order das potential hat, eine seltsame Erfahrung für alle Benutzer zu schaffen, die nicht ein Zeiger-Gerät verwenden. Um mehr über dieses Thema zu erfahren, empfehle Ich folgende Ressourcen:

+
+
+
+
Anwendungsbeispiele für order

+
+
Manchmal gibt es Anwendungsorte, an denen es hilfreich ist, das die logische und visuelle Reihenfolge der Elemente voneinander getrennt sind. Vorsichtig eingesetzt ermöglicht die order Eigenschaft hilfreiche Lösungen für verbreitete Problemmuster.

+
+
Man hat z.B. ein Design einer Karte, welche Neuigkeiten anzeigt. Die Überschrift der Neuigkeiten ist das Schlüsselelement und wäre das Element, zu dem der Benutzer springen würde wenn er durch die verschiedenen Überschriften tabben würde. Die Karte hat dazu auch noch ein Datum; das fertige Design sieht dann ungefähr so aus:

+
+
A design component with a date, then heading and then content.

+
+
Visually the date appears above the heading, im Quelltext. Jedoch, wenn die Karte von einem Programm vorgelesen wird, wäre es mir lieber, wenn der Titel als erstes vorgelesen wird und danach das Veröffentlichungsdatum. Das geht ganz einfach wenn man die order Eigenschaft nutzt.

+
+
Die Karte wird unser flex-container sein, mit flex-direction auf column. Dann gebe ich dem Datum die order:-1. Das setzt es über die Überschrift.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

+
+
Diese kleinen Veränderungen sind die Art der Fälle in denen die order Eigenschaft Sinn macht. Behalte die logische Abfolge als Lese und Tab Reihenfolge des Dokumentes und pflege das in einer Art und Weise, das es Barrierefrei strukturiert bleibt. Danach nutze order lediglich zur Design-Optimierung. Wenn man das tut, sollte man darauf achten, das man die Reihenfolge von Elementen, durch die der Benutzer durchtabbt, nicht durcheinander bringt. Du wirst schnell bemerken, ob deine Entwicklungs-Entscheidungen es für den Benutzer schwierig machen.

diff --git a/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html b/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html
new file mode 100644
index 0000000000..81b1db9c4b
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html
@@ -0,0 +1,230 @@
+---
+title: Grundlegende Konzepte der Flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_Flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+
 

+
+
{{CSSRef}}

+
+
Das Flexible Box Modul, üblicherweise als Flexbox bezeichnet, wurde als ein eindimensionales Layoutmodell und als eine Methode entwickelt, die eine Platzverteilung zwischen Elementen in einer Schnittstelle und leistungsstarke Ausrichtungsmöglichkeiten bietet. Dieser Artikel gibt einen Überblick über die Hauptmerkmale von Flexbox, die wir im Folgenden näher erläutern werden.

+
+
Wenn wir Flexbox als eindimensional bezeichnen, beschreiben wir die Tatsache, dass Flexbox sich mit dem Layout in einer Dimension zu einem Zeitpunkt beschäftigt - entweder als eine Zeile oder als eine Spalte. Dies kann mit dem zweidimensionalen Modell von CSS Grid Layout, das Spalten und Zeilen zusammen steuert, kontrastiert werden.

+
+
Die zwei Achsen der Flexbox

+
+
Bei der Arbeit mit Flexbox muss man in zwei Achsen denken - der Hauptachse und der Querachse. Die Hauptachse wird durch die Eigenschaft {{cssxref("flex-direction")}} definiert, und die Querachse verläuft senkrecht dazu. Alles, was wir mit flexbox machen, bezieht sich auf diese Achsen, so dass es sich lohnt zu verstehen, wie sie von Anfang an funktionieren.

+
+
Die Hauptachse

+
+
Die Hauptachse wird durch flex-direction definiert, die vier mögliche Werte hat:

+
+
    
+ 
  • row
    • 
+ 
  • row-reverse
    • 
+ 
  • column
    • 
+ 
  • column-reverse
    • 
+

+
+
Wenn Sie row oder row-reverse wählen, läuft Ihre Hauptachse entlang der Zeile in Zeilenrichtung.

+
+
If flex-direction is set to row the main axis runs along the row in the inline direction.

+
+
Wählen Sie column oder column-reverse und Ihre Hauptachse läuft von oben nach unten - in Blockrichtung.

+
+
If flex-direction is set to column the main axis runs in the block direction.

+
+
Die Querachse

+
+
Die Querachse (cross axis) verläuft senkrecht zur Hauptachse, d.h. wenn Ihre flex-direction (Hauptachse) auf row oder row-reverse eingestellt ist, läuft die Querachse die Spalten hinunter.

+
+
If flex-direction is set to row then the cross axis runs in the block direction.

+
+
Wenn Ihre Hauptachse column oder column-reverse ist, dann verläuft die Querachse entlang der Zeilen.

+
+
If flex-direction is set to column then the cross axis runs in the inline direction.

+
+
Es ist wichtig zu verstehen, welche Achse die richtige ist, wenn wir uns mit der Ausrichtung und Justierung von Flex-Elementen befassen; Flexbox bietet Eigenschaften, die den Inhalt entlang der einen oder anderen Achse ausrichtet und justiert.

+
+
Start- und Endzeilen

+
+
Ein weiterer wichtiger Bereich des Verständnisses ist, wie Flexbox keine Annahmen über den Schreibmodus des Dokuments macht. In der Vergangenheit wurde CSS stark in Richtung horizontale und links-nach-rechts-Schreibweise ausgerichtet. Moderne Layoutmethoden umfassen den Bereich der Schreibmodi und so gehen wir nicht mehr davon aus, dass eine Textzeile oben links in einem Dokument beginnt und nach rechts verläuft, wobei neue Zeilen untereinander erscheinen.

+
+
Sie können mehr über die Beziehung zwischen Flexbox und der Writing Modes Spezifikation in einem späteren Artikel lesen, aber die folgende Beschreibung soll helfen zu erklären, warum wir nicht über links und rechts und oben und unten sprechen, wenn wir die Richtung beschreiben, in die unsere Flex Elemente fließen.

+
+
Wenn die flex-direction row ist und ich in Englisch arbeite, dann ist die Anfangskante der Hauptachse links, die Endkante rechts.

+
+
Working in English the start edge is on the left.

+
+
Wenn ich auf Arabisch arbeiten würde, dann wäre die Anfangskante meiner Hauptachse rechts und die Endkante links.

+
+
The start edge in a RTL language is on the right.

+
+
In beiden Fällen befindet sich die Anfangskante der Querachse oben am Flexcontainer und die Endkante unten, da beide Sprachen einen horizontalen Schreibmodus haben.

+
+
Nach einer Weile wird das Nachdenken über Anfang und Ende statt links und rechts natürlich werden, und Ihnen nützlich sein, wenn Sie mit anderen Layout-Methoden arbeiten, wie CSS-Grid-Layout, die den gleichen Mustern folgen.

+
+
Der Flex Container

+
+
Ein mit Flexbox angelegter Bereich eines Dokuments wird als Flex Container bezeichnet. Um einen Flex Container zu erstellen, setzen wir den Wert der Eigenschaft {{cssxref("display")}} des Bereichscontainers auf flex oder inline-flex. Sobald wir dies tun, werden die direkten Kinder dieses Containers zu flexiblen Elementen. Wie bei allen Eigenschaften in CSS sind einige Initialwerte definiert, so dass sich beim Erstellen eines Flex Containers alle enthaltenen Flex Items wie folgt verhalten.

+
+
    
+ 
  • Elemente werden in einer Zeile angezeigt (die Standardeinstellung der Eigenschaft flex-direction ist row).
    • 
+ 
  • Die Positionen beginnen an der Startkante der Hauptachse.
    • 
+ 
  • Die Elemente dehnen sich nicht auf der Hauptdimension aus, sondern können schrumpfen.
    • 
+ 
  • Die {{cssxref("flex-basis")}} Eigenschaft wird auf auto gesetzt.
    • 
+ 
  • Die{{cssxref("flex-wrap")}} Eigenschaft wird auf nowrap gesetzt.
    • 
+

+
+
Dies hat zur Folge, dass Ihre Elemente in einer Reihe angeordnet werden, wobei die Größe des Inhalts als Größe in der Hauptachse verwendet wird. Wenn es mehr Elemente gibt, als in den Container passen, werden sie nicht eingepackt, sondern überlaufen. Wenn einige Elemente größer als andere sind, dehnen sich alle Elemente entlang der Querachse aus, um ihre volle Größe zu erreichen.

+
+
Wie das aussieht, sehen Sie im folgenden Live-Beispiel. Versuchen Sie, die Elemente zu bearbeiten oder zusätzliche Elemente hinzuzufügen, um das anfängliche Verhalten von Flexbox zu testen.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+
+
Wechsel der flex-direction

+
+
Das Hinzufügen der Eigenschaft {{cssxref("flex-direction")}} zum Flex Container erlaubt es uns, die Richtung zu ändern, in der unsere Flex Elemente angezeigt werden. Einstellung der flex-direction: row-reverse behält die Anzeige entlang der Zeile bei, jedoch werden die Start- und Endlinien umgeschaltet.

+
+
Wenn wir die flex-direction in eine Spalte (column)ändern, schaltet die Hauptachse um und unsere Elemente werden nun in einer Spalte angezeigt. Setzen Sie column-reverse und die Start- und Endzeilen werden wieder umgeschaltet.

+
+
Das folgende Live-Beispiel hat die flex-direction auf row-reverse eingestellt. Versuchen Sie die anderen Werte - row, column and column-reverse - um zu sehen, was mit dem Inhalt passiert.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+
+
Multi-line flex containers with flex-wrap

+
+
While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.

+
+
To cause wrapping behaviour add the property {{cssxref("flex-wrap")}} with a value of wrap. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As flex-wrap is set to wrap, the items wrap. Set it to nowrap, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+
+
Find out more about wrapping flex items in the guide Mastering Wrapping of Flex Items.

+
+
The flex-flow shorthand

+
+
You can combine the two properties flex-direction and flex-wrap into the {{cssxref("flex-flow")}} shorthand. The first value specified is flex-direction and the second value is flex-wrap.

+
+
In the live example below try changing the first value to one of the allowable values for flex-direction - row, row-reverse, column or column-reverse, and also change the second to wrap and nowrap.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+
+
Properties applied to flex items

+
+
To have more control over flex items we can target them directly. We do this by way of three properties:

+
+
    
+ 
  • {{cssxref("flex-grow")}}
    • 
+ 
  • {{cssxref("flex-shrink")}}
    • 
+ 
  • {{cssxref("flex-basis")}}
    • 
+

+
+
We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide Controlling Ratios of Flex Items on the Main Axis.

+
+
Before we can make sense of these properties we need to consider the concept of available space. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.

+
+
If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.

+
+
This flex container has available space after laying out the items.

+
+
If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the flex properties that we apply to the items themselves, will do.

+
+
The flex-basis property

+
+
The flex-basis is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is auto — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the flex-basis.

+
+
If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare display: flex on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.

+
+
The flex-grow property

+
+
With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

+
+
If we gave all of our items in the example above a flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

+
+
The flex-grow property can be used to distribute space in proportion. If we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).

+
+
The flex-shrink property

+
+
Where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. As with flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

+
+
The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.

+
+

+
Note that these values for flex-grow and flex-shrink are proportions. Typically if we had all of our items set to flex: 1 1 200px and then wanted one item to grow at twice the rate, we would set that item to flex: 2 1 200px. However you could use flex: 10 1 200px and flex: 20 1 200px if you wanted.

+

+
+
Shorthand values for the flex properties

+
+
You will very rarely see the flex-grow, flex-shrink, and flex-basis properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The flex shorthand allows you to set the three values in this order — flex-grow, flex-shrink, flex-basis.

+
+
The live example below allows you to test out the different values of the flex shorthand; remember that the first value is flex-grow. Giving this a positive value means the item can grow. The second is flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is flex-basis; this is the value the items are using as their base value to grow and shrink from.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

+
+
There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:

+
+
    
+ 
  • flex: initial
    • 
+ 
  • flex: auto
    • 
+ 
  • flex: none
    • 
+ 
  • flex: <positive-number>
    • 
+

+
+
Setting flex: initial resets the item to the initial values of Flexbox. This is the same as flex: 0 1 auto. In this case the value of flex-grow is 0, so items will not grow larger than their flex-basis size. The value of flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of flex-basis is auto. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.

+
+
Using flex: auto is the same as using flex: 1 1 auto; everything is as with flex:initial but in this case the items can grow and fill the container as well as shrink if required.

+
+
Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto.

+
+
The shorthand you often see in tutorials is flex: 1 or flex: 2 and so on. This is as if you used flex: 1 1 0. The items can grow and shrink from a flex-basis of 0.

+
+
Try these shorthand values in the live example below.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+
+
Alignment, justification and distribution of free space between items

+
+
A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.

+
+
align-items

+
+
The {{cssxref("align-items")}} property will align the items on the cross axis.

+
+
The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.

+
+
You could instead set align-items to flex-start in order to make the items line up at the start of the flex container, flex-end to align them to the end, or center to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:

+
+
    
+ 
  • stretch
    • 
+ 
  • flex-start
    • 
+ 
  • flex-end
    • 
+ 
  • center
    • 
+

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+
+
justify-content

+
+
The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is flex-start which will line the items up at the start edge of the container, but you could also set the value to flex-end to line them up at the end, or center to line them up in the centre.

+
+
You can also use the value space-between to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value space-around. With space-around, items have a half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items have a full-size space on either end.

+
+
Try the following values of justify-content in the live example:

+
+
    
+ 
  • flex-start
    • 
+ 
  • flex-end
    • 
+ 
  • center
    • 
+ 
  • space-around
    • 
+ 
  • space-between
    • 
+ 
  • space-evenly
    • 
+

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+
+
In the article Aligning Items in a Flex Container we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.

+
+
Next steps

+
+
After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at how this specification relates to other parts of CSS.

diff --git a/files/de/web/css/css_flexible_box_layout/index.html b/files/de/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..50a0d76329
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,111 @@
+---
+title: CSS Flexible Box Layout
+slug: Web/CSS/CSS_Flexible_Box_Layout
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+
{{CSSRef}}

+
+
CSS Flexible is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.

+
+
Reference

+
+
CSS Properties

+
+

+
    
+ 
  • {{cssxref("align-content")}}
    • 
+ 
  • {{cssxref("align-items")}}
    • 
+ 
  • {{cssxref("align-self")}}
    • 
+ 
  • {{cssxref("flex")}}
    • 
+ 
  • {{cssxref("flex-basis")}}
    • 
+ 
  • {{cssxref("flex-direction")}}
    • 
+ 
  • {{cssxref("flex-flow")}}
    • 
+ 
  • {{cssxref("flex-grow")}}
    • 
+ 
  • {{cssxref("flex-shrink")}}
    • 
+ 
  • {{cssxref("flex-wrap")}}
    • 
+ 
  • {{cssxref("justify-content")}}
    • 
+ 
  • {{cssxref("order")}}
    • 
+

+

+
+
Guides

+
+

+ 
Using CSS flexible boxes

+ 
Step-by-step tutorial about how to build layouts using this feature.

+ 
Using flexbox to lay out Web applications

+ 
Tutorial explaining how to use flexbox in the specific context of Web applications.

+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Initial definition.

+
+
Browser compatibility

+
+
{{CompatibilityTable()}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("20.0")}}21.0{{property_prefix("-webkit")}}

+    29.0		10.0{{property_prefix("-ms")}}

+    11.0		12.106.1{{property_prefix("-webkit")}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}

+

+
+
 

diff --git a/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
new file mode 100644
index 0000000000..8a66487777
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
@@ -0,0 +1,397 @@
+---
+title: Using CSS flexible boxes
+slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+
{{CSSRef}}

+
+
Die CSS3 Flexible Box, auch flexbox genannt, ist ein Layoutmodus, um Elemente einer Seite so anzuordnen, dass sie sich vorhersagbar verhalten, wenn sich das Layout verschiedenen Bildschirmgrößen und Ausgabegeräten anpasst. Für viele Anwendungsfälle stellt das Flexible-Box-Modell eine Verbesserung gegenüber dem Block-Modell dar, da es keine Floats nutzt. Außerdem fallen die Margins eines Containers nicht mit den Margins seines Inhalts zusammen.

+
+
Viele Designer empfinden die Verwendung des Flexbox-Modells als einfacher. Kindelemente einer Flexbox können in jede Richtung ausgelegt werden sowie eine flexible Größe besitzen, um sich so an den Anzeigeplatz anzupassen. Die Positionierung von Kindelementen ist dadurch wesentlich leichter und komplexe Layouts sind nicht nur einfacher, sondern auch mit schönerem Code zu erlangen, was auf die unabhängige Platzierung der Elemente im Quellcode zurückzuführen ist. Diese Unabhängigkeit beeinflusst bewusst nur die visuelle Darstellung und lässt somit die Sprachordnung und Navigation, die auf dem Quellcode basiert, unberührt.

+
+
Hinweis: Obwohl sich die Spezifikation des CSS Flexible Boxes Layouts im Aufruf zum letzen Arbeitsentwurf befindet (siehe aktuellen Editor-Entwurf), haben noch nicht alle Browser alle Eigenschaften der Flexbox implementiert. Es sei hiermit darauf verwiesen, dass es noch keine ausreichend übergreifende Unterstützung gibt. Einen Überblick über den Stand der jeweiligen Eigenschaften bietet die Kompatibilitätsliste.

+
+
Flexible-Box-Konzept

+
+
Ein entscheidender Aspekt des Flex-Layouts ist die Möglichkeit, die Breite und/oder Höhe der einzelnen Elemente, entsprechend des zur Verfügung stehenden Platzes, auf jedem Gerät anpassen zu können. Ein Flex-Container dehnt seine Elemente entweder aus, um den verfügbaren freien Platz zu füllen, oder verkleinert sie, um einen Overflow zu vermeiden.

+
+
Der Flexbox-Layout-Algorithmus funktioniert richtungsunabhängig, anders als beim Block-Layout, das vertikal ausgerichtet ist, oder beim Inline-Layout, das horizontal ausgerichtet ist. Obwohl das Block-Layout gut auf Seiten anwendbar ist, mangelt es ihm an individuellen Richtlinien, um Applikationskomponenten zu unterstützen, die die Ausrichtung ändern, sich in ihrer Größe anpassen, je nach Benutzerprogrammen ausdehnen oder verkleinern, von der Horizontalen in die Vertikale rotieren müssen und so weiter. Das Flexbox-Layout lässt sich am besten auf Anwendungskomponenten und auf kleinere Layouts anwenden, während das (neu aufkommende) Grid-Layout für großflächigere Layouts bestimmt ist. Beide sind Bestandteil größerer Bemühungen der CSS-Arbeitsgruppe, um eine größere Interoperabilität zwischen Webanwendungen mit den unterschiedlichsten Benutzerprogrammen, den vielfältigen Schreibmethoden und anderen Anforderungen, die an die Flexibilität gestellt werden, zu ermöglichen.

+
+
Flexible-Box-Wortschatz

+
+
Während sich die Diskussion der Flexible Boxes von Bezeichnungen wie Horizontal-/Inline-Achse und Vertikal-/Block-Achse befreit, bedarf es dennoch einer neuen Terminologie, um das Modell adäquat zu beschreiben. Folgendes Diagramm soll als Referenz, zur Erörterung des Wortschatzes, dienen. Es zeigt einen Flex Container, dessen Eigenschaft flex-direction den Wert row hat. Das bedeutet, dass die flex items (im weiteren Verlauf als Flex-Elemente benannt) einander auf der Horizontalen, der Hauptachse, folgen – gemäß der gängigen Schreibmethode, die der Schreibrichtung folgt – in diesem Fall von links nach rechts.

+
+
flex_terms.png

+
+

+ 
Flex container (Flex-Container)

+ 
Das Elternelement, in dem die Flex-Elemente (entsprechen den flex items im Diagramm) liegen. Ein Flex-Container wird durch den Wert flex oder inline-flex der Eigenschaft {{Cssxref("display")}} bestimmt.

+

+
+

+ 
Flex item (Flex-Elemente)

+ 

+ 
Jedes Kindelement eines Flex-Containers wird zu einem Flex-Element. Text, der sich unmittelbar in einem Flex-Container befindet, wird von einem anonymen Flex-Element umspannt.

+ 

+ 
Achsen

+ 

+ 
Jedes Flexible-Box-Layout folgt zwei Achsen. Die Hauptachse ist die Achse, auf der die Flex-Elemente aufeinander folgen. Die Querachse ist die Achse, die senkrecht zur Hauptachse steht.

+
+ 
    
+  
  • Die flex-direction-Eigenschaft bestimmt die Hauptachse.
    • 
+  
  • Die justify-content-Eigenschaft bestimmt, wie Flex-Elemente auf der Hauptachse der aktuellen Zeile ausgelegt werden.
    • 
+  
  • Die align-items-Eigenschaft bestimmt die standardmäßige Ausrichtung der Flex-Elemente auf der Querachse der aktuellen Zeile.
    • 
+  
  • Die align-self-Eigenschaft bestimmt die Ausrichtung einzelner Flex-Elemente auf der Querachse und überschreibt den standardmäßig durch align-items definierten Wert.
    • 
+ 

+ 

+ 
Richtungen

+ 

+ 
Die Seiten main start/main end und cross start/cross end des Flex-Containers beschreiben den Anfang und den Endpunkt der Fließrichtung von Flex-Elementen. Sie folgen der Haupt- und Querachse des Flex-Containers in der durch writing-mode festgelegten Richtung (von links nach rechts, von rechts nach links usw.)

+
+ 
    
+  
  • Die order-Eigenschaft weist Elementen Ordinalzahlen zu und legt fest, welche Elemente zuerst erscheinen.
    • 
+  
  • Die flex-flow-Eigenschaft fasst die flex-direction- und flex-wrap-Eigenschaften zusammen, um die Flex-Elemente anzulegen.
    • 
+ 

+ 

+ 
Lines

+ 

+ 
Die Flex-Elemente können auf eine oder mehrere Linien ausgelegt werden, gemäß der flex-wrap-Eigenschaft, welche die Richtung der Querachse und die Richtung der Linien steuert, in welche diese aufgereiht werden.

+ 

+ 
Dimensions

+ 

+ 
Die richtungsunabhängigen Entsprechungen von Höhe und Breite der Flex-Elemente sind main size und cross size, die entsprechend der Haupt- bzw. Querachse des Flex-Containers folgen.

+
+ 
+ 

+

+
+
Flexible-Box-Auszeichnung

+
+
Um per CSS Elemente auszuzeichnen, die dieses Layout benutzen, setzt man die display-Eigenschaft wie folgt:

+
+
display: flex

+
+
oder

+
+
display: inline-flex

+
+
Macht man es so, definiert man das Element als Flex-Container und seine Kindelemente als Flex-Elemente. Der flex-Wert macht den Flex-Container zu einem Block-level-Element. Der flex-inline- Wert macht den Flex-Container zu einem kleinen Inline-level-Element.

+
+
Hinweis: Werden anbieterspzifische Präfixe für ältere Browser verwendet, fügt man den Präfix dem display-Wert hinzu und nicht der Eigenschaft. Zum Beispiel: display: -webkit-flex.

+
+
Überlegungen zu Flex-Elementen

+
+
Text, der sich unmittelbar in einem Flex-Container befindet, wird automatisch von einem anonymen Flex-Element umschlossen. Ein anonymes Flex-Element, das nur aus Leerraum besteht, wird nicht gerendert, ganz so, als ob es durch display: none ausgezeichnet ist.

+
+
Absolut positionierte Kindelemente eines Flex-Containers werden so angeordnet, dass sich ihre statische Position auf die Hauptecke der ersten Inhaltsbox ihres Flex-Containers bezieht.

+
+
Wegen eines bekannten Problems wird ein Flex-Element mit der Deklaration visibility: collapse gegenwärtig so behandelt, als ob es die Deklaration display: none besäße, und nicht, wie mit der Deklation visibility: hidden. Vorgeschlagener Workaround, bis zur Lösung dieses Problems, ist, die Deklaration visibility: hidden für Flex-Elemente zu benutzen, sodass sie sich so verhalten, als ob sie mit visibility: collapse ausgezeichnet wären. Für mehr Informationen siehe Bug 783470.

+
+
Die Margins benachbarter Flex-Elemente fallen nicht zusammen. Die Benutzung von Auto-Margins absorbiert überflüssigen Platz in der Vertikalen und der Horizontalen und kann zur Ausrichtung oder Trennung von benachbarten Flex-Elementen genutzt werden. Siehe Align with ‘auto’ margins in der W3C Flexible-Box-Layout-Model-Spezifikation für eine detailliertere Beschreibung.

+
+
Um eine vernünftige, minimal Größe für ‘flex Elemente’ zu gewährleisten, benutzt man min-width: auto und/oder min-height: auto. Bei ‘flex Elementen’ berechnet der auto Wert die mindest Breite/Höhe seiner Elemente so, dass nicht mehr Platz zu Verfügung steht, als es durch die Breite/Höhe seines Inhaltes erforderlich ist. Dadurch ist sichergestellt, dass die Elemente groß genug gerendert werden um ihren Inhalt anzeigen zu können. Siehe min-width und min-height für eine detailliertere Beschreibung.

+
+
Die Ausrichtungseigenschaften der Flexbox gewährleisten eine “echte” Zentrierung, entgegen anderer Zentrierungsmethoden in CSS. Dies bedeutet, dass Flex-Elemente auch dann zentriert bleiben, wenn sie ihren Container überfließen. Dies kann manchmal jedoch problematisch sein. Überfließt der Inhalt die obere Kante der Seite oder die linke Seite (in LTR-Sprachen wie dem Englischen; Bei RTL-Sprachen wie dem Arabischen tritt dieses Problem auf der rechten Seite auf), so kann man in diesem Bereich nicht mehr Scrollen auch wenn sich darin Inhalte befinden! In einer künftigen Version werden die Ausrichtungseigenschaften so erweitert, dass es auch hier eine “sichere” Möglichkeit geben wird. Sollte dies ein Problem darstellen, kann man momentan stattdessen auf Margins zurückgreifen, um eine Zentrierung zu gewährleisten, da sich diese “sicher” verhalten und bei einem Überfließen nicht mehr zentrieren. Anstelle der align-Deklaration kann man einfach Auto-Margins auf die zu zentrierenden Elemente anwenden. Anstelle der justify-Eigenschaft kann man Auto-Margins auf die äußeren Enden des ersten und letzten Flex-Elements innerhalb eines Flex-Containers setzen. Die Auto-Margins werden entsprechend des geschätzten, freien Platzes die Flex-Elemente entweder zentrieren, sollte genug Platz vorhanden sein, und zur normalen Ausrichtung wechseln, wenn kein Platz da ist. Will man jedoch justify-content durch eine margin-basierte Zentrierung in einer multi-line-Flexbox ersetzen, hat man wahrscheinlich kein Glück dabei, da man die Margins auf dem ersten und letzten Flex-Element auf jeder Zeile setzen müsste. Sofern man nicht schon im Voraus bestimmten kann, welches Element auf welcher Zeile landet, kann man margin-basierte Zentrierung auf der Hauptachse nicht zuverlässig benutzen, um die justify-content-Deklaration zu ersetzen.

+
+
Man sollte sich daran erinnern, dass, auch wenn die Reihenfolge in der Darstellung von Elementen unabhängig von der Notierung im Quellcode ist, sich diese nur in der visuellen Darstellung auswirkt und sich die Sprachreihenfolge und Navigationsanordnung nach der Anordnung im Quelltext richtet. Sprach- und Navigationssequenzen werden sogar von der order-Eigenschaft unberührt gelassen. Dementsprechend müssen Entwickler dafür Sorge tragen, Elemente in der richtigen Reihenfolge anzuordnen, um die Zugänglichkeit nicht zu gefährden.

+
+
Flexible-Box-Eigenschaften

+
+
Eigenschaften, die Flexible Boxes nicht beeinflussen

+
+
Da Flexible Boxes einen anderen Darstellungsalgorithmus verwenden, ergibt die Verwendung einiger Eigenschaften bei Flex-Containern keinen Sinn:

+
+
    
+ 
  • Eigenschaften column-* der multiple column Modules haben keinen Einfluss auf Flex-Elemente.
    • 
+ 
  • {{cssxref("float")}} und {{cssxref("clear")}} haben keinen Einfluss auf Flex -Elemente. Die Benutzung von float sorgt dafür, dass die display-Eigenschaft den errechneten Wert block zugewiesen bekommt.
    • 
+ 
  • {{cssxref("vertical-align")}} hat keinen Einfluss auf die Ausrichtung von Flex-Elementen.
    • 
+

+
+
Beispiele

+
+
Basis-Flex-Beispiel

+
+
Dieses Grundbeispiel zeigt, wie man ein Element "flexibel" macht und wie sich gleichrangige Elemente in einem flexiblen Zustand verhalten.

+
+
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex > div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      width: 30px; /* To make the transition work nicely.  (Transitions to/from
+                      "width:auto" are buggy in Gecko and Webkit, at least.
+                      See http://bugzil.la/731886 for more info.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex > div:nth-child(1){ background : #009246; }
+   .flex > div:nth-child(2){ background : #F1F2F1; }
+   .flex > div:nth-child(3){ background : #CE2B37; }
+
+   .flex > div:hover
+   {
+        width: 200px;
+   }
+
+   </style>
+
+ </head>
+ <body>
+  <p>Flexbox nuovo</p>
+  <div class="flex">
+    <div>uno</div>
+    <div>due</div>
+    <div>tre</div>
+  </div>
+ </body>
+</html>

+
+
Holy-Grail-Layout-Beispiel

+
+
Dieses Beispiel demonstriert, wie Flexbox die Möglichkeit bietet, Layouts entsprechend verschiedener Auflösungen dynamisch anzupassen. Folgendes Diagramm stellt die Transformation bildlich dar.

+
+
HolyGrailLayout.png

+
+
Hier wird das Beispiel dargestellt, dass sich eine Seite, die für einen Browser ausgelegt ist, sich an ein Smartphone-Fenster anpassen muss. Es müssen sich nicht nur die Größenverhältnisse der Elemente anpassen, sondern auch die Anordnung, in der die Elemente präsentiert werden. Das wird durch die Benutzung von Flexbox sehr vereinfacht.

+
+
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main > article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main > nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main > aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* Too narrow to support three columns */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-direction: column;
+   }
+
+   #main > article, #main > nav, #main > aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main > nav, #main > aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ </style>
+  </head>
+  <body>
+ <header>header</header>
+ <div id='main'>
+    <article>article</article>
+    <nav>nav</nav>
+    <aside>aside</aside>
+ </div>
+ <footer>footer</footer>
+  </body>
+</html>

+
+
Playground (Spielwiese)

+
+
Es gibt verschiedene, online verfügbare Spielwiesen im Internet zum Experimentieren:

+
+
+
+
Things to keep in mind

+
+
The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.

+
+
Flexible boxes are laid out in conformance of the writing mode, which means that main start and main end are laid out according to the position of start and end.

+
+
cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

+
+
Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before, and break-inside as well as CSS 2.1 page-break-before, page-break-after, and page-break-inside properties are accepted on a flex container, flex items, and inside flex items.

+
+
Browser compatibility

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (single-line flexbox){{CompatGeckoDesktop("18.0")}}{{property_prefix("-moz")}}[2]

+    {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}

+    29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}

+    29.0		11[3]12.10[5]

+    15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureFirefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
Basic support (single-line flexbox){{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]

+    {{CompatGeckoMobile("22.0")}}		
+    
1.0{{property_prefix("-moz")}}[2]

+     1.1

+   		2.1{{property_prefix("-webkit")}}[4]

+    4.4		1112.10[5]

+    15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]

+    4.4		1112.10[5]

+    15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]

+

+
+
[1] Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version.

+
+
[2] Up to Firefox 22, to activate flexbox support, the user has to change the about:config preference layout.css.flexbox.enabled to true. From Firefox 22 to Firefox 27, the preference is true by default, but the preference has been removed in Firefox 28.

+
+
[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 has been updated to support the final version.

+
+
[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.

+
+
[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.

+
+
See also

+
+
diff --git a/files/de/web/css/css_fonts/index.html b/files/de/web/css/css_fonts/index.html
new file mode 100644
index 0000000000..2d5b16fa9f
--- /dev/null
+++ b/files/de/web/css/css_fonts/index.html
@@ -0,0 +1,145 @@
+---
+title: CSS Fonts
+slug: Web/CSS/CSS_Fonts
+tags:
+  - CSS
+  - CSS Fonts
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Fonts
+---
+
{{CSSRef}}

+
+
CSS Fonts ist ein CSS Modul, das schriftbezogene Eigenschaften definiert und wie Schriftressourcen geladen werden. Es erlaubt, den Stil einer Schrift, wie deren Schriftart, -größe und -dicke zu bestimmen als auch die Variante der verwendeten Glyphe für eine Schriftart, die mehrere Glyphen für ein Schriftzeichen bereitstellt. Es erlaubt außerdem, die Höhe einer Zeile zu definieren.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("font")}}
    • 
+ 
  • {{cssxref("font-family")}}
    • 
+ 
  • {{cssxref("font-feature-settings")}}
    • 
+ 
  • {{cssxref("font-kerning")}}
    • 
+ 
  • {{cssxref("font-language-override")}}
    • 
+ 
  • {{cssxref("font-size")}}
    • 
+ 
  • {{cssxref("font-size-adjust")}}
    • 
+ 
  • {{cssxref("font-stretch")}}
    • 
+ 
  • {{cssxref("font-style")}}
    • 
+ 
  • {{cssxref("font-synthesis")}}
    • 
+ 
  • {{cssxref("font-variant")}}
    • 
+ 
  • {{cssxref("font-variant-alternates")}}
    • 
+ 
  • {{cssxref("font-variant-caps")}}
    • 
+ 
  • {{cssxref("font-variant-east-asian")}}
    • 
+ 
  • {{cssxref("font-variant-ligatures")}}
    • 
+ 
  • {{cssxref("font-variant-numeric")}}
    • 
+ 
  • {{cssxref("font-variant-position")}}
    • 
+ 
  • {{cssxref("font-weight")}}
    • 
+ 
  • {{cssxref("line-height")}}
    • 
+

+

+
+
@-Regeln

+
+

+ 
{{cssxref("@font-face")}}

+ 

+ 

+ 
    
+  
  • {{cssxref("@font-face/font-family", "font-family")}}
    • 
+  
  • {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
    • 
+  
  • {{cssxref("@font-face/font-style", "font-style")}}
    • 
+  
  • {{cssxref("@font-face/font-variant", "font-variant")}}
    • 
+  
  • {{cssxref("@font-face/font-weight", "font-weight")}}
    • 
+  
  • {{cssxref("@font-face/font-stretch", "font-stretch")}}
    • 
+  
  • {{cssxref("@font-face/src", "src")}}
    • 
+  
  • {{cssxref("@font-face/unicode-range", "unicode-range")}}
    • 
+ 

+ 

+ 

+ 
{{cssxref("@font-feature-values")}}

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Fonts')}}{{Spec2('CSS3 Fonts')}} 
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#font', '')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.01.0 (1.0)3.03.51.0 (85)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

+

diff --git a/files/de/web/css/css_generated_content/index.html b/files/de/web/css/css_generated_content/index.html
new file mode 100644
index 0000000000..8541394b39
--- /dev/null
+++ b/files/de/web/css/css_generated_content/index.html
@@ -0,0 +1,61 @@
+---
+title: CSS Generated Content
+slug: Web/CSS/CSS_Generated_Content
+tags:
+  - CSS
+  - CSS Generated Content
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Generated_Content
+---
+
{{CSSRef}}

+
+
CSS Generated Content ist ein CSS Modul, das definiert, wie Inhalte zu einem Element hinzugefügt werden.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("content")}}
    • 
+ 
  • {{cssxref("quotes")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
content

+
+
 

+
+
{{Compat("css.properties.content")}}

+
+
quotes

+
+
{{Compat("css.properties.quotes")}}

+
+
 

diff --git a/files/de/web/css/css_grid_layout/index.html b/files/de/web/css/css_grid_layout/index.html
new file mode 100644
index 0000000000..d5e810da8e
--- /dev/null
+++ b/files/de/web/css/css_grid_layout/index.html
@@ -0,0 +1,252 @@
+---
+title: CSS Grid Layout
+slug: Web/CSS/CSS_Grid_Layout
+tags:
+  - CSS
+  - Grid Layout
+  - Grids
+  - Layout
+  - NeedsTranslation
+  - Raster
+  - Referenz
+  - Überblick
+translation_of: Web/CSS/CSS_Grid_Layout
+---
+
CSS Grid Layout zeichnet sich dadurch aus, dass eine Seite in Hauptbereiche unterteilt wird oder die Beziehung zwischen Teilen eines Steuerelements, das aus HTML-Grundelementen besteht, in Bezug auf Größe, Position und Layer definiert wird.

+
+
Grid Layout ermöglicht es, Elemente in Spalten und Reihen auszurichten, ähnlich wie in Tabellen. Jedoch gibt es viel mehr Gestaltungsmöglichkeiten und diese sind einfacher umzusetzen mit CSS Grid als es mit Tabellen der Fall war. Beispielsweise kann das Kindelement eines Grid-Container-Elements so positioniert werden, dass es andere überlappt und überlagert, ähnlich wie bei mit CSS positionierten Elementen.

+
+
Einfaches Beispiel

+
+
Das folgende Beispiel zeigt ein dreispaltiges Raster mit neuen Zeilen, die mit mindestens 100 Pixeln und einem Maximum von auto erstellt wurden. Die Elemente wurden mithilfe von zeilenbasierten Platzierungen im Raster positioniert.

+
+

+
+
+
HTML

+
+
<div class="wrapper">
+  <div class="one">One</div>
+  <div class="two">Two</div>
+  <div class="three">Three</div>
+  <div class="four">Four</div>
+  <div class="five">Five</div>
+  <div class="six">Six</div>
+</div>

+
+
CSS

+
+
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+

+
+
{{ EmbedLiveSample('example', '500', '440') }}

+

+
+
Referenz

+
+
CSS Eigenschaften

+
+

+
    
+ 
  • {{cssxref("grid-template-columns")}}
    • 
+ 
  • {{cssxref("grid-template-rows")}}
    • 
+ 
  • {{cssxref("grid-template-areas")}}
    • 
+ 
  • {{cssxref("grid-template")}}
    • 
+ 
  • {{cssxref("grid-auto-columns")}}
    • 
+ 
  • {{cssxref("grid-auto-rows")}}
    • 
+ 
  • {{cssxref("grid-auto-flow")}}
    • 
+ 
  • {{cssxref("grid")}}
    • 
+ 
  • {{cssxref("grid-row-start")}}
    • 
+ 
  • {{cssxref("grid-column-start")}}
    • 
+ 
  • {{cssxref("grid-row-end")}}
    • 
+ 
  • {{cssxref("grid-column-end")}}
    • 
+ 
  • {{cssxref("grid-row")}}
    • 
+ 
  • {{cssxref("grid-column")}}
    • 
+ 
  • {{cssxref("grid-area")}}
    • 
+ 
  • {{cssxref("grid-row-gap")}}
    • 
+ 
  • {{cssxref("grid-column-gap")}}
    • 
+ 
  • {{cssxref("grid-gap")}}
    • 
+

+

+
+
CSS Funktionen

+
+

+
    
+ 
  • {{cssxref("repeat", "repeat()")}}
    • 
+ 
  • {{cssxref("minmax", "minmax()")}}
    • 
+ 
  • {{cssxref("fit-content", "fit-content()")}}
    • 
+

+

+
+
CSS Datentypen

+
+

+
    
+ 
  • {{cssxref("<flex>")}}
    • 
+

+

+
+
Glossar Einträge

+
+

+
+

+
+
Anleitungen

+
+

+
+

+
+
Externe Quellen

+
+
+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusBemerkung
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}Initial definition.

+
+
diff --git a/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html
new file mode 100644
index 0000000000..5551a4a59e
--- /dev/null
+++ b/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html
@@ -0,0 +1,50 @@
+---
+title: Implementing image sprites in CSS
+slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+tags:
+  - Anleitung
+  - CSS
+  - CSS Bilder
+  - Fortgeschrittene
+  - Grafik
+  - NeedsContent
+  - Sprites
+  - Web
+translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+---
+
{{APIRef}}

+
+
Image Sprites werden in zahlreichen Webanwendungen verwendet, wo mehrere Bilder verwendet werden. Statt jedes Bild als eine eigene Bilddatei einzubinden, ist es wesentlich speicher- und bandbreitenfreundlicher, sie als ein einzelnes Bild zu schicken, um die Anzahl an HTTP Anfragen zu verringern.

+
+
Implementierung

+
+
Angenommen, jedem Element mit der Klasse toolbtn wird ein Bild zugewiesen:

+
+
.toolbtn {
+  background: url(myfile.png);
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}

+
+
Eine Hintergrundposition kann entweder über zwei x- und y-Werte nach der {{cssxref("url()")}} dem Hintergrund hinzugefügt werden oder als {{cssxref("background-position")}}. Als Beispiel:

+
+
#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}

+
+
Dies verschiebt das Element mit der ID 'btn1' um 20 Pixel nach links und das Element mit der ID 'btn2' um 40 Pixel nach links (unter Annahme, dass diesen die Klasse toolbtn zugewiesen wurde und durch die obere CSS Regel beeinflusst werden).

+
+
Ebenso können Hover-Status erstellt werden mit:

+
+
#btn:hover {
+  background-position: <nach rechts verschobene Pixel>px <nach unten verschobene Pixel>px;
+}

+
+
Siehe auch

+
+
Voll funktionsfähige Demo bei CSS Tricks

diff --git a/files/de/web/css/css_images/index.html b/files/de/web/css/css_images/index.html
new file mode 100644
index 0000000000..b34532bf2c
--- /dev/null
+++ b/files/de/web/css/css_images/index.html
@@ -0,0 +1,145 @@
+---
+title: CSS Bilder
+slug: Web/CSS/CSS_Images
+tags:
+  - CSS
+  - CSS Bilder
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Images
+---
+
{{CSSRef}}

+
+
CSS Images ist ein CSS Modul, das definiert, welche Typen von Bildern verwendet werden können (der {{cssxref("<image>")}} Typ, der URLs, Farbverläufe und andere Arten von Bildern beinhaltet), wie diese in der Größe geändert werden und wie sie und andere ersetzte Inhalte mit den verschiedenen Layoutmodellen interagieren.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("image-orientation")}}
    • 
+ 
  • {{cssxref("image-rendering")}}
    • 
+ 
  • {{cssxref("object-fit")}}
    • 
+ 
  • {{cssxref("object-position")}}
    • 
+

+

+
+
Funktionen

+
+

+
    
+ 
  • {{cssxref("linear-gradient", "linear-gradient()")}}
    • 
+ 
  • {{cssxref("radial-gradient", "radial-gradient()")}}
    • 
+ 
  • {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}
    • 
+ 
  • {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}
    • 
+ 
  • {{cssxref("element", "element()")}}
    • 
+

+

+
+
Datentypen

+
+

+
    
+ 
  • {{cssxref("<image>")}}
    • 
+ 
  • {{cssxref("<uri>")}}
    • 
+

+

+
+
Anleitungen

+
+

+ 
CSS Farbverläufe verwenden

+ 
Beschreibt einen bestimmten Typ von CSS Bildern, Farbverläufe, und wie diese erstellt und verwendet werden.

+ 
Implementierung von Bildsprites in CSS

+ 
Beschreibt die geläufige Methode, mehrere Bilder in einem einzigen Dokument zu gruppieren, um Downloadanfragen zu sparen und die Verfügbarkeit einer Seite zu beschleunigen.

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Images')}}{{Spec2('CSS4 Images')}} 
{{SpecName('CSS3 Images')}}{{Spec2('CSS3 Images')}} 
{{SpecName('CSS3 Values', '#urls', '<url>')}}{{Spec2('CSS3 Values')}} 
{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#url', '<url>')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

diff --git "a/files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html" "b/files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html"
new file mode 100644
index 0000000000..252f90b530
--- /dev/null
+++ "b/files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html"
@@ -0,0 +1,126 @@
+---
+title: CSS Zähler verwenden
+slug: Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden
+tags:
+  - Anleitung
+  - CSS
+  - CSS Listen
+  - CSS Wert
+  - Fortgeschrittene
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+---
+
{{CSSRef}}

+
+
CSS Zähler sind im Grunde von CSS verwaltete Variablen, deren Werte mittels CSS Regeln inkrementiert werden können, um nachzuvollziehen, wie oft sie verwendet wurden. Dies ermöglicht es, die Darstellung von Inhalten anhand der Positionierung innerhalb des Dokuments anzupassen. CSS Zähler sind eine Implementierung von Automatic counters and numbering in CSS 2.1.

+
+
Der Wert eines Zählers wird durch die Verwendung von {{cssxref("counter-reset")}} geändert. {{cssxref("counter-increment")}} kann auf einer Seite durch verwenden der counter() oder counters() Funktion der {{cssxref("content")}} Eigenschaft dargestellt werden.

+
+
Zähler verwenden

+
+
Um einen CSS Zähler zu verwenden, muss er zunächst auf einen Wert zurückgesetzt werden (standardmäßig 0). Um den Wert eines Zählers zu einem Element hinzuzufügen, kann die counter() Funktion verwendet werden. Das folgende CSS fügt am Anfang jedes h3 Elements "Abschnitt <der Wert des Zählers>:" ein.

+
+
body {
+  counter-reset: section;                      /* Setzt den Abschnittszähler auf 0 */
+}
+
+h3::before {
+  counter-increment: section;                  /* Erhöht den Abschnittszähler */
+  content: "Abschnitt " counter(section) ": "; /* Zeigt den Zähler an */
+}
+

+
+
Beispiel:

+
+
<h3>Einführung</h3>
+<h3>Inhalt</h3>
+<h3>Zusammenfassung</h3>

+
+
{{EmbedLiveSample("Zähler_verwenden", 280, 150)}}

+
+
Zähler verschachteln

+
+
Ein CSS Zähler ist besonders nützlich, um kontinuierte Listen zu erstellen, da in Kindelementen automatisch eine neue Instanz eines CSS Zählers erzeugt wird. Wird die counters() Funktion verwendet, kann ein String zwischen verschiedenen Leveln von verschachtelten Zählern eingefügt werden. Beispielsweise dieses CSS:

+
+
ol {
+  counter-reset: section;                /* Erstellt mit jedem ol Element
+                                            eine neue Instanz des
+                                            Abschnittszählers. */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* Inkrementiert nur diese Instanz
+                                            des Abschnittszählers. */
+  content: counters(section,".") " ";    /* Fügt den Wert aller Instanzen
+                                            des Abschnittszählers durch "."
+                                            getrennt hinzu. */
+                                         /* Falls < IE8 unterstützt werden soll,
+                                            sollte sichergestellt werden, dass
+                                            kein Leerzeichen nach dem ',' steht. */
+}
+

+
+
Kombiniert mit dem folgenden HTML:

+
+
<ol>
+  <li>Eintrag</li>          <!-- 1     -->
+  <li>Eintrag               <!-- 2     -->
+    <ol>
+      <li>Eintrag</li>      <!-- 2.1   -->
+      <li>Eintrag</li>      <!-- 2.2   -->
+      <li>Eintrag           <!-- 2.3   -->
+        <ol>
+          <li>Eintrag</li>  <!-- 2.3.1 -->
+          <li>Eintrag</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>Eintrag</li>  <!-- 2.3.1 -->
+          <li>Eintrag</li>  <!-- 2.3.2 -->
+          <li>Eintrag</li>  <!-- 2.3.3 -->
+        </ol>
+      </li>
+      <li>Eintrag</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>Eintrag</li>          <!-- 3     -->
+  <li>Eintrag</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>Eintrag</li>          <!-- 1     -->
+  <li>Eintrag</li>          <!-- 2     -->
+</ol>

+
+
Erzeugt dieses Ergebnis:

+
+
{{EmbedLiveSample("Zähler_verschachteln", 250, 350)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS2.1", "generate.html#generate.html#counters", "counter-reset")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("counter-reset")}}
    • 
+ 
  • {{cssxref("counter-increment")}}
    • 
+

+
+
Es gibt ein zusätzliches Beispiel unter http://www.mezzoblue.com/archives/20.../counter_intu/. Dieser Blogeintrag wurde am 01.11.2006 veröffentlicht, sollte jedoch noch zutreffen.

diff --git a/files/de/web/css/css_lists_and_counters/index.html b/files/de/web/css/css_lists_and_counters/index.html
new file mode 100644
index 0000000000..e616ac7735
--- /dev/null
+++ b/files/de/web/css/css_lists_and_counters/index.html
@@ -0,0 +1,132 @@
+---
+title: CSS Lists and Counters
+slug: Web/CSS/CSS_Lists_and_Counters
+tags:
+  - CSS
+  - CSS Listen und Zähler
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Lists_and_Counters
+---
+
{{CSSRef}}

+
+
CSS Lists and Counters ist ein CSS Modul, das definiert, wie Listen dargestellt werden, wie Aufzählungspunkte gestylt werden können und wie Autoren neue Zähler erstellen können.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("list-style-image")}}
    • 
+ 
  • {{cssxref("list-style-type")}}
    • 
+ 
  • {{cssxref("list-style-position")}}
    • 
+ 
  • {{cssxref("list-style")}}
    • 
+ 
  • {{cssxref("counter-reset")}}
    • 
+ 
  • {{cssxref("counter-increment")}}
    • 
+

+

+
+
@-Regeln

+
+

+ 
{{cssxref("@counter-style")}}

+ 

+ 

+ 
    
+  
  • {{cssxref("@counter-style/system","system")}}
    • 
+  
  • {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
    • 
+  
  • {{cssxref("@counter-style/negative", "negative")}}
    • 
+  
  • {{cssxref("@counter-style/prefix", "prefix")}}
    • 
+  
  • {{cssxref("@counter-style/suffix", "suffix")}}
    • 
+  
  • {{cssxref("@counter-style/range", "range")}}
    • 
+  
  • {{cssxref("@counter-style/pad", "pad")}}
    • 
+  
  • {{cssxref("@counter-style/speak-as", "speak-as")}}
    • 
+  
  • {{cssxref("@counter-style/fallback", "fallback")}}
    • 
+ 

+ 

+ 

+

+
+
Anleitungen

+
+

+ 
Konsistente Listeneinrückung

+ 
Erklärt, wie eine konsistente Einrückung zwischen verschiedenen Browsern erreicht werden kann.

+ 
CSS Zähler verwenden

+ 
Beschreibt, wie Zähler verwendet werden, um Aufzählungen außerhalb der traditionellen Listenelemente verwenden zu können oder um komplexe Zählungen durchzuführen.

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Lists')}}{{Spec2('CSS3 Lists')}} 
{{SpecName('CSS2.1', 'generate.html')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

diff --git "a/files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html" "b/files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html"
new file mode 100644
index 0000000000..b2309f5e82
--- /dev/null
+++ "b/files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html"
@@ -0,0 +1,104 @@
+---
+title: Konsistente Listeneinrückung
+slug: Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung
+tags:
+  - Anleitung
+  - CSS
+  - Intermediate
+  - NeedsUpdate
+translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
+---
+
{{CSSRef}}

+
+
Eine der häufigsten Stiländerungen, die auf Listen angewendet werden, ist eine Änderung der Einrückungsweite — d. h. wie weit die Listeneinträge nach rechts verschoben sind. Dies führt oft zu Frustration, da das, was in einem Browser funktioniert, in einem anderen oft nicht denselben Effekt hat. Wenn zum Beispiel angegeben wird, dass Listen keinen linken Außenabstand haben, verschieben sie sich im Internet Explorer, bleiben jedoch hartnäckig am selben Platz in Gecko-basierten Browsern. Dieser Artikel hilft, die Probleme zu verstehen, die auftreten können, und wie man diese verhindert.

+
+
Um zu verstehen, warum dies der Fall ist, und noch wichtiger, wie das Problem generell vermieden werden kann, ist es notwendig, die Details der Listenerstellung zu untersuchen.

+
+
Eine Liste erstellen

+
+
Zunächst betrachten wir einen einzelnen Listeneintrag. Dieser Listeneintrag hat kein Aufzählungszeichen (auch bekannt als "Bullet") und ist noch nicht Teil einer Liste. Er hängt allein in der Leere, schlicht und einfach, wie in Abbildung 1 gezeigt.

+
+
Abbildung 1

+
+
Der gepunktete rote Rahmen repräsentiert die äußeren Ränder des Inhaltsbereichs des Listeneintrags. Erinnere dich, dass der Listeneintrag zu diesem Zeitpunkt weder einen Innenabstand noch Ränder besitzt. Falls wir zwei oder mehr Listeneinträge hinzufügen, erhalten wir als Ergebnis etwas wie in Abbildung 2.

+
+
Abbildung 2

+
+
Jetzt umschließen wir diese durch ein Elternelement; in diesem Fall, umschließen wir sie durch eine ungeordnete Liste (d. h. <ul>). Laut dem CSS Boxmodell müssen die Boxen von Listeneinträgen innerhalb des Inhaltsbereichs des Elternelements dargestellt werden. Da das Elternelement aktuell weder Innen- noch Außenabstände hat, erhalten wir als Ergebnis das in Abbildung 3 Gezeigte.

+
+
Abbildung 3

+
+
Hier zeigt uns der gepunktete blaue Rahmen die Ränder des Inhaltsbereichs des <ul> Elements. Da wir keinen Innenabstand für das <ul> Element haben, umschließt sein Inhalt die drei Listeneinträge passend.

+
+
Nun fügen wir Listenaufzählungszeichen hinzu. Da es sich hierbei um eine ungeordnete Liste handelt, fügen wir gewöhnliche gefüllte Kreis-"Bullets" hinzu, wie in Abbildung 4 dargestellt.

+
+
Abbildung 4

+
+
Visuell sind die Aufzählungszeichen außerhalb des Inhaltsbereichs des <ul>, jedoch spielt dies hier keine Rolle. Der Hauptpunkt ist, dass die Aufzählungszeichen außerhalb der "Hauptbox" des <li> Elements platziert sind, nicht des <ul>. Sie sind sozusagen Anhängsel der Listeneinträge, die außerhalb des Inhaltsbereichs des <li> liegen, jedoch trotzdem am <li> hängen.

+
+
Dies ist der Grund, warum in allen Browsern außer dem Internet Explorer für Windows die Aufzählungszeichen außerhalb der Rahmen eines <li> Elements liegen, vorausgesetzt, der Wert von list-style-position ist outside. Falls er zu inside geändert wird, werden die Aufzählungszeichen innerhalb des Inhalts des <li>s gezogen, obwohl sie eine Inlinebox sind, die am Anfang des <li> platziert ist.

+
+
Doppelt einrücken

+
+
Wie wird all dies nun im Dokument dargestellt? Im Moment haben wir eine Situation analog zu diesen Stilen:

+
+
ul, li {margin-left: 0; padding-left: 0;}

+
+
Falls diese Liste so wie sie ist in ein Dokument eingebunden würde, gäbe es keine sichtbare Einrückung und die Aufzählungszeichen liefen Gefahr, am linken Rand des Browserfensters herauszufallen.

+
+
Um dies zu vermeiden und eine Einrückung zu erhalten, gibt es nur drei Möglichkeiten für Browserhersteller.

+
+
    
+ 
  1. Gib jedem <li> Element einen linken Außenabstand.
    2. 
+ 
  2. Gib dem <ul> Element einen linken Außenabstand.
    3. 
+ 
  3. Gib dem <ul> Element einen linken Innenabstand.
    4. 
+

+
+
Wie sich herausstellt, hat niemand auf die erste Option zurückgegriffen. Die zweite Option wurde von Internet Explorer für Windows und Macintosh und Opera gewählt. Die dritte wird von Gecko und allen darauf basierenden Browsern verwendet.

+
+
Lass uns die beiden Herangehensweisen genauer betrachten. Im Internet Explorer und Opera werden die Listen durch das Setzen eines linken Außenabstands von 40 Pixeln für das <ul> Element gesetzt. Falls wir dem <ul> Element eine Hintergrundfarbe zuweisen und die Rahmen der Listeneinträge und <ul> unverändert lassen, erhalten wir das Ergebnis, das in Abbildung 5 gezeigt wird.

+
+
Abbildung 5

+
+
Im Gegensatz dazu setzt Gecko einen linken Innenabstand von 40 Pixeln für das <ul> Element. Werden die exakt gleichen Stile benutzt, die zur Erzeugung von Abbildung 5 verwendet wurden, erhalten wir beim Laden des Beispiels in Gecko-basierten Browsern Abbildung 6.

+
+
Abbildung 6

+
+
Wie wir sehen können, bleiben die Aufzählungszeichen an den <li> Elementen hängen, unabhängig davon, wo sie sind. Der Unterschied liegt ausschließlich in der Darstellung des <ul>. Wir können den Unterschied nur sehen, wenn wir versuchen, einen Hintergrund oder einen Rahmen für das <ul> Element zu setzen.

+
+
Konsistenz finden

+
+
Zusammenfassend kann man sagen: Falls eine konsistente Darstellung von Listen zwischen Gecko, Internet Explorer und Opera gewünscht ist, müssen beide linken Abstände des <ul> Elements gesetzt werden, Innen- und Außenabstand. Wir können <li> für diesen Zweck komplett ignorieren. Zur Erstellung der Standardanzeige in Netscape 6.x schreibt man folgendes:

+
+
ul {margin-left: 0; padding-left: 40px;}

+
+
Falls lieber das Internet Explorer/Opera Modell gewünscht ist, dann:

+
+
ul {margin-left: 40px; padding-left: 0;}

+
+
Natürlich können die eigenen bevorzugten Werte angegeben werden. Wenn gewünscht, können beide auf 1.25em gesetzt werden -- es gibt keinen Grund, bei pixelbasierter Einrückung zu bleiben. Falls Listen zurückgesetzt werden sollen, sodass sie keine Einrückung haben, müssen sowohl Innen- als auch Außenabstand auf null gesetzt werden:

+
+
ul {margin-left: 0; padding-left: 0;}

+
+
Beachte hierbei jedoch, dass dadurch die Bullets außerhalb der Liste und deren Elternelement hängen. Falls das Elternelement das body Element ist, sind die Bullets höchstwahrscheinlich außerhalb des Browserfensters, und sind daher nicht sichtbar.

+
+
Zusammenfassung

+
+
Am Ende sehen wir, dass keiner der in diesem Artikel genannten Browser Listen richtig oder falsch darstellt. Sie verwenden verschiedene Standardstile und dadurch entstehen die Probleme. Wenn sichergestellt wird, dass sowohl linker Innen- als auch Außenabstand gesetzt sind, kann wesentlich größere browserübergreifende Konsistenz bei der Einrückung von Listen erzielt werden.

+
+
Empfehlungen

+
+
    
+ 
  • Wenn die Einrückung von Listen geändert werden soll, stelle sicher, dass Innen- und Außenabstand gesetzt sind.
    • 
+

+
+

+
Originaldokumentinformation

+
+
    
+ 
  • Autor(en): Eric A. Meyer, Netscape Communications
    • 
+ 
  • Zuletzt aktualisiert: Published 30 Aug 2002
    • 
+ 
  • Copyright Information: Copyright © 2001-2003 Netscape. Alle Rechte vorbehalten.
    • 
+ 
  • Hinweis: Dieser nachgedruckte Artikel war ursprünglich Teil der DevEdge Seite.
    • 
+

+

diff --git a/files/de/web/css/css_logical_properties/index.html b/files/de/web/css/css_logical_properties/index.html
new file mode 100644
index 0000000000..108ab187ac
--- /dev/null
+++ b/files/de/web/css/css_logical_properties/index.html
@@ -0,0 +1,129 @@
+---
+title: CSS Logical Properties
+slug: Web/CSS/CSS_Logical_Properties
+tags:
+  - CSS
+  - CSS Logische Eigenschaften
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Logical_Properties
+---
+
{{CSSRef}}

+
+
CSS Logical Properties ist ein CSS Modul, das logische Eigenschaften definiert, die auf physische Eigenschaften gemappt werden, um das Layout zu kontrollieren.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("block-size")}}
    • 
+ 
  • {{cssxref("border-block-end")}}
    • 
+ 
  • {{cssxref("border-block-end-color")}}
    • 
+ 
  • {{cssxref("border-block-end-style")}}
    • 
+ 
  • {{cssxref("border-block-end-width")}}
    • 
+ 
  • {{cssxref("border-block-start")}}
    • 
+ 
  • {{cssxref("border-block-start-color")}}
    • 
+ 
  • {{cssxref("border-block-start-style")}}
    • 
+ 
  • {{cssxref("border-block-start-width")}}
    • 
+ 
  • {{cssxref("border-inline-end")}}
    • 
+ 
  • {{cssxref("border-inline-end-color")}}
    • 
+ 
  • {{cssxref("border-inline-end-style")}}
    • 
+ 
  • {{cssxref("border-inline-end-width")}}
    • 
+ 
  • {{cssxref("border-inline-start")}}
    • 
+ 
  • {{cssxref("border-inline-start-color")}}
    • 
+ 
  • {{cssxref("border-inline-start-style")}}
    • 
+ 
  • {{cssxref("border-inline-start-width")}}
    • 
+ 
  • {{cssxref("inline-size")}}
    • 
+ 
  • {{cssxref("margin-block-end")}}
    • 
+ 
  • {{cssxref("margin-block-start")}}
    • 
+ 
  • {{cssxref("margin-inline-end")}}
    • 
+ 
  • {{cssxref("margin-inline-start")}}
    • 
+ 
  • {{cssxref("max-block-size")}}
    • 
+ 
  • {{cssxref("max-inline-size")}}
    • 
+ 
  • {{cssxref("min-block-size")}}
    • 
+ 
  • {{cssxref("min-inline-size")}}
    • 
+ 
  • {{cssxref("offset-block-end")}}
    • 
+ 
  • {{cssxref("offset-block-start")}}
    • 
+ 
  • {{cssxref("offset-inline-end")}}
    • 
+ 
  • {{cssxref("offset-inline-start")}}
    • 
+ 
  • {{cssxref("padding-block-end")}}
    • 
+ 
  • {{cssxref("padding-block-start")}}
    • 
+ 
  • {{cssxref("padding-inline-end")}}
    • 
+ 
  • {{cssxref("padding-inline-start")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}Ursprüngliche Defintion

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("41.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoMobile("41.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

diff --git a/files/de/web/css/css_masken/index.html b/files/de/web/css/css_masken/index.html
new file mode 100644
index 0000000000..74001bd680
--- /dev/null
+++ b/files/de/web/css/css_masken/index.html
@@ -0,0 +1,55 @@
+---
+title: CSS Masken
+slug: Web/CSS/CSS_Masken
+tags:
+  - CSS
+  - CSS Masken
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Masking
+---
+
{{CSSRef}}

+
+
CSS Masken ist ein CSS Modul, das Mittel wie Maskierung und Clipping zum teilweisen oder kompletten Verstecken von Teilen visueller Elemente definiert.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("mask")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS Masks")}}{{Spec2("CSS Masks")}} 
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.mask")}}
diff --git "a/files/de/web/css/css_namensr\303\244ume/index.html" "b/files/de/web/css/css_namensr\303\244ume/index.html"
new file mode 100644
index 0000000000..e9d0879cb2
--- /dev/null
+++ "b/files/de/web/css/css_namensr\303\244ume/index.html"
@@ -0,0 +1,51 @@
+---
+title: CSS Namensräume
+slug: Web/CSS/CSS_Namensräume
+tags:
+  - CSS
+  - CSS Namensräume
+  - Referenz
+  - Web
+  - Übersicht
+translation_of: Web/CSS/CSS_Namespaces
+---
+
{{CSSRef}}

+
+
CSS Namensräume ist ein CSS Modul, das es Authoren erlaubt, XML Namensräume in CSS anzugeben.

+
+
Referenz

+
+
@-Regeln

+
+

+
    
+ 
  • {{cssxref("@namespace")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS3 Namespaces")}}{{Spec2("CSS3 Namespaces")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.at-rules.namespace")}}
diff --git a/files/de/web/css/css_positioning/index.html b/files/de/web/css/css_positioning/index.html
new file mode 100644
index 0000000000..0a9020dd54
--- /dev/null
+++ b/files/de/web/css/css_positioning/index.html
@@ -0,0 +1,64 @@
+---
+title: CSS Positioned Layout
+slug: Web/CSS/CSS_Positioning
+tags:
+  - CSS
+  - CSS Positioning
+  - Guide
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Positioning
+---
+
{{CSSRef}}

+
+
CSS Positioned Layout is a module of CSS that defines how to position elements on the page.

+
+
Reference

+
+
CSS properties

+
+

+
    
+ 
  • {{cssxref("bottom")}}
    • 
+ 
  • {{cssxref("clear")}}
    • 
+ 
  • {{cssxref("float")}}
    • 
+ 
  • {{cssxref("left")}}
    • 
+ 
  • {{cssxref("position")}}
    • 
+ 
  • {{cssxref("right")}}
    • 
+ 
  • {{cssxref("top")}}
    • 
+ 
  • {{cssxref("z-index")}}
    • 
+

+

+
+
Guides

+
+

+ 
Understanding CSS z-index

+ 
Presents the notion of stacking context and explains how z-ordering works, with several examples.

+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }}
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }}

diff --git a/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
new file mode 100644
index 0000000000..ff78bd192a
--- /dev/null
+++ b/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
@@ -0,0 +1,161 @@
+---
+title: Using z-index
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+tags:
+  - CSS
+  - Referenz
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+---
+
{{cssref}}

+
+
The first part of this article, Stacking without the z-index property, explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the {{cssxref("z-index")}} property on a positioned element.

+
+
The z-index property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis. If you are not familiar with the z-axis, imagine the page as a stack of layers, each one having a number. Layers are rendered in numerical order, with larger numbers above smaller numbers.

+
+
    
+ 
  • bottom layer (farthest from the observer)
    • 
+ 
  • ...
    • 
+ 
  • Layer -3
    • 
+ 
  • Layer -2
    • 
+ 
  • Layer -1
    • 
+ 
  • Layer 0 (default rendering layer)
    • 
+ 
  • Layer 1
    • 
+ 
  • Layer 2
    • 
+ 
  • Layer 3
    • 
+ 
  • ...
    • 
+ 
  • top layer (closest to the observer)
    • 
+

+
+

+
Notes:

+
+
    
+ 
  • When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).
    • 
+ 
  • If several elements share the same z-index value (i.e., they are placed on the same layer), stacking rules explained in the section Stacking without the z-index property apply.
    • 
+

+

+
+
In the following example, the layers' stacking order is rearranged using z-index. The z-index of element #5 has no effect since it is not a positioned element.

+
+
{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}

+
+
Beispiel

+
+
HTML

+
+
<div id="abs1">
+  <b>DIV #1</b>
+  <br />position: absolute;
+  <br />z-index: 5;
+</div>
+
+<div id="rel1">
+  <b>DIV #2</b>
+  <br />position: relative;
+  <br />z-index: 3;
+</div>
+
+<div id="rel2">
+  <b>DIV #3</b>
+  <br />position: relative;
+  <br />z-index: 2;
+</div>
+
+<div id="abs2">
+  <b>DIV #4</b>
+  <br />position: absolute;
+  <br />z-index: 1;
+</div>
+
+<div id="sta1">
+  <b>DIV #5</b>
+  <br />no positioning
+  <br />z-index: 8;
+</div>
+

+
+
CSS

+
+
div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+

+
+
Siehe auch

+
+
+
+

+
Original Document Information

+
+
+

diff --git a/files/de/web/css/css_positioning/understanding_z_index/index.html b/files/de/web/css/css_positioning/understanding_z_index/index.html
new file mode 100644
index 0000000000..7f44be02c9
--- /dev/null
+++ b/files/de/web/css/css_positioning/understanding_z_index/index.html
@@ -0,0 +1,51 @@
+---
+title: Understanding CSS z-index
+slug: Web/CSS/CSS_Positioning/Understanding_z_index
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Understanding_CSS_z-index
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+
{{cssref}}

+
+
In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.

+
+

+
In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.

+

+
+
(from CSS 2.1 Section 9.9.1 - Layered presentation)

+
+
This means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS z-index property.

+
+
Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification CSS-2.1 Appendix E to explain these rules better.

+
+
This article will try to explain those rules, with some simplification and several examples.

+
+
    
+ 
  1. Stacking without the z-index property: The stacking rules that apply when z-index is not used.
    2. 
+ 
  2. Stacking with floated blocks: How floating elements are handled with stacking.
    3. 
+ 
  3. Using z-index: How to use z-index to change default stacking.
    4. 
+ 
  4. The stacking context: Notes on the stacking context.
    5. 
+ 
  5. Stacking context example 1: 2-level HTML hierarchy, z-index on the last level
    6. 
+ 
  6. Stacking context example 2: 2-level HTML hierarchy, z-index on all levels
    7. 
+ 
  7. Stacking context example 3: 3-level HTML hierarchy, z-index on the second level
    8. 
+

+
+

+
Original Document Information

+
+
+
+
Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.

+

diff --git a/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
new file mode 100644
index 0000000000..d814b294cf
--- /dev/null
+++ b/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
@@ -0,0 +1,243 @@
+---
+title: The stacking context
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+tags:
+  - CSS
+  - CSS Positionierung
+  - Position
+  - Referenz
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+---
+
{{cssref}}

+
+
Der Stapelungszusammenhang ist eine dreidimensionale Konzeptualisierung von HTML-Elementen entlang einer imaginären z-Achse relativ zum Benutzer, von dem angenommen wird, dass er dem Ansichtsfenster oder der Webseite zugewandt ist. HTML-Elemente füllen diesen Raum in Prioritätsreihenfolge auf der Grundlage von Elementattributen aus.

+
+
Der Stapelungszusammenhang

+
+
Im vorherigen Teil dieses Artikels, die Verwendung von z-index, wird die Darstellungsreihenfolge bestimmter Elemente durch ihren z-index Wert beeinflusst. Dies ist darauf zurückzuführen, dass diese Elemente spezielle Eigenschaften haben, die dazu führen, dass sie einen Stapelungszusammenhang bilden.

+
+
Ein Stapelungszusammenhang wird an beliebiger Stelle im Dokument durch ein beliebiges Element in den folgenden Szenarien gebildet:

+
+
    
+ 
  • Root Element des Dokumentes (<html>).
    • 
+ 
  • Ein Element mit einem {{cssxref("position")}} Wert absolute oder relative und einem {{cssxref("z-index")}} Wert anders als auto.
    • 
+ 
  • Ein Element mit einem {{cssxref("position")}} Wert fixed oder sticky (sticky für alle mobilen Browser, aber nicht für ältere Desktops).
    • 
+ 
  • Ein Element das als Kind eines Flex-Container ({{cssxref("flexbox")}}), mit einem {{cssxref("z-index")}} Wert anders als auto.
    • 
+ 
  • Ein Element das als Kind eines Grid-Container ({{cssxref("grid")}}), mit einem {{cssxref("z-index")}} Wert anders als auto.
    • 
+ 
  • Ein Element mit einem {{cssxref("opacity")}} Wert unter 1 (siehe auch die Spezifikation für opacity).
    • 
+ 
  • Ein Element mit einem {{cssxref("mix-blend-mode")}} Wert anders als normal.
    • 
+ 
  • Element with any of the following properties with Wert anders als none:
+  
      
+   
    • {{cssxref("transform")}}
      • 
+   
    • {{cssxref("filter")}}
      • 
+   
    • {{cssxref("perspective")}}
      • 
+   
    • {{cssxref("clip-path")}}
      • 
+   
    • {{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}
      • 
+  
    
+ 
    • 
+ 
  • Ein Element mit einem {{cssxref("isolation")}} Wert isolate.
    • 
+ 
  • Ein Element mit einem {{cssxref("-webkit-overflow-scrolling")}} Wert touch.
    • 
+ 
  • Ein Element mit einem {{cssxref("will-change")}} Wert, der irgendeine Eigenschaft angibt, die einen Stapelkontext auf einem nicht initialen Wert erzeugen würde (siehe auch this post).
    • 
+ 
  • Ein Element mit einem {{cssxref("contain")}} Wert layout oder paint oder einen zusammengesetzten Wert, der einen von beiden enthält (d.h. contain: strict, contain: content).
    • 
+

+
+
Innerhalb eines Stapelungszusammenhang werden die untergeordneten Elemente nach den gleichen Regeln gestapelt, die zuvor erläutert wurden. Wichtig ist, dass die z-index Werte der untergeordneten Stapelungszusammenhänge nur in diesem übergeordneten Kontext eine Bedeutung haben. Stapelungszusammenhänge werden im übergeordneten Stapelungszusammenhang atomar als eine einzige Einheit behandelt.

+
+
Zusammengefasst:

+
+
    
+ 
  • Stapelungszusammenhänge können in anderen Stapelungszusammenhängen enthalten sein und zusammen eine Hierarchie von Stapelungszusammenhängen bilden.
    • 
+ 
  • Jeder Stapelungszusammenhang ist völlig unabhängig von seinen Geschwistern: Bei der Verarbeitung des Stapels werden nur nachkommende Elemente berücksichtigt.
    • 
+ 
  • Jeder Stapelungszusammenhang ist in sich geschlossen: Nachdem der Inhalt des Elements gestapelt wurde, wird das gesamte Element in der Stapelreihenfolge des übergeordneten Stapelungszusammenhanges betrachtet.
    • 
+

+
+
Hinweis: Die Hierarchie der Stapelungszusammenhänge ist eine Teilmenge der Hierarchie der HTML-Elemente, da nur bestimmte Elemente Stapelungszusammenhänge erzeugen. Man kann sagen, dass Elemente, die keinen eigenen Stapelungszusammenhang bilden, vom übergeordneten Stapelungszusammenhang assimiliert werden.

+
+
Das Beispiel

+
+
Example of stacking rules modified using z-index

+
+
In diesem Beispiel erzeugt jedes positionierte Element aufgrund seiner Positionierung und seiner z-index -Werte einen eigenen Stapelungszusammenhang. Die Hierarchie der Stapelungszusammenhang ist wie folgt organisiert:

+
+
    
+ 
  • Root
+  
      
+   
    • DIV #1
      • 
+   
    • DIV #2
      • 
+   
    • DIV #3
+    
        
+     
      • DIV #4
        • 
+     
      • DIV #5
        • 
+     
      • DIV #6
        • 
+    
      
+   
      • 
+  
    
+ 
    • 
+

+
+
Es ist wichtig zu beachten, dass DIV #4, DIV #5 und DIV #6 Kinder von DIV #3 sind, so dass das Stapeln dieser Elemente innerhalb von DIV #3 vollständig aufgelöst wird. Sobald das Stapeln und Rendern innerhalb von DIV #3 abgeschlossen ist, wird das gesamte DIV #3-Element für das Stapeln im Wurzelelement in Bezug auf das DIV seines Geschwisters übergeben.

+
+

+
Notes:

+
+
    
+ 
  • DIV #4 wird unter DIV #1 gerendert, weil der z-Index (5) von DIV #1 innerhalb des Stapelungszusammenhanges des Wurzelelementes gültig ist, während der z-Index (6) von DIV #4 innerhalb des Stapelungszusammenhanges von DIV #3 gültig ist. DIV #4 ist also unter DIV #1, weil DIV #4 zu DIV #3 gehört, das einen niedrigeren z-Indexwert hat.
    • 
+ 
  • Aus dem gleichen Grund wird DIV #2 (z-Index 2) unter DIV#5 (z-Index 1) gerendert, weil DIV #5 zu DIV #3 gehört, das einen höheren z-Index-Wert hat.
    • 
+ 
  • Der z-Index von DIV #3 ist 4, aber dieser Wert ist unabhängig vom z-Index von DIV #4, DIV #5 und DIV #6, da er zu einem anderen Stapelungszusammenhang gehört.
    • 
+ 
  • 
+  
    Eine einfache Möglichkeit, die Rendering-Reihenfolge von gestapelten Elementen entlang der Z-Achse herauszufinden, besteht darin, sie sich als eine Art "Versionsnummer" vorzustellen, wobei untergeordnete Elemente Minor-Versionsnummern unter den Major-Versionsnummern ihrer übergeordneten Elemente sind. Auf diese Weise können wir leicht erkennen, wie ein Element mit einem z-Index von 1 (DIV #5) über einem Element mit einem z-Index von 2 (DIV #2) gestapelt wird, und wie ein Element mit einem z-Index von 6 (DIV #4) unter einem Element mit einem z-Index von 5 (DIV #1) gestapelt wird. In unserem Beispiel (sortiert nach der endgültigen Rendering-Reihenfolge):
    
+
+  
      
+   
    • Root
+    
        
+     
      • DIV #2 - z-index is 2
        • 
+     
      • DIV #3 - z-index is 4
+      
          
+       
        • DIV #5 - z-index ist 1, gestapelt unter einem Element mit einem z-Index von 4, was eine Rendering-Reihenfolge von 4,1 ergibt
          • 
+       
        • DIV #6 - z-index ist 3, gestapelt unter einem Element mit einem z-Index von 4, was eine Rendering-Reihenfolge von 4,3 ergibt
          • 
+       
        • DIV #4 - z-index ist 6, gestapelt unter einem Element mit einem z-Index von 4, was zu einer Rendering-Reihenfolge von 4,6 führt
          • 
+      
        
+     
        • 
+     
      • DIV #1 - z-index is 5
        • 
+    
      
+   
      • 
+  
    
+ 
    • 
+

+

+
+
Beispiel

+
+
HTML

+
+
<div id="div1">
+  <h1>Division Element #1</h1>
+  <code>position: relative;<br/>
+  z-index: 5;</code>
+</div>
+
+<div id="div2">
+  <h1>Division Element #2</h1>
+  <code>position: relative;<br/>
+  z-index: 2;</code>
+</div>
+
+<div id="div3">
+  <div id="div4">
+    <h1>Division Element #4</h1>
+    <code>position: relative;<br/>
+    z-index: 6;</code>
+  </div>
+
+  <h1>Division Element #3</h1>
+  <code>position: absolute;<br/>
+  z-index: 4;</code>
+
+  <div id="div5">
+    <h1>Division Element #5</h1>
+    <code>position: relative;<br/>
+    z-index: 1;</code>
+  </div>
+
+  <div id="div6">
+    <h1>Division Element #6</h1>
+    <code>position: absolute;<br/>
+    z-index: 3;</code>
+  </div>
+</div>
+

+
+
CSS

+
+
* {
+  margin: 0;
+}
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+div {
+  opacity: 0.7;
+  position: relative;
+}
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+#div1,
+#div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+#div2 {
+  z-index: 2;
+}
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: center;
+}

+
+
Ergebnis

+
+
{{ EmbedLiveSample('Example', '100%', '396') }}

+
+
Siehe auch

+
+
+
+

+
Original Document Information

+
+
+

diff --git a/files/de/web/css/css_referenz/index.html b/files/de/web/css/css_referenz/index.html
new file mode 100644
index 0000000000..89a0c83e25
--- /dev/null
+++ b/files/de/web/css/css_referenz/index.html
@@ -0,0 +1,211 @@
+---
+title: CSS Referenz
+slug: Web/CSS/CSS_Referenz
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/Reference
+---
+
{{CSSRef}}

+
+
Verwende diese CSS-Referenz für einen alphabetischen Index aller Standard-CSS-Eigenschaften, Pseudoklassen, Pseudoelemente, Datentypen und @-Regeln. Du kannst eine Liste aller Selektoren und eine Liste aller Konzepte ansehen. Dies beinhaltet auch eine kurze Referenz zu DOM-CSS / CSSOM.

+
+
Grundlegende Syntax von Regeln

+
+
Syntax von Stilregeln

+
+
selektorliste {
+  eigenschaft: wert;
+  [weitere eigenschaft:wert; Paare]
+}
+
+... wobei selektorliste: selektor[:pseudo-klasse] [::pseudo-element] [, weitere selektorlisten]
+
+Siehe Listen aller Selektoren, Pseudo-Klassen und Pseudo-Elemente weiter unten.
+

+
+
Beispiele für Stilregeln

+
+

+strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+

+
+
Für eine Einführung in die Syntax von CSS-Selektoren auf Anfängerstufe, siehe diese Anleitung. Beachte, dass jeder CSS-Syntax-Fehler in einer Regeldefinition die gesamte Regel ungültig macht. Ungültige Regeln werden vom Browser ignoriert. Beachte dass CSS-Regeldefinitionen vollständig (ASCII) text-basiert sind, wohingegegen DOM-CSS / CSSOM (das Regel-Verwaltungssystem) objekt-basiert ist.

+
+
Syntax von @-Regeln

+
+
Da die Struktur von @-Regeln stark variiert, schaue bitte bei @-Regel nach, um die Syntax der gewünschten Regel herauszufinden.

+
+
Index

+
+

+
Hinweis: Die Bezeichnungen der Eigenschaften enthalten nicht die JavaScript-Namen, wenn sie sich von den CSS-Standardbezeichnern unterscheiden.

+

+
+
{{CSS_Ref}}

+
+
Selektoren

+
+
Einfache Selektoren

+
+
+
+
Kombinatoren

+
+
+
+
Pseudoklassen

+
+

+
    
+ 
  • {{ Cssxref(":active") }}
    • 
+ 
  • {{cssxref(':any')}}
    • 
+ 
  • {{cssxref(':any-link')}}
    • 
+ 
  • {{ Cssxref(":checked") }}
    • 
+ 
  • {{ Cssxref(":default") }}
    • 
+ 
  • {{ Cssxref(":defined") }}
    • 
+ 
  • {{ Cssxref(":dir", ":dir()")}}
    • 
+ 
  • {{ Cssxref(":disabled") }}
    • 
+ 
  • {{ Cssxref(":empty") }}
    • 
+ 
  • {{ Cssxref(":enabled") }}
    • 
+ 
  • {{ Cssxref(":first") }}
    • 
+ 
  • {{ Cssxref(":first-child") }}
    • 
+ 
  • {{ Cssxref(":first-of-type") }}
    • 
+ 
  • {{ Cssxref(":fullscreen") }}
    • 
+ 
  • {{ Cssxref(":focus") }}
    • 
+ 
  • {{ Cssxref(":focus-visible") }}
    • 
+ 
  • {{ Cssxref(":host") }}
    • 
+ 
  • {{ Cssxref(":host()") }}
    • 
+ 
  • {{ Cssxref(":host-context()") }}
    • 
+ 
  • {{ Cssxref(":hover") }}
    • 
+ 
  • {{ Cssxref(":indeterminate") }}
    • 
+ 
  • {{ Cssxref(":in-range") }}
    • 
+ 
  • {{ Cssxref(":invalid") }}
    • 
+ 
  • {{ Cssxref(":lang", ":lang()") }}
    • 
+ 
  • {{ Cssxref(":last-child") }}
    • 
+ 
  • {{ Cssxref(":last-of-type") }}
    • 
+ 
  • {{ Cssxref(":left") }}
    • 
+ 
  • {{ Cssxref(":link") }}
    • 
+ 
  • {{ Cssxref(":not", ":not()") }}
    • 
+ 
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • 
+ 
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • 
+ 
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • 
+ 
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • 
+ 
  • {{ Cssxref(":only-child") }}
    • 
+ 
  • {{ Cssxref(":only-of-type") }}
    • 
+ 
  • {{ Cssxref(":optional") }}
    • 
+ 
  • {{ Cssxref(":out-of-range") }}
    • 
+ 
  • {{ Cssxref(":read-only") }}
    • 
+ 
  • {{ Cssxref(":read-write") }}
    • 
+ 
  • {{ Cssxref(":required") }}
    • 
+ 
  • {{ Cssxref(":right") }}
    • 
+ 
  • {{ Cssxref(":root") }}
    • 
+ 
  • {{ Cssxref(":scope") }}
    • 
+ 
  • {{ Cssxref(":target") }}
    • 
+ 
  • {{ Cssxref(":valid") }}
    • 
+ 
  • {{ Cssxref(":visited") }}
    • 
+

+

+
+
Pseudoelemente

+
+

+
    
+ 
  • {{ Cssxref("::after") }}
    • 
+ 
  • {{ Cssxref("::backdrop") }}
    • 
+ 
  • {{ Cssxref("::before") }}
    • 
+ 
  • {{ Cssxref("::cue") }}
    • 
+ 
  • {{ Cssxref("::first-letter") }}
    • 
+ 
  • {{ Cssxref("::first-line") }}
    • 
+ 
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • 
+ 
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • 
+ 
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • 
+ 
  • {{ Cssxref("::selection") }}
    • 
+ 
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • 
+

+

+
+

+
Siehe auch: Eine vollständige Liste der Selektoren in der Selectors Level 3 Spezifikation.

+

+
+
Konzepte

+
+
Syntax & Semantik

+
+
+
+
Werte

+
+
+
+
Layout

+
+
+
+
DOM-CSS / CSSOM

+
+
Wichtigste Objekttypen

+
+
+
+
Wichtige Methoden

+
+
    
+ 
  • {{domxref("CSSStyleSheet.insertRule")}}
    • 
+ 
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • 
+

diff --git a/files/de/web/css/css_ruby/index.html b/files/de/web/css/css_ruby/index.html
new file mode 100644
index 0000000000..f2aaf73a9f
--- /dev/null
+++ b/files/de/web/css/css_ruby/index.html
@@ -0,0 +1,97 @@
+---
+title: CSS Ruby
+slug: Web/CSS/CSS_Ruby
+tags:
+  - CSS
+  - CSS Ruby
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Ruby
+---
+
{{CSSRef}}

+
+
CSS Ruby ist ein CSS Modul, das das Darstellungsmodell und die Formatierungssteuerung zur Anzeige von Ruby Anmerkungen bietet, eine Form von zwischenzeiligen Anmerkungen, kurze Texte entlang des Basistexts.

+
+
Referenz

+
+
CSS Eigenschaften

+
+

+
    
+ 
  • {{cssxref("ruby-align")}}
    • 
+ 
  • {{cssxref("ruby-position")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Ruby')}}{{Spec2('CSS3 Ruby')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop(38)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoMobile(38)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

diff --git a/files/de/web/css/css_selectors/index.html b/files/de/web/css/css_selectors/index.html
new file mode 100644
index 0000000000..1b0966e479
--- /dev/null
+++ b/files/de/web/css/css_selectors/index.html
@@ -0,0 +1,153 @@
+---
+title: CSS Selectors
+slug: Web/CSS/CSS_Selectors
+tags:
+  - CSS
+  - CSS Selektoren
+  - Referenz
+  - Selectors
+  - Selektoren
+  - Übersicht
+translation_of: Web/CSS/CSS_Selectors
+---
+
{{CSSRef}}

+
+
Selektoren definieren, auf welche Elemente eine Reihe von CSS Regeln angewendet wird.

+
+
Grundlegende Selektoren

+
+

+ 
Typselektoren

+ 
Dieser grundlegende Selektor wählt alle Elemente aus, die den angegebenen Namen matchen.

+ Syntax: eltname

+ Beispiel: input matcht jedes {{HTMLElement('input')}} Element.

+ 
Klassenselektoren

+ 
Dieser grundlegende Selektor wählt Elemente anhand ihres class Attributs aus.

+ Syntax: .classname

+ Beispiel: .index matcht jedes Element, das die Klasse index besitzt (wahrscheinlich definiert durch ein class="index" Attribut oder ähnliches).

+ 
ID-Selektoren

+ 
Dieser grundlegende Selektor wählt Knoten anhand des Wertes ihres id Attributs aus. Es sollte nur ein Element mit der angegebenen ID in einem Dokument geben.

+ Syntax: #idname

+ Beispiel: #toc matcht das Element, das die ID toc hat (wahrscheinlich definiert durch ein id="toc" Attribut oder ähnliches).

+ 
Universalselektoren

+ 
Dieser grundlegende Selektor wählt alle Knoten aus. Er existiert auch in einer Ein-Namensraum- und einer Alle-Namensräume-Variante.

+ Syntax: * ns|* *|*

+ Beispiel: * matcht alle Elemente des Dokuments.

+ 
Attributselektoren

+ 
Dieser grundlegende Selektor wählt Knoten anhand des Wertes eines ihrer Attribute aus.

+ Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

+ Beispiel: [autoplay] matcht alle Elemente, deren autoplay Attribut (auf einen beliebigen Wert) gesetzt ist.

+

+
+
Kombinatoren

+
+

+ 
Angrenzende Geschwisterselektoren

+ 
Der '+'-Kombinator wählt Knoten aus, die direkt dem davor angegebenen Element folgen.

+ Syntax: A + B

+ Beispiel: h2 + p matcht jedes {{HTMLElement('p')}}, das direkt einem {{HTMLElement('h2')}} folgt.

+ 
Allgemeine Geschwisterselektoren

+ 
Der '~'-Kombinator wählt Knoten aus, die dem davor angegeben Element (nicht zwingend direkt) folgen, falls sie sich dasselbe Elternelement teilen.

+ Syntax: A ~ B

+ Beispiel: p ~ span matcht alle {{HTMLElement('span')}} Elemente, die einem {{HTMLElement('p')}} Element innerhalb desselben Elements folgen.

+ 
Kindselektoren

+ 
Der '>'-Kombinator wählt Knoten aus, die direkte Kinder des davor angegebenen Elements sind.

+ Syntax: A > B

+ Beispiel: ul > li matcht alle {{HTMLElement('li')}} Elemente, die innerhalb eines {{HTMLElement('ul')}} Element sind.

+ 
Nachfahrenselektoren

+ 
Der ' '-Kombinator wählt Knoten aus, die (nicht zwangsweise direkte) Kinder des davor angegebenen Elements sind.

+ Syntax: A B

+ Beispiel: div span matcht jedes {{HTMLElement('span')}} Element, das innerhalb eines {{HTMLElement('div')}} Elements ist.

+

+
+
Pseudoelemente

+
+
Pseudoelemente sind Abstraktionen des Baums, die Elemente außerhalb von dem, was HTML macht, repräsentieren. Zum Beispiel hat HTML kein Element, das den ersten Buchstaben oder die erste Zeile eines Absatzes beschreibt, oder die Markierung in einer Liste. Pseudoelemente repräsentieren diese Elemente und erlauben es, ihnen CSS Regeln zuzuweisen: dadurch können diese Elemente unabhängig gestylt werden.

+
+
Pseudoklassen

+
+
Pseudoklassen erlauben es, Elemente anhand von Informationen auszuwählen, die nicht im Dokumentbaum hinterlegt sind, wie ein Status, oder die schwer zu extrahieren sind. Z. B. ob ein Link zuvor bereits besucht wurde oder nicht.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung1{{CompatGeckoDesktop("1")}}3.03.51.0

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2

+

diff --git a/files/de/web/css/css_shapes/index.html b/files/de/web/css/css_shapes/index.html
new file mode 100644
index 0000000000..fce870138d
--- /dev/null
+++ b/files/de/web/css/css_shapes/index.html
@@ -0,0 +1,98 @@
+---
+title: CSS Shapes
+slug: Web/CSS/CSS_Shapes
+tags:
+  - CSS
+  - CSS Formen
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Shapes
+---
+
{{CSSRef}}

+
+
CSS Shapes ist ein CSS Modul, das geometrische Formen definiert, die in CSS Werten verwendet werden können.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("shape-outside")}}
    • 
+ 
  • {{cssxref("shape-margin")}}
    • 
+ 
  • {{cssxref("shape-image-threshold")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS Shapes")}}{{Spec2("CSS Shapes")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung37{{CompatNo}}{{CompatNo}}248.0 {{property_prefix("-webkit")}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}8.0 {{property_prefix("-webkit")}}

+

diff --git a/files/de/web/css/css_table/index.html b/files/de/web/css/css_table/index.html
new file mode 100644
index 0000000000..8447a21246
--- /dev/null
+++ b/files/de/web/css/css_table/index.html
@@ -0,0 +1,101 @@
+---
+title: CSS Table
+slug: Web/CSS/CSS_Table
+tags:
+  - CSS
+  - CSS Referenz
+  - CSS Table
+  - Übersicht
+translation_of: Web/CSS/CSS_Table
+---
+
{{CSSRef}}

+
+
CSS Table ist ein CSS Modul, das definiert, wie Tabellendaten dargestellt werden.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("border-collapse")}}
    • 
+ 
  • {{cssxref("border-spacing")}}
    • 
+ 
  • {{cssxref("caption-side")}}
    • 
+ 
  • {{cssxref("empty-cells")}}
    • 
+ 
  • {{cssxref("table-layout")}}
    • 
+ 
  • {{cssxref("vertical-align")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS2.1", "tables.html")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}4.04.01.0 (85)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

diff --git a/files/de/web/css/css_text/index.html b/files/de/web/css/css_text/index.html
new file mode 100644
index 0000000000..cb9b073d14
--- /dev/null
+++ b/files/de/web/css/css_text/index.html
@@ -0,0 +1,123 @@
+---
+title: CSS Text
+slug: Web/CSS/CSS_Text
+tags:
+  - CSS
+  - CSS Text
+  - Übersicht
+translation_of: Web/CSS/CSS_Text
+---
+
{{CSSRef}}

+
+
CSS Text ist ein CSS Modul, das definiert, wie Textmanipulationen durchgeführt werden, wie Zeilenumbrüche, Blocksatz und Ausrichtung, Leerraumverhalten und Texttransformationen.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("hyphens")}}
    • 
+ 
  • {{cssxref("letter-spacing")}}
    • 
+ 
  • {{cssxref("line-break")}}
    • 
+ 
  • {{cssxref("overflow-wrap")}}
    • 
+ 
  • {{cssxref("tab-size")}}
    • 
+ 
  • {{cssxref("text-align")}}
    • 
+ 
  • {{cssxref("text-align-last")}}
    • 
+ 
  • {{cssxref("text-indent")}}
    • 
+ 
  • {{cssxref("text-size-adjust")}}
    • 
+ 
  • {{cssxref("text-transform")}}
    • 
+ 
  • {{cssxref("white-space")}}
    • 
+ 
  • {{cssxref("word-break")}}
    • 
+ 
  • {{cssxref("word-spacing")}}
    • 
+ 
  • {{cssxref("word-wrap")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}Updates some properties to be independent of the directionality of the text.
{{SpecName('CSS3 Text')}}{{Spec2('CSS3 Text')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop(1.0)}}33.51.0 (85)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0 (85)

+

diff --git a/files/de/web/css/css_textdekoration/index.html b/files/de/web/css/css_textdekoration/index.html
new file mode 100644
index 0000000000..389d7f6a5e
--- /dev/null
+++ b/files/de/web/css/css_textdekoration/index.html
@@ -0,0 +1,65 @@
+---
+title: CSS Textdekoration
+slug: Web/CSS/CSS_Textdekoration
+tags:
+  - CSS
+  - CSS Referenz
+  - CSS Textdekoration
+  - Übersicht
+translation_of: Web/CSS/CSS_Text_Decoration
+---
+
{{CSSRef}}

+
+
CSS Text Decoration ist ein CSS Modul, das Features in Bezug auf Textdekoration definiert, wie zum Beispiel Unterstreichungen, Textschatten und Betonungsmarker.

+
+
CSS Eigenschaften

+
+

+
    
+ 
  • {{cssxref("letter-spacing")}}
    • 
+ 
  • {{cssxref("text-align")}}
    • 
+ 
  • {{cssxref("text-decoration")}}
    • 
+ 
  • {{cssxref("text-decoration-color")}}
    • 
+ 
  • {{cssxref("text-decoration-line")}}
    • 
+ 
  • {{cssxref("text-decoration-style")}}
    • 
+ 
  • {{cssxref("text-indent")}}
    • 
+ 
  • {{cssxref("text-rendering")}}
    • 
+ 
  • {{cssxref("text-shadow")}}
    • 
+ 
  • {{cssxref("text-transform")}}
    • 
+ 
  • {{cssxref("white-space")}}
    • 
+ 
  • {{cssxref("word-spacing")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Text Decoration')}}{{Spec2('CSS3 Text Decoration')}}
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition

diff --git a/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html b/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html
new file mode 100644
index 0000000000..83a9ada0d2
--- /dev/null
+++ b/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html
@@ -0,0 +1,248 @@
+---
+title: CSS Transformationen verwenden
+slug: Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden
+tags:
+  - CSS
+  - CSS Transformationen
+  - CSS3
+  - Fortgeschritten
+  - Guide
+translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
+---
+
{{CSSRef}}

+
+
Durch Modifizierung des Koordinatenraums ändern CSS Transformationen den Umriss und die Position des betreffenden Inhalts ohne den normalen Dokumentfluss zu unterbrechen. Diese Anleitung bietet eine Einführung in die Verwendung von Transformationen.

+
+
CSS Transformationen sind als eine Reihe von CSS Eigenschaften implementiert, die es erlauben, affine lineare Transformationen auf HTML Elemente anzuwenden. Diese Transformationen beinhalten Drehung, Verzerrung, Skalierung und Verschiebung sowohl im ebenen als auch im 3D Raum.

+
+
CSS Transformationseigenschaften

+
+
Zwei Haupteigenschaften werden dazu verwendet, CSS Transformationen zu definieren: {{cssxref("transform")}} und {{cssxref("transform-origin")}}.

+
+

+ 
{{cssxref("transform-origin")}}

+ 
Bestimmt die Position des Ursprungs. Standardmäßig ist dieser in der Mitte des Elements und kann verschoben werden. Er wird von mehreren Transformationen verwendet wie Drehung, Skalierung oder Verzerrung, die einen bestimmten Punkt als Parameter benötigen.

+ 
{{cssxref("transform")}}

+ 
Bestimmt die Transformationen, die auf das Element angewendet werden. Sie ist eine leerzeichenseparierte Liste von Transformationen, welche eine nach der anderen angewendet werden, wie durch die Zusammensetzungsoperation verlangt.

+

+
+
Beispiele

+
+
Drehung

+
+
Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, die um 90 Grad um die linke untere Ecke gedreht wurde.

+
+
Livebeispiel ansehen Screenshot des Beispiels ansehen

+
+
<div style="transform: rotate(90deg); transform-origin: bottom left;">
+  <iframe src="http://www.google.com/" width="500" height="600"></iframe>
+</div>
+

+
+
Verzerrung und Verschiebung

+
+
Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, verzerrt um 10 Grad und verschoben um 150 Pixel auf der x-Achse.

+
+
Livebeispiel ansehen  Screenshot des Beispiels ansehen

+
+
<div style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;">
+  <iframe src="http://www.google.com/" width="600" height="500"></iframe>
+</div>
+

+
+
3D-spezifische CSS Eigenschaften

+
+
Die Anwendung von CSS Transformationen im dreidimensionalen Raum ist ein wenig komplexer. Zunächst muss der 3D Raum konfiguriert werden, indem ihm eine Perspektive gegeben wird. Anschließend muss konfiguriert werden, wie die 2D Elemente sich in diesem Raum verhalten.

+
+
Eine Perspektive einrichten

+
+
Das erste Element ist das Setzen der Perspektive. Die Perspektive ist, was den dreidimensionalen Eindruck vermittelt. Je weiter weg Elemente vom Betrachter sind, desto kleiner sind sie.

+
+
Wie schnell sie kleiner werden, wird durch die {{cssxref("perspective")}} Eigenschaft bestimmt. Je kleiner deren Wert ist, desto tiefer ist die Perspektive.

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+ 
+
perspective:0;perspective:250px;

+    

+    

+    
   

+
+    
1

+
+    
2

+
+    
3

+
+    
4

+
+    
5

+
+    
6

+    

+    

+   		
+    

+    

+    
   

+
+    
1

+
+    
2

+
+    
3

+
+    
4

+
+    
5

+
+    
6

+    

+    

+   

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+ 
+
perspective:300px;perspective:350px;

+    

+    

+    
   

+
+    
1

+
+    
2

+
+    
3

+
+    
4

+
+    
5

+
+    
6

+    

+    

+   		
+    

+    

+    
   

+
+    
1

+
+    
2

+
+    
3

+
+    
4

+
+    
5

+
+    
6

+    

+    

+   

+
+
Das zweite Element ist die Konfiguration der Position des Betrachters mittels der {{cssxref("perspective-origin")}} Eigenschaft. Standardmäßig ist die Perspektive auf den Betrachter zentriert, was nicht immer passend ist.

+
+

+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
perspective-origin:150px 150px;perspective-origin:50% 50%;perspective-origin:-50px -50px;

+    

+    

+    
   

+
+    
1

+
+    
2

+
+    
3

+
+    
4

+
+    
5

+
+    
6

+    

+    

+   		
+    

+    

+    
   

+
+    
1

+
+    
2

+
+    
3

+
+    
4

+
+    
5

+
+    
6

+    

+    

+   		
+    

+    

+    
   

+
+    
1

+
+    
2

+
+    
3

+
+    
4

+
+    
5

+
+    
6

+    

+    

+   

+

+
+
Sobald dies getan ist, kann mit der Arbeit am Element im dreidimensionalen Raum begonnen werden.

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/css_transforms/index.html b/files/de/web/css/css_transforms/index.html
new file mode 100644
index 0000000000..142b07aed1
--- /dev/null
+++ b/files/de/web/css/css_transforms/index.html
@@ -0,0 +1,152 @@
+---
+title: CSS Transforms
+slug: Web/CSS/CSS_Transforms
+tags:
+  - CSS
+  - CSS Reference
+  - Experimental
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Transforms
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

+
+
Reference

+
+
CSS Properties

+
+

+
    
+ 
  • {{cssxref("backface-visibility")}}
    • 
+ 
  • {{cssxref("perspective")}}
    • 
+ 
  • {{cssxref("perspective-origin")}}
    • 
+ 
  • {{cssxref("transform")}}
    • 
+ 
  • {{cssxref("transform-box")}}
    • 
+ 
  • {{cssxref("transform-origin")}}
    • 
+ 
  • {{cssxref("transform-style")}}
    • 
+

+

+
+
Guides

+
+

+ 
Using CSS transforms

+ 
Step-by-step tutorial about how to transform elements styled with CSS.

+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}Initial definition.

+
+
Browser compatibility

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support
+    
{{CompatVersionUnknown}} {{property_prefix("-webkit")}}

+     36

+   		{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}[1]

+    {{CompatGeckoDesktop("16.0")}}[2]		9.0{{property_prefix("-ms")}}[3]

+    10.0		10.5{{property_prefix("-o")}}

+    12.10

+    15.0{{property_prefix("-webkit")}}

+    23		3.1{{property_prefix("-webkit")}}
3D Support12.0{{property_prefix("-webkit")}}

+    36		10.0{{property_prefix("-moz")}}

+    {{CompatGeckoDesktop("16.0")}}		10.015.0{{property_prefix("-webkit")}}

+    23		4.0{{property_prefix("-webkit")}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}[4]{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+    11.0{{property_prefix("-webkit")}}[5]		11.5{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
3D Support{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}22{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}

+

+
+
[1] Gecko 14.0 removed the experimental support for skew(), but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.

+
+
[2] Before Firefox 16, the translation values of matrix() and matrix3d() could be {{cssxref("<length>")}}, in addition to the standard {{cssxref("<number>")}}.

+
+
[3] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

+
+
Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as -ms-transform:rotate(10deg) translateZ(0); will prevent the entire property from being applied.

+
+
[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.

+
+
[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} prefixed variant as an alias for the default one.

+
+
 

diff --git a/files/de/web/css/css_transitions/index.html b/files/de/web/css/css_transitions/index.html
new file mode 100644
index 0000000000..b9bc67d16f
--- /dev/null
+++ b/files/de/web/css/css_transitions/index.html
@@ -0,0 +1,116 @@
+---
+title: CSS Übergänge
+slug: Web/CSS/CSS_Transitions
+tags:
+  - CSS
+  - CSS Übergänge
+  - Experimentell
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Transitions
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
CSS Transitions ist ein CSS Modul, das definiert, wie weiche Übergänge zwischen Werten von CSS Eigenschaften erstellt werden. Es erlaubt es nicht nur, diese zu erstellen, sondern definiert auch deren Entwicklung unter Verwendung von Timingfunktionen.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("transition")}}
    • 
+ 
  • {{cssxref("transition-delay")}}
    • 
+ 
  • {{cssxref("transition-duration")}}
    • 
+ 
  • {{cssxref("transition-property")}}
    • 
+ 
  • {{cssxref("transition-timing-function")}}
    • 
+

+

+
+
Anleitungen

+
+

+ 
CSS Übergänge verwenden

+ 
Schritt-für-Schritt-Tutorial darüber, wie weiche Übergänge mithilfe von CSS erstellt werden. Dieser Artikel beschreibt jede relevante CSS Eigenschaft und erklärt, wie diese interagieren.

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions')}}{{Spec2('CSS3 Transitions')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung1.0 {{property_prefix("-webkit")}}

+    26.0		{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}

+    {{CompatGeckoDesktop("16.0")}}		10.011.6 {{property_prefix("-o")}}

+    12.10 #		3.0 {{property_prefix("-webkit")}}

+    6.1

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung2.1 {{property_prefix("-webkit")}}{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}

+    {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}10.0 {{property_prefix("-o")}}

+    12.10 #		3.2 {{property_prefix("-webkit")}}

+

+
+
Siehe auch

+
+
    
+ 
  • Ähnlich zu CSS Übergängen kann CSS Animationen Animationen unabhängig von Wertänderungen auslösen.
    • 
+

diff --git a/files/de/web/css/css_typen/index.html b/files/de/web/css/css_typen/index.html
new file mode 100644
index 0000000000..bb08a42cd4
--- /dev/null
+++ b/files/de/web/css/css_typen/index.html
@@ -0,0 +1,59 @@
+---
+title: CSS-Basis-Datentypen
+slug: Web/CSS/CSS_Typen
+translation_of: Web/CSS/CSS_Types
+---
+
{{CssRef}}

+
+
CSS-Basis-Datentypen definieren typische Werte (einschließlich Schlüsselwörtern und Einheiten), die von CSS-Eigenschaften und Funktionen akzeptiert werden. Sie sind eine besondere Art eines Komponenten-Wertetyp.

+
+
Im formellen Syntax werden Datentypen mit einem Schlüsselwort gekennzeichnet, das zwischen den Zeichen "<" und ">" steht.

+
+
Referenz

+
+

+
    
+ 
  • {{cssxref("<angle>")}}
    • 
+ 
  • {{cssxref("<basic-shape>")}}
    • 
+ 
  • {{cssxref("<blend-mode>")}}
    • 
+ 
  • {{cssxref("<color>")}}
    • 
+ 
  • {{cssxref("<custom-ident>")}}
    • 
+ 
  • {{cssxref("<filter-function>")}}
    • 
+ 
  • {{cssxref("<flex>")}}
    • 
+ 
  • {{cssxref("<frequency>")}}
    • 
+ 
  • {{cssxref("<gradient>")}}
    • 
+ 
  • {{cssxref("<image>")}}
    • 
+ 
  • {{cssxref("<integer>")}}
    • 
+ 
  • {{cssxref("<length>")}}
    • 
+ 
  • {{cssxref("<number>")}}
    • 
+ 
  • {{cssxref("<percentage>")}}
    • 
+ 
  • {{cssxref("<position>")}}
    • 
+ 
  • {{cssxref("<ratio>")}}
    • 
+ 
  • {{cssxref("<resolution>")}}
    • 
+ 
  • {{cssxref("<shape-box>")}}
    • 
+ 
  • {{cssxref("<single-transition-timing-function>")}}
    • 
+ 
  • {{cssxref("<string>")}}
    • 
+ 
  • {{cssxref("<time>")}}
    • 
+ 
  • {{cssxref("<transform-function>")}}
    • 
+ 
  • {{cssxref("<url>")}}
    • 
+

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Erste Definition.

diff --git a/files/de/web/css/css_user_interface/index.html b/files/de/web/css/css_user_interface/index.html
new file mode 100644
index 0000000000..586426c255
--- /dev/null
+++ b/files/de/web/css/css_user_interface/index.html
@@ -0,0 +1,116 @@
+---
+title: CSS User Interface
+slug: Web/CSS/CSS_User_Interface
+tags:
+  - CSS
+  - CSS Basic User Interface
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Basic_User_Interface
+---
+
{{CSSRef}}

+
+
CSS User Interface ist ein CSS Modul, das es erlaubt, die Darstellung und Funktionalität von Benutzerschnittstellenfeatures zu definieren.

+
+
Referenz

+
+
Einstellungen

+
+

+
    
+ 
  • {{cssxref("box-sizing")}}
    • 
+ 
  • {{cssxref("cursor")}}
    • 
+ 
  • {{cssxref("outline")}}
    • 
+ 
  • {{cssxref("outline-width")}}
    • 
+ 
  • {{cssxref("outline-style")}}
    • 
+ 
  • {{cssxref("outline-color")}}
    • 
+ 
  • {{cssxref("outline-offset")}}
    • 
+ 
  • {{cssxref("resize")}}
    • 
+ 
  • {{cssxref("text-overflow")}}
    • 
+ 
  • {{cssxref("nav-down")}}
    • 
+ 
  • {{cssxref("nav-left")}}
    • 
+ 
  • {{cssxref("nav-right")}}
    • 
+ 
  • {{cssxref("nav-up")}}
    • 
+

+

+
+
Anleitungen

+
+

+ 
Verwendung von URL Werten für die cursor Eigenschaft

+ 
Erklärt und zeigt, wie ein URL für die {{cssxref('cursor')}} Eigenschaft angegeben werden kann, um benutzerdefinierte Mauszeiger zu erstellen.

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Basic UI')}}{{Spec2('CSS3 Basic UI')}} 
{{SpecName('CSS2.1', 'ui.html')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.01.5 (1.8)8.07.01.2 (125)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile(1.8)}}8.06.03.1

+

diff --git a/files/de/web/css/css_writing_modes/index.html b/files/de/web/css/css_writing_modes/index.html
new file mode 100644
index 0000000000..f6815b68b7
--- /dev/null
+++ b/files/de/web/css/css_writing_modes/index.html
@@ -0,0 +1,109 @@
+---
+title: CSS Writing Modes
+slug: Web/CSS/CSS_Writing_Modes
+tags:
+  - CSS
+  - CSS Referenz
+  - CSS Writing Modes
+  - Übersicht
+translation_of: Web/CSS/CSS_Writing_Modes
+---
+
{{CSSRef}}

+
+
CSS Writing Modes ist ein CSS Modul, das verschiedene internationale Schreibmodi definiert, wie links-nach-rechts (z. B. verwendet von der lateinischen und indischen Schrift), rechts-nach-links (z. B. verwendet von der hebräischen und arabischen Schrift), bidirektional (wenn links-nach-rechts und rechts-nach-links Schriften vermischt werden) und vertikal (z. B. verwendet in einigen asiatischen Schriften).

+
+
CSS Eigenschaften

+
+

+
    
+ 
  • {{cssxref("direction")}}
    • 
+ 
  • {{cssxref("glyph-orientation-horizontal")}}
    • 
+ 
  • {{cssxref("text-combine-upright")}}
    • 
+ 
  • {{cssxref("text-orientation")}}
    • 
+ 
  • {{cssxref("unicode-bidi")}}
    • 
+ 
  • {{cssxref("writing-mode")}}
    • 
+

+

+
+
Guides

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Writing Modes')}}{{Spec2('CSS3 Writing Modes')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop(1.0)}}33.51.0 (85)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0 (85)

+

diff --git a/files/de/web/css/cssom_view/index.html b/files/de/web/css/cssom_view/index.html
new file mode 100644
index 0000000000..77ba31c695
--- /dev/null
+++ b/files/de/web/css/cssom_view/index.html
@@ -0,0 +1,99 @@
+---
+title: CSSOM View
+slug: Web/CSS/CSSOM_View
+tags:
+  - CSS
+  - CSSOM View
+  - Experimentell
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSSOM_View
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
CSSOM View ist ein Modul, das es erlaubt, die visuelle Darstellung eines Dokuments zu verändern, insbesondere sein Scrollverhalten.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("scroll-behavior")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSSOM View')}}{{Spec2('CSSOM View')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

diff --git a/files/de/web/css/cursor/index.html b/files/de/web/css/cursor/index.html
new file mode 100644
index 0000000000..f069a478b8
--- /dev/null
+++ b/files/de/web/css/cursor/index.html
@@ -0,0 +1,300 @@
+---
+title: cursor
+slug: Web/CSS/cursor
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Cursor
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/cursor
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die cursor CSS Eigenschaft legt den Cursor fest, der angezeigt wird, wenn sich der Mauszeiger über einem Element befindet.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+cursor: pointer;
+cursor: auto;
+
+/* Verwendung von URL und Koordinaten */
+cursor:  url(cursor1.png) 4 12, auto;
+cursor:  url(cursor2.png) 2 2, pointer;
+
+/* Globale Werte */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+

+
+
Werte

+
+

+ 
<uri>

+ 
Eine durch Kommata getrennte Liste, die auf benutzerdefinierte Bilder verweist, die als Cursor angezeigt werden sollen. Mehr als eine Angabe macht Sinn, um eine Ausweichlösung (Fallback) bei nicht unterstützten Bildformaten in anderen Browsern bereitzustellen. Am Ende der Liste muss ein Fallback stehen, welches einen Cursor ohne URL angibt, um einen Mauszeiger anzeigen zu können, wenn kein benutzerdefiniertes Bild geladen werden kann. Siehe auch: Verwendung von URL Werten für die cursor Eigenschaft für weitere Details.

+ 
<x> <y> {{ experimental_inline() }}

+ 
Optionale Angabe von X- und Y-Koordinaten (vom Internet Explorer nicht unterstützt). Angegeben werden zwei Zahlen ohne Einheit.

+ 
Schlüsselwortwerte

+ 
Bewege die Maus über einen Wert zum Testen:

+ 

+ 
+  
+   
+    
+    
+    
+    
+   
+   
+    
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+    
+    
+   
+   
+    
+    
+   
+  
+ 
KategorieCSS Wert

+     Mouseover zum Testen		Beschreibung
AllgemeinautoDer Browser bestimmt aufgrund des aktuellen Kontextes, welcher Cursor angezeigt wird.

+     Wenn der Mauszeiger sich zum Beispiel über dem Text befindet, wird der text Cursor angezeigt.
defaultdefault.gifStandard Cursor. Üblicherweise durch ein Pfeil dargestellt.
noneEs wird kein Cursor wird angezeigt.
Links & Statuscontext-menucontext-menu.pngEin Kontextmenü wird unter dem Cursor angezeigt.

+     Unter Windows nicht verfügbar. {{ Bug("258960") }}
helphelp.gifZeigt an, dass Hilfe verfügbar ist.
pointerpointer.gifWird zum Beispiel angezeigt, wenn der Mauszeiger sich über Links befindet. Üblicherweise durch eine Hand dargestellt.
progressprogress.gifZeigt an, dass das Programm im Hintergrund arbeitet und der Benutzer kann, anders als bei wait, weiterhin mit der Oberfläche arbeiten.
waitwait.gifZeigt an, dass das Programm arbeitet. Manchmal auch durch eine Sanduhr oder eine Uhr dargestellt.
Auswahlcellcell.gifZeigt an, dass Zellen ausgewählt werden können.
crosshaircrosshair.gifEin Kreuz, das oft zur Auswahl eines Bereiches in Bildern verwendet wird.
texttext.gifZeigt an, dass der Text ausgewählt werden kann.
vertical-textvertical-text.gifZeigt an, dass vertikaler Text ausgewählt werden kann.
Drag and Dropaliasalias.gifZeigt an, dass ein Tastenkürzel vorhanden ist.
copycopy.gifZeigt an, dass etwas kopiert werden kann.
movemove.gifZeigt an, dass das Objekt bewegt werden kann.
no-dropno-drop.gifZeigt an, dass an der aktuellen Stelle nichts hinein gezogen werden darf.

+     {{bug("275173")}} unter Windows ist no-drop gleich wie not-allowed.
not-allowednot-allowed.gifZeigt an, dass hier etwas nicht erlaubt ist.
Skalierung & Scrollenall-scrollall-scroll.gifZeigt an, dass etwas in alle Richtungen gescrollt werden kann.

+     {{ bug("275174") }} unter Windows ist all-scroll gleich wie move.
col-resizecol-resize.gifZeigt an, dass das Element bzw. die Spalte horizontal skaliert werden kann. Meistens als Pfeile dargestellt, die nach rechts und links zeigen und in der Mitte einen Trennbalken haben.
row-resizerow-resize.gifZeigt an, dass das Element bzw. die Zeile vertikal skaliert werden kann. Meistens als Pfeile dargestellt, die nach unten und oben zeigen und in der Mitte einen Trennbalken haben.
n-resizen-resize.gifZeigt an, dass von einer Ecke aus skaliert werden kann. Der se-resize Cursor wird zum Beispiel benutzt, wenn, von der unteren rechten Ecke aus, etwas bewegt/skaliert werden soll.
e-resizee-resize.gif
s-resizes-resize.gif
w-resizew-resize.gif
ne-resizene-resize.gif
nw-resizenw-resize.gif
se-resizese-resize.gif
sw-resizesw-resize.gif
ew-resizeew-resize.gifZeigt an, dass in zwei Richtungen (bidirektional) skaliert werden kann.
ns-resizens-resize.gif
nesw-resizenesw-resize.gif
nwse-resizenwse-resize.gif
Zoomzoom-inzoom-in.gif
+     
Indicates that something can be zoomed (magnified) in or out.

+    
zoom-outzoom-out.gif
Greifengrabgrab.gif
+     
Indicates that something can be grabbed (dragged to be moved).

+    
grabbinggrabbing.gif

+ 

+

+
+
Formale Syntax

+
+
{{csssyntax}}
+

+
+
Beispiele

+
+
.foo {
+  cursor: crosshair;
+}
+
+/* Benutze move wenn cell nicht unterstützt wird. */
+.bar {
+  cursor: move;
+  cursor: cell;
+}
+
+/* Standardwert als Fallback für url() muss angegeben werden (funktioniert nicht ohne) */
+.baz {
+  cursor: url(hyper.cur), auto;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}Mehrere Schlüsselwörter und die Positionierungssyntax für url() hinzugefügt.
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.cursor")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/custom-ident/index.html b/files/de/web/css/custom-ident/index.html
new file mode 100644
index 0000000000..babda0dccf
--- /dev/null
+++ b/files/de/web/css/custom-ident/index.html
@@ -0,0 +1,120 @@
+---
+title: 
+slug: Web/CSS/custom-ident
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/custom-ident
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Der <custom-ident> CSS Datentyp beschreibt eine beliebige benutzerdefinierte Zeichenkette, die als Bezeichner verwendet wird. Er ist schreibungsabhängig und in jedem Kontext sind mehrere Werte ausgeschlossen, um Falschinterpretationen zu vermeiden.

+
+
Syntax

+
+
Seine Syntax ist ähnlich der des CSS Bezeichners mit Ausnahme, dass Groß- und Kleinschreibung berücksichtigt wird: ein <custom-ident> ist eine Sequenz von Zeichen, wobei Zeichen folgendes sein können:

+
+
    
+ 
  • ein beliebiges alphanumerisches Zeichen ('A' bis 'Z' oder 'a' bis 'z'),
    • 
+ 
  • eine beliebige dezimale Ziffer ('0' bis '9'),
    • 
+ 
  • ein Bindestrich ('-')
    • 
+ 
  • ein Unterstrich ('_'),
    • 
+ 
  • ein escaptes Zeichen (mit einem Backslash, '\'),
    • 
+ 
  • oder ein Unicode Zeichen (im Format eines Backslashs gefolgt von einer bis sechs hexadezimalen Ziffern, seinem Unicode Codepoint).
    • 
+

+
+
Das erste Zeichen darf weder eine dezimale Ziffer, noch ein Bindestrich ('-') sein, gefolgt von einer dezimalen Ziffer oder einem weiteren Bindestrich. Ein <custom-ident> darf nicht zwischen einfachen oder doppelten Anführungszeichen stehen, da er sonst identisch zu einem {{cssxref("<string>")}} wäre.

+
+
Beachte, dass id1, Id1, iD1 und ID1 alle verschiedene Bezeichner sind, da sie sich in Groß-/Kleinschreibung unterscheiden. Im Gegensatz dazu sind toto\? und toto\3F dieselben Bezeichner, da es verschiedene Arten gibt, ein Zeichen zu escapen.

+
+
Liste ausgeschlossener Werte

+
+
Um Mehrdeutigkeiten zu verhindern, definiert jede Eigenschaft, die <custom-ident> verwendet, eine spezielle Liste an verbotenen Werten:

+
+

+ 
{{cssxref("animation-name")}}

+ 
Verbietet die globalen CSS Werte unset, initial und inherit und den Wert none.

+ 
{{cssxref("counter-reset")}}

+ 
{{cssxref("counter-increment")}}

+ 
Verbietet die globalen CSS Werte unset, initial und inherit und den Wert none.

+ 
{{cssxref("@counter-style")}}

+ 
{{cssxref("list-style-type")}}

+ 
Verbietet die globalen CSS Werte unset, initial und inherit, als auch die Werte none, inline und outside. Auch einige vordefinierte Werte werden von verschiedenen Browsern implementiert: disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, cambodian, cjk-earthly-branch, cjk-heavenly-stem, cjk-ideographic, devanagari, ethiopic-numeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiragana-iroha, japanese-formal, japanese-informal, kannada, katakana, katakana-iroha, khmer, korean-hangul-formal, korean-hanja-formal, korean-hanja-informal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-formal, simp-chinese-informal, tamil, telugu, thai, tibetan, trad-chinese-formal, trad-chinese-informal, upper-armenian, disclosure-open und disclosure-close.

+ 
{{cssxref("will-change")}}

+ 
Verbietet die globalen CSS Werte unset, initial und inherit, als auch die Werte will-change, auto, scroll-position und contents.

+

+
+
Beispiele

+
+
Dies sind gültige Bezeichner:

+
+
nono79            Eine Mischung aus alphanumerischen Zeichen und Zahlen
+ground-level      Eine Mischung aus alphanumerischen Zeichen und einem Bindestrich
+-test             Ein Bindestrich gefolgt von alphanumerischen Zeichen
+_internal         Ein Unterstrich gefolgt von alphanumerischen Zeichen
+\22 toto          Ein Unicode-Zeichen gefolgt von einer Sequenz von alphanumerischen Zeichen
+bili\.bob         Der Punkt ist korrekt escapt
+

+
+
Dies sind ungültige Bezeichner:

+
+
34rem             Darf nicht mit einer Dezimalziffer anfangen
+-12rad            Darf nicht mit einem Bindestrich gefolgt von einer Dezimalziffer anfangen
+bili.bob          Nur alphanumerische Zeichen, _ und - müssen nicht escapt werden
+--toto            Darf nicht mit zwei Bindestrichen anfangen
+'bilibob'         Kein <user-ident>, sondern ein {{cssxref("<string>")}}
+"bilibob"         Kein <user-ident>, sondern ein {{cssxref("<string>")}}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<custom-ident> für will-change')}}{{Spec2('CSS Will Change')}}Definiert, welche Werte für {{cssxref("will-change")}} ausgeschlossen sind.
{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<custom-ident> für list-style-type')}}{{Spec2('CSS3 Counter Styles')}}Verwendet <custom-ident> anstatt einer begrenzten Liste von Schlüsselwörtern und definiert, welche Werte für {{cssxref("list-style-type")}} und {{cssxref("@counter-style")}} ausgeschlossen sind.
{{SpecName('CSS3 Lists', '#counter-properties', '<custom-ident> für counter-*')}}{{Spec2('CSS3 Lists')}}Benennt <identifier> zu <custom-ident> um. Fügt seine Verwendung zur neuen counter-set Eigenschaft hinzu.
{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<custom-ident> für animation-name')}}{{Spec2('CSS3 Animations')}}Definiert, welche Werte für {{cssxref("animation-name")}} ausgeschlossen sind.
{{SpecName('CSS3 Values', '#identifier-value', '<custom-ident>')}}{{Spec2('CSS3 Values')}}Benennt <identifier> in <custom-ident> um. Macht ihn zu einem Pseudotyp und verlangt die verschiedenen Verwendungen, um die ausgeschlossenen Werte zu präzisieren.
{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<identifier>')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
Da dieser Typ kein realer Typ ist, sondern ein Bequemlichkeitstyp, der dazu verwendet wird, um die Beschreibung von erlaubten Werten zu vereinfachen, gibt es keine Browser Kompatibilitätsinformationen im engeren Sinne.

diff --git a/files/de/web/css/direction/index.html b/files/de/web/css/direction/index.html
new file mode 100644
index 0000000000..50c1af5f09
--- /dev/null
+++ b/files/de/web/css/direction/index.html
@@ -0,0 +1,90 @@
+---
+title: direction
+slug: Web/CSS/direction
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/direction
+---
+
{{CSSRef}}

+
+
Zusammenfassung

+
+
Legt die CSS Eigenschaft direction fest damit sie mit der Richtung des Textes übereinstimmt: rtl dür Sprachen welche von rechts nach links geschrieben werden (wie Hebräisch oder Arabisch) und ltr für Sprachen von links nach rechts. Normalerweise ist es jedoch ein Teil des Dokuments (z.B. mit dem dir Attribut in HTML) statt durch den direkten Gebrauch in CSS.

+
+
Der Wert legt die grundsätzliche Richtung des Textes von block-level Elementen und die Richtung von Einbindungen, welche von der {{Cssxref("unicode-bidi")}} Eigenschaft erzeugt wird, fest. Auch legt es die grunsätzliche Ausreichtung des Textes, block-level Elemente und die Richtung in welcher Zellen in einer Tabellenzeile angeordnet werden.

+
+
Anders als das dir Attribut in HTML, wird die direction Eigenschaft nicht von Tabellenspalten an die Tabellenzellen vererbt, da CSS Vererbung dem Dokumenten Baum folgt, in welchem Tabellenzellen in Zeilen sind und nicht in Spalten.

+
+
Die direction und {{cssxref("unicode-bidi")}} Eigenschaft sind die einzigen zwei Eigenschaften welche nicht von der {{cssxref("all")}} Kurzform Eigenschaft beinflusst werden.

+
+
{{cssinfo}}

+
+
Syntax

+
+
direction: ltr;
+direction: rtl;
+
+/* Globale Werte*/
+direction: inherit;
+direction: initial;
+direction: unset;
+

+
+
Werte

+
+

+ 
ltr

+ 
Der Ausgangswert von direction (wenn nicht anders festgelegt). Text und andere Elemente gehen von links nach rechts.

+ 
rtl

+ 
Text und andere Elemente gehen von rechts nach links.

+

+
+
Damit die direction Eigenschaft Auswirkungen auf inline-level elemente hat, muss der {{Cssxref("unicode-bidi")}} Eigenschaftswert embed oder override sein.

+
+
Formaler Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
blockquote {
+  direction: rtl;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}{{Spec2('CSS3 Writing Modes')}}Keine Änderung.
{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}{{Spec2('CSS2.1')}}Erste Definition.

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.direction")}}
+
+
Siehe auch

+
+
    
+ 
  • {{Cssxref("unicode-bidi")}}
    • 
+ 
  • {{Cssxref("writing-mode")}}
    • 
+

diff --git a/files/de/web/css/display/index.html b/files/de/web/css/display/index.html
new file mode 100644
index 0000000000..54b21e29b5
--- /dev/null
+++ b/files/de/web/css/display/index.html
@@ -0,0 +1,259 @@
+---
+title: display
+slug: Web/CSS/display
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Positionierung
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/display
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die display Eigenschaft legt den Typ einer Rendering-Box eines Elements fest. Für HTML sind die standardmäßigen display Werte in der HTML-Spezifikation beschrieben und in den User- bzw. Browser-Stylesheets angegeben. Für XML-Dokumente ist der voreingestellte Wert inline.

+
+
Zusätzlich zu den vielen verschiedenen Anzeigearten erlaubt der Wert none es, ein Element gänzlich auszublenden; wenn none verwendet wird, werden auch alle Unterelemente ausgeblendet. Das Dokument wird so dargestellt, als ob das Element nicht im Dokumentenbaum existieren würde.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+display: none;
+display: inline;
+display: block;
+display: contents;
+display: list-item;
+display: inline-block;
+display: inline-table;
+display: table;
+display: table-cell;
+display: table-column;
+display: table-column-group;
+display: table-footer-group;
+display: table-header-group;
+display: table-row;
+display: table-row-group;
+display: flex;
+display: inline-flex;
+display: grid;
+display: inline-grid;
+display: ruby;
+display: ruby-base;
+display: ruby-text;
+display: ruby-base-container;
+display: ruby-text-container;
+display: run-in;
+
+/* Globale Werte */
+display: inherit;
+display: initial;
+display: unset;
+

+
+
Werte

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+ 
+
ModulWertBeschreibung
Basic values (CSS 1)none
+    
Schaltet die Anzeige eines Elementes aus (das Element hat keinen Effekt mehr auf das Layout des Dokumentes). Alle Kindelemente werden ebenfalls nicht mehr angezeigt. Das Dokument wird so gerendert als wenn das Element nicht im Dokumentenbaum existieren würde.

+
+    
Um die Box trotzdem rendern zu lassen, aber den Inhalt unsichtbar zu machen, kann die {{cssxref("visibility")}} Eigenschaft verwendet werden.

+   
inlineEs werden eine oder mehrere inline Elementboxen generiert.
blockEs wird eine Blockbox generiert.
list-itemEs wird eine block Box für den Inhalt und eine separate inline Box für die List-Items generiert.
Extended values (CSS 2.1)inline-blockEs wird eine block Box generiert, welche den umliegenden Inhalt umfließen lässt, als wenn es eine einzelne inline Box wäre.
Table model values (CSS 2.1)inline-tableVerhält sich wie das {{HTMLElement("table")}} HTML Element, aber es wird ein inline Element generiert.
tableVerhält sich wie das {{HTMLElement("table")}} HTML Element. Es wird eine Blockbox generiert.
table-captionVerhält sich wie das {{HTMLElement("caption")}} HTML Element
table-cellVerhält sich wie das {{HTMLElement("td")}} HTML Element
table-columnVerhält sich wie das {{HTMLElement("col")}} HTML Element
table-column-groupVerhält sich wie das {{HTMLElement("colgroup")}} HTML Element
table-footer-groupVerhält sich wie das {{HTMLElement("tfoot")}} HTML Element
table-header-groupVerhält sich wie das {{HTMLElement("thead")}} HTML Element
table-rowVerhält sich wie das {{HTMLElement("tr")}} HTML Element
table-row-groupVerhält sich wie das {{HTMLElement("tbody")}} HTML Element
Flexbox model values (CSS3)flexEs wird ein Flexbox Container als block Element erzeugt.
inline-flexEs wird ein Flexbox Container als inline Element erzeugt.
Grid box model values (CSS3) {{experimental_inline}}gridEs wird ein Grid Container als block Element erzeugt.
+   
inline-gridEs wird ein Grid Container als inline Element erzeugt.
Ruby Formatierungsmodell Werte (CSS3){{experimental_inline}}rubyDas Element verhält sich wie ein Inlineelement und stellt seinen Inhalt anhand des Ruby Formatierungsmodells dar. Es verhält sich wie die entsprechenden {{HTMLElement("ruby")}} HTML Elemente.
ruby-baseDiese Elemente verhalten sich wie {{HTMLElement("rb")}} Elemente.
ruby-textDiese Elemente verhalten sich wie {{HTMLElement("rt")}} Elemente.
ruby-base-containerDiese Elemente verhalten sich wie {{HTMLElement("rbc")}} Elemente, die als anonyme Boxen generiert wurden.
ruby-text-containerDiese Elemente verhalten sich wie {{HTMLElement("rtc")}} Elemente.
Experimental values {{experimental_inline}}run-in
+    
    
+     
  • Wenn eine run-in Box eine block Box enthält, genau wie block.
    • 
+     
  • Wenn einer block Box eine run-in Box folgt, wird die run-in Box die erste inline Box der block Box.
    • 
+     
  • Wenn eine inline Box folgt, wird aus der run-in Box eine block Box.
    • 
+    

+   
contentsDiese Elemente erzeugen selbst keine spezielle Box. Sie werden durch ihre Pseudobox und deren Kindboxen ersetzt.

+
+
Formale Syntax

+
+
{{csssyntax}}
+

+
+
Beispiele

+
+
Live Beispiel

+
+
p.secret  { display: none; }
+<p class="secret">invisible text</p>
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Display', '#display', 'display')}}{{Spec2('CSS3 Display')}}run-in und contents Werte hinzugefügt
{{SpecName('CSS3 Ruby', '#display', 'display')}}{{Spec2('CSS3 Ruby')}}ruby, ruby-base, ruby-text, ruby-base-container und ruby-text-container Eigenschaften hinzugefügt
{{SpecName('CSS3 Grid', '#grid-declaration0', 'display')}}{{Spec2('CSS3 Grid')}}Grid Box-Modell hinzugefügt
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}{{Spec2('CSS3 Flexbox')}}Flexbox-Modell hinzugefügt
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}Table-Model und inline-block hinzugefügt
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}none, block, inline und list-item hinzugefügt

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.display", 10)}}

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("visibility")}}, {{cssxref("float")}}, {{cssxref("position")}}
    • 
+ 
  • {{cssxref("flex")}}
    • 
+

diff --git a/files/de/web/css/empty-cells/index.html b/files/de/web/css/empty-cells/index.html
new file mode 100644
index 0000000000..97bdbe839f
--- /dev/null
+++ b/files/de/web/css/empty-cells/index.html
@@ -0,0 +1,76 @@
+---
+title: empty-cells
+slug: Web/CSS/empty-cells
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Tabellen
+  - Layout
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/empty-cells
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die empty-cells CSS Eigenschaft legt fest, ob Hintergründe und Rahmen leerer Tabellenzellen angezeigt werden sollen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+empty-cells: show;
+empty-cells: hide;
+
+/* Globale Werte */
+empty-cells: inherit;
+empty-cells: initial;
+empty-cells: unset;
+

+
+
Werte

+
+

+ 
show

+ 
Ist ein Schlüsselwort, das angibt, dass Ränder und Hintergründe wie in normalen Zellen dargestellt werden sollen.

+ 
hide

+ 
Ist ein Schlüsselwort, das angibt, dass keine Ränder oder Hintergründe dargestellt werden sollen.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
.contentbox td {
+  empty-cells: show;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.empty-cells")}}
diff --git a/files/de/web/css/ersetztes_element/index.html b/files/de/web/css/ersetztes_element/index.html
new file mode 100644
index 0000000000..c75a4aec95
--- /dev/null
+++ b/files/de/web/css/ersetztes_element/index.html
@@ -0,0 +1,23 @@
+---
+title: Ersetztes Element
+slug: Web/CSS/ersetztes_Element
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/Replaced_element
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
In CSS ist ein ersetztes Element ein Element, dessen Darstellung außerhalb des Anwendungsbereichs von CSS liegt. Dies sind eine Art externe Objekte, deren Repräsentation unabhängig von CSS ist. Typische ersetzte Elemente sind {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} oder Formularelemente wie {{HTMLElement("textarea")}} und {{HTMLElement("input")}}. Manche Elemente wie {{HTMLElement("audio")}} oder {{HTMLElement("canvas")}} sind nur in bestimmten Fällen ersetzte Elemente. Objekte, die via CSS {{cssxref("content")}} Eigenschaften eingefügt werden, sind anonyme ersetzte Elemente.

+
+
CSS behandelt ersetzte Elemente in manchen Fällen besonders, wie z. B. bei der Berechnung von Außenabständen und einigen auto Werten.

+
+
Beachte, dass manche ersetzte Elemente, jedoch nicht alle, innere Maße oder eine definierte Grundlinie haben, welche von einigen CSS Eigenschaften wie {{cssxref("vertical-align")}} verwendet wird.

+
+
Siehe auch

+
+
    
+ 
  • {{CSS_key_concepts}}
    • 
+

diff --git a/files/de/web/css/farben/index.html b/files/de/web/css/farben/index.html
new file mode 100644
index 0000000000..9e0baf0720
--- /dev/null
+++ b/files/de/web/css/farben/index.html
@@ -0,0 +1,1285 @@
+---
+title: 
+slug: Web/CSS/Farben
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/color_value
+---
+
{{CSSRef}}

+
+
Der CSS Datentyp beschreibt eine Farbe im sRGB Farbraum. Eine Farbe kann auf eine dieser Arten beschrieben werden:

+
+
+
+
Beachte, dass die Liste an akzeptierten Farbwerten durch weiterentwickelte Spezifikationen erweitert wurde bis hin zu den neuesten CSS3 Farben.

+
+
In Verbindung mit einer Farbe im sRGB Raum besteht ein <color>-Wert auch aus einer Alphakanal-Koordinate, einem Transparenzwert, der angibt, wie die Farbe mit der Hintergrundfarbe vermischt wird

+
+
Obwohl CSS Farbwerte genau definiert sind, können sie auf verschiedenen Ausgabegeräten unterschiedlich dargestellt werden. Die meisten davon sind nicht kalibriert und manche Browser unterstützen nicht das Farbprofil des Ausgabegeräts. Ohne diese kann die Farbdarstellung stark variieren.

+
+
Hinweis: Die WCAG 2.0 Empfehlung des W3C rät Webauthoren ausdrücklich dazu, Farben nicht als einziges Mittel zur Vermittlung einer bestimmten Information, Aktion oder einem Ergebnis zu verwenden. Manche Benutzer haben Probleme, Farben zu unterscheiden, was das Verständnis der übermittelten Information verhindert. Natürlich verhindert das nicht die Benutzung von Farbe, nur deren Benutzung als einziges Mittel eine Information zu beschreiben.

+
+
Interpolation

+
+
Werte des <color> CSS Datentyps können für Animationen und zur Erstellung von {{cssxref("gradient", "<gradient>")}} Werten interpoliert werden. In diesem Fall werden ihre Rot-, Grün- und Blau-Komponenten als eine reale Fließkommazahl interpoliert. Beachte, dass die Interpolation von Farben innerhalb des alpha-vormultiplizierten sRGBA-Farbraums stattfindet, um unerwartete Grautöne zu verhindern. In Animationen wird die Geschwindigkeit der Interlolation durch die zur Animation gehörenden Timing-Funktion bestimmt.

+
+
Werte

+
+
Es gibt mehrere Arten, wie ein <color> Wert beschrieben werden kann.

+
+
Farbschlüsselwörter

+
+
Farbschlüsselwörter sind schreibungsunabhängige Bezeichner, welche eine bestimmte Farbe repräsentieren, z. B. red, blue, brown, lightseagreen. Der Name beschreibt die Farbe, er ist jedoch meist erfunden. Die Liste an akzeptierten Werten variiert sehr zwischen den Spezifikationen:

+
+
    
+ 
  • CSS Level 1 akzeptierte nur 16 Grundfarben, bekannt als VGA-Farben, weil sie aus der Menge an darstellbaren Farben von VGA-Grafikkarten stammen.
    • 
+ 
  • CSS Level 2 fügte das orange-Schlüsselwort hinzu.
    • 
+ 
  • Von Anfang an haben Browser weitere Farben akzeptiert, meist die X11 genannte Farbliste, da einige frühere Browser X11-basierte Anwendungen waren, allerdings mit einigen Unterschieden. SVG 1.0 war der erste Standard, der diese Schlüsselwörter formal definiert hat; CSS Colors Level 3 hat diese Schlüsselwörter ebenfalls formal definiert. Sie werden oft als erweiterte Farbschlüsselwörter, X11 Farben oder SVG Farben bezeichnet.
    • 
+

+
+
Es gibt ein paar Dinge bei der Verwendung von Farbschlüsselwörtern zu beachten:

+
+
    
+ 
  • Außer den 16 Grundfarben, die HTML gemein hat, können keine anderen Farben in HTML verwendet werden. HTML konvertiert diese unbekannten Werte mit einem bestimmten Algorithmus, was zu komplett unterschiedlichen Farben führt. Diese Schlüsselwörter sollten ausschließlich in SVG & CSS verwendet werden.
    • 
+ 
  • Unknown keywords make the CSS property invalid. Invalid properties being ignored, the color will have no effect. This is a different behavior than the one of HTML.
    • 
+ 
  • Keine als Schlüsselwort definierten Farben haben in CSS eine Transparenz. Sie sind klare, undurchsichtige Farben.
    • 
+ 
  • Verschiedene Schlüsselwörter kennzeichnen die gleiche Farbe:
+  
      
+   
    • darkgray / darkgrey
      • 
+   
    • darkslategray / darkslategrey
      • 
+   
    • dimgray / dimgrey
      • 
+   
    • lightgray / lightgrey
      • 
+   
    • lightslategray / lightslategrey
      • 
+   
    • gray / grey
      • 
+   
    • slategray / slategrey
      • 
+  
    
+ 
    • 
+ 
  • Obwohl die Namen der Schlüsselwörter von den gewöhnlichen X11-Farbnamen stammen, können die Farben von den entsprechenden Systemfarben im X11-System abweichen, da sie auf die spezielle Hardware der Hersteller zugeschnitten sind.
    • 
+

+
+
+ 
+  
+   
+   
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+ 
+
SpezifikationFarbeSchlüsselwortRGB HexwerteVorschau
{{SpecName("CSS1")}} black#000000 
 silver#c0c0c0 
 gray#808080 
 white#ffffff 
 maroon#800000 
 red#ff0000 
 purple#800080 
 fuchsia#ff00ff 
 green#008000 
 lime#00ff00 
 olive#808000 
 yellow#ffff00 
 navy#000080 
 blue#0000ff 
 teal#008080 
 aqua#00ffff 
{{SpecName("CSS2.1")}} orange#ffa500 
{{SpecName("CSS3 Colors")}} aliceblue#f0f8ff 
 antiquewhite#faebd7 
 aquamarine#7fffd4 
 azure#f0ffff 
 beige#f5f5dc 
 bisque#ffe4c4 
 blanchedalmond#ffe4c4 
 blueviolet#8a2be2 
 brown#a52a2a 
 burlywood#deb887 
 cadetblue#5f9ea0 
 chartreuse#7fff00 
 chocolate#d2691e 
 coral#ff7f50 
 cornflowerblue#6495ed 
 cornsilk#fff8dc 
 crimson#dc143c 
 darkblue#00008b 
 darkcyan#008b8b 
 darkgoldenrod#b8860b 
 darkgray#a9a9a9 
 darkgreen#006400 
 darkgrey#a9a9a9 
 darkkhaki#bdb76b 
 darkmagenta#8b008b 
 darkolivegreen#556b2f 
 darkorange#ff8c00 
 darkorchid#9932cc 
 darkred#8b0000 
 darksalmon#e9967a 
 darkseagreen#8fbc8f 
 darkslateblue#483d8b 
 darkslategray#2f4f4f 
 darkslategrey#2f4f4f 
 darkturquoise#00ced1 
 darkviolet#9400d3 
 deeppink#ff1493 
 deepskyblue#00bfff 
 dimgray#696969 
 dimgrey#696969 
 dodgerblue#1e90ff 
 firebrick#b22222 
 floralwhite#fffaf0 
 forestgreen#228b22 
 gainsboro#dcdcdc 
 ghostwhite#f8f8ff 
 gold#ffd700 
 goldenrod#daa520 
 greenyellow#adff2f 
 grey#808080 
 honeydew#f0fff0 
 hotpink#ff69b4 
 indianred#cd5c5c 
 indigo#4b0082 
 ivory#fffff0 
 khaki#f0e68c 
 lavender#e6e6fa 
 lavenderblush#fff0f5 
 lawngreen#7cfc00 
 lemonchiffon#fffacd 
 lightblue#add8e6 
 lightcoral#f08080 
 lightcyan#e0ffff 
 lightgoldenrodyellow#fafad2 
 lightgray#d3d3d3 
 lightgreen#90ee90 
 lightgrey#d3d3d3 
 lightpink#ffb6c1 
 lightsalmon#ffa07a 
 lightseagreen#20b2aa 
 lightskyblue#87cefa 
 lightslategray#778899 
 lightslategrey#778899 
 lightsteelblue#b0c4de 
 lightyellow#ffffe0 
 limegreen#32cd32 
 linen#faf0e6 
 mediumaquamarine#66cdaa 
 mediumblue#0000cd 
 mediumorchid#ba55d3 
 mediumpurple#9370db 
 mediumseagreen#3cb371 
 mediumslateblue#7b68ee 
 mediumspringgreen#00fa9a 
 mediumturquoise#48d1cc 
 mediumvioletred#c71585 
 midnightblue#191970 
 mintcream#f5fffa 
 mistyrose#ffe4e1 
 moccasin#ffe4b5 
 navajowhite#ffdead 
 oldlace#fdf5e6 
 olivedrab#6b8e23 
 orangered#ff4500 
 orchid#da70d6 
 palegoldenrod#eee8aa 
 palegreen#98fb98 
 paleturquoise#afeeee 
 palevioletred#db7093 
 papayawhip#ffefd5 
 peachpuff#ffdab9 
 peru#cd853f 
 pink#ffc0cb 
 plum#dda0dd 
 powderblue#b0e0e6 
 rosybrown#bc8f8f 
 royalblue#4169e1 
 saddlebrown#8b4513 
 salmon#fa8072 
 sandybrown#f4a460 
 seagreen#2e8b57 
 seashell#fff5ee 
 sienna#a0522d 
 skyblue#87ceeb 
 slateblue#6a5acd 
 slategray#708090 
 slategrey#708090 
 snow#fffafa 
 springgreen#00ff7f 
 steelblue#4682b4 
 tan#d2b48c 
 thistle#d8bfd8 
 tomato#ff6347 
 turquoise#40e0d0 
 violet#ee82ee 
 wheat#f5deb3 
 whitesmoke#f5f5f5 
 yellowgreen#9acd32 
{{SpecName("CSS4 Colors")}} rebeccapurple#663399 

+
+
Die Farbe rebeccapurple entspricht der Farbe #639. Mehr Informationen darüber, warum sie eingeführt wurde, kann in diesem Codepen Blog Post von Trezy nachgelesen werden: "Honoring a Great Man."

+
+
transparent Schlüsselwort

+
+
Das transparent-Schlüsselwort beschreibt eine vollkommen transparente Farber, d. h. die dargestellte Farbe ist die Hintergrundfarbe. Technisch ist sie schwarz mit einem Alphakanal mit Minimalwert und ist ein Kürzel für rgba(0,0,0,0).

+
+
Historischer Hinweis

+Das Schlüsselwort transparent war keine echte Farbe in CSS Level 2 (Revision 1). Es war ein spezifisches Schlüsselwort, das bei zwei CSS-Eigenschaften anstelle eines regulären <color>-Wertes verwendet werden konnte: {{cssxref("background")}} und {{cssxref("border")}}. Es war eigentlich hinzugefügt, um geerbte Festfarben zu überschreiben.

+

+Mit der Unterstützung der Deckkraft durch den Alphakanal, wurde transparent in CSS Colors Level 3 neudefiniert als eine echte Farbe, die überall dort verwendet werden kann, wo ein <color>-Wert benötigt wird, wie der {{cssxref("color")}} Eigenschaft.

+
+
currentColor Schlüsselwort

+
+
Das currentColor-Schlüsselwort beschreibt den berechneten Wert der {{cssxref("color")}} Eigenschaft des Elements. Es erlaubt, die Farbeigenschaften, die von Eigenschaften oder Kindelementeigenschaften zu vererben, die sie normalerweise nicht vererben.

+
+
Es kann auch für Eigenschaften verwendet werden, die den berechneten Wert der {{cssxref("color")}} Eigenschaft des Elements erben und entspricht dem inherit Schlüsselwort bei diesen Elementen, falls es welche gibt.

+
+
Live-Beispiel

+
+
Die Farbe der Zeile (ein farbgefülltes {{HTMLElement("div")}}) passt sich der Farbe der {{cssxref("color")}} Eigenschaft an, die von seinem Elternelement geerbt wird.

+
+

+
Live-Beispiel 1

+
+
<div style="color:darkred;">
+ Die Farbe dieses Texts ist dieselbe wie die der Zeile:
+ <div style="background:currentcolor; height:1px;"></div>
+ Mehr Text.
+</div>

+
+
{{EmbedLiveSample("Live-Beispiel_1")}}

+
+
Live-Beispiel 2

+
+
<div style="color:blue; border-bottom: 1px dashed currentcolor;">
+ Die Farbe dieses Texts ist dieselbe wie die der Zeile:
+ <div style="background:currentcolor; height:1px;"></div>
+ Mehr Text.
+</div>

+
+
{{EmbedLiveSample("Live-Beispiel_2")}}

+

+
+
rgb()

+
+
Farben können durch das Rot-Grün-Blau-Modell (RGB-Modell) auf zwei Weisen definiert werden:

+
+

+ 
Hexadezimale Notation #RRGGBB und #RGB

+ 

+ 
    
+  
  • "#", gefolgt von sechs hexadezimalen Zeichen (0-9, A-F).
    • 
+  
  • "#", gefolgt von drei hexadezimalen Zeichen (0-9, A-F).
    • 
+ 

+ Die Drei-Ziffern-RGB-Notation (#RGB) und die Sechs-Ziffern-Form (#RRGGBB) sind gleich.

+ Zum Beispiel repräsentieren #f03 und #ff0033 dieselbe Farbe.

+ 
Funktionelle Notation rgb(R,G,B)

+ 
"rgb", gefolgt von drei {{cssxref("<integer>")}} oder drei {{cssxref("<percentage>")}} Werten.

+ Die Ganzzahl 255 entspricht 100% und F oder FF in der hexadezimalen Schreibweise.

+

+
+
/* Diese Beispiele definieren alle dieselbe RGB-Farbe: */
+
+ #f03
+ #F03
+ #ff0033
+ #FF0033
+ rgb(255,0,51)
+ rgb(255, 0, 51)
+ rgb(255, 0, 51.2) /* FEHLER! Keine Bruchzahlen verwenden, nur Ganzzahlen. */
+ rgb(100%,0%,20%)
+ rgb(100%, 0%, 20%)
+ rgb(100%, 0, 20%) /* FEHLER! Ganzzahl- und Prozentschreibweise dürfen nicht gemischt werden. */
+

+
+
hsl()

+
+
Farben können auch durch das Hue-Saturation-Lightness-Modell (HSL-Modell) unter Verwendung der funktionellen Notation hsl() definiert werden. Der Vorteil von HSL gegenüber RGB ist, dass es wesentlich intuitiver ist: man kann die Zahlen, die man haben will, erraten und dann anpassen. Es ist auch einfacher, Sets passender Farben zu erstellen (indem der Farbwert unverändert bleibt und die Helligkeit/Dunkelheit und Sättigung verändert werden).

+
+
Der Farbwert wird als ein Winkel des Farbkreises angegeben (d. h. der Regenbogen als Kreis dargestellt). Der Winkel wird als einheitenlose {{cssxref("<number>")}} angegeben. Per definition red=0=360 und die anderen Farben sind so auf den Kreis verteilt, sodass green=120, blue=240, etc. Als Winkel bricht er implizit um, sodass 120=240 und 480=120.

+
+
Sättigung und Helligkeit werden als Prozentwert angegeben.

+ 100% entspricht voller Sättigung und 0% ist ein Grauton.

+ 100% Helligkeit ist weiß, 0% Helligkeit ist schwarz und 50% Helligkeit ist "normal".

+
+
hsl(0,  100%,50%)    /* rot */       
+hsl(30, 100%,50%)                    
+hsl(60, 100%,50%)                    
+hsl(90, 100%,50%)                    
+hsl(120,100%,50%)    /* grün */      
+hsl(150,100%,50%)                    
+hsl(180,100%,50%)                    
+hsl(210,100%,50%)                    
+hsl(240,100%,50%)    /* blau */      
+hsl(270,100%,50%)                    
+hsl(300,100%,50%)                    
+hsl(330,100%,50%)                    
+hsl(360,100%,50%)    /* rot */       
+
+hsl(120,100%,25%)    /* dunkelgrün */
+hsl(120,100%,50%)    /* grün*/       
+hsl(120,100%,75%)    /* hellgrün */  
+
+hsl(120,100%,50%)    /* grün */      
+hsl(120, 67%,50%)                    
+hsl(120, 33%,50%)                    
+hsl(120,  0%,50%)                    
+
+hsl(120, 60%,70%)    /* pastelgrün */
+

+
+
rgba()

+
+
Farben können durch das Rot-Grün-Blau-Model (RGB-Modell) unter Verwendungn der funktionellen Notation rgba() verwendet werden. RGBa erweitert das RGB-Farbmodell um einen Alphakanal, der die Deckkraft einer Farbe angibt.

+ a bedeutet Deckkraft: 0=transparent; 1=undurchsichtig;

+
+
rgba(255, 0, 0, 0.1)    /* 10% undurchsichtiges Rot */      
+rgba(255, 0, 0, 0.4)    /* 40% undurchsichtiges Rot */      
+rgba(255, 0, 0, 0.7)    /* 70% undurchsichtiges Rot */      
+rgba(255, 0, 0, 1)      /* komplett undurchsichtiges Rot */ 
+

+
+
hsla()

+
+
Farben können auch durch das Hue-Saturation-Lightness-Alpha-Modell (HSLa-Modell) unter Verwendung der funktionellen Notation hsla() definiert werden. HSLa erweitert das HSL-Farbmodell um einen Alphakanal, der die Deckkraft einer Farbe angibt.

+ a bedeutet Deckkraft: 0=transparent; 1=undurchsichtig;

+
+
hsla(240, 100%, 50%, 0.05)    /* 5% undurchsichtiges Blau */   
+hsla(240,100%,50%, 0.4)       /* 40% undurchsichtiges Blau */  
+hsla(240,100%,50%, 0.7)       /* 70% undurchsichtiges Blau */  
+hsla(240,100%,50%,   1)       /* full undurchsichtiges Blau */ 
+

+
+
Systemfarben

+
+
Nicht alle Systemfarben werden von allen Systemen unterstützt. {{deprecated_inline}} für die Benutzung in öffentlichen Webseiten.

+
+

+ 
ActiveBorder

+ 
Rahmenfarbe eines aktiven Fensters.

+ 
ActiveCaption

+ 
Titelfarbe eines aktiven Fensters. Sollte mit der Vordergrundfarbe CaptionText verwendet werden.

+ 
AppWorkspace

+ 
Hintergrundfarbe einer Mehrfachdokumentschnittstelle (MDI).

+ 
Background

+ 
Desktophintergrund.

+ 
ButtonFace

+ 
Schaltflächenfarbe für 3D-Elemente, die durch eine Ebene umgebender Rahmen dreidimensional erscheinen. Sollte mit der Vordergrundfarbe ButtonText verwendet werden.

+ 
ButtonHighlight

+ 
Farbe des dem Licht zugewandten Rahmens eines 3D-Elements, das durch diesen Rahmen dreidimensional erscheint.

+ 
ButtonShadow

+ 
Farbe des dem Licht abgewandten Rahmens eines 3D-Elements, das durch diesen Rahmen dreidimensional erscheint.

+ 
ButtonText

+ 
Text auf Schaltflächen. Sollte mit der Hintergrundfarbe ButtonFace oder ThreeDFace verwendet werden.

+ 
CaptionText

+ 
Farbe des Titeltexts in Fenstern. Sollte mit der Hintergrundfarbe ActiveCaption verwendet werden.

+ 
GrayText

+ 
Farbe für ausgegrauten (deaktivierten) Text.

+ 
Highlight

+ 
Farbe für ausgewählte Elemente in einem Steuerelement. Sollte mit der Vordergrundfarbe HighlightText verwendet werden.

+ 
HighlightText

+ 
Farbe des Texts ausgewählter Elemente in einem Steuerelement. Sollte mit der Hintergrundfarbe Highlight verwendet werden.

+ 
InactiveBorder

+ 
Rahmenfarbe eines inaktiven Fensters.

+ 
InactiveCaption

+ 
Titelfarbe eines inaktiven Fensters. Sollte mit der Vordergrundfarbe InactiveCaptionText verwendet werden.

+ 
InactiveCaptionText

+ 
Farbe des Titeltexts in inaktiven Fenstern. Sollte mit der Hintergrundfarbe InactiveCaption verwendet werden.

+ 
InfoBackground

+ 
Hintergrundfarbe für Tooltips. Sollte mit der Vordergrundfarbe InfoText verwendet werden.

+ 
InfoText

+ 
Textfarbe für Tooltips. Sollte mit der Hintergrundfarbe InfoBackground verwendet werden.

+ 
Menu

+ 
Hintergrundfarbe von Menüs. Sollte mit der Vordergrundfarbe MenuText oder -moz-MenuBarText verwendet werden.

+ 
MenuText

+ 
Textfarbe von Menüs. Sollte mit der Hintergrundfarbe Menu verwendet werden.

+ 
Scrollbar

+ 
Hintergrundfarbe von Scrollleisten.

+ 
ThreeDDarkShadow

+ 
Farbe des dunkleren (normalerweise äußeren) der dem Licht abgewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.

+ 
ThreeDFace

+ 
Schaltflächenfarbe für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen. Sollte mit der Vordergrundfarbe ButtonText verwendet werden.

+ 
ThreeDHighlight

+ 
Farbe des helleren (normalerweise äußeren) der dem Licht zugewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.

+ 
ThreeDLightShadow

+ 
Farbe des dunkleren (normalerweise inneren) der dem Licht zugewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.

+ 
ThreeDShadow

+ 
Farbe des helleren (normalerweise inneren) der dem Licht abgewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.

+ 
Window

+ 
Fensterhintergrundfarbe. Sollte mit der Vordergrundfarbe WindowText verwendet werden.

+ 
WindowFrame

+ 
Fensterrahmenfarbe.

+ 
WindowText

+ 
Textfarbe in Fenstern. Sollte mit der Hintergrundfarbe Window verwendet werden.

+

+
+
Mozilla Systemfarben Erweiterungen

+
+

+ 
-moz-ButtonDefault

+ 
Rahmenfarbe, die um Schaltflächen angezeigt wird, die die Standardaktion für Dialoge darstellen.

+ 
-moz-ButtonHoverFace

+ 
Hintergrundfarbe einer Schaltfläche, über der der Mauszeiger steht (was ThreeDFace oder ButtonFace wäre, wenn der Mauszeiger nicht darübersteht). Sollte mit der Vordergrundfarbe -moz-ButtonHoverText verwendet werden.

+ 
-moz-ButtonHoverText

+ 
Textfarbe einer Schaltfläche, über der der Mauszeiger steht (was ButtonText wäre, wenn der Mauszeiger nicht darübersteht). Sollte mit der Hintergrundfarbe -moz-ButtonHoverFace verwendet werden.

+ 
-moz-CellHighlight

+ 
Hintergrundfarbe für markierte Elemente in einem Baum. Sollte mit der Vordergrundfarbe -moz-CellHighlightText verwendet werden. Siehe auch -moz-html-CellHighlight.

+ 
-moz-CellHighlightText

+ 
Textfarbe für markierte Elemente in einem Baum. Sollte mit der Hintergrundfarbe -moz-CellHighlight verwendet werden. Siehe auch -moz-html-CellHighlightText.

+ 
-moz-Combobox

+ 
{{Gecko_minversion_inline("1.9.2")}} Hintergrundfarbe für Combo-Boxen. Sollte mit der Vordergrundfarbe -moz-ComboboxText verwendet werden. In Gecko Versionen vor 1.9.2 sollte stattdessen -moz-Field verwendet werden.

+ 
-moz-ComboboxText

+ 
{{Gecko_minversion_inline("1.9.2")}} Textfarbe für Combo-Boxen. Sollte mit der Hintergrundfarbe -moz-Combobox verwendet werden. In Gecko Versionen vor 1.9.2 sollte stattdessen -moz-FieldText verwendet werden.

+ 
-moz-Dialog

+ 
Hintergrundfarbe für Dialoge. Sollte mit der Vordergrundfarbe -moz-DialogText verwendet werden.

+ 
-moz-DialogText

+ 
Textfarbe für Dialoge. Sollte mit der Hintergrundfarbe -moz-Dialog verwendet werden.

+ 
-moz-dragtargetzone

+ 
-moz-EvenTreeRow

+ 
{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für geradzahlige Zeilen in einem Baum. Sollte mit der Vordergrundfarbe -moz-FieldText verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-Field verwendet werden. Siehe auch -moz-OddTreeRow.

+ 
-moz-Field

+ 
Hintergrundfarbe für Texteingabefelder. Sollte mit der Vordergrundfarbe -moz-FieldText verwendet werden.

+ 
-moz-FieldText

+ 
Textfarbe für Texteingabefelder. Sollte mit der Hintergrundfarbe -moz-Field, -moz-EvenTreeRow oder -moz-OddTreeRow verwendet werden.

+ 
-moz-html-CellHighlight

+ 
{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für markierte Elemente in HTML {{HTMLElement("select")}}s. Sollte mit der Vordergrundfarbe -moz-html-CellHighlightText verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-CellHighlight verwendet werden.

+ 
-moz-html-CellHighlightText

+ 
{{gecko_minversion_inline("1.9")}} Vordergrundfarbe für markierte Elemente in HTML {{HTMLElement("select")}}s. Sollte mit der Hintergrundfarbe -moz-html-CellHighlight verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-CellHighlightText verwendet werden.

+ 
-moz-mac-accentdarkestshadow

+ 
-moz-mac-accentdarkshadow

+ 
-moz-mac-accentface

+ 
-moz-mac-accentlightesthighlight

+ 
-moz-mac-accentlightshadow

+ 
-moz-mac-accentregularhighlight

+ 
-moz-mac-accentregularshadow

+ 
-moz-mac-chrome-active

+ 
{{Gecko_minversion_inline("1.9.1")}}

+ 
-moz-mac-chrome-inactive

+ 
{{Gecko_minversion_inline("1.9.1")}}

+ 
-moz-mac-focusring

+ 
-moz-mac-menuselect

+ 
-moz-mac-menushadow

+ 
-moz-mac-menutextselect

+ 
-moz-MenuHover

+ 
Hintergrundfarbe für Menüeinträge, über denen der Mauszeiger steht. Oft ähnlich zu Highlight. Sollte mit der Vordergrundfarbe -moz-MenuHoverText oder -moz-MenuBarHoverText verwendet werden.

+ 
-moz-MenuHoverText

+ 
Textfarbe für Menüeinträge, über denen der Mauszeiger steht. Oft ähnlich zu HighlightText. Sollte mit der Hintergrundfarbe -moz-MenuHover verwendet werden.

+ 
-moz-MenuBarText

+ 
{{Gecko_minversion_inline("1.9.2")}} Vordergrundfarbe für Text in Menüleisten. Oft ähnlich zu MenuText. Sollte auf einem Menu Hintergrund verwendet werden.

+ 
-moz-MenuBarHoverText

+ 
{{Gecko_minversion_inline("1.9.2")}} Vordergrundfarbe für Text in Menüleisten, über dem der Mauszeiger steht. Oft ähnlich zu -moz-MenuHoverText. Sollte auf einem -moz-MenuHover Hintergrund verwendet werden.

+ 
-moz-nativehyperlinktext

+ 
{{Gecko_minversion_inline("1.9.1")}} Standardplattformfarbe für Hyperlinks.

+ 
-moz-OddTreeRow

+ 
{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für ungeradzahlige Zeilen in einem Baum. Sollte mit der Vordergrundfarbe -moz-FieldText verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-Field verwendet werden. Siehe auch -moz-EvenTreeRow.

+ 
-moz-win-communicationstext

+ 
{{gecko_minversion_inline("1.9")}} Sollte für Text in Objekten mit {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox; verwendet werden.

+ 
-moz-win-mediatext

+ 
{{gecko_minversion_inline("1.9")}} Sollte für Text in Objekten mit {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox; verwendet werden.

+

+
+
Mozilla Farbpräferenz Erweiterungen

+
+

+ 
-moz-activehyperlinktext

+ 
Benutzerpräferenz für die Textfarbe aktiver Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.

+ 
 

+ 
-moz-default-background-color

+ 
{{Gecko_minversion_inline("5.0")}} Benutzerpräferenz für die Dokumenthintergrundfarbe.

+ 
 

+ 
-moz-default-color

+ 
{{Gecko_minversion_inline("5.0")}} Benutzerpräferenz für die Textfarbe.

+ 
-moz-hyperlinktext

+ 
Benutzerpräferenz für die Textfarbe nicht besuchter Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.

+ 
-moz-visitedhyperlinktext

+ 
Benutzerpräferenz für die Textfarbe besuchter Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Colors', '#colorunits', '')}}{{Spec2('CSS4 Colors')}}rebeccapurple hinzugefügt.
{{SpecName('CSS3 Colors', '#colorunits', '')}}{{Spec2('CSS3 Colors')}}Systemfarben als veraltet markiert; SVG-Farben hinzugefügt; functionale Notationen rgba(), hsl() und hsla() hinzugefügt.
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '')}}{{Spec2('CSS2.1')}}orange als Farbe und Systemfarben hinzugefügt.
{{SpecName('CSS1', '#color-units', '')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.color")}}

+
+
Siehe auch

+
+
    
+ 
  • Die {{cssxref("opacity")}} Eigenschaft, die es erlaubt, die Transparenz einer Farbe auf Elementebene zu definieren.
    • 
+ 
  • Die {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-shadow")}} und {{cssxref("box-shadow")}} Eigenschaften.
    • 
+

diff --git a/files/de/web/css/filter/index.html b/files/de/web/css/filter/index.html
new file mode 100644
index 0000000000..04901d5c3a
--- /dev/null
+++ b/files/de/web/css/filter/index.html
@@ -0,0 +1,1064 @@
+---
+title: filter
+slug: Web/CSS/filter
+tags:
+  - Benötigt Browserunterstützung
+  - CSS
+  - CSS Eigenschaft
+  - CSS Funktion
+  - Grafik
+  - Layout
+  - Referenz
+  - SVG
+  - SVG Filter
+  - Web
+translation_of: Web/CSS/filter
+---
+
{{ CSSRef() }}

+
+
{{ SeeCompatTable() }}

+
+
Übersicht

+
+
Die filter CSS Eigenschaft erlaubt es, Effekte wie Unschärfe oder Farbverschiebungen auf Elemente anzuwenden, bevor sie angezeigt werden. Filter werden normalerweise dazu benutzt, die Darstellung eines Bildes, eines Hintergrunds oder eines Rahmens anzupassen.

+
+
Im CSS Standard inbegriffen sind mehrere Funktionen, die vordefinierte Effekte ermöglichen. Es können auch Filter verwendet werden, die über SVG mit Hilfe des SVG Filter Elements angegeben wurden.

+
+
Hinweis: Ältere Versionen (4.0 bis einschließlich 9.0) des Internet Explorers unterstützten eine nicht standardisierte "filter" Eigenschaft, die mittlerweile missbilligt wird.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Angabe einer Funktion:

+
+
filter: <filter-function> [<filter-function>]* | none
+

+
+
Für eine Referenz zu einem SVG {{ SVGElement("filter") }} Element:

+
+
filter: url(svg-url#element-id)
+

+
+
Beispiele

+
+
Beispiele zur Benutzung der vordefinierten Funktionen. Siehe die jeweilige Funktion für ein spezifisches Beispiel.

+
+
.mydiv { filter: grayscale(50%) }
+
+/* Graut alle Bilder um 50% aus und macht sie um 10px unscharf */
+img {
+  filter: grayscale(0.5) blur(10px);
+}

+
+
Beispiele zur Benutzung der URL Funktion mit einer SVG Ressource.

+
+
.target { filter: url(#c1); }
+
+.mydiv { filter: url(commonfilters.xml#large-blur) }
+

+
+
Funktionen

+
+
Um die filter Eigenschaft zu verwenden, muss ein Wert für die folgenden Funktionen angegeben werden. Falls der Wert ungültig ist, gibt die Funktion none zurück. Falls nicht anders angegeben, akzeptieren Funktionen, die eine Wertangabe mit Prozentzeichen (wie z. B. 34%) akzeptieren, auch einen dezimalen Wert (wie z. B. 0.34).

+
+
url(url)

+
+
Die url() Funktion erlaubt die Angabe einer XML Datei, die einen SVG Filter definiert, und kann auch einen Anker zu einem bestimmten Element beinhalten.

+
+
filter: url(resources.svg#c1)
+

+
+
blur(radius)

+
+
Wendet eine Gaußsche Unschärfe auf das Ursprungsbild an. Der Radiuswert gibt die Standardabweichung der Gaußschen Funktion an, oder wie viele Pixel auf dem Bildschirm mit einander vermischt werden. Ein höherer Wert erzeugt daher eine stärkere Unschärfe. Falls kein Parameter angegeben wird, wird 0 verwendet. Der Parameter wird dabei als {{cssxref("<length>")}} angegeben, akzeptiert jedoch keine Prozentwerte.

+
+
filter: blur(5px)
+

+
+
+
+
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
+  </filter>
+</svg>

+
+
{{EmbedLiveSample('blur_example','100%','236px','')}}

+
+
brightness(amount)

+
+
Wendet eine lineare Multiplikation auf das Ursprungsbild an, sodass es dunkler oder heller erscheint. Ein Wert von 0% erzeugt ein Bild, das komplett schwarz ist. Ein Wert von 100% lässt das Bild unverändert. Andere Werte sind lineare Multiplikationen dieses Effekts. Werte über 100% sind erlaubt und erzeugen hellere Ergebnisse. Falls der amount Parameter fehlt, wird ein Wert von 100% verwendet.

+
+
filter: brightness(0.5)

+
+
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+ <filter id="brightness">
+    <feComponentTransfer>
+        <feFuncR type="linear" slope="[amount]"/>
+        <feFuncG type="linear" slope="[amount]"/>
+        <feFuncB type="linear" slope="[amount]"/>
+    </feComponentTransfer>
+  </filter>
+</svg>

+
+
+
+
{{EmbedLiveSample('brightness_example','100%','231px','')}}

+
+
contrast(amount)

+
+
Passt den Kontrast des Ursprungsbildes an. Ein Wert von 0% erzeugt ein Bild, dass komplett schwarz ist. Ein Wert von 100% lässt das Bild unverändert. Werte über 100% sind erlaubt und erzeugen Ergebnisse mit weniger Kontrast. Falls der amount Parameter fehlt, wird ein Wert von 100% verwendet.

+
+
filter: contrast(200%)
+

+
+
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+  <filter id="contrast">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+

+
+
+
+
{{EmbedLiveSample('contrast_example','100%','203px','')}}

+
+
drop-shadow(<shadow>)

+
+
Fügt dem Ursprungsbild einen Schlagschatteneffekt hinzu. Ein Schlagschatten ist dabei eigentlich eine unscharfe, versetzte Version der Alphamaske eines Bildes, die in einer bestimmten Farbe dargestellt wird und unterhalb des Bildes angezeigt wird. Die Funktion akzeptiert einen Parameter des Typs <shadow> (definiert in CSS3 Backgrounds), mit der Ausnahme, dass das Schlüsselwort inset nicht erlaubt ist. Diese Funktion ähnelt der verbreiteteren box-shadow Eigenschaft; der Unterschied besteht darin, dass manche Browser für Filter Hardwarebeschleunigung für eine höhere Geschwindigkeit unterstützen. Die Parameter des <shadow> Wertes lauten wie folgt:

+
+

+ 
<offset-x> <offset-y> (benötigt)

+ 
Dies sind die zwei {{cssxref("<length>")}} Werte, die den Schattenversatz angeben. <offset-x> gibt die horizontale Distanz an. Negative Werte positionieren den Schatten links von dem Element. <offset-y> gibt die vertikale Distanz an. Negative Werte positionieren den Schatten oberhalb des Elements. Siehe {{cssxref("<length>")}} für mögliche Einheiten.

+ Falls beide Werte 0 sind, wird der Schatten hinter dem Element platziert (und erzeugt möglicherweise einen Unschärfeeffekt, falls <blur-radius> und/oder <spread-radius> gesetzt sind).

+ 
<blur-radius> (optional)

+ 
Dies ist ein dritter {{cssxref("<length>")}} Wert. Je größer dieser Wert ist, desto größer ist die Unschärfe, d. h. der Schatten wird größer und unschärfer. Negative Werte sind nicht erlaubt. Falls nicht angegeben, wird 0 verwendet (der Schattenrand wird scharf dargestellt).

+ 
<spread-radius> (optional)

+ 
Dies ist ein vierter {{cssxref("<length>")}} Wert. Positive Werte erweitern den Schatten und lassen ihn größer erscheinen, negative Werte verkleinern den Schatten. Falls nicht angegeben, wird 0 verwendet (der Schatten hat die gleiche Größe wie das Element). 

+ Hinweis: WebKit und evtl. andere Browser unterstützen diesen vierten Wert nicht. Er wird nicht dargestellt, falls er angegeben wird.

+ 
<color> (optional)

+ 
Siehe {{cssxref("<color>")}} für mögliche Schlüsselwörter und Angaben.

+ Falls nicht angegeben, bestimmt der Browser die Farbe. In Gecko (Firefox), Presto (Opera bis Version 12) und Trident (Internet Explorer) wird der Wert der {{ cssxref("color") }} Eigenschaft verwendet. WebKit (Opera ab Version 15, Chrome) verwendet einen transparenten Schatten und ist daher nutzlos, falls <color> nicht angegeben wird.

+

+
+
filter: drop-shadow(16px 16px 10px black)

+
+
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+ <filter id="drop-shadow">
+    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
+    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
+    <feFlood flood-color="[color]"/>
+    <feComposite in2="offsetblur" operator="in"/>
+    <feMerge>
+      <feMergeNode/>
+      <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+  </filter>
+</svg>
+

+
+
+
+
{{EmbedLiveSample('shadow_example','100%','238px','')}}

+
+
grayscale(amount)

+
+
Konvertiert das Ursprungsbild in Graustufen. Der Wert von amount bestimmt den Anteil der Konvertierung. Ein Wert von 100% erzeugt ein komplett graues Ergebnis. Ein Wert von 0% lässt das Bild unverändert. Werte zwischen 0% und 100% sind lineare Multiplikationen dieses Effekts. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet.

+
+
filter: grayscale(100%)

+
+
+
+
{{EmbedLiveSample('grayscale_example','100%','209px','')}}

+
+
hue-rotate(angle)

+
+
Wendet eine Farbtonrotation auf das Ursprungsbild an. Der Wert von angle gibt die Gradzahl um den Farbkreis an, um den die Ursprungsfarben verschoben werden. Ein Wert von 0deg lässt das Bild unverändert. Falls der angle Parameter fehlt, wird 0deg verwendet. Der Maximalwert ist 360deg.

+
+
filter: hue-rotate(90deg)

+
+
+
+
{{EmbedLiveSample('huerotate_example','100%','221px','')}}

+
+
invert(amount)

+
+
Invertiert die Ursprungsfarben des Ursprungsbildes. Der Wert von amount gibt den Anteil der Konvertierung an. Ein Wert von 100% erzeugt ein komplett invertiertes Ergebnis. Ein Wert von 0% lässt das Bild unverändert. Werte zwischen 0% und 100% sind lineare Multiplikationen dieses Effekts. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet.

+
+
filter: invert(100%)

+
+
+
+
{{EmbedLiveSample('invert_example','100%','407px','')}}

+
+
opacity(amount)

+
+
Fügt den Farben des Ursprungsbildes eine Transparenz hinzu. Der Wert von amount gibt den Anteil der Konvertierung an. Ein Wert von 0% erzeugt ein komplett transparentes Ergebnis. Ein Wert von 100% lässt das Bild unverändert. Werte zwischen 0% und 100% sind lineare Multiplikationen dieses Effekts. Dies ist equivalent zur Multiplikation der Ursprungsfarben mit amount. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet. Diese Funktion ist ähnlich zu der verbreiteteren opacity Eigenschaft; der Unterschied besteht darin, dass manche Browser für Filter Hardwarebeschleunigung für eine höhere Geschwindigkeit unterstützen.

+
+
filter: opacity(50%)

+
+
+
+
{{EmbedLiveSample('opacity_example','100%','210px','')}}

+
+
saturate(amount)

+
+
Sättigt das Ursprungsbild. Der Wert von amount gibt den Anteil der Konvertierung an. Ein Wert von 0% erzeugt ein komplett ungesättigtes Ergebnis. Ein Wert von 100% lässt das Bild unverändert. Andere Werte sind lineare Multiplikationen dieses Effekts. Werte für amount über 100% sind erlaubt und erzeugen übersättigte Ergebnisse. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet.

+
+
filter: saturate(200%)

+
+
+
+
{{EmbedLiveSample('saturate_example','100%','332px','')}}

+
+
sepia(amount)

+
+
Konvertiert das Ursprungsbild in Sepiafarben. Der Wert von amount bestimmt den Anteil der Konvertierung. Ein Wert von 100% erzeugt ein komplett sepiafarbenes Ergebnis. Ein Wert von 0% lässt das Bild unverändert. Werte zwischen 0% und 100% sind lineare Multiplikationen dieses Effekts. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet.

+
+
filter: sepia(100%)

+
+
+
+
{{EmbedLiveSample('sepia_example','100%','229px','')}}

+
+
Kombinierte Funktionen

+
+
Eine beliebige Anzahl an Funktionen kann kombiniert werden, um die Ausgabe zu verändert. Das folgende Beispiel verstärkt den Kontrast und die Helligkeit des Bildes.

+
+
filter: contrast(175%) brightness(3%)

+
+
+
+
{{EmbedLiveSample('combination_example','100%','209px','')}}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}{{ Spec2('Filters 1.0') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.filter")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/flex-flow/index.html b/files/de/web/css/flex-flow/index.html
new file mode 100644
index 0000000000..7eca4d3ecb
--- /dev/null
+++ b/files/de/web/css/flex-flow/index.html
@@ -0,0 +1,64 @@
+---
+title: flex-flow
+slug: Web/CSS/flex-flow
+tags:
+  - CSS
+  - CSS Eigenschaften
+  - CSS Flexible Boxen
+  - Referenz
+translation_of: Web/CSS/flex-flow
+---
+
{{ CSSRef("CSS Flexible Boxes") }}

+
+
Summary

+
+
Die Kurzschreibweise flex-flow fasst die Eigenschaften {{cssxref("flex-direction")}} und {{cssxref("flex-wrap")}} zusammen.

+
+
{{cssinfo}}

+
+
Siehe Using CSS flexible boxes für mehr Information.

+
+
Syntax

+
+
{{csssyntax}}

+
+
Werte

+
+
Siehe flex-direction und flex-wrap.

+
+
Beispiele

+
+
element {
+  /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
+  flex-flow: column-reverse wrap;
+}
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
CSS Flexible Box Layout Module{{ Spec2('CSS3 Flexbox') }} 

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.flex-flow")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/flex-grow/index.html b/files/de/web/css/flex-grow/index.html
new file mode 100644
index 0000000000..0a40c317de
--- /dev/null
+++ b/files/de/web/css/flex-grow/index.html
@@ -0,0 +1,82 @@
+---
+title: flex-grow
+slug: Web/CSS/flex-grow
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/flex-grow
+---
+
{{ CSSRef("CSS Flexible Boxes") }}

+
+
Die  flex-grow CSS Eigenschaft gibt den Wachstumsfaktor eines flexiblen Elements in dem zur Verfügung stehenden Raum eines Flex Containers an. Wenn alle Schwesternelemente den gleichen flex-grow Wert haben, teilen sich diese Elemente den gleichen Platzanteil im Container auf. Andernfalls entscheidet der Platzanteil durch das Verhältnis, das sich aus den verschiedenen flex-grow Werten ergibt.

+
+
Verwendet wird flex-grow zusammen mit den anderen flex Eigenschaften {{cssxref("flex-shrink")}} und {{cssxref("flex-basis")}}. Im Regelfall wird durch die {{cssxref("flex")}} Kurzschrift sichergestellt, dass alle Werte gesetzt werden.

+
+
{{cssinfo}}

+
+
Siehe die Verwendung von CSS Flexible Boxes für weitere Eigenschaften und Informationen.

+
+
{{EmbedInteractiveExample("pages/css/flex-grow.html")}}

+
+
+
+
 

+
+
Syntax

+
+
{{csssyntax}}
+

+
+
flex-grow: 3
+
+flex-grow: inherit
+

+
+
Werte

+
+

+ 
<number>

+ 
Siehe {{cssxref("<number>")}}. Negative Werte sind ungültig.

+

+
+
Beispiele

+
+
element {
+  flex-grow: 3;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
CSS Flexible Box Layout Module{{ Spec2('CSS3 Flexbox') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.flex-grow")}}

+
+
[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/flex-shrink/index.html b/files/de/web/css/flex-shrink/index.html
new file mode 100644
index 0000000000..7e741ec2d6
--- /dev/null
+++ b/files/de/web/css/flex-shrink/index.html
@@ -0,0 +1,75 @@
+---
+title: flex-shrink
+slug: Web/CSS/flex-shrink
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - Referenz
+translation_of: Web/CSS/flex-shrink
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die flex-shrink CSS Eigenschaft gibt den Schrumpffaktor eines Flexelements an.

+
+
{{cssinfo}}

+
+
Siehe die Verwendung von CSS Flexible Boxes für weitere Eigenschaften und Informationen.

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("flex-shrink")}}
+

+
+
flex-shrink: 2
+
+flex-shrink: inherit
+

+
+
Werte

+
+

+ 
<number>

+ 
Siehe {{cssxref("<number>")}}. Negative Werte sind ungültig.

+

+
+
Beispiele

+
+
element {
+  flex-shrink: 3;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}{{ Spec2('CSS3 Flexbox') }} 

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.flex-shrink")}}

+
+
[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/flex-wrap/index.html b/files/de/web/css/flex-wrap/index.html
new file mode 100644
index 0000000000..bb2e777f0d
--- /dev/null
+++ b/files/de/web/css/flex-wrap/index.html
@@ -0,0 +1,81 @@
+---
+title: flex-wrap
+slug: Web/CSS/flex-wrap
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - Referenz
+translation_of: Web/CSS/flex-wrap
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die flex-wrap CSS Eigenschaft legt fest, ob die Elemente in einem Flexbox-Container auf einer Linie liegen, oder bei bedarf auf mehrere Zeilen verteilt werden können.

+
+
{{cssinfo}}

+
+
Siehe die CSS flexible Boxen verwenden für mehr Informationen.

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("flex-wrap")}}
+

+
+
flex-wrap: nowrap
+flex-wrap: wrap
+flex-wrap: wrap-reverse
+
+flex-wrap: inherit
+

+
+
Werte

+
+
Die folgenden Werte können verwendet werden:

+
+

+ 
nowrap

+ 
Die flexiblen Elemente liegen alle in derselben Reihe, auch wenn dazu der Platz fehlt.

+ 
wrap

+ 
Die flexiblen Elemente können sich wenn nötig innerhalb des Containers in mehrere Zeilen aufteilen (nach unten).

+ 
wrap-reverse

+ 
Die flexiblen Elemente können sich wenn nötig innerhalb des Containers in mehrere Zeilen aufteilen (nach oben).

+

+
+
Beispiele

+
+
element {
+  flex-wrap: nowrap;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Flexbox', '#flex-wrap', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }} 

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.flex-wrap")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/float/index.html b/files/de/web/css/float/index.html
new file mode 100644
index 0000000000..2711d0d936
--- /dev/null
+++ b/files/de/web/css/float/index.html
@@ -0,0 +1,109 @@
+---
+title: float
+slug: Web/CSS/float
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/float
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die float Eigenschaft bestimmt, ob ein Element aus dem normalen Fluss herausgelöst werden soll und nachfolgende Inhalte auf der linken oder rechten Seite des gefloateten Elements platziert werden sollen.

+
+
    
+ 
  • Standardwert: none
    • 
+ 
  • Anwendbar auf: alle Elemente
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: Nein
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: wie festgelegt
    • 
+

+
+
Syntax

+
+
float:  left | right | none | inherit
+

+
+
Werte

+
+

+ 
none

+ 
Standardwert. Das Element wird nicht umflossen.

+ 
left

+ 
Das Element wird nach links gerückt und die Inhalte des umliegenden Elements (containing block) werden rechts vom Element angeordnet.

+ 
right

+ 
Das Element wird nach rechts gerückt und die Inhalte des umliegenden Elements (containing block) werden links vom Element angeordnet.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Beispiele

+
+
Live Beispiel

+
+
<style type="text/css">
+  div { border: solid red;  max-width: 70ex; }
+  h4  { float: left;  margin: 0; }
+</style>
+
+<div>
+  <h4>HELLO!</h4>
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+</div>
+

+
+

+
HELLO!

+This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}Adds the values inline-start and inline-end.
{{SpecName('CSS3 Box', '#float', 'float')}}{{Spec2('CSS3 Box')}}Lots of new values, not all clearly defined yet. Any differences in behavior, unrelated to new features, are expected to be unintentional; please report.
{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}{{Spec2('CSS2.1')}}No change
{{SpecName('CSS1', '#float', 'float')}}{{Spec2('CSS1')}}Initial definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.float")}}
+
+
Siehe auch

+
+
+
+
{{ languages( {"en": "en/CSS/float", "fr": "en/CSS/float", "es": "es/CSS/float", "pl": "pl/CSS/float"} ) }}

diff --git a/files/de/web/css/font-family/index.html b/files/de/web/css/font-family/index.html
new file mode 100644
index 0000000000..ccd539914f
--- /dev/null
+++ b/files/de/web/css/font-family/index.html
@@ -0,0 +1,185 @@
+---
+title: font-family
+slug: Web/CSS/font-family
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Schriftarten
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/font-family
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die font-family CSS Eigenschaft erlaubt es, eine priorisierte Liste von Schriftfamiliennamen und/oder generische Familiennamen für ein ausgewähltes Element anzugeben. Im Gegensatz zu den meisten anderen CSS Eigenschaften werden die Werte durch Komma getrennt, um zu kennzeichnen, dass sie Alternativen darstellen. Der Browser wählt die erste Schrift, die auf dem Computer installiert ist oder mittels der Informationen, die über eine {{cssxref("@font-face")}} At-Regel gegeben sind, heruntergeladen werden kann.

+
+
Webautoren sollten einer Schriftfamilienliste immer mindestens eine generische Familie hinzufügen, da es keine Garantie dafür gibt, dass eine bestimmte Schriftart auf dem Computer installiert ist oder über die {{cssxref("@font-face")}} At-Regel heruntergeladen werden kann. Die generische Schriftart erlaubt es dem Browser, falls nötig, eine akzeptable Ersatzschriftart auszuwählen.

+
+
Es ist oft vorteilhaft, die Kurzform Eigenschaft {{cssxref("font")}} zu verwenden, um font-size und andere Schrift bezogene Eigenschaften auf einmal zu setzen.

+
+
Hinweis: Die font-family Eigenschaft definiert eine Liste von Schriftarten, von der höchsten zur niedrigsten Priorität. Die Auswahl der Schriftart stoppt nicht einfach bei der ersten Schriftart in der Liste, die auf dem System des Benutzers installiert ist. Vielmehr findet die Auswahl der Schriftart pro Zeichen statt, so dass, falls eine verfügbare Schriftart ein bestimmtes Schriftzeichen nicht definiert, in den übrigen Schriftarten nach diesem Zeichen gesucht wird. Dies funktioniert jedoch nicht im Internet Explorer 6 oder früheren Versionen.

+

+Falls eine Schrift nur in bestimmten Stilen, Varianten oder Größen verfügbar ist, können diese Eigenschaften auch beeinflussen, welche Schriftart ausgewählt wird.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("font-family")}}
+

+
+
font-family: Gill Sans Extrabold, sans-serif
+font-family: "Goudy Bookletter 1911", sans-serif
+
+font-family: serif
+font-family: sans-serif
+font-family: monospace
+font-family: cursive
+font-family: fantasy
+
+font-family: inherit
+

+
+
Werte

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
<family-name>Der Name der Schriftfamilie. Zum Beispiel "Times" und "Helvetica" sind Schriftfamilien. Schriftfamiliennamen, die Leerzeichen enthalten, sollten von Anführungszeichen eingeschlossen werden.
<generic-name>
+    
Generische Schriftfamilien dienen als Fallback-Mechanismus, ein Mittel, um etwas von der Absicht des Stylesheet Autors zu erhalten für den Fall, wenn keine der angegebenen Schriftarten verfügbar sind. Generische Familiennamen sind Schlüsselwörter und dürfen nicht in Anführungszeichen eingeschlossen werden. Eine generische Schriftfamilie sollte die letzte Alternative in einer Liste von Schriftfamiliennamen sein.

+
+    

+     
serif

+     
Schriftzeichen haben abschließende Striche, ausgeweitete oder zugespitzte Enden oder serifenbetonte Enden.

+     Z. B.  Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif

+     
sans-serif

+     
Schriftzeichen haben gerade Strichenden.

+     Z. B. 'Trebuchet MS', 'Liberation Sans', 'Nimbus Sans L', sans-serif

+     
monospace

+     
Alle Schriftzeichen haben die gleiche Breite.

+     Z. B. "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace

+     
cursive

+     
Schriftzeichen in kursiven Schriftarten haben üblicherweise verbindende Striche oder andere kursive Charakteristiken, die über die von kursiven Schriftzügen hinausgehen. Die Schriftzeichen sind teilweise oder ganz verbunden und das Ergebnis ähnelt eher einer Handschrift als gedruckten Lettern.

+     
fantasy

+     
Fantasie Schriftarten sind überwiegend dekorative Schriftarten, die verspielte Darstellungen von Schriftzeichen beinhalten.

+    

+   

+
+
Gültige Schriftfamiliennamen

+
+
Schriftfamiliennamen müssen entweder in Anführungszeichen eingeschlossene Strings sein oder nicht angeführte als eine Aneinanderreihung von einem oder mehreren Bezeichnern. Das heißt dass in nicht angeführten Schriftfamiliennamen Interpunktionszeichen und Ziffern am Anfang jedes Zeichens Maskiert (escaped) werden müssen.

+
+
Beispielsweise sind die folgenden Angaben gültig:

+
+
font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;

+
+
Die folgenden Angaben sind ungültig:

+
+
font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;

+
+
Beispiele

+
+
Beispiel 1

+
+
body     { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }
+
+.receipt { font-family: Courier, "Lucida Console", monospace }
+

+
+
Beispiel 2

+
+
.exampleserif {
+    font-family: Times, "Times New Roman", Georgia, serif;
+}
+
+.examplesansserif {
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.examplemonospace {
+    font-family: "Lucida Console", Courier, monospace;
+}
+
+.examplecursive {
+    font-family: cursive;
+}
+
+.examplefantasy {
+    font-family: fantasy;
+}
+

+
+
<div class="exampleserif">
+Dies ist ein Beispiel für eine Serifenschrift.
+</div>
+
+<div class="examplesansserif">
+Dies ist ein Beispiel für eine serifenlose Schrift.
+</div>
+
+<div class="examplemonospace">
+Dies ist ein Beispiel für eine nicht-proportionale Schrift.
+</div>
+
+<div class="examplecursive">
+Dies ist ein Beispiel für eine kursive Schrift.
+</div>
+
+<div class="examplefantasy">
+Dies ist ein Beispiel für eine Fantasieschrift.
+</div>

+
+
Live Beispiel

+
+
{{ EmbedLiveSample('Beispiel_2','600','120') }}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}{{Spec2('CSS3 Fonts')}}Keine wesentlichen Änderungen
{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}{{Spec2('CSS2.1')}}Keine wesentlichen Änderungen
{{SpecName('CSS1', '#font-family', 'font-familiy')}}{{Spec2('CSS1')}} 

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.font-family")}}
diff --git a/files/de/web/css/font-feature-settings/index.html b/files/de/web/css/font-feature-settings/index.html
new file mode 100644
index 0000000000..f04a5497a6
--- /dev/null
+++ b/files/de/web/css/font-feature-settings/index.html
@@ -0,0 +1,108 @@
+---
+title: font-feature-settings
+slug: Web/CSS/font-feature-settings
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Layout
+  - Reference
+  - Référence(2)
+translation_of: Web/CSS/font-feature-settings
+---
+
{{CSSRef}} {{SeeCompatTable}}

+
+
Zusammenfassung

+
+
Die Eigenschaft font-feature-settings ermöglicht die Kontrolle von erweiterten typografischen Eigenschaften in OpenType-Schriftarten.

+
+
Anmerkung: Wenn möglich sollte die Eigenschaft {{cssxref("font-variant")}} genutzt werden. Diese Eigenschaft wurde speziell für Fälle entwickelt, in denen es nicht möglich ist, eine OpenType-Eigenschaft zu aktivieren oder zu nutzen.

+

+Diese Eigenschaft sollte insbesondere nicht genutzt werden, um Kapitälchen zu aktivieren.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("font-feature-settings")}}
+

+
+
font-feature-settings: normal
+font-feature-settings: "smcp"
+font-feature-settings: "smcp" on
+font-feature-settings: "swsh" 2
+font-feature-settings: "smcp", "swsh" 2
+
+font-feature-settings: inherit
+

+
+
Werte

+
+

+ 
normal

+ 
Der Text wird mit Standardeinstellungen gesetzt.

+ 
<feature-tag-value>

+ 
Beim Rendern von Text wird die Liste der Tag-Wert-Paare an die Text-Layout-Engine übergeben um Eigenschaften zu aktivieren oder zu deaktivieren. Der Tag ist immer ein {{cssxref("<string>")}} aus 4 ASCII-Zeichen. Wenn eine andere Anzahl an Zeichen übergeben wird oder der Tag Zeichen außerhalb des Coderaumes von U+20 bis U+7E enthält, ist die komplette Eigenschaft ungültig.

+ Der Wert ist eine positive Ganzzahl, wobei die Schlüsselwörter on und off entsprechend für 1 und 0 stehen.  Wenn kein Wert übergeben wird, wird standardmäßig von 1 ausgegangen. Für nicht-boolsche OpenType-Eigenschaften (z.B. Alternative Stile) selektiert der Wert ein bestimmtes Zeichen, während er für boolsche Eigenschaften einen Schalter darstellt.

+

+
+
Beispiele

+
+
/* Kapitälchen aktivieren */
+.smallcaps { font-feature-settings: "smcp" on; }
+
+/* Groß- und Kleinbuchstaben zu Kapitälchen konvertieren (Zeichensetzung eingeschlossen) */
+.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
+
+/* Historische Formen aktivieren */
+.hist { font-feature-settings: "hist"; }
+
+/* Verbreitete Ligaturen deaktivieren (standardmäßig eingeschaltet) */
+.noligs { font-feature-settings: "liga" 0; }
+
+/* Nichtproportionale Ziffern (monospace) aktivieren */
+td.tabular { font-feature-settings: "tnum"; }
+
+/* Automatische Brüche aktivieren */
+.fractions { font-feature-settings: "frac"; }
+
+/* Das zweite geschwungene Zeichen nutzen */
+.swash { font-feature-settings: "swsh" 2; }
+
+/* Alternativen Zeichensatz Nr.7 nutzen */
+.fancystyle {
+  font-family: Gabriola; /* Verfügbar ab Windows 7 und Mac OS */
+  font-feature-settings: "ss07";
+}
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}{{Spec2('CSS3 Fonts')}} 

+
+
Browserkompatibilität

+
+{{Compat("css.properties.font-feature-settings")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/font-size/index.html b/files/de/web/css/font-size/index.html
new file mode 100644
index 0000000000..7a5592169c
--- /dev/null
+++ b/files/de/web/css/font-size/index.html
@@ -0,0 +1,327 @@
+---
+title: font-size
+slug: Web/CSS/font-size
+tags:
+  - CSS
+  - CSS Font
+  - CSS-Eigenschaft
+  - CSS-Schrift
+  - Reference
+translation_of: Web/CSS/font-size
+---
+
{{CSSRef}}

+
+
Die font-size-CSS-Eigenschaft spezifiziert die Schriftgöße. Eine Änderung der Schriftgröße kann die Größe anderer Partien beeinflussen, da sie dazu benutzt wird, den Wert der em- und ex-{{cssxref("<length>")}}-Einheiten zu berechnen.

+
+
/* <absolute-size>-Werte */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+
+/* <relative-size>-Werte */
+font-size: smaller;
+font-size: larger;
+
+/* <length>-Werte */
+font-size: 12px;
+font-size: 0.8em;
+
+/* <percentage>-Werte */
+font-size: 80%;
+
+/* Globale Werte */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+

+
+
+
+
{{EmbedLiveSample("font-size", 1200, 180, "", "", "example-outcome-frame")}}

+
+
{{cssinfo}}

+
+
Syntax

+
+
Die font-size-Eigenschaft kann auf zwei Weisen spezifiziert werden:

+
+
+
+
Werte

+
+

+ 
xx-small, x-small, small, medium, large, x-large, xx-large

+ 
Ein Satz von Schlüsselwörtern absoluter Größe, basierend auf der vom Benutzer festgelegten Schriftgröße (welche medium entspricht). Ähnlich der HTML-Tags <font size="1"> bis <font size="7">, bei denen die benutzerdefinierte Größe <font size="3"> entspricht.

+ 
larger, smaller

+ 
Größer oder kleiner als die Schriftgröße des Elternelements; grob das Verhältnis, das benutzt wird, um die obigen absoluten Schlüsselwörter zu unterscheiden.

+ 
<length-percentage>

+ 

+ 
Ein positiver {{cssxref("<length>")}}- oder {{cssxref("<percentage>")}}-Wert. Werden die Einheiten der <length>-Werte durch em oder ex spezifiziert, ist die Größe relativ definiert zur Schriftgröße des Elternelements des gefragten Elements. Zum Beispiel entspricht 0.5em der Hälfte der Schriftgröße des aktuellen Elternelements. Werden die Einheiten in rem spezifiziert, ist die Größe relativ definiert zur Schriftgröße des {{HTMLElement("html")}}-(Wurzel-)Elements.

+
+ 
<percentage>-Werte beziehen sich auf die Schriftgröße des Elternelements.

+ 

+

+
+
Am Besten werden Werte benutzt, die relativ zur benutzerdefinierten Schriftgröße stehen. Absolute Werte in Form von Längen mit Einheiten, außer em oder ex, sollten vermieden werden. Müssen trotzdem solche absoluten Werte benutzt werden, ist px anderen Einheiten vorzuziehen, weil seine Bedeutung nicht abhängig davon, was das Betriebssystem (meist fälschlicherweise) für die Bildschirmauflösung hält, variiert.

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Mögliche Ansätze

+
+
Es gibt einige verschiedene Arten, die Schriftgröße zu spezifizieren, in Form von Schlüsselwörtern oder numerischen Werten für Pixel oder ems. Je nachdem, was die Ansprüche einer Webseite sind, kann die richtige Methode gewählt werden.

+
+
Schlüsselwörter

+
+
Schlüsselwörter sind eine gute Möglichkeit die Größe von Schriften im Web festzulegen. Indem ein Schlüsselwort für die Schriftgröße des body-Elements festgelegt wird, ist es möglich überall auf der restlichen Webseite relative Schriftgrößen zu benutzen, was einen befähigt, auf einfache Weise die Schrift auf der ganzen Seite entsprechend zu vergrößern oder zu verkleinern.

+
+
Pixel

+
+
Das Festlegen der Schriftgröße in Pixel-Werten (px) ist eine gute Wahl, wenn Pixel-Genauigkeit gefordert ist. Ein px-Wert ist statisch und stellt eine Möglichkeit dar, die unabhängig von Betriebssystem und Browser ist und dem Browser unveränderlich mitteilt, die Buchstaben in genau der spezifizierten Höhe an Pixeln darzustellen. Das Ergebnis kann sich je nach Browser leicht unterscheiden, da diese eventuell verschiedene Algorithmen verwenden, um den selben Effekt zu erzielen.

+
+
Verschiedene Schriftgrößeneinstellungen können auch kombiniert werden. Zum Beispiel, wenn ein Elternelement 16px festlegt und sein Kindelement larger spezifiziert, dann wird das Kindelement größer dargestellt als das Elternelement auf der Seite.

+
+
Anmerkung: Die Schriftgröße in Pixeln festzulegen, ist nicht barrierefrei, weil der Benutzer infolge dessen die Schriftgröße nicht über den Browser ändern kann. Zum Beispiel möchten Benutzer mit Sehschwäche die Schriftgröße vielleicht viel größer einstellen als vom Web-Designer ausgewählt. Die Benutzung von Pixeln für Schriftgrößen sollte vermieden werden, wenn ein allumfassendes Design gefordert ist.

+
+
Ems

+
+
Eine weitere Möglichkeit, die Schriftgröße festzulegen, ist die Verwendung von em-Werten. Die Größe eines em-Wertes ist dynamisch. Beim Spezifizieren der font-size-Eigenschaft entspricht ein em der für das gefragte Elternelement festgelegten Schriftgröße. Wird die Schriftgröße nirgendwo anders auf der Seite festgelegt, dann gilt die vom Browser definierte Größe, die oft 16px entspricht. Demnach gilt im Normalfall 1em = 16px, also 2em = 32px. Wenn dem body-Element eine Schriftgröße von 20px zugewiesen wird, dann gilt 1em = 20px und 2em = 40px. Es ist zu beachten, dass der Wert 2 notwendigerweise ein Multiplikator der aktuellen em-Größe ist.

+
+
Um das em-Äquivalent für einen beliebigen benötigten Pixel-Wert zu berechnen, kann die folgende Formel benutzt werden:

+
+
em = gewünschter Pixel-Wert des Elements / Elternelementschriftgröße in Pixeln

+
+
Angenommen die Schriftgröße des Body der Seite entspricht 16px. Wenn die gewünschte Schriftgröße 12px ist, dann sollten 0.75em spezifiziert werden (da 12/16 = 0,75). Es verhält sich ähnlich, wenn eine Schriftgröße von 10px gewollt ist; dann sollte 0.625em spezifiziert werden (10/16 = 0,625) und für 22px sollten es 1.375em (22/16) sein.

+
+
Em ist eine sehr nützliche CSS-Einheit, da es seine Länge automatisch relativ zur vom Leser gewählten Schrift anpasst.

+
+
Ein wichtiger Hinweis: em-Werte können zu bisweilen auch extremen Steigerungen führen wie das folgende HTML und CSS zeigen:

+
+
html {
+  font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */
+}
+span {
+  font-size: 1.6em;
+}

+
+
<div>
+<span>Outer <span>inner</span> outer</span>
+</div>
+

+
+
Das Ergebnis ist:

+
+
{{EmbedLiveSample("Ems", 400, 40)}}

+
+
Angenommen, dass font-size vom Browser als 16px festgelegt wird, dann würden die Wörter "outer" mit 16px dargestellt, das Wort "inner" aber mit 25.6px. Das liegt daran, dass die Schriftgröße des inneren Spans 1.6em entspricht, was relativ zum Elternelement gilt, welches wiederum relativ zu dessen Elternelement steht. Dieses Verhalten wird auch compounding (Steigerung/Aufzinsung) genannt.

+
+
Rems

+
+
Rem-Werte wurden eingeführt, um das compunding-Problem zu umgehen. Rem-Werte sind relativ zum html-Wurzelelement, nicht zum Elternelement. Mit anderen Worten ermöglicht es, eine Schriftgröße in einer relativen Weise zu spezifizieren ohne durch das Elternelement beeinflusst zu werden und so das Compunding zu verhindern.

+
+
Das folgende CSS ist nahezu identisch mit dem vorherigen Beispiel. Die einzige Ausnahme ist, dass die Einheit nun rem ist.

+
+
html {
+  font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */
+}
+span {
+  font-size: 1.6rem;
+}
+

+
+
Anschließend wird dieses CSS auf das selbe HTML angewandt, das wie folgt aussieht:

+
+
<span>Outer <span>inner</span> outer</span>

+
+
{{EmbedLiveSample("Rems", 400, 40)}}

+
+
Bei diesem Beispiel erscheinen die Worte "outer inner outer" alle mit 16px (angenommen, dass die Schriftgröße des Browsers beim Standardwert von 16px verblieben ist).

+
+
Beispiele

+
+
Beispiel 1

+
+
/* Paragrafentext auf sehr groß setzen */
+p { font-size: xx-large }
+
+/* h1-(level 1 heading)-Text auf 2,5 mal die Größe
+ * des umliegenden Textes setzen */
+h1 { font-size: 250% }
+
+/* setzt in span-Tags eingeschlossenen Text auf 16px */
+span { font-size: 16px; }
+

+
+
Beispiel 2

+
+
.small {
+	font-size: xx-small;
+}
+.larger {
+	font-size: larger;
+}
+.point {
+	font-size: 24pt;
+}
+.percent {
+	font-size: 200%;
+}
+

+
+
<h1 class="small">small-H1</h1>
+<h1 class="larger">larger-H1</h1>
+<h1 class="point">24pt-H1</h1>
+<h1 class="percent">200%-H1</h1>

+
+
Live-Test

+
+
{{EmbedLiveSample('Beispiel_2','600','200')}}

+
+
Bemerkungen

+
+
Em- und ex-Einheiten in der {{Cssxref("font-size")}}-Eigenschaft verhalten sich relativ zur Schriftgröße des Elternelements (im Gegensatz zu allen anderen Einheiten, die relativ zur Schriftgröße des Elements sind). Das bedeutet, dass em-Einheiten und Prozentangaben das selbe als Wert für {{Cssxref("font-size")}} bewirken.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS3 Fonts')}}Keine Veränderung
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}{{Spec2('CSS3 Transitions')}}Definiert font-size als animierbar.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}{{Spec2('CSS2.1')}}Keine Veränderung
{{SpecName('CSS1', '#font-size', 'font-size')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser-Kompatibilität

+
+{{Compat("css.properties.font-size")}}
diff --git a/files/de/web/css/font-style/index.html b/files/de/web/css/font-style/index.html
new file mode 100644
index 0000000000..02430dd746
--- /dev/null
+++ b/files/de/web/css/font-style/index.html
@@ -0,0 +1,225 @@
+---
+title: font-style
+slug: Web/CSS/font-style
+translation_of: Web/CSS/font-style
+---
+
{{CSSRef}}

+
+
Die CSS-Eigenschaft font-style legt fest, ob Text mit einem kursiven Schnitt der gewählten Schriftfamilie ({{cssxref("font-family")}}) dargestellt werden soll.

+
+
{{EmbedInteractiveExample("pages/css/font-style.html")}}

+
+
+
+
Syntax

+
+
font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 10deg;
+
+/* Global values */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+

+
+
font-style akzeptiert ein einzelnes der nachfolgenden Schlüsselwörter, welchem im Falle von oblique ein Winkel folgen darf.

+
+
Werte

+
+

+ 
normal

+ 
Wählt einen Schriftschnitt mit nicht-kursiven Buchstaben.

+ 
italic

+ 
Wählt einen kursiven Schriftschnitt der Eigenschaft italic (siehe unten). Steht keiner zur Verfügung, wird stattdessen der Wert oblique angewendet. Ist auch dies nicht möglich, wird die Schrägstellung von 14° durch den Browser erzeugt.

+ 
oblique

+ 
Wählt einen kursiven Schriftschnitt der Eigenschaft oblique (siehe unten). Steht keiner zur Verfügung, wird stattdessen der Wert italic angewendet. Ist auch dies nicht möglich, wird eine Schrägstellung von 14° durch den Browser erzeugt.

+ 
oblique <angle>

+ 
Wählt einen kursiven Schriftschnitt der Eigenschaft oblique (siehe unten), dessen Buchstaben genau oder annähernd im Winkel <angle> schräggestellt sind. Üblicherweise werden bei der Suche nach passenden Schriftschnitten für Winkel ab 14° eher größere Werte gewählt, bis 13° eher kleinere (Details siehe font matching section).

+ 
Steht kein passender Schriftschnitt zur Verfügung, wird die Schrägstellung durch den Computer aus einem normalen Schriftschnitt erzeugt.

+ 
Der gültige Winkelbereich erstreckt sich von -90deg bis 90deg (einschließlich). Positive Werte bewirken eine Schrägstellung in Richtung Zeilenende, negative in Richtung Zeilenanfang.

+

+
+
italic gegenüber oblique

+
+
Die Werte italic und oblique scheinen auf den ersten Blick bei der Darstellung oftmals zu identischen Ergebnissen zu führen.

+
+
Während italic jedoch Schriftschnitte bezeichnet, die bereits kursiv entworfen wurden, umfasst oblique Schriftschnitte, die lediglich durch automatisierte Schrägstellung normaler Buchstaben derselben Familie erzeugt wurden („kursiviert“).

+ italic ist in der Regel die bessere Wahl, da die Form der Buchstaben und die Abstände der Buchstaben untereinander vom Schriftgestalter manuell festgelegt werden, was zu einer harmonischeren Textdarstellung führt.

+
+
Da beide Varianten sehr ähnlich sind, wird die jeweils andere verwendet, steht die gewählte Variante nicht zur Verfügung. Dieses Verhalten kann mit {{cssxref("font-synthesis")}} geändert werden.

+
+
Variable Schriftarten

+
+
Variable Schriftarten erlauben eine präzise Steuerung der Darstellung von kursivierten Schriftschnitten mit Hilfe des Werts <angle> im Anschluss an oblique.

+
+
Bei variablen Schriftarten nach TrueType- oder OpenType-Spezifikation wird die Schrägstellung bei oblique über die Eigenschaft "slnt"  realisiert, sowie italic mit einem Wert von 1 für die Eigenschaft  "ital"(siehe {{cssxref("font-variation-settings")}}).

+
+
Das nachstehende Beispiel benötigt einen Browser, der die Syntax nach CSS Fonts Level 4 versteht, d.h. die Angabe eines Winkels bei font-style: oblique.

+
+
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}

+
+
HTML

+
+

+
<header>
+    <input type="range" id="slant" name="slant" min="-90" max="90" />
+    <label for="slant">Slant</label>
+</header>
+<div class="container">
+    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+

+
+
CSS

+
+
/*
+AmstelvarAlpha-VF is created by David Berlow (https://github.com/TypeNetwork/Amstelvar)
+and is used here under the terms of its license:
+https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
+  font-family:'AmstelvarAlpha';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+}
+
+.container {
+  max-height: 150px;
+  overflow: scroll;
+}
+
+.sample {
+  font: 2rem 'AmstelvarAlpha', sans-serif;
+}
+
+

+
+
+
+
JavaScript

+
+
let slantLabel = document.querySelector('label[for="slant"]');
+let slantInput = document.querySelector('#slant');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  let slant = `oblique ${slantInput.value}deg`;
+  slantLabel.textContent = `font-style: ${slant};`;
+  sampleText.style.fontStyle = slant;
+}
+
+slantInput.addEventListener('input', update);
+
+update();
+

+

+
+
Formal syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
+
+
.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}

+
+
{{ EmbedLiveSample('Font_styles') }}

+
+
Barrierefreiheit

+
+
Längere Abschnitte in kursiver Schrift können für Menschen mit einer Lesestörung (Legasthenie oder Dyslexie) schwer bis gar nicht zu erfassen sein. Kursive Schrift sollte deshalb nur als Hervorhebung einzelner Stellen verwendet werden.

+
+
+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS4 Fonts')}}Fügt die Möglichkeit einer Winkelangabe für oblique hinzu.
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS3 Fonts')}}Keine Änderung
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}{{Spec2('CSS2.1')}}Keine Änderung
{{SpecName('CSS1', '#font-style', 'font-style')}}{{Spec2('CSS1')}}Erste Definition

+
+
{{cssinfo}}

+
+
Browserkompatibilität

+
+
+
+
{{Compat("css.properties.font-style")}}

diff --git a/files/de/web/css/font-variant/index.html b/files/de/web/css/font-variant/index.html
new file mode 100644
index 0000000000..19f2f0268d
--- /dev/null
+++ b/files/de/web/css/font-variant/index.html
@@ -0,0 +1,116 @@
+---
+title: font-variant
+slug: Web/CSS/font-variant
+tags:
+  - CSS
+  - CSS Eigenschaften
+  - CSS Schriften
+  - NeedsLiveSample
+  - Referenz
+translation_of: Web/CSS/font-variant
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS-Eigenschaft font-variant erlaubt die Darstellung der Schrift in Kapitälchen, Kleinbuchstaben in der Form von Großbuchstaben.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formal syntax: {{csssyntax("font-variant")}}

+
+
font-variant: normal;
+font-variant: small-caps;
+font-variant: common-ligatures small-caps;
+
+font-variant: inherit;
+font-variant: initial;
+font-variant: unset;
+

+
+
Werte

+
+

+ 
normal

+ 
Normale Schrift.

+ 
small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps

+ 
Stellt die Schrift in verschiedenen Arten von Kapitälchen dar, entsprechend {{cssxref("font-variant-caps")}}.

+ Falls dies von der Schriftart nicht unterstützt wird, stellt Gecko den Effekt nach, indem die Kleinbuchstaben durch verkleinerte Grossbuchstaben ersetzt werden.

+

+
+

+
Der Wert small-caps hat in einigen Sprachen weitergehende Auswirkungen:

+
+
    
+ 
  • In Turksprachen (wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), Tatarisch (tt) und Baschkirisch (ba)), gibt es zwei verschiedene Buchstaben i, einen mit und einen ohne Punkt, und somit auch zwei verschiedene Buchstabenpaare: i/İ und ı/I.
    • 
+ 
  • Im Deutschen (de) wird das ß zu SS.
    • 
+ 
  • Im Griechischen (el) verlieren Vokale ihren Akzent, wenn sie großgeschrieben sind (ά/Α), eine Ausnahme ist Eta (ή/Ή). Auch Diphthongen mit einem Akzent im ersten Vokal verliern diesen, dafür erhält der zweite Vokal einen (άι/ΑΪ).
    • 
+

+
+
Die Sprache wird in HTML mit dem Attribut  lang und in XML mit xml:lang definiert.

+
+
Diese spezifischen Anpassungen werden nicht von allen Browsern unterstützt, siehe Browserkompatibilität.

+

+
+
Beispiel

+
+
HTML

+
+
<p class="normal">Firefox rocks!</p>
+<p class="small">Firefox rocks!</p>
+

+
+
CSS

+
+
p.normal {
+  font-variant: normal;
+}
+p.small {
+  font-variant: small-caps;
+}
+

+
+
Result

+
+
{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant') }}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}{{Spec2('CSS3 Fonts')}}Sammeleigenschaft für font-variant-* (in diesem Artikel noch nicht beschrieben).
{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}{{Spec2('CSS2.1')}}Keine Änderung
{{SpecName('CSS1', '#font-variant', 'font-variant')}}{{Spec2('CSS1')}}

+
+
Browserkompatibilität

+
+
{{Compat("css.properties.font-variant")}}

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("text-transform")}}
    • 
+

diff --git a/files/de/web/css/font-weight/index.html b/files/de/web/css/font-weight/index.html
new file mode 100644
index 0000000000..bff759e976
--- /dev/null
+++ b/files/de/web/css/font-weight/index.html
@@ -0,0 +1,276 @@
+---
+title: font-weight
+slug: Web/CSS/font-weight
+translation_of: Web/CSS/font-weight
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS-Eigenschaft {{Cssxref("font-weight")}} definiert die Stärke der Schrift. Einige Schriftarten sind jedoch nicht in allen Werten verfügbar und unterstützen nur die Werte normal und bold.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formal syntax: {{csssyntax("font-weight")}}

+
+
font-weight: normal
+font-weight: bold
+
+font-weight: lighter
+font-weight: bolder
+
+font-weight: 100
+font-weight: 200
+font-weight: 300
+font-weight: 400
+font-weight: 500
+font-weight: 600
+font-weight: 700
+font-weight: 800
+font-weight: 900
+
+font-weight: inherit

+
+
Werte

+
+

+ 
normal

+ 
Normale Stärke, entspricht 400.

+ 
bold

+ 
Fette Schrift, entspricht 700.

+ 
lighter

+ 
Eine Stufe dünner als das Elternelement (siehe Die Bedeutung relativer Angaben unten).

+ 
bolder

+ 
Eine Stufe fetter als das Elternelement (siehe Die Bedeutung relativer Angaben unten).

+ 
<number>

+ 
Eine Zahl ({{cssxref("<number>")}}) zwischen 1 und 1000 (einschließlich). Größere Werte stehen für eine fettere oder gleich fette Darstellung als kleinere Werte.

+

+
+
Frühere Spezifikationen erlaubten für font-weight nur die Schlüsselworte sowie die Werte 100 bis 1000 in Hunderterschritten. Nicht-variable Schriftarten können nur mit diesen Werten arbeiten, feinere Abstimmungen werden jedoch mit den festgelegten Werte angenähert.

+
+
Die Spezifikation CSS Fonts Level 4 nimmt variable Schriftarten im Format TrueType und OpenType auf. Mit diesen sind grundsätzlich beliebig feine Abstimmungen möglich.

+
+
Näherungsverfahren

+
+
Ist die gewählte Stärke nicht verfügbar, bestimmen die nachfolgenden Schritte die Darstellung:

+
+
    
+ 
  • Liegt die gewünschte Stärke zwischen 400 und 500 (einschließlich):
+  
      
+   
    1. Verwende die erste Stärke, die größer als die gewünschte, aber kleiner als 500 ist.
      2. 
+   
    2. Ist keine verfügbar, verwende die erste Stärke die kleiner als die gewünschte ist.
      3. 
+   
    3. Ist keine verfügbar, verwende die erste Stärke größer als 500.
      4. 
+  
    
+ 
    • 
+ 
  • Liegt die gewünschte Stärke unter 400, verwende die erste Stärke kleiner als die gewünschte. Ist keine verfügbar, verwende die erste Stärke größer als die gewünschte.
    • 
+ 
  • Liegt die gewünschte Stärke über 500, verwende die erste Stärke größer als die gewünschte. Ist keine verfügbar, verwende die erste Stärke kleiner als die gewünschte.
    • 
+

+
+
Die Bedeutung relativer Angaben

+
+
Bei der Angabe von lighter und bolder bestimmt die nachfolgende Tabelle die tatsächliche Schriftstärke. Zu beachten ist, dass hierbei nur vier Abstufungen verfügbar sind, fein (100), normal (400), fett (700) und schwarz (900).

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Gegebenbolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

+
+
Zuordnung von Namen und Werten

+
+
Die Werte 100 bis 900 entsprechen ungefähr den nachfolgenden Bezeichnungen (siehe OpenType-Spezifikation und Wikipedia-Artikel zur Schriftstärke):

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
WertDeutschEnglisch
100feinThin (Hairline)
200extraleichtExtra Light (Ultra Light)
300leichtLight
400normalNormal (Regular)
500mediumMedium
600halbfettSemi Bold (Demi Bold)
700fettBold
800extrafettExtra Bold (Ultra Bold)
900schwarzBlack (Heavy)
950extraschwarzExtra Black (Ultra Black)

+
+
Variable Schriftarten

+
+
Die meisten Schriftarten stellen nur einige festgelegte Breiten zur Verfügung. Variable Schriftarten unterstützen hingegen eine Vielzahl von Breiten in mehr oder weniger feiner Abstufung.

+
+
Bei variablen Schriftarten vom Typ TrueType und OpenType korrespondiert deren Eigenschaft "wght" mit der CSS-Eigenschaft font-weight und wird von Browsern – sofern unterstützt –  entsprechend eingesetzt.

+
+
Beispiel

+
+
<p>
+  Alice fing an sich zu langweilen; sie saß schon
+  lange bei ihrer Schwester am Ufer und hatte nichts
+  zu tun. Das Buch, das ihre Schwester las, gefiel
+  ihr nicht, denn es waren weder Bilder noch Gespräche
+  darin. »Und was nützen Bücher,« dachte Alice,
+  »ohne Bilder und Gespräche?«
+</p>
+
+<div>Ich bin breiter.<br/>
+  <span>Ich bin schmaler.</span>
+</div>
+

+
+
/* Absatz soll breiter sein. */
+p {
+  font-weight: bold;
+}
+
+/* Der Text im div soll zwei Schritte breiter
+   als normal sein, aber nicht so breit wie
+   ein normales breit (bold). */
+div {
+ font-weight: 600;
+}
+
+/* Der Text im span soll einen Schritt schmaler
+   sein als jener seines Elternelements. */
+span {
+  font-weight: lighter;
+}

+
+
{{EmbedLiveSample("Beispiele","400","300")}}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}Keine Änderung
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}{{Spec2('CSS3 Transitions')}}font-weight ist animierbar
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}Keine Änderung
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}

+
+
Browserkompatibilität

+
+
{{Compat("css.properties.font-weight")}}

diff --git a/files/de/web/css/font/index.html b/files/de/web/css/font/index.html
new file mode 100644
index 0000000000..6e0fecf56b
--- /dev/null
+++ b/files/de/web/css/font/index.html
@@ -0,0 +1,176 @@
+---
+title: font
+slug: Web/CSS/font
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/font
+---
+
{{CSSRef}}

+
+
Die font Eigenschaft hat zwei unterschiedliche Verwendungszwecke:

+
+
    
+ 
  1. Die font Eigenschaft kann als Kurzform für die Eigenschaften font-style, font-variant, font-weight, font-size, line-height und font-family dienen und setzt dabei, wie bei jeder Kurzform, die einzelnen Eigenschaften auf ihre Standardwerte zurück, wenn nichts weiter angegeben wird, oder
    2. 
+ 
  2. die jeweilige Schrift eines Elementes kann auf eine Systemschriftart festlegt werden. Diese Systemschriftarten können jedoch nur über die font Eigenschaft gesetzt werden und nicht etwa über die font-family Eigenschaft, sodass font nicht nur als eine Kurznotation von verschiedenen Schrift-Eigenschaften anzusehen ist.
    3. 
+

+
+
Außerdem ist zu beachten, dass font keine weiteren Eigenschaften wie etwa font-stretch oder font-size-adjust mit einschließt und font-size-adjust dennoch auf den Standardwert (normal) zurückgesetzt wird, wenn die font Eigenschaft notiert wird.

+ Das Festlegen von font-size sowie font-family ist verpflichtend, sonst wird die Anweisung komplett ignoriert.

+
+
    
+ 
  • Standardwert: siehe einzelne Eigenschaften
    • 
+ 
  • Anwendbar auf: alle Elemente
    • 
+ 
  • Vererbbar: Ja
    • 
+ 
  • Prozentwerte: erlaubt für font-size und line-height
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: siehe einzelne Eigenschaften
    • 
+

+
+
Syntax

+
+
[
+  [ <font-style> || <font-variant> || <font-weight> ]?
+  <font-size>
+  [ / <line-height> ]?
+  <font-family>
+]
+| caption | icon | menu | message-box | small-caption | status-bar
+| -moz-window | -moz-desktop | -moz-workspace | -moz-document | -moz-info
+| -moz-dialog | -moz-button | -moz-pull-down-menu | -moz-list | -moz-field
+| inherit

+
+
Werte

+
+
Wird font als Kurzform verwendet, siehe einzelne Eigenschaften für die unterschiedlichen Werteangaben.

+
+
Werte für System-Fonts

+
+

+ 
caption

+ 
Schrift, die für Beschriftungen von Kontrollelementen (Buttons, Drop-Downs, etc.) verwendet wird.

+ 
icon

+ 
Schrift, die zur Beschriftung von Icons verwendet wird.

+ 
menu

+ 
Schrift die in Menüs benutzt wird.

+ 
message-box

+ 
Schrift die in Dialogboxen verwendet wird.

+ 
small-caption

+ 
Schrift die für kleine Kontrollelemente benutzt wird.

+ 
status-bar

+ 
Schrit die in Statusleisten benutzt wird.

+

+
+
Mozilla Erweiterungen für System-Fonts

+
+

+ 
-moz-window

+ 
Schrift, die für den Inhalt in einem Fenster verwendet wird.

+ 
-moz-desktop

+ 
Schrift, die auf dem Desktop benutzt wird.

+ 
-moz-workspace

+ 
Schrift, die für ein Arbeitsplatz-Fenster verwendet wird.

+ 
-moz-document

+ 
Schrift, die für den Inhalt eines Dokumentes benutzt wird.

+ 
-moz-dialog

+ 
Schrift die in Dialogboxen verwendet wird (wie message-box).

+ 
-moz-button

+ 
Schrift, die für Beschriftungen von Kontrollelementen (Buttons, Drop-Downs, etc.) verwendet wird (wie caption).

+ 
-moz-pull-down-menu

+ 
Schrift, die für Aufklapp-Menüs benutzt wird.

+ 
-moz-list

+ 
Schrift, die in Listenmenüs verwendet wird.

+ 
-moz-field

+ 
Schrift, die in Textfeldern (z.B. input) verwendet wird.

+ 
-moz-info

+ 
?

+

+
+
Beispiele

+
+
Link zum Live Beispiel

+
+
Beispiel 1

+
+
/* Setze die Schriftgröße auf 12px und die Zeilenhöhe auf 14px, sowie die Schriftart auf sans-serif */
+p { font: 12px/14px sans-serif }
+

+
+
Beispiel 2

+
+
/* Setze die Schriftgröße auf 80% des Elternelements und setze die Schriftart auf sans-serif */
+p { font: 80% sans-serif }
+
+/* Hat den gleichen Effekt wie: */
+p {
+  font-family: sans-serif;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 600;
+  font-size: 80%;
+  line-height: normal;
+}
+

+
+
Beispiel 3

+
+
/* Setze die Schriftstärke auf fett, die Textneigung auf kursiv, die Schriftgröße auf groß,
+und die Schriftart auf serif. */
+p { font: bold italic large serif }
+

+
+
Beispiel 4

+
+
/* Benutze die gleiche Schriftart wie die Statusleiste des Fensters. */
+p { font: status-bar }
+

+
+
Browser Kompatibilität

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Browserab Version
KurznotationSystemschriften
Internet Explorer3.0-4.04.0-5.5
Firefox (Gecko)1.0 (1.0)1.0 (1.0)
Opera3.56.0
Safari (WebKit)1.0 (85)1.0 (85)

+
+
Spezifikation

+
+
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/frequency/index.html b/files/de/web/css/frequency/index.html
new file mode 100644
index 0000000000..799e3fc5e3
--- /dev/null
+++ b/files/de/web/css/frequency/index.html
@@ -0,0 +1,111 @@
+---
+title: 
+slug: Web/CSS/frequency
+translation_of: Web/CSS/frequency
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Der CSS Datentyp <frequency> steht für eine Frequenz, wie sie bspw. bei Audio Inhalten gebraucht wird. Der Wert setzt sich susammen aus einer {{cssxref("<number>")}}, gefolgt von einer Einheit. Dazwischen darf kein Leerzeichen sein.

+
+
Die folgenden Einheiten können gewählt werden:

+
+

+ 
Hz

+ 
Für eine Frequenz in Hertz.

+ 
kHz

+ 
Für eine Frequenz in Kilohertz.

+

+
+
Alle Einheiten können auch den Wert 0 (0kHz oder 0Hz) annehmen, welcher unabhängig der Einheit immer dasselbe Ergebnis erzielt. Ein Wert ohne angabe einer Einheit (0)  ist nicht zulässig.

+
+
Beispiele

+
+
Gültige Werte:

+
+
12Hz        Positive integer.
+-456kHz     Negative integer.
+4.3Hz       Non-integer.
+14KhZ       The unit is case-insensitive, though non-SI capitalization is not recommended.
++0Hz        Zero, with a leading + and the unit.
+-0kHz       Zero, with a leading - and the unit (Though strange, this is an allowed value).
+

+
+
Ungültige Werte:

+
+
12.0        This is a <number>, not an <frequency>, it must have a unit.
+7 Hz        No space is allowed between the <number> and the unit.
+0           Zero values can be written without a unit only if there are <length> values, not <frequency>.
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Values', '#frequency', '<frequency>') }}{{ Spec2('CSS3 Values') }} 

+
+
Browser Kompatibilität

+
+
{{ CompatibilityTable() }}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}} [*]{{CompatNo}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

+
+
[*] Einige Versionen von Opera unterstützten den Datentyp teilweise in einer veralteten Spezifikation.

diff --git a/files/de/web/css/gradient/index.html b/files/de/web/css/gradient/index.html
new file mode 100644
index 0000000000..dcec7d40b2
--- /dev/null
+++ b/files/de/web/css/gradient/index.html
@@ -0,0 +1,91 @@
+---
+title: 
+slug: Web/CSS/gradient
+tags:
+  - CSS
+  - CSS Datentyp
+  - Grafik
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/gradient
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Der <gradient> CSS Datentyp beschreibt ein {{cssxref("<image>")}}, das aus einem progressiven Verlauf zwischen zwei oder mehreren Farben besteht. Ein CSS Farbverlauf ist kein {{cssxref("<color>")}} Wert, aber ein Bild ohne innere Maße; das bedeutet, es hat weder eine natürliche oder bevorzugte Größe, noch ein bevorzugtes Seitenverhältnis. Seine konkrete Größe passt sich dem Element an, dem es zugewiesen wurde.

+
+
Es gibt drei Arten von Farbverläufen:

+
+
    
+ 
  • Lineare Farbverläufe, erzeugt durch die {{cssxref("linear-gradient()")}} Funktion, wo die Farbe weich entlang einer imaginären Linie verläuft.
+
+  
+
+  
    body {
+background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
+}
    
+
+  
    {{EmbedLiveSample('linear-gradient', 600, 20)}}
    
+ 
    • 
+ 
  • Radiale Farbverläufe, erzeugt durch die {{cssxref("radial-gradient()")}} Funktion. Je weiter sich ein Punkt vom Ursprung entfernt befindet, desto weiter entfernt ist er von der Originalfarbe.
+  
+
+  
    body {
+background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
+background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+
    
+
+  
    {{EmbedLiveSample('radial-gradient', 600, 20)}}
    
+ 
    • 
+ 
  • Wiederholende Farbverläufe, welche lineare oder radiale Farbverläufe fester Größe sind, die sich solange wiederholen bis die gesamte Box gefüllt ist.
+  
+
+  
    body {
+background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
+background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
+}  
    
+
+  
    {{EmbedLiveSample('repeating-gradient', 600, 20)}}
    
+ 
    • 
+

+
+
Wie in allen Fällen, in denen zwischen Farben interpoliert wird, werden Farbverläufe im alpha-vormultiplizierten Farbraum berechnet. Dies verhindert unerwartete Grauschattierungen, wenn sowohl Farbe als auch Deckkraft variieren.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}{{Spec2('CSS3 Images')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
Jeder Farbverlaufstyp hat eine unterschiedliche Kompatibilitätsmatrix. Bitte daher die individuellen Artikel lesen.

+
+
Siehe auch

+
+
    
+ 
  • Farbverläufe in CSS, {{cssxref("linear-gradient()")}}, {{cssxref("radial-gradient()")}}, {{cssxref("repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient()")}}
    • 
+

diff --git a/files/de/web/css/grid-gap/index.html b/files/de/web/css/grid-gap/index.html
new file mode 100644
index 0000000000..8e2956013f
--- /dev/null
+++ b/files/de/web/css/grid-gap/index.html
@@ -0,0 +1,177 @@
+---
+title: grid-gap
+slug: Web/CSS/grid-gap
+translation_of: Web/CSS/gap
+---
+
grid-gap  ist die shorthand CSS Eigenschaft für  {{cssxref("grid-row-gap")}} und {{cssxref("grid-column-gap")}} , welche die Spalten (gutter) zwischen Rasterreihen und Rasterspalten festlegt.

+
+
/* Ein <Länge> Wert */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* Ein <Prozent> Wert */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Zwei <Länge> Werte */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* Ein or zwei <Prozent> Werte */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* Globale Werte */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+

+
+
{{cssinfo}}

+
+
Syntax

+
+
Dieser Eigenschaft wird ein Wert für <'grid-row-gap'> zugeordnet, gefolgt von einem optionalen Wert für <'grid-column-gap'>. Falls <'grid-column-gap'> ausgelassen wird, wird diesem der gleiche Wert zugeordnet wie <'grid-row-gap'>.

+
+
<'grid-row-gap'> und <'grid-column-gap'> werden jeweils angegeben als <Länge> or als <Prozent>.

+
+
Werte

+
+

+ 
<Länge>

+ 
Gibt die Breite der Spalte an, welche die Grid-Linien trennt.

+ 
<Prozent>

+ 
Ist die prozentuale Breite der Lücke zwischen zwei Rasterlinien im Verhältnis zu der Gesamtgröße des Elements.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
HTML Inhalt

+
+
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>

+
+
CSS Inhalt

+
+
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  grid-gap: 20px 5px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+

+
+
{{EmbedLiveSample("Example", "100%", "200px")}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Grid")}}Erste Definition

+
+
Browserkompatibilität

+
+
 

+
+
+
+
{{Compat("css.properties.grid-gap")}}

+
+
 

+
+
Siehe auch

+
+
+
+
diff --git a/files/de/web/css/grid-template-areas/index.html b/files/de/web/css/grid-template-areas/index.html
new file mode 100644
index 0000000000..57ceda4481
--- /dev/null
+++ b/files/de/web/css/grid-template-areas/index.html
@@ -0,0 +1,194 @@
+---
+title: grid-template-areas
+slug: Web/CSS/grid-template-areas
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Grid
+  - CSS Property
+  - Reference
+  - Referenz
+translation_of: Web/CSS/grid-template-areas
+---
+
Die grid-template-areas CSS Eigenschaft spezifiziert benannte {{glossary("grid areas")}}.

+
+
{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}

+
+
+
+
Diese areas sind nicht mit einem bestimmten grid item assoziiert, sondern können von den grid-placement Eigenschaften {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, und ihren Kurzformen  {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, und {{cssxref("grid-area")}} referenziert werden.

+
+
Syntax

+
+
/* Keyword value */
+grid-template-areas: none;
+
+/* <string> values */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* Global values */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+

+
+
Werte

+
+

+ 
none

+ 
Der grid container definiert keine benannten grid areas.

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

+ 
Für jeden seperaten String wird eine Reihe, und für jede Zelle in dem String wird eine Spalte erstellt. Mehrere benannte Zelltokens innerhalb und zwischen den Reihen sind eine einzelne benannte grid area welche die entsprechenden grid Zellen überspannt. Wenn diese Zellen kein Quader formen ist de Deklaration ungültig.

+

+
+
Formaler Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+

+ 
HTML

+

+
+
<section id="page">
+  <header>Header</header>
+  <nav>Navigation</nav>
+  <main>Main area</main>
+  <footer>Footer</footer>
+</section>

+
+
CSS

+
+
#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page > header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page > nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page > main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page > footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Example", "100%", "250px")}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}{{Spec2("CSS3 Grid")}}Ursprüngliche Definition

+
+
{{cssinfo}}

+
+
Browser kompatibilität

+
+
 

+
+
+
+
{{Compat("css.properties.grid-template-areas")}}

+
+
 

+
+
Siehe auch

+
+
    
+ 
  • Verwandte CSS Eigenschaften: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}
    • 
+ 
  • Grid Layout Guide: Grid template areas
    • 
+ 
  • Video Tutorial: Grid Template Areas
    • 
+

+
+
diff --git a/files/de/web/css/grid/index.html b/files/de/web/css/grid/index.html
new file mode 100644
index 0000000000..2dc160fe34
--- /dev/null
+++ b/files/de/web/css/grid/index.html
@@ -0,0 +1,184 @@
+---
+title: grid
+slug: Web/CSS/grid
+tags:
+  - CSS
+  - CSS-Eigenschaft
+  - CSS-Raster
+  - Referenz
+translation_of: Web/CSS/grid
+---
+
Zusammenfassung

+
+
Die grid-CSS-Eigenschaft ist eine Kurzschrift-Eigenschaft, die alle der expliziten Gittereigenschaften ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} und {{cssxref("grid-template-areas")}}) setzt, alle impliziten Gittereigenschaften ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}} und {{cssxref("grid-auto-flow")}}) sowie die Zwischenabstandseigenschaften ({{cssxref("grid-column-gap")}} und {{cssxref("grid-row-gap")}}) in einer einfachen Deklaration.

+
+
Hinweis: Sie können nur die expliziten oder die impliziten Rastereigenschaften in einer einfachen grid-Deklaration spezifizieren. Die Subeigenschaften, die Sie nicht spezifizieren, werden auf ihre Initialwerte gesetzt, wie für Kurzschrift üblich. Außerdem werden die Zwischenabstandseigenschaften durch diese Kurzschrift ebenfalls zurückgesetzt, obwohl diese nicht einmal gesetzt werden können.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Werte für <'grid-template'> */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* Werte für <'grid-template-rows'> /
+   [ auto-flow && dense? ] <'grid-auto-columns'>? */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* Werte für [ auto-flow && dense? ] <'grid-auto-rows'>? /
+   <'grid-template-columns'> */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Globale Werte */
+grid: inherit;
+grid: initial;
+grid: unset;
+

+
+
Werte

+
+

+ 
<'grid-template'>

+ 
Defines the {{cssxref("grid-template")}} including {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-areas")}}.

+ 
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?

+ 
Sets up an auto-flow by setting the row tracks explicitly via the {{cssxref("grid-template-rows")}} property (and the {{cssxref("grid-template-columns")}} property to none) and specifying how to auto-repeat the column tracks via {{cssxref("grid-auto-columns")}} (and setting {{cssxref("grid-auto-rows")}} to auto). {{cssxref("grid-auto-flow")}} is also set to column accordingly, with dense if it’s specified.
+ 
All other grid sub-properties are reset to their initial values.

+ 

+ 
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

+ 
Sets up an auto-flow by setting the column tracks explicitly via the {{cssxref("grid-template-columns")}} property (and the {{cssxref("grid-template-rows")}} property to none) and specifying how to auto-repeat the row tracks via {{cssxref("grid-auto-rows")}} (and setting {{cssxref("grid-auto-columns")}} to auto). {{cssxref("grid-auto-flow")}} is also set to row accordingly, with dense if it’s specified.
+ 
All other grid sub-properties are reset to their initial values.

+ 

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
HTML-Inhalt

+
+
<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>

+
+
CSS-Inhalt

+
+
#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}

+
+
Ergebnis

+
+
{{EmbedLiveSample("Example", "100%", 150)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}{{Spec2("CSS3 Grid")}}Initial definition

+
+
Browserkompatibilität

+
+{{Compat("css.properties.grid")}}
+
+
Siehe auch

+
+
    
+ 
  • Verwandte CSS-Eigenschaften: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}
    • 
+

+
+
diff --git a/files/de/web/css/height/index.html b/files/de/web/css/height/index.html
new file mode 100644
index 0000000000..8360676aa8
--- /dev/null
+++ b/files/de/web/css/height/index.html
@@ -0,0 +1,157 @@
+---
+title: height
+slug: Web/CSS/height
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/height
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die height CSS Eigenschaft bestimmt die Höhe des Inhaltsbereichs eines Elements. Der Inhaltsbereich ist innerhalb des Innenabstands, der Rahmen und des Außenabstands des Elements.

+
+
Die Eigenschaften {{cssxref("min-height")}} und {{cssxref("max-height")}} überschreiben height.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwert */
+height: auto;
+
+/* <length> Werte */
+height: 120px;
+height: 10em;
+
+/* <percentage> Wert */
+height: 75%;
+
+/* Globale Werte */
+height: inherit;
+height: initial;
+height: unset;
+

+
+
Werte

+
+

+ 
<length>

+ 
Siehe {{cssxref("<length>")}} für mögliche Einheiten.

+ 
<percentage>

+ 
Definiert als eine {{cssxref("<percentage>")}} der Höhe des beinhaltenden Blocks.

+ 
border-box {{experimental_inline}}

+ 
Falls angegeben, wird die vorhergehende {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} auf die Rahmenbox des Elements angewendet.

+ 
content-box {{experimental_inline}}

+ 
Falls angegeben, wird die vorhergehende {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} auf die Inhaltsbox des Elements angewendet.

+ 
auto

+ 
Der Browser berechnet und wählt die Höhe für das angegebene Element aus.

+ 
max-content {{experimental_inline}}

+ 
Die innere bevorzugte Höhe.

+ 
min-content {{experimental_inline}}

+ 
Die innere Minimalhöhe.

+ 
available {{experimental_inline}}

+ 
Die Höhe des beinhaltenden Blocks minus vertikaler Außenabstand, Rahmen und Innenabstand.

+ 
fit-content {{experimental_inline}}

+ 
Die größere der:
+ 
    
+  
  • inneren Minimalhöhe
    • 
+  
  • kleineren der inneren bevorzugten und der verfügbaren Höhe
    • 
+ 

+ 

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
HTML

+
+
<div id="red">
+  <span>Ich bin 50 Pixel hoch.</span>
+</div>
+<div id="green">
+  <span>Ich bin 25 Pixel hoch.</span>
+</div>
+<div id="parent">
+  <div id="child">
+    <span>Ich bin halb so groß wie mein Elternelement.</span>
+  </div>
+</div>
+

+
+
CSS

+
+
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 3px solid #999999;
+}
+
+#red {
+  height: 50px;
+}
+
+#green {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+

+
+
{{EmbedLiveSample('Beispiel')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}{{Spec2('CSS3 Box')}}Fügt die Schlüsselwörter max-content, min-content, available, fit-content, border-box und content-box hinzu.
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}{{Spec2('CSS3 Transitions')}}Definiert height als animierbar.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}Fügt Unterstützung für {{cssxref("<length>")}} Werte hinzu und präzisiert, für welche Elemente die Eigenschaft gilt.
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.height")}}
+
+
Siehe auch

+
+
    
+ 
  • Boxmodell, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}
    • 
+

diff --git a/files/de/web/css/hyphens/index.html b/files/de/web/css/hyphens/index.html
new file mode 100644
index 0000000000..564d3246e1
--- /dev/null
+++ b/files/de/web/css/hyphens/index.html
@@ -0,0 +1,119 @@
+---
+title: hyphens
+slug: Web/CSS/hyphens
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Experimentell
+  - Referenz
+translation_of: Web/CSS/hyphens
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die hyphens Eigenschaft regelt die automatische Silbentrennung. Dazu ist das HTML Attribut lang, bzw. xml:lang unter XML, zwingend notwendig.

+
+
Hinweis: Wie die Silbentrennung umgesetzt wird kann von Browser zu Browser, bzw. von Sprache zu Sprache, variieren.

+
+
{{cssinfo}}

+
+
Syntax

+
+
{{csssyntax}}
+

+
+
hyphens: none
+hyphens: manual
+hyphens: auto
+
+hyphens: inherit
+

+
+
Werte

+
+

+ 
none

+ 
Keine Silbentrennung: Wörter werden nicht getrennt und automatische Zeilenumbrüche sind nur bei Leerzeichen möglich.

+ 
manual

+ 
Manuelle Silbentrennung: Wörter werden nur dann getrennt, wenn dies definiert wurde (siehe {{anch("Umbrüche manuell definieren")}}).

+ 
auto

+ 
Automatische Silbentrennung: Der Browser trennt die Wörter automatisch. Manuell definierte Umbrüche werden dabei vorgezogen (siehe {{anch("Umbrüche manuell definieren")}}).

+

+
+
Umbrüche manuell definieren

+
+
Es gibt zwei Möglichkeiten, um Wörter manuell zu trennen. Dafür werden die beiden folgenden Unicode-Zeichen verwendet:

+
+

+ 
U+2010 (Bindestrich)

+ 
Dieser Bindestrich ist immer sichtbar, auch wenn das Wort gar nicht getrennt werden muss.

+ 
U+00AD (SHY)

+ 
Dieses Zeichen ist unsichtbar und kennzeichnet nur eine mögliche Trennstelle. Sobald eine Trennung notwendig wird, wird ein Bindestrich sichtbar. In HTML lässt sich das Zeichen mit &shy; einfügen.

+

+
+
Beispiel

+
+
This CSS snippet creates three classes, one for each possible configuration of the hyphens property.

+
+
<ul>
+  <li><code>none</code>: no hyphen; overflow if needed
+    <p lang="en" class="none">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
+    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>auto</code>: hyphen where the algo is deciding (if needed)
+    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
+  </li>
+</ul>
+

+
+
p {
+  width: 55px;
+  border: 1px solid black;
+ }
+p.none {
+  -moz-hyphens: none;
+  hyphens: none;
+}
+p.manual {
+  -moz-hyphens: manual;
+  hyphens: manual;
+}
+p.auto {
+  -moz-hyphens: auto;
+  hyphens: auto;
+}
+

+
+
{{EmbedLiveSample("Beispiel", "100%", "470'")}}

+
+
Spezifikations

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Text', '#hyphens', 'hyphens')}}{{Spec2('CSS3 Text')}}

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.hyphens")}}

+
+
Siehe auch

+
+
    
+ 
  • {{Cssxref("content")}}
    • 
+

diff --git a/files/de/web/css/id-selektoren/index.html b/files/de/web/css/id-selektoren/index.html
new file mode 100644
index 0000000000..921e391d80
--- /dev/null
+++ b/files/de/web/css/id-selektoren/index.html
@@ -0,0 +1,72 @@
+---
+title: ID-Selektoren
+slug: Web/CSS/ID-Selektoren
+tags:
+  - CSS
+  - CSS Referenz
+  - Einsteiger
+  - Selektoren
+translation_of: Web/CSS/ID_selectors
+---
+
{{CSSRef("Selectors")}}

+
+
In einem HTML Dokument matchen CSS ID-Selektoren ein Element basierend auf den Inhalten des {{htmlattrxref("id")}} Attributs des Elements, welches exakt dem Wert des angegebenen Selektors entsprechen muss.

+
+
Syntax

+
+
#id_value { Stileigenschaften }

+
+
Beachte, dass dies äquivalent zu folgendem {{cssxref("Attributselektoren", "Attributselektor")}} ist:

+
+
[id=id_value] { Stileigenschaften }

+
+
Beispiel

+
+
span#identified {
+  background-color: DodgerBlue;
+}
+

+
+
<span id="identified">Hier ist ein Span mit Text.</span>
+<span>Hier ist ein weiterer.</span>
+

+
+
{{EmbedLiveSample("Beispiel", 200, 50)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.selectors.id")}}
diff --git a/files/de/web/css/image-orientation/index.html b/files/de/web/css/image-orientation/index.html
new file mode 100644
index 0000000000..5ef67d6ea1
--- /dev/null
+++ b/files/de/web/css/image-orientation/index.html
@@ -0,0 +1,98 @@
+---
+title: image-orientation
+slug: Web/CSS/image-orientation
+tags:
+  - CSS
+  - CSS Bild
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/image-orientation
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
Übersicht

+
+
Mit der CSS Eigenschaft image-orientation kann die Ausrichtung eines Bildes geändert werden.

+
+

+
Hinweis:

+
+
    
+ 
  • Diese Eigenschaft ist nicht dazu gedacht Bilder beliebig zu drehen sondern eine fehlerhaften Ausrichtung zu korrigieren. Deshalb wird zur nächsten Vierteldrehung gerundet.
    • 
+ 
  • Ebenso ist diese Eigenschaft nicht dazu vorgesehen das Layout zu verändern, da sich image-orientation nur auf Bilder auswirkt.
    • 
+

+

+
+
{{cssinfo}}

+
+
Syntax

+
+
image-orientation: 0deg;
+image-orientation: 6.4deg;     /* Wird zu 0deg gerundet */
+image-orientation: -90deg;     /* Wie 270deg, der normalisiert berechnete Wert */
+image-orientation: from-image; /* EXIF Daten des Bildes verwenden */
+image-orientation: 90deg flip; /* Um 90deg rotieren und horizontal spiegeln */
+image-orientation: flip;       /* Horizontales Spiegeln ohne Drehung */
+
+/* Globale Werte */
+image-orientation: inherit;
+image-orientation: initial;
+image-orientation: unset;
+

+
+
Werte

+
+

+ 
from-image

+ 
Das Bild wird entsprechend der enthaltenen EXIF-Informationen gedreht.

+ 
<angle>

+ 
Die {{cssxref("<angle>")}} der anzuwendenden Rotation. Wird zu den nächsten 90deg (0.25turn) gerundet.

+ 
flip

+ 
Das Bild wird horizontal gespiegelt, nachdem die Drehung des {{cssxref("<angle>")}} Wertes angewendet wird. Wenn keine {{cssxref("<angle>")}} gegeben ist, wird 0deg benutzt.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
<img src="arrow.png" alt="Pfeil" style="image-orientation: 180deg;">

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}}{{Spec2('CSS4 Images')}}Die Schlüsselwörter from-image und flip wurden hinzugefügt.
{{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}}{{Spec2('CSS3 Images')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+

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

+

+
+
Siehe auch

+
+
    
+ 
  • Andere bildbezogene CSS-Eigenschaften {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • 
+

diff --git a/files/de/web/css/image-rendering/index.html b/files/de/web/css/image-rendering/index.html
new file mode 100644
index 0000000000..3abab150d4
--- /dev/null
+++ b/files/de/web/css/image-rendering/index.html
@@ -0,0 +1,114 @@
+---
+title: image-rendering
+slug: Web/CSS/image-rendering
+tags:
+  - CSS
+  - CSS Bild
+  - CSS Eigenschaft
+  - Experimentell
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - SVG
+translation_of: Web/CSS/image-rendering
+---
+

+
{{CSSRef}}

+
+
{{SeeCompatTable}}

+
+
Zusammenfassung

+
+
Das image-rendering CSS Property schlägt dem user agent vor, wie er eingebundene Bilder darstellen sollte. Dieses Property gilt für alle Bilder welche einem HTML untergeordnet sind, betrifft allerdings nur skalierte Bilder.  Wenn ein Bild zum Beispiel 100x1000px groß ist, es aber mit einer Größe von 200x200px eingebunden wird, so Rechnet der Browser nach dem durch das Property festgelegten Algorythmus um.

+
+
{{cssinfo}}

+
+
Syntax

+
+
{{csssyntax}}

+
+
image-rendering: auto
+image-rendering: crisp-edges
+image-rendering: pixelated
+
+image-rendering: inherit
+

+
+
Values

+
+

+ 
auto

+ 
Default value, the image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. This is intended for images such as photos. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).

+

+
+

+

+
+

+ 
crisp-edges

+ 
The image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. This is intended for images such as pixel art.

+ 
pixelated

+ 
When scaling the image up, the "nearest neighbor" or similar algorithm must be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as 'auto'.

+

+
+
The values optimizeQuality and optimizeSpeed present in early draft (and coming from its SVG counterpart) are defined as synonyms for the auto value.

+
+
Examples

+
+
/* applies to GIF and PNG images; avoids blurry edges */
+
+img[src$=".gif"], img[src$=".png"] {
+                   image-rendering: -moz-crisp-edges;         /* Firefox */
+                   image-rendering:   -o-crisp-edges;         /* Opera */
+                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
+                   image-rendering: crisp-edges;
+                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
+                 }
+
+

+
+
div {
+        background: url(chessboard.gif) no-repeat 50% 50%;
+        image-rendering: -moz-crisp-edges;         /* Firefox */
+        image-rendering:   -o-crisp-edges;         /* Opera */
+        image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
+        image-rendering: crisp-edges;
+        -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
+}

+
+
Live Examples

+
+
image-rendering: auto;

+
+
78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+
+
image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

+
+
78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+
+
image-rendering: crisp-edges; (-webkit-optimize-contrast)

+
+
78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}{{Spec2('CSS3 Images')}} 

+
+
Though initially close from the SVG image-rendering property, the values are quite different now.

+
+
Browser compatibility

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

diff --git a/files/de/web/css/image/index.html b/files/de/web/css/image/index.html
new file mode 100644
index 0000000000..d84257fc23
--- /dev/null
+++ b/files/de/web/css/image/index.html
@@ -0,0 +1,129 @@
+---
+title: 
+slug: Web/CSS/image
+tags:
+  - CSS
+  - CSS Bilder
+  - CSS Datentyp
+  - Grafik
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/image
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Der <image> CSS Datentyp repräsentiert ein 2D Bild. Es gibt zwei Arten von Bildern in CSS: einfache statische Bilder, die meist über einen URL referenziert werden, und dynamisch generierte Bilder wie Farbverläufe oder Abbildungen von Teilen der HTML Struktur.

+
+
CSS kann verschiedene Arten von Bildern verarbeiten:

+
+
    
+ 
  • Bilder mit inneren Maßen, d. h. einer natürlichen Größe, wie bei einem JPEG Bild, das feste Maße hat.
    • 
+ 
  • Bilder mit mehreren inneren Maßen, die in mehreren Versionen innerhalb der Datei existieren, wie bei einigen ICO Formaten. In diesem Fall entspricht das innere Maß dem flächenmäßig größten Bild mit dem Seitenverhältnis, das dem der beinhaltenden Box am nächsten kommt.
    • 
+ 
  • Bilder ohne innerem Maß, die jedoch ein inneres Seitenverhältnis zwischen ihrer Breite und Höhe haben, wie beispielsweise einige Vektorbilder im SVG Format.
    • 
+ 
  • Bilder ohne innere Maße noch innerem Seitenverhältnis, wie beispielsweise CSS Farbverläufen.
    • 
+

+
+
CSS bestimmt die konkrete Objektgröße anhand dieser inneren Maße, der angegebenen Größe definiert durch CSS Eigenschaften wie {{cssxref("width")}}, {{cssxref("height")}} oder {{cssxref("background-size")}} und der Standard Objektgröße, die durch die Art der Eigenschaft definiert wird, in der das Bild verwendet wird:

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
ObjektartStandard Objektgröße
{{cssxref("background-image")}}Die Größe des Hintergrund Positionierungsbereichs des Elements
{{cssxref("list-style-image")}}Die Größe eines Zeichens in 1em
{{cssxref("border-image")}}Die Größe des Randbildbereichs des Elements
{{cssxref("cursor")}}Eine durch den Browser definierte Größe, die der normalen Größe eines Mauszeigers auf dem benutzten System entspricht
Ersetzter Inhalt wie die Kombination der CSS Eigenschaft {{cssxref("content")}} mit den CSS Pseudoelementen {{cssxref("::after")}} und {{cssxref("::before")}}Ein 300px × 150px Rechteck

+
+
Die konkrete Objektgröße wird mit Hilfe des folgenden Algorithmus berechnet:

+
+
    
+ 
  • Falls die angegebene Größe sowohl Breite als auch Höhe definiert, werden diese Werte als die konkrete Objektgröße verwendet.
    • 
+ 
  • Falls die angegebene Größe einen der beiden Werte für Breite und Höhe definiert, wird der fehlende Wert durch das innere Seitenverhältnis bestimmt, sofern vorhanden, die inneren Maße, falls der angegebene Wert passt, oder es wird die Standard Objektgröße für den fehlenden Wert verwendet.
    • 
+ 
  • Falls die angegebene Größe weder Breite noch Höhe definiert, wird die konkrete Objektgröße so berechnet, dass sie dem inneren Seitenverhältnis der Bilder entspricht, jedoch die Standard Objektgröße in keinem Maß übersteigt. Falls das Bild kein inneres Seitenverhältnis hat, wird das innere Seitenverhältnis des Objekts verwendet, dem es zugewiesen ist; falls das Objekt keines hat, wird die fehlende Breite oder Höhe von der Standard Objektgröße herangezogen.
    • 
+

+
+
Bilder können von diversen CSS Eigenschaften verwendet werden, wie {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} oder {{cssxref("cursor")}}.

+
+
Hinweis: Nicht alle Browser unterstützen alle Arten von Bildern in allen Eigenschaften. Der Unterpunkt Browser Kompatibilität enhält hierzu eine detaillierte Liste.

+
+
Syntax

+
+
Ein <image> CSS Datentyp kann die folgenden Bilder repräsentieren:

+
+
    
+ 
  • Ein Bild, dass durch einen {{cssxref("<uri>")}} CSS Datentyp und die url() Funktion angegeben wird
    • 
+ 
  • Einen CSS {{cssxref("<gradient>")}};
    • 
+ 
  • Einen Teil einer Seite, der durch die {{cssxref("element", "element()")}} Funktion definiert wird.
    • 
+

+
+
Beispiele

+
+
Dies sind gültige Bildwerte:

+
+
url(test.jpg)                          Die url() Funktion, sofern test.jpg ein Bild ist
+linear-gradient(to bottom, blue, red)  Ein <gradient>
+element(#colonne3)                     Ein Teil einer Seite, der durch die element() Funktion referenziert wird,,
+                                       sofern 'colonne3' eine existierende CSS ID auf der Seite darstellt.
+

+
+
Dies sind ungültige Bildwerte:

+
+
cervin.jpg                             Eine Bilddatei muss durch die url() Funktion angegeben werden.
+url(report.pdf)                        Die Datei, die über die url() Funktion angesprochen wird, muss ein Bild sein.
+element(#fakeid)                       Falls 'fakeid' keine in der Seite existierende CSS ID darstellt.
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Images', '#image-notation', 'image()')}}{{Spec2('CSS3 Images')}}Vor CSS3 gab es keinen explizit definierten <image> Datentyp. Bilder konnten nur durch die url() Funktion definiert werden.

+
+
Browser Kompatibilität

+
+{{Compat("css.types.image")}}
+
+
Siehe auch

+
+
    
+ 
  • Farbverläufe in CSS, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient","linear-gradient()")}}, {{cssxref("radial-gradient","radial-gradient()")}}, {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}};
    • 
+ 
  • {{cssxref("element","element()")}};
    • 
+

diff --git a/files/de/web/css/index.html b/files/de/web/css/index.html
new file mode 100644
index 0000000000..356ca6e639
--- /dev/null
+++ b/files/de/web/css/index.html
@@ -0,0 +1,100 @@
+---
+title: CSS
+slug: Web/CSS
+tags:
+  - CSS
+  - Design
+  - Landing
+  - Layout
+  - Referenz
+translation_of: Web/CSS
+---
+
{{CSSRef}}

+
+
Cascading Style Sheets, meistens als CSS abgekürzt, ist eine Beschreibungssprache, die das Erscheinungsbild einer in {{Glossary("HTML")}} oder {{Glossary("XML")}} formatierten Datei (inklusive verschiedener XML-Sprachen wie SVG oder XHTML) festlegt. CSS beschreibt, wie ein strukturiertes Element am Bildschirm, auf Papier, in Sprache oder anderen Medien dargestellt wird.

+
+
CSS ist eine der Kernsprachen des Open Web und basiert auf standardisierten W3C-Spezifikationen. Vorher wurden die verschieden Tiele der CSS-Spezifikation synchron entwickelt, was die Versionierung der letzten Empfehlung ermöglichte. Du hast vielleicht von CSS1, CSS2.1 und CSS3 gehört. CSS4 wurde jedoch nie eine offizielle Version.

+
+
Seit CSS3 wuchs der Umfang der Spezifikation beträchtlich und der Fortschritt an den verschiedenen CSS-Modulen begann, so sehr abzuweichen, dass es effizienter wurde, Empfehlungen getrennt pro Modul zu entwickeln und zu veröffentlichen.

+
+

+
    
+ 
  • CSS-Einführung
+
+  
    Eine Schritt-für-Schritt-Einführung für Anfänger, welche die grundlegenden Informationen enthält.
    
+ 
    • 
+ 
  • CSS-TutorialUnser CSS-Lernbereich enthält eine Vielzahl von Tutorials, die alle Grundlagen behandeln und dich vom Anfänger- zum Profiniveau bringen.
    • 
+ 
  • CSS-Referenz
+  
    Eine vollständige Übersicht für erfahrene Webentwickler, die alle Eigenschaften und Konzepte von CSS beschreibt.
    
+ 
    • 
+

+
+

+

+
Tutorials

+
+
Unser CSS-Lernbereich bietet mehrere Module, die dir CSS von Grund auf beibringen — kein Vorwissen wird benötigt.

+
+

+ 
Erste Schritte mit CSS

+ 
CSS (für englisch „Cascading Style Sheets“) wird zur Gestaltung und zum Layout von Webseiten verwendet — zum Beispiel, um Schriftart, Farbe, Größe und Abstand des Inhalts zu verändern, ihn in mehrere Spalten aufzuteilen oder Animationen und andere dekorative Merkmale hinzuzufügen. Dieses Modul stellt einen sanften Anfang auf deinem Weg zur Beherrschung von CSS bereit, mit den Grundlagen, wie es funktioniert, wie die Syntax aussieht, und wie du anfangen kannst, es zu nutzen, um Gestaltung zu HTML hinzuzufügen.

+ 
CSS-Bausteine

+ 
Dieses Modul macht weiter, wo „Erste Schritte mit CSS“ aufgehört hat — jetzt, wo du mit der Sprache und ihrer Syntax vertraut geworden bist und etwas grundlegende Erfahrung gesammelt hast, ist es Zeit, ein bisschen tiefer einzutauchen. Dieses Modul beschäftigt sich mit der Kaskade und Vererbung, allen verfügbaren Selektorarten, Einheiten, Festlegung von Größen, Gestaltung des Hintergrunds und der Kanten, Debugging, und vielem mehr.

+ 
Das Ziel ist hier, dir eine Werkzeugsammlung zum Schreiben kompetenten CSS-Codes bereitzustellen und dir zu helfen, die grundlegende Theorie zu verstehen, bevor es mit spezifischeren Themen wie Textgestaltung und CSS-Layout weitergeht.

+ 
Textgestaltung

+ 
Nach der Behandlung der Grundlagen der Sprache CSS ist das nächste Thema, auf das du dich konzentrierst, Text zu gestalten — eines der gewöhnlichsten Dinge, die du mit CSS tun wirst. Hier sehen wir uns die Grundlagen der Textgestaltung an, zum Beispiel das Verändern der Schriftart, Schriftdicke, Kursivschrift, Zeilen- und Buchstabenabstand, Schlagschatten und andere Textmerkmale. Wir runden das Modul ab, indem wir uns das Anwenden eigener Schriften auf die Seite und die Gestaltung von Listen und Links anschauen.

+ 
CSS-Layout

+ 
An dieser Stelle haben wir uns bereits die CSS-Grundlagen, Textgestaltung und, wie Boxen, in denen sich dein Inhalt befindet, gestaltet und manipuliert werden können, angeschaut. Jetzt ist es an der Zeit, sich anzusehen, wie Boxen in Bezug auf den Ansichtsbereich und einander am richtigen Ort platziert werden. Wir haben die notwendigen Voraussetzungen behandelt, weshalb wir jetzt tief ins CSS-Layout eintauchen können, indem wir uns verschiedene Bildschirmeinstellungen, moderne Layoutwerkzeuge wie Flexbox, CSS-Grids und Positionierung und ein paar der alten Methoden, über die du vielleicht noch etwas wissen möchtest, anschauen.

+ 
CSS nutzen, um übliche Probleme zu lösen

+ 
Dieses Modul beinhaltet Links zu Inhaltsabschnitten, die erklären, wie CSS genutzt werden kann, um sehr gewöhnliche Probleme beim Erstellen einer Webseite zu lösen.

+

+

+
+

+
Referenzen

+
+
+
+
Kochbuch

+
+
Das CSS-Layout-Cookbook versucht, Rezepte für übliche Layoutmuster zusammenzubringen, Dinge, die du in deiner Seite implementieren müssen könntest. Zusätzlich zur Bereitstellung von Code, den du als Anfangspunkt in deinen Projekten nutzen kannst, heben diese Rezepte die verschieden Möglichkeiten, wie Layoutspezifikationen genutzt werden können, und die Entscheidungen, die du als Entwickler treffen kannst, hervor.

+
+
Werkzeuge für die CSS-Entwicklung

+
+
+

+

+

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/index/index.html b/files/de/web/css/index/index.html
new file mode 100644
index 0000000000..2c59185221
--- /dev/null
+++ b/files/de/web/css/index/index.html
@@ -0,0 +1,8 @@
+---
+title: CSS Dokumentationsverzeichnis
+slug: Web/CSS/Index
+tags:
+  - CSS
+translation_of: Web/CSS/Index
+---
+
{{Index("/de/docs/Web/CSS")}}

diff --git a/files/de/web/css/inherit/index.html b/files/de/web/css/inherit/index.html
new file mode 100644
index 0000000000..c91cd0c021
--- /dev/null
+++ b/files/de/web/css/inherit/index.html
@@ -0,0 +1,75 @@
+---
+title: inherit
+slug: Web/CSS/inherit
+tags:
+  - CSS
+  - CSS Kaskadierung
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/inherit
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Der inherit CSS Wert lässt das Element, für das es angegeben wurde, den berechneten Wert der Eigenschaft seines Elternelements annehmen. Er ist für jede CSS Eigenschaft erlaubt.

+
+
Für vererbte Eigenschaften bestärkt es das Standardverhalten und wird nur dafür benötigt, eine andere Regel zu überschreiben. Für nicht vererbte Eigenschaften gibt er ein Verhalten an, das normalerweise wenig Sinn macht. Stattdessen sollte {{cssxref("initial")}} verwendet werden oder {{cssxref("unset")}} auf die {{cssxref("all")}} Eigenschaft angewandt werden.

+
+
{{ Note("Vererbung wird immer vom Elternelement im Dokumentbaum durchgeführt, auch wenn das Elternelement nicht der beinhaltende Block ist.") }}

+
+
Beispiel

+
+
 /* Mache Überschriften zweiter Ebene grün */
+ h2 { color: green; }
+
+ /* ...aber lasse jene in der Seitenleiste unberührt,
+    sodass diese die Farbe ihres Elternelements verwenden */
+ #sidebar h2 { color: inherit; }
+

+
+
In diesem Beispiel verwenden die h2 Elemente innerhalb der Seitenleiste andere Farben. Zum Beispiel, falls eines davon der Kindknoten eines divs wäre, der auf folgende Regel passt

+
+
 div#current { color: blue; }
+

+
+
wäre es blau.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Values', "#common-keywords", "inherit") }}{{ Spec2('CSS3 Values') }}Keine signifikante Änderung bezüglich {{ SpecName('CSS2.1') }}.
{{ SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit") }}{{ Spec2('CSS2.1') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.types.global_keywords.inherit")}}
+
+
Siehe auch

+
+
    
+ 
  • Vererbung
    • 
+ 
  • Die {{cssxref("all")}} CSS Eigenschaft
    • 
+ 
  • 
+  
    Die CSS-weiten Eigenschaftswerte {{cssxref("initial")}}, {{cssxref("inherit")}} und {{cssxref("unset")}}.
    
+ 
    • 
+

diff --git a/files/de/web/css/initial/index.html b/files/de/web/css/initial/index.html
new file mode 100644
index 0000000000..f4779b525e
--- /dev/null
+++ b/files/de/web/css/initial/index.html
@@ -0,0 +1,100 @@
+---
+title: initial
+slug: Web/CSS/initial
+translation_of: Web/CSS/initial
+---
+

+ {{CSSRef}}

+
Übersicht

+
Der Wert initial repräsentiert einen vom Browser vorgegebenen Standardwert. Der Wert ist in jeder CSS Eigenschaft verfügbar, hat aber verschiedene Auswirkungen.

+
Siehe Standardwert.

+
Beispiel

+
 /* give headers a green border */
+ h2 { border: medium solid green }
+
+ /* but make those in the sidebar use the value of the "color" property */
+ #sidebar h2 { border-color: initial; }
+

+
 <p style="color:red">
+    this text is red
+       <em style="color:initial">
+          this text is in the initial color (e.g. black)
+       </em>
+    this is red again
+ </p> 

+
Spezifikation

+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
CSS Values and Units Level 3{{Spec2('CSS3 Values')}}Wert hinzugefügt
CSS Cascade And Inheritance Level 3{{Spec2('CSS3 Cascade')}}Definiert den Wert

+
Browser Kompatibilität

+

+ {{CompatibilityTable}}

+

+ 
+  
+   
+    
+    
+    
+    
+    
+    
+   
+   
+    
+    
+    
+    
+    
+    
+   
+  
+ 
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("3.5")}}{{property_prefix("-moz")}}[*]

+     {{CompatGeckoDesktop("19.0")}}		{{CompatNo}}15.01.2(125)

+

+

+ 
+  
+   
+    
+    
+    
+    
+    
+    
+   
+   
+    
+    
+    
+    
+    
+    
+   
+  
+ 
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("3.0")}}{{property_prefix("-moz")}}[*]

+     {{CompatGeckoMobile("169.0")}}		{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}

+

+
[*] Seit Firefox 1.0 wurden die Werte für -moz-initial festgelegt, bis mit der Definition von {{cssxref("quotes")}} ab Firefox 3.5 (Gecko 1.9.1) der Wert implementiert werden konnte. Die Werte für {{cssxref("-moz-border-top-colors","-moz-border-*-colors")}} wurden erst in in Firefox 3.6 (Gecko 1.9.2) hinzugefügt. Der Wert mit Präfix (-moz-initial) wurde in Firefox 19 durch initial erstetzt und wird seit Firefox 24 nichtmehr unterstützt.

+
Siehe auch

+
diff --git a/files/de/web/css/initialwert/index.html b/files/de/web/css/initialwert/index.html
new file mode 100644
index 0000000000..7d5e7e18dd
--- /dev/null
+++ b/files/de/web/css/initialwert/index.html
@@ -0,0 +1,20 @@
+---
+title: Initialwert
+slug: Web/CSS/Initialwert
+tags:
+  - CSS
+  - Guide
+  - Web
+translation_of: Web/CSS/initial_value
+---
+
Übersicht

+
Der Initialwert, der in der Übersicht der Definition jeder CSS Eigenschaft steht, hat eine unterschiedliche Bedeutung für vererbte und nicht vererbte Eigenschaften.

+
Für vererbte Eigenschaften wird der Initialwert ausschließlich für das Wurzelelement verwendet, falls kein Wert für das Element definiert ist.

+
Für nicht vererbte Eigenschaften wird der Initialwert für jedes Element verwendet, falls kein Wert für das Element definiert ist.

+
Ein initial Schlüsselwort wurde in CSS3 hinzugefügt, um es Autoren zu erlauben, diesen ursprünglichen Wert explizit anzugeben.

+
Siehe auch

+
diff --git a/files/de/web/css/integer/index.html b/files/de/web/css/integer/index.html
new file mode 100644
index 0000000000..c4d214a033
--- /dev/null
+++ b/files/de/web/css/integer/index.html
@@ -0,0 +1,89 @@
+---
+title: 
+slug: Web/CSS/integer
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/integer
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Der CSS Wert <integer> ist eine Ganzzahl zwischen 0 und 9. data type denotes an integer number, positive or negative. Davor kann ein + oder - stehen. Steht nichts davor ist der Interger positiv.

+
+
Integer kommen bspw. in {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}} oder {{Cssxref("column-count")}} vor.

+
+
Ein <integer> entspricht auch dem Wert {{cssxref("<number>")}}.

+
+
Es gibt keine offizielle Begrenzung des Wertes. Opera unterstützt nur Werte bis 215-1, der Internet Explorer bis 220-1. Während der Entwicklung von CSS3 wurde dies ausführlich diskutiert. Der letzte Stand, April 2012, war [-227-1; 227-1] #, aber auch 224-1 und 230-1 wurden vorgeschlagen # #. Im letzten Entwurf der Spezifikation wurde kein Limit festgelegt.

+
+
Interpolation

+
+
Werte des <integer> CSS Datentyps können interpoliert werden, um Animationen zu ermöglichen. In diesem Fall werden sie als ganzzahlige Einzelschritte interpoliert. Die Berechnung erfolgt, als ob sie reale Fließkommazahlen wären und der Einzelwert wird durch die Abrundungsfunktion ermittelt. Die Geschwindigkeit der Interpolation wird durch die mit der Animation verbundenen {{cssxref("timing-function", "Timingfunktion")}} bestimmt.

+
+
Beispiele

+
+
Gültige Integer:

+
+
12          Positiver Integer (ohne führendes +)
++123        Positiver integer (mit führendem +)
+-456        Negativer integer
+0           Null
++0          Null mit führendem +
+-0          Null mit führendem - (obwohl seltsam, ist dies ein erlaubter Wert)
+

+
+
Ungültige Integer:

+
+
12.0        Dist ist eine {{cssxref("<number>")}}, kein <integer>, obwohl sie eine Ganzzahl darstellt
+12.         Der Punkt sollte nicht Teil eines <integer> sein
++---12      Nur ein führendes +/- ist erlaubt
+ten         Buchstaben sind nicht erlaubt
+_5          Sonderzeichen sind nicht erlaubt
+\35         Escapte Unicodezeichen sind nicht erlaubt, auch wenn diese einer Ganzzahl entsprechen (hier: 5)
+\4E94       Nicht-arabische Numerale sind nicht erlaubt, auch nicht escapt (hier: die japanische 5, 五)
+3e4         Wissenschaftliche Notation ist nicht gültig für <integer>
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Values', '#integers', '<integer>')}}{{Spec2('CSS3 Values')}}keine wesentliche Änderung gegenüber CSS Level 2 (Revision 1)
{{SpecName('CSS2.1', 'syndata.html#numbers', '<integer>')}}{{Spec2('CSS2.1')}}Explizit definiert
{{SpecName('CSS1', '', '<integer>')}}{{Spec2('CSS1')}}Implizit definiert

+
+
Browser Kompatibilität

+
+
{{Compat("css.types.integer")}}

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("<number>")}}
    • 
+

diff --git a/files/de/web/css/justify-content/index.html b/files/de/web/css/justify-content/index.html
new file mode 100644
index 0000000000..3d991145af
--- /dev/null
+++ b/files/de/web/css/justify-content/index.html
@@ -0,0 +1,187 @@
+---
+title: justify-content
+slug: Web/CSS/justify-content
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - CSS3
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/justify-content
+---
+
{{CSSRef("CSS Flexible Boxes")}}

+
+
Übersicht

+
+
Die justify-content CSS Eigenschaft definiert, wie ein Browser verfügbaren Platz zwischen und um Elemente verteilt, wenn Flexelemente an der Hauptachse der aktuellen Zeile ausgerichtet werden sollen. Die Ausrichtung wird berechnet, nachdem die Längen und automatischen Abstände angewendet wurden, was bedeutet, dass falls es mindestens ein flexibles Element gibt mit {{cssxref("flex-grow")}} ungleich 0, hat diese Eigenschaft keine Auswirkung, da es keinen verfügbaren Platz gibt.

+
+

+
Hinweis: Es sollte nicht angenommen werden, dass diese Eigenschaft ausschließlich auf Flexcontainer angewandt wird. Daher sollte sie nicht einfach durch Setzen eines anderen {{cssxref("display")}} Wertes versteckt werden. Die CSSWG arbeitet daran, deren Verwendung auf alle Blockelemente auszuweiten. Diese Entwurfsspezifikation ist bisher noch in einer frühen Entwicklungsphase und bisher noch nicht implementiert.

+

+
+
{{cssinfo}}

+
+
Siehe die Verwendung von CSS Flexible Boxes für weitere Eigenschaften und Informationen.

+
+
Syntax

+
+
/* Packe Flexelemente an den Start */
+justify-content: flex-start;
+
+/* Packe Flexelemente an das Ende */
+justify-content: flex-end;
+
+/* Packe Flexelemente um die Mitte */
+justify-content: center;
+
+/* Verteile die Elemente gleichmäßig
+Das erste Element an den Start, das letzte an das Ende */
+justify-content: space-between;
+
+/* Verteile die Elemente gleichmäßig
+Elemente haben gleiche Abstände um sie herum */
+justify-content: space-around;
+
+/* Globale Werte */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+

+
+
Werte

+
+

+ 
flex-start

+ 
Die Flexelemente werden an den Hauptstartpunkt gepackt. Die Außenabstände des ersten Flexelements grenzen an den Startrand der Zeile und jedes weitere Flexelement an das folgende.

+ 
flex-end

+ 
Die Flexelemente werden an den Hauptendpunkt gepackt. Außenabstände des letzten Flexelements grenzen an den Endrand der Zeile und jedes weitere Flexelement an das folgende.

+ 
center

+ 
Die Flexelemente werden in die Mitte der Zeile gepackt. Die Flexelemente grenzen aneinander und werden in der Mitte der Zeile ausgerichtet. Die Leerräume zwischen dem Hauptstartrand und dem ersten Element und zwischen dem Hauptendrand und dem letzten Element sind gleich.

+ 
space-between

+ 
Flexelemente werden gleichmäßig innerhalb der Zeile verteilt. Die Abstände werden so verteilt, dass sie zwischen zwei angrenzenden Elementen gleich sind. Hauptstartrand und -endrand einer Zeile grenzen an den Rand des ersten bzw. letzten Flexelements.

+ 
space-around

+ 
Flexelemente werden gleichmäßig innerhalb der Zeile verteilt, sodass die Leerräume zwischen zwei angrenzenden Elementen gleich sind. Der Leerraum vor dem ersten und nach dem letzten Element entspricht der Hälfte des Leerraums zwischen zwei angrenzenden Elementen.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
HTML:

+
+
<div id="container">
+  <p>justify-content: flex-start</p>
+  <div id="flex-start">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: flex-end</p>
+  <div id="flex-end">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: center</p>
+  <div id="center">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: space-between</p>
+  <div id="space-between">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: space-around</p>
+  <div id="space-around">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+

+
+
CSS:

+
+
#container > div {
+  display: flex;
+  font-family: Courier New, Lucida Console, monospace;
+}
+
+#container > div > div {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+#flex-start {
+  justify-content: flex-start;
+}
+
+#center {
+  justify-content: center;
+}
+
+#flex-end {
+  justify-content: flex-end;
+}
+
+#space-between {
+  justify-content: space-between;
+}
+
+#space-around {
+  justify-content: space-around;
+}
+

+
+
Ergibt:

+
+
{{ EmbedLiveSample('Beispiele', 600, 550) }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Flexbox', '#justify-content', 'justify-content')}}{{Spec2('CSS3 Flexbox')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
Support im Flex-Layout

+
+
{{Compat("css.properties.justify-content.flex_context")}}

+
+
Support im Grid-Layout

+
+
{{Compat("css.properties.justify-content.grid_context")}}

+
+
[1] Firefox unterstützt nur einzeiliges Flexbox Layout bis Version 28. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/kindselektoren/index.html b/files/de/web/css/kindselektoren/index.html
new file mode 100644
index 0000000000..2e351964ed
--- /dev/null
+++ b/files/de/web/css/kindselektoren/index.html
@@ -0,0 +1,90 @@
+---
+title: Kindselektoren
+slug: Web/CSS/Kindselektoren
+tags:
+  - CSS
+  - CSS Referenz
+  - Einsteiger
+  - NeedsMobileBrowserCompatibility
+  - Selektoren
+translation_of: Web/CSS/Child_combinator
+---
+
{{CSSRef("Selectors")}}

+
+
Der Kindkombinator (>) wird zwischen zwei CSS-Selektoren platziert. Er wählt nur die Elemente aus, die vom zweiten Selektor gewählt werden, die Kinder vom ersten gewählten Element sind.

+
+
 

+
+

+
/* Listenpunkte, die Kinder der "my-things" Liste sind */
+ul.my-things > li {
+  margin: 2em;
+}

+
+
Elemente, die vom zweiten Selektor gewählt werden, müssen direkte Kinder des ersten gewählten Elements sein. Dies ist strenger, als der Nachfahrenselektor, der alle Elemente auswählt, die vom zweiten Selektor gewählt werden, für die ein Vorfahrenelement existieren, unabhängig der Anzahl der "Sprünge" aufwärts des DOM.

+

+
+
Syntax

+
+
selector1 > selector2 { Stileigenschaften }
+

+
+
Beispiel

+
+
CSS

+
+
span {
+  background-color: white;
+}
+
+div > span {
+  background-color: DodgerBlue;
+}
+

+
+
HTML

+
+
<div>
+  <span>Span 1. Innerhalb des Divs.
+    <span>Span 2. Innerhalb des Spans, der sich im Div befindet.</span>
+  </span>
+</div>
+<span>Span 3. In keinem Div.</span>
+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Beispiel", 200, 100)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Keine Änderung
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.selectors.child")}}
diff --git a/files/de/web/css/klassenselektoren/index.html b/files/de/web/css/klassenselektoren/index.html
new file mode 100644
index 0000000000..eafd714a05
--- /dev/null
+++ b/files/de/web/css/klassenselektoren/index.html
@@ -0,0 +1,76 @@
+---
+title: Klassenselektoren
+slug: Web/CSS/Klassenselektoren
+tags:
+  - CSS
+  - CSS Referenz
+  - Einsteiger
+  - Selektoren
+translation_of: Web/CSS/Class_selectors
+---
+
{{CSSRef("Selectors")}}

+
+
In einem HTML Dokument matchen CSS Klassenselektoren ein Element basierend auf den Inhalten des {{htmlattrxref("class")}} Attributs des Elements. Das class Attribut ist definiert als eine durch Leerzeichen getrennte Liste von Einträgen, wobei einer dieser Einträge exakt auf den Klassennamen des angegebenen Selektors passen muss.

+
+
Syntax

+
+
.classname { style properties }

+
+
Beachte, dass dies äquivalent zu folgendem {{cssxref("Attributselektoren", "Attributselektor")}} ist:

+
+
[class~=classname] { style properties }

+
+
Beispiel

+
+
CSS

+
+
span.classy {
+  background-color: DodgerBlue;
+}
+

+
+
HTML

+
+
<span class="classy">Hier ist ein Span mit Text.</span>
+<span>Hier ist ein weiterer.</span>
+

+
+
{{EmbedLiveSample('Beispiel', 200, 50)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Keine Änderungen
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.selectors.class")}}
diff --git a/files/de/web/css/kurzformat_eigenschaft/index.html b/files/de/web/css/kurzformat_eigenschaft/index.html
new file mode 100644
index 0000000000..1923d5efd5
--- /dev/null
+++ b/files/de/web/css/kurzformat_eigenschaft/index.html
@@ -0,0 +1,158 @@
+---
+title: Kurzformat Eigenschaft
+slug: Web/CSS/Kurzformat_Eigenschaft
+translation_of: Web/CSS/Shorthand_properties
+---
+
{{cssref}}

+
+
Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.

+
+
The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.

+
+
Tricky edge cases

+
+
Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:

+
+
    
+ 
  1. A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it overrides previously set values. Therefore:
+
+  
    background-color: red;
+background: url(images/bg.gif) no-repeat left top;
+
    
+  will not set the color of the background to red but to {{cssxref("background-color")}}'s default, transparent, as the second rule has precedence.
    2. 
+ 
  2. Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.
    3. 
+ 
  3. Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories:
+  
      
+   
    1. Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges:
+    
+     
+      
+       
+       
+      
+      
+       
+       
+      
+      
+       
+       
+      
+      
+       
+       
+      
+     
+    
      border1.pngThe 1-value syntax: border-width: 1em — The unique value represents all edges
      border2.pngThe 2-value syntax: border-width: 1em 2em — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
      border3.pngThe 3-value syntax: border-width: 1em 2em 3em — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge
      border4.png
+        
      The 4-value syntax: border-width: 1em 2em 3em 4em — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL) (You can also remember it as the order that the hands would rotate on a clock: 1em starts in the 12 o'clock position, then 2em in the 3 o'clock position, then 3em in the 6 o'clock position, and 4em in the 9 o'clock position).
      
+       
      
+   
      2. 
+   
    2. Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners:
+    
+     
+      
+       
+       
+      
+      
+       
+       
+      
+      
+       
+       
+      
+      
+       
+       
+      
+     
+    
      corner1.pngThe 1-value syntax: border-radius: 1em — The unique value represents all corners
      corner2.pngThe 2-value syntax: border-radius: 1em 2em — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.
      corner3.pngThe 3-value syntax: border-radius: 1em 2em 3em — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner
      corner4.png
+        
      The 4-value syntax: border-radius: 1em 2em 3em 4em — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.
      
+       
      
+   
      3. 
+  
    
+ 
    4. 
+

+
+
Background properties

+
+
A background with the following properties ...

+
+
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: left top;

+
+
... can be shortened to just one declaration:

+
+
background: #000 url(images/bg.gif) no-repeat left top;

+
+
(The shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in CSS3, some additional properties.)

+
+
See {{cssxref("background")}} for more detailed information, including CSS3 properties.

+
+
Font properties

+
+
The following declarations ...

+
+
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;

+
+
... can be shortened to the following:

+
+
font: italic bold .8em/1.2 Arial, sans-serif;

+
+
This shorthand declaration is actually equivalent to the longhand declarations above plus font-variant: normal and font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

+
+
Border properties

+
+
With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...

+
+
border-width: 1px;
+border-style: solid;
+border-color: #000;

+
+
... can be simplified as:

+
+
border: 1px solid #000;

+
+
Margin and padding properties

+
+
Shorthand versions of margin and padding values work similarly; the margin property allows for shorthand values to be specified using one, two, three, or four values. The following CSS declarations ...

+
+
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;

+
+
... are the same as the following declaration using the four value shorthand. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").

+
+
margin: 10px 5px 10px 5px;

+
+
Margin shorthand rules for one, two, three and four value declarations are:

+
+
    
+ 
  • When one value is specified, it applies the same margin to all four sides.
    • 
+ 
  • When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
    • 
+ 
  • When three values are specified, the first margin applies to the top, the second to the left and right, the third to the bottom.
    • 
+ 
  • When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).
    • 
+

+
+
The universal shorthand property

+
+
CSS provides a universal shorthand property, {{cssxref("all")}}, which applies its value to every property in the document. Its purpose is to change the properties' inheritance model to one of:

+
+
{{page("/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}

+
+
See Cascade and inheritance or Introducing the CSS Cascade for more information about how inheritance works in CSS.

+
+
See also

+
+
    
+ 
  • {{css_key_concepts}}
    • 
+ 
  • Shorthand properties: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}
    • 
+

diff --git a/files/de/web/css/layout_mode/index.html b/files/de/web/css/layout_mode/index.html
new file mode 100644
index 0000000000..f3ed2f4b75
--- /dev/null
+++ b/files/de/web/css/layout_mode/index.html
@@ -0,0 +1,27 @@
+---
+title: Layout mode
+slug: Web/CSS/Layout_mode
+tags:
+  - CSS
+translation_of: Web/CSS/Layout_mode
+---
+
Ein CSS Layoutmodus, manchmal als Layout abgekürzt, ist ein Algorithmus, der die Position und die Größe von Boxen bestimmt, basierend auf der Weise, wie diese mit ihren Geschwisterknoten und übergeordneten Knoten interagieren. Es gibt mehrere davon:

+
+
    
+ 
  • Das Blocklayout, designt, um Dokumente darzustellen. Das Blocklayout beinhaltet dokumentenspezifische Features, wie die Möglichkeit, Elemente umzubrechen oder sie in mehreren Spalten darzustellen.
    • 
+ 
  • Das Inlinelayout, designt, um Text darzustellen.
    • 
+ 
  • Das Tabellenlayout, designt, um Tabellen darzustellen.
    • 
+ 
  • Das positionierte Layout, designt, um Elemente ohne viel Interaktion mit anderen Elementen zu positionieren.
    • 
+ 
  • Das Flexboxlayout, designt, um komplexe Seiten darzustellen, die problemlos in der Größe geändert werden können. {{experimental_inline}}
    • 
+ 
  • Das Rasterlayout, designt, um Elemente relativ zu einem festen Raster darzustellen. {{experimental_inline}}
    • 
+

+
+

+
Hinweis: Nicht alle CSS Eigenschaften gelten für alle Layoutmodi. Die meisten von ihnen gelten für einen oder zwei davon und haben keinen Effekt, falls sie für ein Element gesetzt werden, das in einem anderen Layoutmodus dargestellt wird.

+

+
+
Siehe auch

+
+
    
+ 
  • {{CSS_key_concepts}}
    • 
+

diff --git a/files/de/web/css/left/index.html b/files/de/web/css/left/index.html
new file mode 100644
index 0000000000..d1e281e4a3
--- /dev/null
+++ b/files/de/web/css/left/index.html
@@ -0,0 +1,190 @@
+---
+title: left
+slug: Web/CSS/Left
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Positionierung
+  - Referenz
+translation_of: Web/CSS/left
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS Eigenschaft left definiert einen Teil der Position von positionierten Elementen.

+
+
Bei absolut positionierten Elementen (jene mit {{cssxref("position")}}: absolute oder position: fixed) wird der Abstand zwischen der linken, äußeren Rand des Elements und dem linken Rand des umschließenden Blocks definiert.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* <length> Werte */
+left: 3px;
+left: 2.4em;
+
+/* <percentage> Werte bezogen auf die Breite des beinhaltenden Blocks */
+left: 10%;
+
+/* Schlüsselwortwerte */
+left: auto;
+
+/* Globale Werte */
+left: inherit;
+left: initial;
+left: unset;
+

+
+
Werte

+
+

+ 
<length>

+ 
Ist eine negative, null oder positive {{cssxref("<length>")}}, die folgendem entspricht:
+ 
    
+  
  • für absolute positionierte Elemente, die Distanz zum linken Rand des beinhaltenden Blocks
    • 
+  
  • für relativ positionierte Elemente, der Versatz, um den das Element von seiner Position im normalen Fluss nach links verschoben ist, falls es nicht positioniert wäre.
    • 
+ 

+ 

+ 
<percentage>

+ 
Ein {{cssxref("<percentage>")}} Wert der Breite des beinhaltenden Blocks, wie in der Übersicht beschrieben.

+ 
auto

+ 
Ist ein Schlüsselwort, das folgendem entspricht:
+ 
    
+  
  • für absolut positionierte Elemente, die Position des Elements basierend auf der {{cssxref("right")}} Eigenschaft und width: auto wird als Breite basierend auf dem Inhalt behandelt.
    • 
+  
  • für relativ positionierte Elemente, der linke Versatz des Elements von der Originalposition basierend auf der {{cssxref("right")}} Eigenschaft oder falls right ebenfalls auto ist, wird wird es nicht verschoben.
    • 
+ 

+ 

+

+
+
Beispiele

+
+
CSS

+
+
#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#example_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#example_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#example_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#example_4 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+  background-color: #FFC7E4;
+}

+
+
HTML

+
+
<div id="wrap">
+  <div id="example_1">
+    <pre>
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    </pre>
+    <p>Das einzige Element, das dieser Div beinhaltet, ist das Hauptfenster. Daher positioniert er sich in Bezug dazu.</p>
+  </div>
+
+  <div id="example_2">
+    <pre>
+      position: relative;
+      top: 0;
+      right: 0;
+    </pre>
+    <p>Relative Position in Bezug auf seine Geschwisterelemente.</p>
+  </div>
+
+  <div id="example_3">
+    <pre>
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    </pre>
+    <p>Relativ zu seinem Geschwister-Div darüber, jedoch aus dem Inhaltsfluss entfernt.</p>
+
+    <div id="example_4">
+      <pre>
+        position: absolute;
+        top: 10px;
+        left: 20px;
+      </pre>
+      <p>Absolute Position innerhalb des Elternelements mit relativer Position.</p>
+    </div>
+  </div>
+</div>

+
+
Live Beispiel

+
+
{{EmbedLiveSample('Beispiele', 1200, 650)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions', '#animatable-css', 'left')}}{{Spec2('CSS3 Transitions')}}Definiert left als animierbar.
{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.left")}}
+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("position")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}
    • 
+

diff --git a/files/de/web/css/length/index.html b/files/de/web/css/length/index.html
new file mode 100644
index 0000000000..6309f0f045
--- /dev/null
+++ b/files/de/web/css/length/index.html
@@ -0,0 +1,178 @@
+---
+title: 
+slug: Web/CSS/length
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Länge
+  - Referenz
+  - Web
+  - length
+translation_of: Web/CSS/length
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Der Platzhalter <length> steht für eine Längenangabe. Diese besteht immer aus aus einer Zahl ({{cssxref("<number>")}}) und einer Maßeinheit (px, em, pc, in, mm, …); zwischen diesen Elementen darf sich kein Leerzeichen befinden.

+
+
Der Wertebereich ist abhängig von der jeweiligen CSS-Eigenschaft, teils sind nur positive Werte sinnvoll und zulässig.

+ Oftmals wird auch eine prozentuale Angabe ({{cssxref("<percentage>")}}) akzeptiert, diese gehört jedoch strenggenommen nicht zu den <length>-Werten und wird deshalb an anderer Stelle besprochen.

+
+
<length> wird von vielen Eigenschaften benutzt, zum Beispiel {{ Cssxref("width") }}, {{ Cssxref("margin") }},  {{ Cssxref("padding") }}, {{ Cssxref("font-size") }}, {{ Cssxref("border-width") }} und {{ Cssxref("text-shadow") }}.

+
+
Interpolation

+
+
<length>-Werte können für Animationen interpoliert werden. Für die Berechnung werden sie als reelle Fließkommazahlen behandelt, dabei wird immer der berechnete Wert interpoliert. Die Geschwindigkeit bzw. die Zwischenschritte hängen von der der Animation zugeordneten Zeitfunktion ab.

+
+
Einheiten

+
+
Relative Längenmaße

+
+
Relativ zur Schriftgröße

+
+
Die nachfolgenden Einheiten beziehen sich immer auf eine Eigenschaft der Schriftart des Elements, für das sie genutzt werden (Ausnahme: rem und rlh, diese beziehen sich auf das Wurzelelement, meist das {{HTMLElement("html")}}-Element).

+
+

+ 
em

+ 
1em entspricht der aus {{Cssxref("font-size")}} berechneten Schriftgröße. Wird em zusammen mit {{Cssxref("font-size")}} selbst benutzt, entspricht 1em der Schriftgröße des Elternelements.

+ em ist, zusammen mit Prozentwerten, das gebräuchlichste Maß, um den Fluss der Seitenelemente unabhängig von der vom Benutzer gewählten Schriftgröße einheitlich zu gewährleisten.

+ 
rem

+ 
Wie em, bezieht sich jedoch immer auf die berechnete Schriftgröße des Wurzelelements. {{ gecko_minversion_inline("1.9.2") }}

+ 
ex

+ 
1ex enspricht üblicherweise der Höhe des kleinen x; oftmals ist 1ex ≈ 0,5em.

+ 
ch

+ 
1ch enspricht der Breite der Ziffer '0' (Null, Unicode U+0030) {{gecko_minversion_inline("1.9.1") }}

+ 
cap {{experimental_inline}}

+ 
Nominale Höhe der Großbuchstaben.

+ 
lh {{experimental_inline}}

+ 
Die aus {{Cssxref("line-height")}} berechnete Zeilenhöhe.

+ 
rlh {{experimental_inline}}

+ 
Wie lh, bezieht sich jedoch immer auf die berechnete Zeilenhöhe des Wurzelelements.

+ 
ic {{experimental_inline}}

+ 
Größe des "水"-Zeichens (CJK "Wasser"-Ideograph U+6C34) in der aktuellen Schriftart.

+

+
+
Relativ zum Viewport

+
+
Diese Werte werden vom sichtbaren Teil des Dokuments abgeleitet, dem Anzeigebereich (Englisch: Viewport). Sie sind also abhängig von der Fenster- bzw. Bildschirmgröße.

+
+
Innerhalb einer {{cssxref("@page")}}-Regel sind Viewport-Werte nicht zulässig.

+
+

+ 
vh

+ 
1vh entspricht 1% der Anzeigenhöhe (vh = viewport height).

+ 
vw

+ 
1vw entspricht 1% Anzeigenbreite (vh = viewport width).

+ 
vi {{experimental_inline}}

+ 
Entspricht 1% der Länge der Inlineachse des umgebenden Blocks. Die Inlineachse ist die Richtung, in der Text geschrieben wird, also horizontal für deutschen Text.

+ 
vi {{experimental_inline}}

+ 
Entspricht 1% der Länge der Blockachse des umgebenden Blocks. Die Blockachse verläuft im Winkel von 90° zur Inlineachse, also vertikal für deutschen Text.

+ 
vmin

+ 
Der kleinere der Werte vh und vw.

+ 
vmax

+ 
Der größere der Werte vh und vw.

+

+
+
Absolute Längenmaße

+
+
Absolute Längenmaße stehen für ein physikalisches Maß, sofern die physischen Eigenheiten des Ausgabemediums bekannt sind. Eine der Einheiten wird als Referenz festgelegt, alle anderen werden relativ zu ihr definiert. Die Festlegung hängt vom Ausgabegerät ab, genauer: von dessen Auflösung.

+
+
Bei Geräten mit niedriger Auflösung (namentlich herkömmliche Flachbildschirme) ist die Bezugsgröße das sogenannte Referenzpixel. Die Größe des Referenzpixels ist definiert als die wahrgenommene Größe eines Pixels auf einem Bildschirm mit der Auflösung 96dpi in etwa einer Armlänge Abstand. In der Praxis wird jedoch meist das tatsächliche Bildschirmpixel des gerade angeschlossenen Bildschirms als Referenzpixel definiert.

+ Ein Referenzpixel entspricht 1px, alle anderen Einheiten sind bei niedrig auflösenden Geräten von px abgeleitet.  1in ist in Abhängigkeit von px als 96px festgelegt, was wiederum 72pt entspricht.

+
+
Aufgrund dieser eher ungenauen Definition können in mm, cm oder in gegebene Längen von jenen abweichen, die tatsächlich als solche gemessen werden würden – in anderen Worten: 1cm auf dem Bildschirm ist üblicherweise nur ungefähr gleich einem Zentimeter auf dem Zollstock.

+
+
Bei Geräten mit hoher Auflösung hingegen entsprechen die Einheiten mm, cm und in ihren tatsächlichen Maßen, mithin den Einheiten Millimeter, Zentimeter und Zoll (Englisch: Inch). Von ihnen abhängig ist die Einheit px, sie ist definiert als 1/96 eines Zolls.

+
+

+
Hinweis: Viele Benutzer erhöhen die Standardschriftgröße ihres Browsers zur besseren Lesbarkeit. Absolute Schriftgrößen können Probleme mit der Barrierefreiheit verursachen, weil sie nicht von den Benutzereinstellungen der Schriftgröße abhängen. Es wird deshalb empfohlen, relative Schriftgrößen wie em und rem zu benutzen, selbst für allgemeine Schriftgrößendefinitionen auf p- oder body-Ebene.

+

+
+

+ 
px

+ 
Pixel, abhängig vom Anzeigegerät. Auf herkömmlichen Bildschirmen entspricht 1px in der Regel einem physischen Pixel des Bildschirms.

+ Bei hochauflösenden Geräten wird die Anzahl physischer Pixel so bemessen, dass 1 Zoll ungefähr 96px entspricht, also für px eine theoretische Auflösung von 96dpi beibehalten wird.

+ 
cm

+ 
Zentimeter

+ 
mm

+ 
Millimeter

+ 
in

+ 
Zoll (Englisch: Inch). 1 Zoll = 2,54cm

+ 
pc

+ 
Picas. 1pc = 12pt = 1/6in

+ 
pt

+ 
Punkt, ein Wert aus dem Druckgewerbe. 1pt = 1/72in. pt wird häufig für Schriftgrößen auch in anderen Anwendungen verwendet.

+ 
mozmm {{ non-standard_inline() }}

+ 
Experimentelle Maßeinheit, die unter Berücksichtigung der Auflösung des Anzeigegeräts immer exakten Millimetern entspricht.

+

+
+
Beispiel

+
+
HTML

+
+
<div style="width: 10em;">10em</div>
+<div style="width: 10ex;">10ex</div>
+<div style="width: 10ch;">10ch</div>
+<div style="width: 10vh;">10vh</div>
+<div style="width: 10vw;">10vw</div>
+<div style="width: 10vmin;">10vmin</div>
+<div style="width: 10vmax;">10vmax</div>
+<div style="width: 100px;">100px</div>
+<div style="width: 10cm;">10cm</div>
+<div style="width: 10mm;">10mm</div>
+<div style="width: 10in;">10in</div>
+<div style="width: 10pc;">10pc</div>
+<div style="width: 50pt;">50pt</div>
+

+
+
CSS

+
+
div {
+    background-color: green;
+    margin: 6px;
+}
+

+
+
Ergebnis

+
+
{{ EmbedLiveSample('Beispiel', '', '', '', 'Web/CSS/length') }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS4 Values', '#lengths', '')}}{{Spec2('CSS4 Values')}}vi, vb, ic, lh, und rlh hinzugefügt.
{{ SpecName('CSS3 Values', '#lengths', '<length>') }}{{ Spec2('CSS3 Values') }}ch, rem, vw, vh, vmin, vmax hinzugefügt
{{ SpecName('CSS2.1', 'syndata.html#length-units', '<length>') }}{{ Spec2('CSS2.1') }}pt, pc, px definiert
{{ SpecName('CSS1', '#length-units', '<length>') }}{{ Spec2('CSS1') }}

+
+
Browserkompatibilität

+
+
{{Compat("css.types.length")}}

diff --git a/files/de/web/css/letter-spacing/index.html b/files/de/web/css/letter-spacing/index.html
new file mode 100644
index 0000000000..ffd4a58d94
--- /dev/null
+++ b/files/de/web/css/letter-spacing/index.html
@@ -0,0 +1,117 @@
+---
+title: letter-spacing
+slug: Web/CSS/letter-spacing
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - SVG
+translation_of: Web/CSS/letter-spacing
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die letter-spacing CSS Eigenschaft gibt das Abstandsverhalten zwischen Textzeichen an.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* <length> Werte */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* Schlüsselwortwerte */
+letter-spacing: normal;
+
+/* Globale Werte */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+

+
+
Werte

+
+

+ 
normal

+ 
Die Abstände sind die normalen Abstände für die aktuelle Schriftart. Im Gegensatz zu einem Wert von 0, erlaubt es dieser Wert dem User Agent, den Leerraum zwischen Zeichen zu ändern, um Text im Block anzuordnen.

+ 
<length>

+ 
Beschreibt Leerraum zwischen den Zeichen zusätzlich zum Standardleerraum zwischen Zeichen. Werte können negativ sein, aber es kann implementationsspezifische Beschränkungen geben. User Agents können den Leerraum zwischen den Zeichen nicht weiter verringern oder vergrößern, um den Text im Block anzuordnen.

+ Siehe {{cssxref("length")}} Werte für mögliche Einheiten.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
HTML Inhalt

+
+
<p class="first-example"> letter spacing </p>
+<p class="second-example"> letter spacing </p>
+<p class="third-example"> letter spacing </p>
+<p class="fourth-example"> letter spacing </p>
+

+
+
CSS Inhalt

+
+
.first-example { letter-spacing: 0.4em; }
+.second-example { letter-spacing: 1em; }
+.third-example { letter-spacing: -0.05em; }
+.fourth-example { letter-spacing: 6px; }
+

+
+
{{ EmbedLiveSample('Beispiele', 440, 185) }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}{{Spec2('CSS3 Text')}}Keine Änderung
{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}{{Spec2('CSS3 Transitions')}}Definiert letter-spacing als animierbar.
{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}{{Spec2('CSS2.1')}}Keine Änderung
{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}{{Spec2('SVG1.1')}}Ursprüngliche SVG Definition
{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.letter-spacing")}}
+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("font-kerning")}}
    • 
+

diff --git a/files/de/web/css/line-break/index.html b/files/de/web/css/line-break/index.html
new file mode 100644
index 0000000000..7338a176c7
--- /dev/null
+++ b/files/de/web/css/line-break/index.html
@@ -0,0 +1,72 @@
+---
+title: line-break
+slug: Web/CSS/line-break
+tags:
+  - CSS
+  - CSS Text
+  - NeedsExample
+  - Property
+  - Referenz
+translation_of: Web/CSS/line-break
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
Übersicht

+
+
Die line-break CSS Eigenschaft wird dazu verwendet, wie (oder ob) Zeilen umgebrochen werden sollen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+
+/* Globale Werte */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+

+
+
Werte

+
+

+ 
auto

+ 
Text wird nach der Standardregel zum Umbrechen von Zeilen umgebrochen.

+ 
loose

+ 
Text wird umgebrochen, sodass die Zeile kürzer ist, wie bei einer Zeitung.

+ 
normal

+ 
Text wird nach der allgemeinen Regel zum Umbrechen von Zeilen umgebrochen.

+ 
strict

+ 
Text wird nach der strikten Regel zum Umbrechen von Zeilen umgebrochen.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}{{Spec2('CSS3 Text')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.line-break")}}
diff --git a/files/de/web/css/linear-gradient()/index.html b/files/de/web/css/linear-gradient()/index.html
new file mode 100644
index 0000000000..127a082f2a
--- /dev/null
+++ b/files/de/web/css/linear-gradient()/index.html
@@ -0,0 +1,332 @@
+---
+title: linear-gradient()
+slug: Web/CSS/linear-gradient()
+translation_of: Web/CSS/linear-gradient()
+---
+
{{ CSSRef() }}

+
+
Die CSS linear-gradient() Funktion erstellt ein {{cssxref("<image>")}} welches aus einem konstanten Farbverlauf besteht. Das Ergebnis dieser Funktion ist ein Objekt des CSS {{cssxref("<gradient>")}} Daten-Typs. Wie jeder andere Farbverlauf, ist der CSS Farbverlauf keine CSS {{cssxref("<color>")}} sondern ein Bild mit keinen spezifischen Dimensionen; Also hat er weder eine natürliche oder bevorzugte Größe, noch ein Größenverhältnis. Seine genaue Größe wird durch die Größe seines zugehörigen Elements bedingt.

+
+
Ein konstanter Farbverlauf wird durch eine Achse, die gradient line, definiert wobei jeder Punkt auf dieser Linie eine andere Farbe hat. Senkrecht zur gradient line stehende Linien haben jeweils eine Farbe, die des jeweiligen Schnittpunks mit der gradient line.

+
+
 

+
+
linear-gradient.pngDie gradient line wird definiert durch einen Winkel und dem Mittelpunkt des Quadrates auf dem das gradienten Bild abgebildet wird. Der Farbverlauf wird durch verschiedene Punkte definiert, dem Startpunkt, dem Endpunkt und den optional dazwischen liegenden Farbunterbrechungspunkten.

+
+
Der Startpunkt ist der Punkt auf der gradient line, auf dem auch die Farbe anfängt. Er liegt genau auf dem Schnittpunkt der gradient line und einer Linie die senkrecht zu der Ecke des Bildes verläuft das im gleichen Quadranten liegt.  

+
+
So ist auch der Endpunkt ein Punkt, an dem einer der beiden ausgesuchten Farben ganz erreicht wird. Er liegt auch genauso auf dem Schnittpunkt zwischen der gradient line und der aus der Ecke im gleichen Quadranten senkrecht verlaufenden Linie , einfacher ist er aber als Punktsymmetrische Spiegelung zum Startpunkt zu sehen, wobei der Spiegelpunkt dabei auf der Mitte des Bildes liegt.  

+
+
Diese ungefähre und komplexe Definition des Start- und Endpunkts führt uns zu einer interessanten Eigenschaft, die manchmal magic corners genannt wird: die benachbarten Ecken der Start- und Endpunkte haben die gleiche Farbe, wie die jeweiligen Start- und Endpunkte.

+
+
Mehr als nur die Farben des Start- und Endpunkts können festgesetzt werden.  Durch das definieren einiger Farbunterbrechungen, kann der Web-Entwickler einen mehr individuellen Übergang zwischen den Start- und den Endpunktfarben erreichen , oder einen mehrfarbigen Farbverlauf erstellen.

+
+
Der Syntax eines konstanten Farberlaufes erlaubt zwar keine Wiederholung von Farbverläufen, aber durch das Setzen von Farbunterbrechungen kann ein ähnlicher Effekt erzielt werden. Für wiederholende Farbverläufe ist die {{ Cssxref("repeating-linear-gradient") }} CSS Eigenschaft geeignet.

+
+
Wenn die Position einer Farbunterbrechung bedingungslos definiert wird, wird er genau auf halben Weg zwischen dem vorhergehenden und dem nachfolgenden Punkt gesetzt.  Außerdem kann die Position genau bestimmt werden, indem ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} CSS Datentyp benutzt wird.

+
+
Farbverläufe sind als CSS <image> Datentypen definiert; sie können nur dann benutzt werden, wenn auch ein <image> Datentyp benötigt ist. Aus diesem Grund, wird ein linear-gradient nicht bei einer {{ Cssxref("background-color") }} und anderen Eigenschaften, die eine {{cssxref("<color>")}} benötigen,  funktionieren.

+
+
Syntax

+
+
linear-gradient(
+  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
+  \---------------------------------/ \----------------------------/
+    Definition of the gradient line        List of color stops
+
+where <side-or-corner> = [left | right] || [top | bottom]
+  and <color-stop>     = <color> [ <percentage> | <length> ]?
+

+
+
linear-gradient( 45deg, blue, red );           /* A gradient on 45deg axis starting blue and finishing red */
+linear-gradient( to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue and
+                                                  finishing red */
+
+linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40%
+                                                  and finishing red */
+

+
+
Values

+
+

+ 
<side-or-corner>

+ 
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.

+ The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.

+ 
<angle>

+ 
An angle of direction for the gradient. See {{ cssxref("<angle>") }}.

+ 
<color-stop>

+ 
This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage or a {{cssxref("<length>")}} along the gradient axis).

+ Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.

+

+
+
History of the syntax

+
+
The syntax of linear-gradient has evolved since the first Apple proposal implemented in 2008:

+
+
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
+

+
+
In the original syntax, the same function was used to create both linear and radial gradients.  However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter.  The situation became more complicated if  other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications.  No draft was proposed to the W3C.

+
+
An alternative syntax was proposed and implemented by Mozilla in 2009.  In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product.  A third syntax was proposed.  This third syntax simplified the syntax for linear gradients to:

+
+
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+

+
+
The new syntax did not require the to(), from()and color-stop() functions, so they were dropped. The order of the top/bottom and left/right keywords was also recognized as unimportant, so Mozilla removed the constraint of having top/bottom defined first. 

+
+
But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients.  Finally, the syntax below was proposed to the W3C.  Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.

+
+
    
+ 
  • The support of an {{ cssxref("<angle>") }} as an origin, allowing gradients of any direction.
    • 
+ 
  • The definition of the magic corner algorithm which eases the work of Web developers by allowing an easy definition of the exact color at the corners.
    • 
+

+
+
The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):

+
+
linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+

+
+
Unfortunately, the addition of the {{ cssxref("<angle>") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.# This was fixed by a new syntax where the keyword are directions too, and preceded by the to keyword.

+
+
linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+

+
+
This should be the final syntax.

+
+
A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("<angle>") }} defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the to keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.

+
+
Examples

+
+
Gradient at a 45 degree angle

+
+
Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.

+
+
<div style="width: 200px; height: 200px;"></div>

+
+
div {
+  background: linear-gradient(135deg, red, blue);
+}

+
+
Result:

+
+
{{ EmbedLiveSample("Gradient_at_a_45_degree_angle") }}

+
+
Gradient that starts at 60% of the gradient line

+
+
Sometimes we don't want a gradient that starts at the beginning of the line, but later. To reach this, add a color stop with same color where you want the gradient to start.

+
+
<div style="width: 200px; height: 200px;"></div>

+
+
div {
+  background: linear-gradient(135deg, red, red 60%, blue);
+}

+
+
Result:

+
+
{{ EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line") }}

+
+
Gradient with multiple color stops

+
+
If the first color-stop does not have a <length> or <percentage>, it defaults to 0%. If the last color-stop does not have a <length> or <percentage>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.

+
+
Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.

+
+
<div>A rainbow made from a gradient</div>

+
+
div {
+  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+}
+

+
+
Result:

+
+
{{ EmbedLiveSample("Gradient_with_multiple_color_stops") }}

+
+
Repeating a linear gradient

+
+
The linear-gradient does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.

+
+
Using transparency

+
+
<div>Linear with transparency</div>

+
+
div {
+  background: linear-gradient(to bottom right, red, rgba(255,0,0,0));
+}

+
+
Result:

+
+
{{ EmbedLiveSample("Using_transparency") }}

+
+
Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of background-size).

+
+
Notes

+
+
If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a linear-gradient, the gradient won't fill the browser screen unless you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()') }}{{ Spec2('CSS3 Images') }}Initial definition

+
+
Browser compatibility

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support (on {{ cssxref("background") }} and {{ cssxref("background-image") }}){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}[3]

+    {{ CompatGeckoDesktop("16") }}[5]		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.10{{ property_prefix("-o") }} [3]5.1{{ property_prefix("-webkit") }}[2][3]
On {{cssxref("border-radius")}}{{CompatGeckoDesktop("29")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
On any other property that accept {{cssxref("<image>")}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Legacy webkit syntax{{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}[2]
Legacy from syntax (without to){{ non-standard_inline() }}{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]10.0 (534.16){{ property_prefix("-webkit") }} [2]1011.10{{ property_prefix("-o") }}[4]5.1{{ property_prefix("-webkit") }}[2]
Standard syntax (using the to keyword){{CompatGeckoDesktop("16")}}26.0 (537.27)1012.106.1
Interpolation hints (a percent without a color){{CompatGeckoDesktop("36")}}40 27 

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support{{ CompatGeckoMobile("1.9.2") }}{{ property_prefix("-moz") }}[3]

+    {{ CompatGeckoMobile("16") }}[5]		
+    
16{{property_prefix("-webkit")}}

+     26

+   		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

+
+
[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+
+
[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

+
+
[3] Gecko, Opera & Webkit considers {{ cssxref("<angle>") }} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.

+
+
[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

+
+
linear-gradient(to top left, blue, red);

+
+
is almost the same as:

+
+
-moz-linear-gradient(bottom right, blue, red);

+
+
The legacy syntax, without to, is planned to go away when the prefix is removed.

+
+
[5]Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.

+
+
Cross-browser gradients

+
+
Considering all prefixes above, here is a gradient from pink to green, top to bottom.

+
+
.grad {
+  background-color: #F07575; /* fallback color if gradients are not supported */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
+}
+

+
+
The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.

+
+
See also

+
+
+
+
 

diff --git a/files/de/web/css/list-style-image/index.html b/files/de/web/css/list-style-image/index.html
new file mode 100644
index 0000000000..dba30b4191
--- /dev/null
+++ b/files/de/web/css/list-style-image/index.html
@@ -0,0 +1,102 @@
+---
+title: list-style-image
+slug: Web/CSS/list-style-image
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Liste
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/list-style-image
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die list-style-image CSS Eigenschaft gibt das Bild an, das als Aufzählungszeichen verwendet wird.

+
+
Es ist oft einfacher, die Kurzform Eigenschaft {{ cssxref("list-style") }} zu verwenden.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+list-style-image: none;
+
+/* <url> Werte */
+list-style-image: url('starsolid.gif');
+
+/* Globale Werte */
+list-style-image: inherit;
+list-style-image: initial;
+list-style-image: unset;
+

+
+
Werte

+
+

+ 
<uri>

+ 
Adresse des Bildes, das als Aufzählungszeichen verwendet werden soll.

+ 
none

+ 
Gibt an, dass kein Bild als Aufzählungszeichen verwendet werden soll. Falls dieser Wert gesetzt ist, wird das in {{ Cssxref("list-style-type") }} definierte Aufzählungszeichen verwendet.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
HTML

+
+
<ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+</ul>
+

+
+
CSS

+
+
ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
+}

+
+
Result

+
+
{{EmbedLiveSample('Beispiele')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Lists', '#list-style-image', 'list-style-image') }}{{ Spec2('CSS3 Lists') }}Erweitert die Unterstützung auf beliebige {{cssxref("<image>")}} Datentypen.
{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image') }}{{ Spec2('CSS2.1') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.list-style-image")}}
+
+
Siehe auch

+
+
    
+ 
  • {{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}
    • 
+

diff --git a/files/de/web/css/list-style-position/index.html b/files/de/web/css/list-style-position/index.html
new file mode 100644
index 0000000000..6645dafb85
--- /dev/null
+++ b/files/de/web/css/list-style-position/index.html
@@ -0,0 +1,116 @@
+---
+title: list-style-position
+slug: Web/CSS/list-style-position
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/list-style-position
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die list-style-position CSS Eigenschaft gibt die Position der Aufzählungszeichenbox innerhalb der Hauptblockbox an.

+
+
Es ist oft einfacher, die Kurzform Eigenschaft {{cssxref("list-style")}} zu verwenden.

+
+
{{cssinfo("list-style-position")}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("list-style-position")}}

+
+
list-style-position: inside
+list-style-position: outside
+
+list-style-position: inherit
+

+
+
Werte

+
+

+ 
outside

+ 
Die Aufzählungszeichenbox liegt außerhalb der Hauptblockbox.

+ 
inside

+ 
Die Aufzählungszeichenbox ist die erste Inlinebox der Hauptblockbox, nach der der Inhalt des Elements steht.

+

+
+
Beispiel

+
+
HTML

+
+
<ul class="one"> List 1
+  <li>List Item 1-1</li>
+  <li>List Item 1-2</li>
+  <li>List Item 1-3</li>
+  <li>List Item 1-4</li>
+</ul>
+<ul class="two"> List 2
+  <li>List Item 2-1</li>
+  <li>List Item 2-2</li>
+  <li>List Item 2-3</li>
+  <li>List Item 2-4</li>
+</ul>
+<ul class="three"> List 3
+  <li>List Item 3-1</li>
+  <li>List Item 3-2</li>
+  <li>List Item 3-3</li>
+  <li>List Item 3-4</li>
+</ul>

+
+
CSS

+
+
.one {
+  list-style:square inside;
+}
+
+.two {
+  list-style-position: outside;
+  list-style-type: circle;
+}
+
+.three {
+  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
+  list-style-position: inherit;
+}

+
+
Result

+
+
{{EmbedLiveSample("Beispiel","200","420")}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Lists', '#list-style-position', 'list-style-position')}}{{Spec2('CSS3 Lists')}}Keine Änderung
{{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.list-style-position")}}
+
+
Siehe auch

+
+
    
+ 
  • {{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}
    • 
+

diff --git a/files/de/web/css/list-style-type/index.html b/files/de/web/css/list-style-type/index.html
new file mode 100644
index 0000000000..d2831799ac
--- /dev/null
+++ b/files/de/web/css/list-style-type/index.html
@@ -0,0 +1,562 @@
+---
+title: list-style-type
+slug: Web/CSS/list-style-type
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Liste
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/list-style-type
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS-Eigenschaft list-style-type bestimmt, wie die Einträge einer Liste ausgezeichnet werden. Übliche Arten sind etwa Punkte oder eine Nummerierung vor jedem Eintrag:

+
+
    
+ 
  • Erster Eintrag
    • 
+ 
  • Zweiter Eintrag
    • 
+

+
+
    
+ 
  1. Numerierte Einträge
    2. 
+ 
  2. Numerierte Einträge
    3. 
+

+
+
Meist wird diese Eigenschaft mit dem {{HTMLElement("li")}}-Element in Verbindung gebracht. Tatsächlich kann es sich jedoch um jedes beliebige Element handeln, dessen {{cssxref("display")}}-Eigenschaft list-item ist.

+
+

+
Hinweis:  list-style-type ist eine Eigenschaft von Listenelementen, nicht von Listen. Da sie vererbt wird, kann sie jedoch statt beim Listenelement selbst auch bei seinem Elternelement gesetzt werden (in der Regel {{HTMLElement("ol")}} or {{HTMLElement("ul")}}).

+

+
+
{{cssinfo}}

+
+
Syntax

+
+
Werte

+
+

+ 
none

+ 
Es wird kein Aufzählungszeichen angezeigt.

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

+ 
Der gebene, in Anführungszeichen gesetzte Text wird vor jedem Listeneintrag angezeigt. Beispiel: list-style-type: '-'

+ 
{{cssxref("symbols()")}}

+ 
Statt über {{cssxref("@counter-style")}} eine Aufzählungsweise zu definieren, kann dies mit der Funktion symbols() auch direkt in der Eigenschaft list-style-type geschehen.

+ Da diese Aufzählungsweise im Gegensatz zu per @counter-style definierten keinen Namen hat, wird sie auch als "anonym" bezeichnet.

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

+ 
Ein Bezeichner, der dem Wert einer {{cssxref("@counter-style")}}-Regel entspricht oder einem der folgenden Stile:

+

+
+

+ 
disc

+ 

+ 
    
+  
  • Ein gefüllter Kreis (Standardwert)
    • 
+ 

+ 

+ 
circle

+ 

+ 
    
+  
  • Ein leerer Kreis
    • 
+ 

+ 

+ 
square

+ 

+ 
    
+  
  • Ein gefülltes Quadrat
    • 
+ 

+ 

+ 
decimal

+ 

+ 
    
+  
  • Dezimalzahlen
    • 
+  
  • Beginnend bei 1
    • 
+ 

+ 

+ 
cjk-decimal {{experimental_inline}}

+ 

+ 
    
+  
  • Han-Dezimalzahlen
    • 
+  
  • z. B. 一, 二, 三, ..., 九八, 九九, 一〇〇
    • 
+ 

+ 

+ 
decimal-leading-zero

+ 

+ 
    
+  
  • Dezimalzahlen
    • 
+  
  • Aufgefüllt mit vorangestellten Nullen
    • 
+  
  • z. B. 01, 02, 03, … 98, 99
    • 
+ 

+ 

+ 
lower-roman

+ 

+ 
    
+  
  • Kleingeschriebene römische Zahlen
    • 
+  
  • E.g. i, ii, iii, iv, v…
    • 
+ 

+ 

+ 
upper-roman

+ 

+ 
    
+  
  • Großgeschriebene römische Zahlen
    • 
+  
  • E.g. I, II, III, IV, V…
    • 
+ 

+ 

+ 
lower-greek

+ 

+ 
    
+  
  • Kleingeschriebene griechische Zahlworte
    • 
+  
  • Alpha, Beta, Gamma…
    • 
+  
  • z. B. α, β, γ…
    • 
+ 

+ 

+ 
lower-alpha

+ 
lower-latin

+ 

+ 
    
+  
  • Kleingeschriebene lateinische Buchstaben
    • 
+  
  • z. B. a, b, c, … z
    • 
+  
  • lower-latin wird nicht von IE7 und früher unterstützt
    • 
+  
  • Siehe den Unterpunkt {{anch("Browser-Kompatibilität")}}.
    • 
+ 

+ 

+ 
upper-alpha

+ 
upper-latin

+ 

+ 
    
+  
  • Großgeschriebene lateinische Buchstaben
    • 
+  
  • z. B. A, B, C, … Z
    • 
+  
  • upper-latin wird nicht von IE7 und früher unterstützt
    • 
+ 

+ 

+ 
arabic-indic

+ 
-moz-arabic-indic

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
armenian

+ 

+ 
    
+  
  • Traditionelle armenische Nummerierung
    • 
+  
  • z. B. ayb/ayp, ben/pen, gim/keem…
    • 
+ 

+ 

+ 
bengali

+ 
-moz-bengali

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
cambodian {{experimental_inline}}*

+ 

+ 
    
+  
  • Beispiel
    • 
+  
  • Ist ein Synonym für Khmer
    • 
+ 

+ 

+ 
cjk-earthly-branch

+ 
-moz-cjk-earthly-branch

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
cjk-heavenly-stem

+ 
-moz-cjk-heavenly-stem

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
cjk-ideographic{{experimental_inline}}

+ 

+ 
    
+  
  • Identisch zu trad-chinese-informal
    • 
+  
  • Z. B. 一萬一千一百一十一
    • 
+ 

+ 

+ 
devanagari

+ 
-moz-devanagari

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
ethiopic-numeric {{experimental_inline}}

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
georgian

+ 

+ 
    
+  
  • Traditionelle georgische Nummerierung
    • 
+  
  • z. B. an, ban, gan, … he, tan, in…
    • 
+ 

+ 

+ 
gujarati

+ 
-moz-gujarati

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
gurmukhi

+ 
-moz-gurmukhi

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
hebrew {{experimental_inline}}

+ 

+ 
    
+  
  • Traditionelle hebräische Nummerierung
    • 
+ 

+ 

+ 
hiragana {{experimental_inline}}

+ 

+ 
    
+  
  • a, i, u, e, o, ka, ki, …
    • 
+  
  • (Japanisch)
    • 
+ 

+ 

+ 
hiragana-iroha {{experimental_inline}}

+ 

+ 
    
+  
  • i, ro, ha, ni, ho, he, to, …
    • 
+  
  • {{interwiki('wikipedia', 'Iroha')}} ist die alte japanische Silbenreihenfolge.
    • 
+ 

+ 

+ 
japanese-formal {{experimental_inline}}

+ 

+ 
    
+  
  • Formelle japanische Nummerierung, wie sie in juristischen oder Wirtschaftsdokumenten verwendet wird.
    • 
+  
  • z. B. 壱萬壱阡壱百壱拾壱
    • 
+  
  • Änderungen an der Gestaltung der Kanji-Schriftzeichen, die zu Verwechslungen mit anderen führen könnten, werden unterdrückt.
    • 
+ 

+ 

+ 
japanese-informal {{experimental_inline}}

+ 

+ 
    
+  
  • Formlose japanische Nummerierung
    • 
+ 

+ 

+ 
kannada

+ 
-moz-kannada

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
katakana {{experimental_inline}}

+ 

+ 
    
+  
  • A, I, U, E, O, KA, KI, …
    • 
+  
  • (Japanisch)
    • 
+ 

+ 

+ 
katakana-iroha {{experimental_inline}}

+ 

+ 
    
+  
  • I, RO, HA, NI, HO, HE, TO, …
    • 
+  
  • {{interwiki('wikipedia', 'Iroha')}} ist die alte japanische Silbenreihenfolge.
    • 
+ 

+ 

+ 
khmer

+ 
-moz-khmer

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
korean-hangul-formal {{experimental_inline}}

+ 

+ 
    
+  
  • Koreanische Hangul-Nummerierung
    • 
+  
  • z. B. 일만 일천일백일십일
    • 
+ 

+ 

+ 
korean-hanja-formal {{experimental_inline}}

+ 

+ 
    
+  
  • Formelle koreanische Han-Nummerierung
    • 
+  
  • z. B. 壹萬 壹仟壹百壹拾壹
    • 
+ 

+ 

+ 
korean-hanja-informal {{experimental_inline}}

+ 

+ 
    
+  
  • Koreanische Hanja-Nummerierung
    • 
+  
  • z. B. 萬 一千百十一
    • 
+ 

+ 

+ 
lao

+ 
-moz-lao

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
lower-armenian {{experimental_inline}}*

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
malayalam

+ 
-moz-malayalam

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
mongolian {{experimental_inline}}

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
myanmar

+ 
-moz-myanmar

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
oriya

+ 
-moz-oriya

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
persian {{experimental_inline}}

+ 
-moz-persian

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
simp-chinese-formal {{experimental_inline}}

+ 

+ 
    
+  
  • Formelle Nummerierung in vereinfachtem Chinesisch
    • 
+  
  • z. B. 壹万壹仟壹佰壹拾壹
    • 
+ 

+ 

+ 
simp-chinese-informal {{experimental_inline}}

+ 

+ 
    
+  
  • Formlose Nummerierung in vereinfachtem Chinesisch
    • 
+  
  • z. B. 一万一千一百一十一
    • 
+ 

+ 

+ 
tamil {{experimental_inline}}

+ 
-moz-tamil

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
telugu

+ 
-moz-telugu

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
thai

+ 
-moz-thai

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
tibetan {{experimental_inline}}*

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
trad-chinese-formal {{experimental_inline}}

+ 

+ 
    
+  
  • Formelle Nummerierung in traditionellem Chinesisch
    • 
+  
  • z. B. 壹萬壹仟壹佰壹拾壹
    • 
+ 

+ 

+ 
trad-chinese-informal {{experimental_inline}}

+ 

+ 
    
+  
  • Formlose Nummerierung in traditionellem Chinesisch
    • 
+  
  • z. B. 一萬一千一百一十一
    • 
+ 

+ 

+ 
upper-armenian {{experimental_inline}}*

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
disclosure-open {{experimental_inline}}

+ 

+ 
    
+  
  • Zeigt an, dass der zugehörige Seitenbereich (etwa {{HTMLElement("details")}}) sichtbar ist.
    • 
+ 

+ 

+ 
disclosure-closed {{experimental_inline}}

+ 

+ 
    
+  
  • Zeigt an, dass der zugehörige Seitenbereich (etwa {{HTMLElement("details")}}) versteckt ist.
    • 
+ 

+ 

+ 

+ 
    
+ 

+ 

+

+
+
Nicht standardisierte Erweiterungen

+
+
Zusätzliche Werte, die von Gecko (Firefox), Blink (Chrome und Opera) und WebKit (Safari) unterstützt werden, um Listenarten in anderen Sprachen anzubieten. Die Kompatibilitätstabelle weiter unten gibt nähere Auskunft zu den einzelnen Browsern.

+
+

+ 
-moz-ethiopic-halehame

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
-moz-ethiopic-halehame-am

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
ethiopic-halehame-ti-er

+ 
-moz-ethiopic-halehame-ti-er

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
ethiopic-halehame-ti-et

+ 
-moz-ethiopic-halehame-ti-et

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
hangul

+ 
-moz-hangul

+ 

+ 
    
+  
  • Beispiel
    • 
+  
  • Beispiel
    • 
+  
  • Beispiel
    • 
+ 

+ 

+ 
hangul-consonant

+ 
-moz-hangul-consonant

+ 

+ 
    
+  
  • Beispiel
    • 
+  
  • Beispiel
    • 
+  
  • Beispiel
    • 
+ 

+ 

+ 
urdu

+ 
-moz-urdu

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
CSS

+
+
ol.normal {
+  list-style-type: upper-alpha;
+}
+
+/* Es kann auch die Kurzschreibweise "list-style" verwendet werden: */
+ol.shortcut {
+  list-style: upper-alpha;
+}

+
+
HTML

+
+
<ol class="normal">Liste 1
+  <li>Hallo</li>
+  <li>Welt</li>
+  <li>Was gibt's?</li>
+</ol>
+
+<ol class="shortcut">Liste 2
+  <li>Schaut</li>
+  <li>Gleich</li>
+  <li>aus</li>
+</ol>
+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Beispiele", "200", "300")}}

+
+
Hinweise

+
+
    
+ 
  • Manche Listenarten setzen für die korrekte Darstellung voraus, dass eine passende Schriftart installiert ist.
    • 
+ 
  • cjk-ideographic ist identisch zu trad-chinese-informal; es existiert lediglich aus Gründen der Rückwärtskompatibilität.
    • 
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Lists', '#list-style-type', 'list-style-type')}}{{Spec2('CSS3 Lists')}}Definiert CSS2.1-Zähler neu.

+    Erweitert die Syntax um Unterstützung für @counter-style-Regeln.

+    Definiert unter Verwendung von @counter-style die üblichen Stiltypen: hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha, japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-formal, trad-chinese-formal,korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal, ethiopic-numeric, disclosure-open und disclosure-closed.

+    Erweitert <counter-style> um die Funktion symbols().
{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browserkompatibilität

+
+
{{Compat("css.properties.list-style-type")}}

+
+
Siehe auch

+
+
    
+ 
  • {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
    • 
+

diff --git a/files/de/web/css/list-style/index.html b/files/de/web/css/list-style/index.html
new file mode 100644
index 0000000000..17e4e515f9
--- /dev/null
+++ b/files/de/web/css/list-style/index.html
@@ -0,0 +1,104 @@
+---
+title: list-style
+slug: Web/CSS/list-style
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/list-style
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die list-style Eigenschaft ist eine Kurzform für {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}}  und {{cssxref("list-style-position")}}.

+
+
{{cssinfo}}

+
+
Syntax

+
+
list-style: [ list-style-type || list-style-position || list-style-image ] | inherit
+

+
+
Werte

+
+

+ 
list-style-type

+ 
Siehe  {{cssxref("list-style-type")}}

+ 
list-style-image

+ 
Siehe  {{cssxref("list-style-image")}}

+ 
list-style-position

+ 
Siehe  {{cssxref("list-style-position")}}

+

+
+
Beispiele

+
+
HTML

+
+
List 1
+<ul class="one">
+  <li>List Item1</li>
+  <li>List Item2</li>
+  <li>List Item3</li>
+</ul>
+List 2
+<ul class="two">
+  <li>List Item A</li>
+  <li>List Item B</li>
+  <li>List Item C</li>
+</ul>
+

+
+
CSS

+
+
.one {
+  list-style: circle;
+}
+
+.two {
+  list-style: square inside;
+}

+
+
Ergebnis

+
+
{{EmbedLiveSample('Beispiele')}}

+
+
Browser Kompatibilität

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)

+
+
Spezifikation

+
+
+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}}, {{cssxref("list-style-position")}}
    • 
+

+
+
{{ languages({ "en": "en/CSS/list-style", "es": "es/CSS/list-style", "fr": "fr/CSS/list-style", "ja": "ja/CSS/list-style", "pl": "pl/CSS/list-style", "pt": "pt/CSS/list-style"}) }}

diff --git a/files/de/web/css/margin-bottom/index.html b/files/de/web/css/margin-bottom/index.html
new file mode 100644
index 0000000000..522efd3f45
--- /dev/null
+++ b/files/de/web/css/margin-bottom/index.html
@@ -0,0 +1,87 @@
+---
+title: margin-bottom
+slug: Web/CSS/margin-bottom
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin-bottom
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die margin-bottom Eigenschaft legt den unteren Außenabstand eines Elements fest. Negative Werte sind erlaubt.

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit display table, table-caption und inline-table
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich immer auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
Syntax

+
margin-bottom: <Längenangabe> | <Prozentzahl> | auto | inherit
+

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte sind erlaubt.

+ 

+  auto

+ 

+  auto wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
.content { margin-bottom: 5%; }
+.sidebox { margin-bottom: 10px; }
+.logo    { margin-bottom: -5px; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Browserab Versionauto Wert
Internet Explorer3.06.0 (strict mode)
Firefox (Gecko)1.0 (1.0)1.0 (1.0)
Opera3.53.5
Safari (WebKit)1.0 (85)1.0 (85)

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/margin-bottom", "ja": "ja/CSS/margin-bottom" } ) }}

diff --git a/files/de/web/css/margin-left/index.html b/files/de/web/css/margin-left/index.html
new file mode 100644
index 0000000000..e540e1f456
--- /dev/null
+++ b/files/de/web/css/margin-left/index.html
@@ -0,0 +1,87 @@
+---
+title: margin-left
+slug: Web/CSS/margin-left
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin-left
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die margin-left Eigenschaft legt den linken Außenabstand eines Elements fest. Negative Werte sind erlaubt.

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit display table, table-caption und inline-table
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich immer auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
Syntax

+
margin-left: <Längenangabe> | <Prozentzahl> | auto | inherit
+

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte sind erlaubt.

+ 

+  auto

+ 

+  auto wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
.content { margin-left: 5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Browserab Versionauto Wert
Internet Explorer3.06.0 (strict mode)
Firefox (Gecko)1.0 (1.0)1.0 (1.0)
Opera3.53.5
Safari (WebKit)1.0 (85)1.0 (85)

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/margin-left", "ja": "ja/CSS/margin-left" } ) }}

diff --git a/files/de/web/css/margin-right/index.html b/files/de/web/css/margin-right/index.html
new file mode 100644
index 0000000000..e651d4a53d
--- /dev/null
+++ b/files/de/web/css/margin-right/index.html
@@ -0,0 +1,87 @@
+---
+title: margin-right
+slug: Web/CSS/margin-right
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin-right
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die margin-right Eigenschaft legt den rechten Außenabstand eines Elements fest. Negative Werte sind erlaubt.

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit display table, table-caption und inline-table
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich immer auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
Syntax

+
margin-right: <Längenangabe> | <Prozentzahl> | auto | inherit
+

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte sind erlaubt.

+ 

+  auto

+ 

+  auto wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
.content { margin-right: 5%; }
+.sidebox { margin-right: 10px; }
+.logo    { margin-right: -5px; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Browserab Versionauto Wert
Internet Explorer3.06.0 (strict mode)
Firefox (Gecko)1.0 (1.0)1.0 (1.0)
Opera3.53.5
Safari (WebKit)1.0 (85)1.0 (85)

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/margin-right", "ja": "ja/CSS/margin-right" } ) }}

diff --git a/files/de/web/css/margin-top/index.html b/files/de/web/css/margin-top/index.html
new file mode 100644
index 0000000000..daa9b03ad8
--- /dev/null
+++ b/files/de/web/css/margin-top/index.html
@@ -0,0 +1,87 @@
+---
+title: margin-top
+slug: Web/CSS/margin-top
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin-top
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die margin-top Eigenschaft legt den oberen Außenabstand eines Elements fest. Negative Werte sind erlaubt.

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit display table, table-caption und inline-table
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich immer auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
Syntax

+
margin-top: <Längenangabe> | <Prozentzahl> | auto | inherit
+

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte sind erlaubt.

+ 

+  auto

+ 

+  auto wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
.content { margin-top: 5%; }
+.sidebox { margin-top: 10px; }
+.logo    { margin-top: -5px; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Browserab Versionauto Wert
Internet Explorer3.06.0 (strict mode)
Firefox (Gecko)1.0 (1.0)1.0 (1.0)
Opera3.53.5
Safari (WebKit)1.0 (85)1.0 (85)

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/margin-top", "ja": "ja/CSS/margin-top" } ) }}

diff --git a/files/de/web/css/margin/index.html b/files/de/web/css/margin/index.html
new file mode 100644
index 0000000000..dac915749a
--- /dev/null
+++ b/files/de/web/css/margin/index.html
@@ -0,0 +1,121 @@
+---
+title: margin
+slug: Web/CSS/margin
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die margin Eigenschaft ist eine Kurzform für die Außenabstände aller vier Seiten eines Elements.

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit display table, table-caption und inline-table
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich immer auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: siehe einzelne Eigenschaften
    • 
+

+
Syntax

+
margin: <Längenwert>{1,4} | <Prozentzahl>{1,4} | inherit | auto
+

+
Werte

+
Es werden bis zu vier der folgenden Werte akzeptiert:

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte sind erlaubt.

+ 

+  auto

+ 

+  auto wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.

+  Bei div { width:50%; margin:0 auto; } wird das div Element horizontal zentriert.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+ 

+  Ein Wert

+ 

+  Gilt für alle vier Seiten.

+ 

+  Zwei Werte

+ 

+  Der erste Wert bestimmt die oberen und unteren Abstände, der zweite Wert legt die Abstände rechts und links fest.

+ 

+  Drei Werte

+ 

+  Der erste Wert bestimmt den oberen Abstand, der zweite Wert legt die Abstände für rechts und links zusammen fest und der dritte Wert bestimmt den unteren Abstand.

+ 

+  Vier Werte

+ 

+  Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben, rechts, unten, links.

+

+
Beispiele

+
margin: 5%;                /* 5% Abstand auf allen Seiten */
+
+margin: 10px;              /* 10px Abstand auf allen Seiten */
+
+margin: 1.6em 20px;        /* 1.6em Abstand für oben und unten, 20px Abstand für rechts und links */
+
+margin: 10px 3% 1em;       /* oben 10px, links und rechts 3%, unten 1em */
+
+margin: 10px 3px 30px 5px; /* oben 10px, rechts 3px, unten 30px, links 5px */
+
+margin: 1em auto;          /* 1em Abstand oben und unten; die Box wird horizontal zentriert */
+
+margin: auto;              /* Die Box wird horizontal zentriert, kein Abstand (0) oben und unten */
+

+
margin:     auto;
+background: gold;
+width:      66%;

+
margin:     -1em 0 100px -40px;
+background: plum;
+width:      20em

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Browserab Versionauto Wert
Internet Explorer3.06.0 (strict mode)
Firefox (Gecko)1.0 (1.0)1.0 (1.0)
Opera3.53.5
Safari (WebKit)1.0 (85)1.0 (85)

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/margin", "ja": "ja/CSS/margin" } ) }}

diff --git a/files/de/web/css/mask/index.html b/files/de/web/css/mask/index.html
new file mode 100644
index 0000000000..900127ae1b
--- /dev/null
+++ b/files/de/web/css/mask/index.html
@@ -0,0 +1,96 @@
+---
+title: mask
+slug: Web/CSS/mask
+tags:
+  - CSS
+  - Layout
+  - NeedsBrowserCompatibility
+  - Referenz
+  - SVG
+  - Web
+translation_of: Web/CSS/mask
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
The mask property in CSS allows users to alter the visibility of an item by either partially or fully hiding the item. This is accomplished by either masking or clipping the image at specific points.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+mask: none;
+
+/* Bildwerte */
+mask: url(mask.png);                       /* Pixelbild, das als Maske verwendet wird */
+mask: url(masks.svg#star);                 /* Element mit SVG-Grafik, die als Maske verwendet wird */
+
+/* Kombinierte Werte */
+mask: url(masks.svg#star) luminance;       /* Element mit SVG-Grafik, die als Helligkeitsmaske verwendet wird */
+mask: url(masks.svg#star) 40px 20px;       /* Element mit SVG-Grafik, die als Maske verwendet wird, die 40px vom oberen Rand und 20px vom linken Rand positioniert ist */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* Element mit SVG-Grafik, die als Maske mit einer Breite und Höhe von 50px verwendet wird */
+mask: url(masks.svg#star) repeat-x;        /* Element mit SVG-Grafik, die als horizontal wiederholte Maske verwendet wird */
+mask: url(masks.svg#star) stroke-box;      /* Element mit SVG-Grafik, die als Maske verwendet wird, die sich bis zur Box erstreckt, die von der Kontur eingeschlossen wird */
+mask: url(masks.svg#star) exclude;         /* Element mit SVG-Grafik, die als Maske verwendet wird und deren nicht überlappende Teile mit dem Hintergrund kombiniert werden */
+
+/* Globale Werte */
+mask: inherit;
+mask: initial;
+mask: unset;
+

+
+
Werte

+
+
Falls der Wert ein URL Wert ist, wird das Element als SVG-Maske verwendet, dass durch die URI referenziert wird.

+
+
{{csssyntax}}

+
+
Beispiele

+
+
.target {
+  mask: url(#c1);
+}
+
+.anothertarget {
+  mask: url(resources.svg#c1);
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS Masks", "#the-mask", 'mask')}}{{Spec2("CSS Masks")}}Erweitert die Benutzung auf HTML Elemente.

+    Erweitert die Syntax, indem sie als eine Kurzschreibweise für die neuen mask-* Eigenschaften in dieser Spezifikation definiert wird.
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.mask")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/max-height/index.html b/files/de/web/css/max-height/index.html
new file mode 100644
index 0000000000..51205487ba
--- /dev/null
+++ b/files/de/web/css/max-height/index.html
@@ -0,0 +1,111 @@
+---
+title: max-height
+slug: Web/CSS/max-height
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/max-height
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die max-height Eigenschaft wird verwendet, um die maximale Höhe eines Elements festzulegen. Das verhindert, dass der benutzte Wert der {{ Cssxref("height") }} Eigenschaft größer wird als der festgelegte Wert von max-height.

+
+
{{ Cssxref("max-height") }} überschreibt {{cssxref("height")}}, aber {{ Cssxref("min-height") }} überschreibt {{ Cssxref("max-height") }}.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* <length> Wert */
+max-height: 3.5em;
+
+/* <percentage> Wert */
+max-height: 75%;
+
+/* Schlüsselwortwerte */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content;
+max-height: fill-available;
+
+/* Globale Werte */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+

+
+
Werte

+
+

+ 
<length>

+ 
Eine feste Maximalhöhe. Siehe {{cssxref("<length>")}} für mögliche Einheiten.

+ 
<percentage>

+ 
Der {{cssxref("<percentage>")}} Wert wird unter Berücksichtigung der Höhe des beinhaltenden Blocks berechnet. Falls die Höhe des beinhaltenden Blocks nicht explizit angegeben wurde, wird der prozentuale Wert als none behandelt.

+ 
none

+ 
Das Element verfügt über keine maximale Höhe.

+ 
max-content {{experimental_inline()}}

+ 
Die innere bevorzugte Höhe.

+ 
min-content {{experimental_inline()}}

+ 
Die innere Minimalhöhe.

+ 
fill-available {{experimental_inline()}}

+ 
Die Höhe des beinhaltenden Blocks minus dem horizontalen Außenabstand, Rand und Innenabstand. Einige Browser implementieren hierfür das veraltete Schlüsselwort available.

+ 
fit-content {{experimental_inline()}}

+ 
Hat die gleiche Bedeutung wie max-content.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
table { max-height: 75%; }
+
+form { max-height: none; }
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height')}}{{Spec2('CSS3 Sizing')}}Fügt die Schlüsselwörter max-content, min-content, fit-content und fill-available hinzu.

+    Die Entwürfe zu CSS3 Box und CSS3 Writing Modes definierten zuvor beide diese Schlüsselwörter. Diese Entwürfe werden durch diese Spezifikation ersetzt.
{{SpecName('CSS3 Transitions', '#animatable-css', 'max-height')}}{{Spec2('CSS3 Transitions')}}Definiert max-height als animierbar.
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.max-height")}}
+
+
Siehe auch

+
+
    
+ 
  • Das Boxmodell
    • 
+ 
  • {{cssxref("max-width")}}, {{cssxref("box-sizing")}}, {{cssxref("height")}}, {{cssxref("min-height")}}
    • 
+

diff --git a/files/de/web/css/max-width/index.html b/files/de/web/css/max-width/index.html
new file mode 100644
index 0000000000..e8c6d3c08d
--- /dev/null
+++ b/files/de/web/css/max-width/index.html
@@ -0,0 +1,139 @@
+---
+title: max-width
+slug: Web/CSS/max-width
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/max-width
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die max-width Eigenschaft wird verwendet, um die maximale Breite eines Elements festzulegen. Das verhindert, dass der benutzte Wert der width Eigenschaft nicht größer wird als der festgelegte Wert von max-width.

+
Hinweis: max-width überschreibt width, allerdings überschreibt min-width auch max-width.

+
    
+ 
  • Standardwert: none
    • 
+ 
  • Anwendbar auf: Blockelemente und ersetzte Elemente, für <table> siehe Browser Kompatibilität
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: die Prozentzahl wie festgelegt, die absolute Länge oder none
    • 
+

+
Syntax

+
max-width:  <Längenangabe> | <Prozentzahl> | none | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available | inherit
+

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Siehe Länge für mögliche Einheiten.

+ 

+  Prozentzahl

+ 

+  Eine prozentuale Angabe, die sich auf die Breite des umschließenden Blocks bezieht.

+ 

+  none

+ 

+  Das Element verfügt über keine maximale Breite.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Mozilla Erweiterungen

+

+ 

+  -moz-max-content

+ 

+  {{ gecko_minversion_inline("1.9") }} Bevorzugte intrinsische Breite.

+ 

+  -moz-min-content

+ 

+  {{ gecko_minversion_inline("1.9") }} Minimale intrinsische Breite.

+ 

+  -moz-available

+ 

+  {{ gecko_minversion_inline("1.9") }} Die Breite des umschließenden Blocks minus horizontalen margin, padding und border Werten.

+ 

+  -moz-fit-content

+ 

+  {{ gecko_minversion_inline("1.9") }} Gleichbedeutend zu -moz-max-content.

+

+
Beispiele

+
body  { max-width: 40em; }
+table { max-width: 75%; }
+form  { max-width: none; }
+

+
Beispiel 1 {{ gecko_minversion_inline("1.9") }}

+
p { background: gold }
+

+
The Mozilla community produces a lot of great software.

+
Beispiel 2 {{ gecko_minversion_inline("1.9") }}

+
p { background: lightgreen;
+    max-width:  intrinsic;         /* Safari/WebKit */
+    max-width:  -moz-max-content;  /* Firefox/Gecko */
+  }
+

+
The Mozilla community produces a lot of great software.

+
Beispiel 3 {{ gecko_minversion_inline("1.9") }}

+
p { background: lightblue;  max-width: -moz-min-content; }
+

+
The Mozilla community produces a lot of great software.

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
Browserab Versionauf <table> anwendbarintrinsische Breiteminimale intrinsische Breite
Internet Explorer7.0nein------------
Firefox (Gecko)1.0 (1.0)ja3.0 (1.9)-moz-max-content3.0 (1.9)-moz-min-content
Opera4.0ja------------
Safari (WebKit)2.0.2 (416), vorher fehlerhaftnein2.0 (412) ?intrinsic------

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/max-width", "es": "es/CSS/max-width", "fr": "fr/CSS/max-width" } ) }}

diff --git a/files/de/web/css/media_queries/index.html b/files/de/web/css/media_queries/index.html
new file mode 100644
index 0000000000..c6da1617ab
--- /dev/null
+++ b/files/de/web/css/media_queries/index.html
@@ -0,0 +1,76 @@
+---
+title: Media queries
+slug: Web/CSS/Media_Queries
+tags:
+  - CSS
+  - Media Queries
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/Media_Queries
+---
+
{{CSSRef}}

+
+
Media Queries is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.

+
+
Reference

+
+
At-rules

+
+

+
    
+ 
  • {{cssxref("@import")}}
    • 
+ 
  • {{cssxref("@media")}}
    • 
+

+

+
+
Guides

+
+

+ 
Using media queries

+ 
Presents what media queries are doing and explains the possible expressions.

+ 
Testing media queries

+ 
Explains how to test a media query programmatically, from JavaScript.

+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}}
+    


+      

+   
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}} 

+
+
Browser compatibility

+
+{{Compat("css.at-rules.media")}}
diff --git a/files/de/web/css/media_queries/using_media_queries/index.html b/files/de/web/css/media_queries/using_media_queries/index.html
new file mode 100644
index 0000000000..f4d15a6c53
--- /dev/null
+++ b/files/de/web/css/media_queries/using_media_queries/index.html
@@ -0,0 +1,644 @@
+---
+title: Using media queries
+slug: Web/CSS/Media_Queries/Using_media_queries
+tags:
+  - NeedsTranslation
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

+
+
Syntax

+
+
Media queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false.  The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.

+
+
<!-- CSS media query on a link element -->
+<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
+
+<!-- CSS media query within a stylesheet -->
+<style>
+@media (max-width: 600px) {
+  .facet_sidebar {
+    display: none;
+  }
+}
+</style>

+
+
When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Style sheets with media queries attached to their <link> tags will still download even if their media queries would return false (they will not apply, however).

+
+
Unless you use the not or only operators, the media type is optional and the all type will be implied.

+
+
Logical operators

+
+
You can compose complex media queries using logical operators, including not, and, and only. The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. The not operator is used to negate an entire media query. The only operator is used to apply a style only if the entire query matches, useful for preventing older browsers from applying selected styles. If you use the not or only operators, you must specify an explicit media type.

+
+
You can also combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the entire media statement returns true. This is equivalent to an or operator.

+
+
and

+
+
The and keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied all media type, could look like this:

+
+
@media (min-width: 700px) { ... }

+
+
If, however, you wanted this to apply only if the display is in landscape, you could use an and operator to chain the media features together.

+
+
@media (min-width: 700px) and (orientation: landscape) { ... }

+
+
Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an and operator.

+
+
@media tv and (min-width: 700px) and (orientation: landscape) { ...  }

+
+
Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.

+
+
comma-separated lists

+
+
Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.

+
+
For instance, if you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:

+
+
@media (min-width: 700px), handheld and (orientation: landscape) { ... }

+
+
Above, if I were on a screen device with a viewport width of 800px, the media statement would return true because the first part, interpreted as @media all and (min-width: 700px) would apply to my device and therefore return true, despite the fact that my screen device would fail the handheld media type check in the second media query. Likewise, if I were on a handheld device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.

+
+
not

+
+
The not keyword applies to the whole media query and returns true if the media query would otherwise return false (such as monochrome on a color display or a screen width of 600px with a min-width: 700px feature query). A not will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The not keyword cannot be used to negate an individual feature query, only an entire media query. For example, the not is evaluated last in the following query:

+
+
@media not all and (monochrome) { ... }
+

+
+
This means that the query is evaluated like this:

+
+
@media not (all and (monochrome)) { ... }
+

+
+
... rather than like this:

+
+
@media (not all) and (monochrome) { ... }

+
+
As another example, look at the following media query:

+
+
@media not screen and (color), print and (color)
+

+
+
It is evaluated like this:

+
+
@media (not (screen and (color))), print and (color)

+
+
only

+
+
The only keyword prevents older browsers that do not support media queries with media features from applying the given styles:

+
+
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
+

+
+
Pseudo-BNF (for those of you that like that kind of thing)

+
+
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid

+
+
Media queries are case insensitive.  Media queries involving unknown media types are always false.

+
+
Note: Parentheses are required around expressions; failing to use them is an error.

+
+
Media features

+
+
Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints.  This avoids using the "<" and ">" symbols, which would conflict with HTML and XML.  If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.

+
+
Note: If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false.  For example, querying the aspect ratio of an aural device always results in false.

+
+
color

+
+
Value: {{cssxref("<color>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: yes

+
+
Indicates the number of bits per color component of the output device.  If the device is not a color device, this value is zero.

+
+
Note: If the color components have different numbers of bits per color component, the smallest number is used.  For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component.  If the device uses indexed colors, the minimum number of bits per color component in the color table is used.

+
+
Examples

+
+
To apply a style sheet to all color devices:

+
+
@media all and (color) { ... }
+

+
+
To apply a style sheet to devices with at least 4 bits per color component:

+
+
@media all and (min-color: 4) { ... }
+

+
+
color-index

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: yes

+
+
Indicates the number of entries in the color look-up table for the output device.

+
+
Examples

+
+
To indicate that a style sheet should apply to all devices using indexed color, you can do:

+
+
@media all and (color-index) { ... }
+

+
+
To apply a style sheet to indexed color devices with at least 256 colors:

+
+
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+

+
+
aspect-ratio

+
+
Value: {{cssxref("<ratio>")}}

+ Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}

+ Accepts min/max prefixes: yes

+
+
Describes the aspect ratio of the targeted display area of the output device.  This value consists of two positive integers separated by a slash ("/") character.  This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).

+
+
Example

+
+
The following selects a special style sheet to use for when the display area is at least as wide as it is high.

+
+
@media screen and (min-aspect-ratio: 1/1) { ... }

+
+
This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.

+
+
device-aspect-ratio

+
+
Value: {{cssxref("<ratio>")}}

+ Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}

+ Accepts min/max prefixes: yes

+
+
Describes the aspect ratio of the output device.  This value consists of two positive integers separated by a slash ("/") character.  This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).

+
+
Example

+
+
The following selects a special style sheet to use for widescreen displays.

+
+
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

+
+
This selects the style when the aspect ratio is either 16:9 or 16:10.

+
+
device-height

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

+ Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}

+ Accepts min/max prefixes: yes

+
+
Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

+
+
Example

+
+
To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:

+
+
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
+

+
+
device-width

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

+ Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}

+ Accepts min/max prefixes: yes

+
+
Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

+
+
Example

+
+
To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:

+
+
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

+
+
grid

+
+
Value: <mq-boolean> which is an {{cssxref("<integer>")}} that can only have the 0 and 1 value.

+ Media: all

+ Accepts min/max prefixes: no

+
+
Determines whether the output device is a grid device or a bitmap device.  If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1.  Otherwise it is zero.

+
+
Example

+
+
To apply a style to handheld devices with a 15-character or narrower display:

+
+
@media handheld and (grid) and (max-width: 15em) { ... }
+

+
+
Note: The "em" unit has a special meaning for grid devices; since the exact width of an "em" can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.

+
+
height

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

+ Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}

+ Accepts min/max prefixes: yes

+
+
The height media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).

+
+
Note: As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the width and height media features.

+
+
monochrome

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: yes

+
+
Indicates the number of bits per pixel on a monochrome (greyscale) device.  If the device isn't monochrome, the device's value is 0.

+
+
Examples

+
+
To apply a style sheet to all monochrome devices:

+
+
@media all and (monochrome) { ... }
+

+
+
To apply a style sheet to monochrome devices with at least 8 bits per pixel:

+
+
@media all and (min-monochrome: 8) { ... }
+

+
+
orientation

+
+
Value: landscape | portrait

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.

+
+
Example

+
+
To apply a style sheet only in portrait orientation:

+
+
@media all and (orientation: portrait) { ... }

+
+
Note: This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

+
+
resolution

+
+
Value: {{cssxref("<resolution>")}}

+ Media: {{cssxref("Media/Bitmap", "bitmap")}}

+ Accepts min/max prefixes: yes

+
+
Indicates the resolution (pixel density) of the output device.  The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).

+
+
Example

+
+
To apply a style sheet to devices with at least 300 dots per inch of resolution:

+
+
@media print and (min-resolution: 300dpi) { ... }
+

+
+
To replace the old (min-device-pixel-ratio: 2) syntax:

+
+
@media screen and (min-resolution: 2dppx) { ... }

+
+
scan

+
+
Value: progressive | interlace

+ Media: {{cssxref("Medien/TV")}}

+ Accepts min/max prefixes: no

+
+
Describes the scanning process of television output devices.

+
+
Example

+
+
To apply a style sheet only to progressive scanning televisions:

+
+
@media tv and (scan: progressive) { ... }
+

+
+
width

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

+ Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}

+ Accepts min/max prefixes: yes

+
+
The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

+
+
Note: As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the width and height media features.

+
+
Examples

+
+
If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:

+
+
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+

+
+
This media query specifies a style sheet that applies to printed media wider than 8.5 inches:

+
+
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+

+
+
This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:

+
+
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+

+
+
Mozilla-specific media features

+
+
Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.

+
+
{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

+
+
Value: {{cssxref("<number>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: yes

+
+
Gives the number of device pixels per CSS pixel.

+
+

+
Do not use this feature. 

+
+
Use the resolution feature with the dppx unit instead.

+ 

+ -moz-device-pixel-ratio may be used for compatibility with Firefox older than 16 and -webkit-device-pixel-ratio with WebKit-based browsers that do not support dppx.

+
+
Example:

+
+
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
+       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
+       (min-resolution: 2dppx),             /* The standard way */
+       (min-resolution: 192dpi)             /* dppx fallback */ 

+
+
See this CSSWG article for compatibility good practices regarding resolution and dppx.

+

+
+
Note: This media feature is also implemented by Webkit and by IE 11 for Windows Phone 8.1 as -webkit-device-pixel-ratio. The min and max prefixes as implemented by Gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by Webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio.

+
+
{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

+
+
Value: windows-xp | windows-vista | windows-win7 | windows-win8 | windows-win10

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:

+
+
    
+ 
  • windows-xp
    • 
+ 
  • windows-vista
    • 
+ 
  • windows-win7
    • 
+ 
  • windows-win8
    • 
+ 
  • windows-win10
    • 
+

+
+
This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.

+
+
{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

+
+
Example

+
+
You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

+
+
{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

+
+
{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

+
+
Value: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

+
+
    
+ 
  • aero
    • 
+ 
  • luna-blue
    • 
+ 
  • luna-olive
    • 
+ 
  • luna-silver
    • 
+ 
  • royale
    • 
+ 
  • generic
    • 
+ 
  • zune
    • 
+

+
+
This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.

+
+
Browser compatibility

+
+
{{ CompatibilityTable() }}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
grid{{ CompatUnknown() }}{{ CompatNo() }} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
resolution{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} [2]

+    {{ CompatGeckoDesktop("8.0") }} [3]		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
scan{{ CompatUnknown() }}{{ CompatNo() }} [4]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}

+

+
+
[1] grid media type is not supported

+
+
[2] Supports {{cssxref("<integer>")}} values;

+
+
[3] Supports {{cssxref("<number>")}} values, as per the spec.

+
+
[4] tv media type is not supported

+
+
 

+
+
See also

+
+
diff --git a/files/de/web/css/min-height/index.html b/files/de/web/css/min-height/index.html
new file mode 100644
index 0000000000..2214fc01a9
--- /dev/null
+++ b/files/de/web/css/min-height/index.html
@@ -0,0 +1,77 @@
+---
+title: min-height
+slug: Web/CSS/min-height
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/min-height
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die min-height Eigenschaft wird verwendet, um die minimale Höhe eines Elements festzulegen. Das verhindert, dass der benutzte Wert der height Eigenschaft nicht kleiner wird als der festgelegte Wert von min-height.

+
Hinweis: min-height überschreibt sowohl height, als auch max-height.

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: Blockelemente und ersetzte Elemente
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich auf die Höhe des umschließenden Blocks
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: die Prozentzahl wie festgelegt oder die absolute Länge
    • 
+

+
Syntax

+
min-height:  <Längenangabe> | <Prozentzahl> | inherit
+

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Siehe Länge für mögliche Einheiten.

+ 

+  Prozentzahl

+ 

+  Eine prozentuale Angabe, die sich auf die Höhe des umschließenden Blocks bezieht.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
table { min-height: 75%; }
+form  { min-height: 0; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer7.0
Firefox (Gecko)1.0 (1.0)
Opera4.0
Safari (WebKit)2.0.2 (416), vorher fehlerhaft

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/min-height", "es": "es/CSS/min-height", "fr": "fr/CSS/min-height" } ) }}

diff --git a/files/de/web/css/min-width/index.html b/files/de/web/css/min-width/index.html
new file mode 100644
index 0000000000..085949c9d6
--- /dev/null
+++ b/files/de/web/css/min-width/index.html
@@ -0,0 +1,101 @@
+---
+title: min-width
+slug: Web/CSS/min-width
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/min-width
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die min-width Eigenschaft wird verwendet, um die minimale Breite eines Elements festzulegen. Das verhindert, dass der benutzte Wert der width Eigenschaft nicht kleiner wird als der festgelegte Wert von min-width.

+
Hinweis: min-width überschreibt sowohl width, als auch max-width.

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: Blockelemente und ersetzte Elemente, für <table> siehe Browser Kompatibilität
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: die Prozentzahl wie festgelegt oder die absolute Länge
    • 
+

+
Syntax

+
min-width:  <Längenangabe> | <Prozentzahl> | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available | inherit
+

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Siehe Länge für mögliche Einheiten.

+ 

+  Prozentzahl

+ 

+  Eine prozentuale Angabe, die sich auf die Breite des umschließenden Blocks bezieht.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Mozilla Erweiterungen

+

+ 

+  -moz-max-content

+ 

+  {{ gecko_minversion_inline("1.9") }} Bevorzugte intrinsische Breite.

+ 

+  -moz-min-content

+ 

+  {{ gecko_minversion_inline("1.9") }} Minimale intrinsische Breite.

+ 

+  -moz-available

+ 

+  {{ gecko_minversion_inline("1.9") }} Die Breite des umschließenden Blocks minus horizontalen margin, padding und border Werten.

+ 

+  -moz-fit-content

+ 

+  {{ gecko_minversion_inline("1.9") }} Gleichbedeutend zu -moz-max-content.

+

+
Beispiele

+
table { min-width: 75%; }
+form  { min-width: 0; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Browserab Versionauf <table> anwendbar
Internet Explorer7.0nein
Firefox (Gecko)1.0 (1.0)ja
Opera4.0ja
Safari (WebKit)2.0.2 (416), vorher fehlerhaftnein

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/min-width", "es": "es/CSS/min-width", "fr": "fr/CSS/min-width", "ja": "ja/CSS/min-width" } ) }}

diff --git a/files/de/web/css/mix-blend-mode/index.html b/files/de/web/css/mix-blend-mode/index.html
new file mode 100644
index 0000000000..59efbddadd
--- /dev/null
+++ b/files/de/web/css/mix-blend-mode/index.html
@@ -0,0 +1,97 @@
+---
+title: mix-blend-mode
+slug: Web/CSS/mix-blend-mode
+tags:
+  - CSS
+  - CSS Compositing
+  - CSS Eigenschaft
+translation_of: Web/CSS/mix-blend-mode
+---
+
{{CSSRef()}}

+
+
Übersicht

+
+
Die mix-blend-mode CSS Eigenschaft beschreibt, wie sich der Inhalt des Elements mit dem Inhalt des Elements unter ihm und dem Element-Hintergrund vermischen soll.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Keyword values */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Global values */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+

+
+
Werte

+
+

+ 
<blend-mode>

+ 
Ein {{cssxref("<blend-mode>")}} der den zu verwendenden Mischmodus festlegt. Mehrere Werte können per Komma getrennt angegeben werden.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
<svg>
+  <circle cx="40" cy="40" r="40" fill="red"/>
+  <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+  <circle cx="60" cy="80" r="40" fill="blue"/>
+</svg>

+
+
circle { mix-blend-mode: screen; }

+
+
Result

+
+
{{EmbedLiveSample("Examples", "100%", "180")}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Initial specification.

+
+
Browser Unterstützung

+
+{{Compat("css.properties.mix-blend-mode")}}
+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("<blend-mode>")}}
    • 
+ 
  • {{cssxref("background-blend-mode")}}
    • 
+

diff --git a/files/de/web/css/motion_path/index.html b/files/de/web/css/motion_path/index.html
new file mode 100644
index 0000000000..5c09de0a90
--- /dev/null
+++ b/files/de/web/css/motion_path/index.html
@@ -0,0 +1,104 @@
+---
+title: Bewegungspfad
+slug: Web/CSS/Motion_Path
+tags:
+  - Bewegungspfad
+  - CSS
+  - Experimentell
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Motion_Path
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
Motion Path ist ein CSS Modul, das es Autoren erlaubt, beliebige grafische Objekte entlang eines benutzerdefinierten Pfads zu animieren.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("motion")}}
    • 
+ 
  • {{cssxref("motion-path")}}
    • 
+ 
  • {{cssxref("motion-offset")}}
    • 
+ 
  • {{cssxref("motion-rotation")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('Motion Path Level 1')}}{{Spec2('Motion Path Level 1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome für Android
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

diff --git a/files/de/web/css/mozilla_extensions/index.html b/files/de/web/css/mozilla_extensions/index.html
new file mode 100644
index 0000000000..d91ad7bb00
--- /dev/null
+++ b/files/de/web/css/mozilla_extensions/index.html
@@ -0,0 +1,661 @@
+---
+title: Mozilla CSS Erweiterungen
+slug: Web/CSS/Mozilla_Extensions
+tags:
+  - CSS
+  - CSS Referenz
+  - 'CSS:Mozilla Erweiterungen'
+translation_of: Web/CSS/Mozilla_Extensions
+---
+
{{CSSRef}}

+
+
Mozilla unterstützt eine Reihe von Erweiterungen zu CSS, die durch das Präfix -moz- gekennzeichnet sind.

+
+
Manche dieser Eigenschaften wurden zu Entwürfen zu CSS Spezifikationen für die Aufnahme in der finalen Empfehlung hinzugefügt, sind jedoch immer noch experimentell. Die entgültige Standardeigenschaft kann sich von der Implementierung mit Präfix unterscheiden. Einige dieser nicht standardisierten Eigenschaften beziehen sich nur auf XUL Elemente.

+
+
Wenn sie standardisiert und die Unterstützung für die Variante ohne Präfix hinzugefügt wurde, werden die Eigenschaften mit Präfix entfernt.

+
+
Eigenschaften mit Mozilla-Präfix, die standardisiert werden

+
+

+
A – C

+
+
    
+ 
  • {{Cssxref("clip-path")}} (bezieht sich auf mehr als SVG)
    • 
+ 
  • {{Cssxref("-moz-column-count")}}
    • 
+ 
  • {{Cssxref("-moz-column-fill")}}
    • 
+ 
  • {{Cssxref("-moz-column-gap")}}
    • 
+ 
  • {{Cssxref("-moz-column-width")}}
    • 
+ 
  • {{Cssxref("-moz-column-rule")}}
    • 
+ 
  • {{Cssxref("-moz-column-rule-width")}}
    • 
+ 
  • {{Cssxref("-moz-column-rule-style")}}
    • 
+ 
  • {{Cssxref("-moz-column-rule-color")}}
    • 
+

+
+
F

+
+
    
+ 
  • {{Cssxref("filter")}} (bezieht sich auf mehr als SVG)
    • 
+

+
+
G – H

+
+
    
+ 
  • {{Cssxref("-moz-hyphens")}}
    • 
+

+
+
I – M

+
+
    
+ 
  • {{Cssxref("mask")}} (bezieht sich auf mehr als SVG)
    • 
+

+
+
N – P

+
+
    
+ 
  • {{Cssxref("pointer-events")}} (bezieht sich auf mehr als SVG)
    • 
+

+
+
Q – Z

+
+
    
+ 
  • {{cssxref("-moz-tab-size")}}
    • 
+ 
  • {{cssxref("-moz-text-align-last")}}
    • 
+ 
  • {{cssxref("-moz-text-size-adjust")}}
    • 
+

+

+
+
Proprietäre Eigenschaften mit Mozilla-Präfix (nicht auf Webseiten verwenden)

+
+

+
A

+
+
    
+ 
  • {{Cssxref("-moz-appearance")}}
    • 
+

+
+
B

+
+
    
+ 
  • {{Cssxref("-moz-binding")}}
    • 
+ 
  • {{Cssxref("-moz-border-bottom-colors")}}
    • 
+ 
  • {{Cssxref("-moz-border-left-colors")}}
    • 
+ 
  • {{Cssxref("-moz-border-right-colors")}}
    • 
+ 
  • {{Cssxref("-moz-border-top-colors")}}
    • 
+ 
  • {{Cssxref("-moz-box-align")}}
    • 
+ 
  • {{Cssxref("-moz-box-direction")}}
    • 
+ 
  • {{Cssxref("-moz-box-flex")}}
    • 
+ 
  • {{Cssxref("-moz-box-ordinal-group")}}
    • 
+ 
  • {{Cssxref("-moz-box-orient")}}
    • 
+ 
  • {{Cssxref("-moz-box-pack")}}
    • 
+

+
+
C – F

+
+
    
+ 
  • {{Cssxref("-moz-float-edge")}}
    • 
+ 
  • {{Cssxref("-moz-force-broken-image-icon")}}
    • 
+

+
+
G H I

+
+
    
+ 
  • {{Cssxref("-moz-image-region")}}
    • 
+

+
+
J – O

+
+
    
+ 
  • {{cssxref("-moz-orient")}}
    • 
+ 
  • {{cssxref("-moz-osx-font-smoothing")}}
    • 
+ 
  • {{Cssxref("-moz-outline-radius")}}
    • 
+ 
  • {{Cssxref("-moz-outline-radius-bottomleft")}}
    • 
+ 
  • {{Cssxref("-moz-outline-radius-bottomright")}}
    • 
+ 
  • {{Cssxref("-moz-outline-radius-topleft")}}
    • 
+ 
  • {{Cssxref("-moz-outline-radius-topright")}}
    • 
+

+
+
P – S

+
+
    
+ 
  • {{Cssxref("-moz-stack-sizing")}}
    • 
+

+
+
T U

+
+
    
+ 
  • {{Cssxref("-moz-user-focus")}}
    • 
+ 
  • {{Cssxref("-moz-user-input")}}
    • 
+ 
  • {{Cssxref("-moz-user-modify")}}
    • 
+ 
  • {{Cssxref("-moz-user-select")}}
    • 
+

+
+
V – Z

+
+
    
+ 
  • {{cssxref("-moz-window-dragging")}}
    • 
+ 
  • {{Cssxref("-moz-window-shadow")}}
    • 
+

+

+
+
Zuvor mit Präfix versehene Eigenschaften, jetzt standardisiert

+
+

+
    
+ 
  • {{Cssxref("animation", "-moz-animation")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-delay", "-moz-animation-delay")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-direction", "-moz-animation-direction")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-duration", "-moz-animation-duration")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-fill-mode", "-moz-animation-fill-mode")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-iteration-count", "-moz-animation-iteration-count")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-name", "-moz-animation-name")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-play-state", "-moz-animation-play-state")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-timing-function","-moz-animation-timing-function")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("backface-visibility", "-moz-backface-visibility")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("background-clip", "-moz-background-clip")}}
    • 
+ 
  • {{Cssxref("background-origin", "-moz-background-origin")}}
    • 
+ 
  • {{Cssxref("-moz-background-inline-policy")}} [Überholt durch die Standardversion {{cssxref("box-decoration-break")}}]
    • 
+ 
  • {{Cssxref("background-size", "-moz-background-size")}}
    • 
+ 
  • {{Cssxref("-moz-border-end")}} [Überholt durch die Standardversion {{cssxref("border-inline-end")}}]
    • 
+ 
  • {{Cssxref("-moz-border-end-color")}} [Überholt durch die Standardversion {{cssxref("border-inline-end-color")}}]
    • 
+ 
  • {{Cssxref("-moz-border-end-style")}} [Überholt durch die Standardversion {{cssxref("border-inline-end-style")}}]
    • 
+ 
  • {{Cssxref("-moz-border-end-width")}} [Überholt durch die Standardversion {{cssxref("border-inline-end-width")}}]
    • 
+ 
  • {{Cssxref("border-image","-moz-border-image")}}
    • 
+ 
  • {{Cssxref("-moz-border-start")}} [Überholt durch die Standardversion {{cssxref("border-inline-start")}}]
    • 
+ 
  • {{Cssxref("-moz-border-start-color")}} [Überholt durch die Standardversion {{cssxref("border-inline-start-color")}}]
    • 
+ 
  • {{Cssxref("-moz-border-start-style")}} [Überholt durch die Standardversion {{cssxref("border-inline-start-style")}}]
    • 
+ 
  • {{Cssxref("-moz-border-start-width")}} [Überholt durch die Standardversion {{cssxref("border-inline-start-width")}}]
    • 
+ 
  • {{cssxref("box-sizing", "-moz-box-sizing")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("-moz-font-feature-settings")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{cssxref("-moz-font-language-override")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("-moz-margin-end")}} [Überholt durch die Standardversion {{cssxref("margin-inline-end")}}]
    • 
+ 
  • {{Cssxref("-moz-margin-start")}} [Überholt durch die Standardversion {{cssxref("margin-inline-start")}}]
    • 
+ 
  • {{Cssxref("opacity","-moz-opacity")}}
    • 
+ 
  • {{Cssxref("outline","-moz-outline")}}
    • 
+ 
  • {{Cssxref("outline-color","-moz-outline-color")}}
    • 
+ 
  • {{Cssxref("outline-offset","-moz-outline-offset")}}
    • 
+ 
  • {{Cssxref("outline-style","-moz-outline-style")}}
    • 
+ 
  • {{Cssxref("outline-width","-moz-outline-width")}}
    • 
+ 
  • {{Cssxref("-moz-padding-end")}} [Überholt durch die Standardversion {{cssxref("padding-inline-end")}}]
    • 
+ 
  • {{Cssxref("-moz-padding-start")}} [Überholt durch die Standardversion {{cssxref("padding-inline-start")}}]
    • 
+ 
  • {{Cssxref("perspective", "-moz-perspective")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("perspective-origin","-moz-perspective-origin")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("text-decoration-color","-moz-text-decoration-color")}}
    • 
+ 
  • {{Cssxref("text-decoration-line","-moz-text-decoration-line")}}
    • 
+ 
  • {{Cssxref("text-decoration-style","-moz-text-decoration-style")}}
    • 
+ 
  • {{Cssxref("transform", "-moz-transform")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("transform-origin", "-moz-transform-origin")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("transform-style", "-moz-transform-style")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{cssxref("transition", "-moz-transition")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{cssxref("transition-delay", "-moz-transition-delay")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{cssxref("transition-duration", "-moz-transition-duration")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{cssxref("transition-property", "-moz-transition-property")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{cssxref("transition-timing-function", "-moz-transition-timing-function")}} [Version mit Präfix immer noch akzeptiert]
    • 
+

+

+
+
Werte

+
+
Für alle Eigenschaften

+
+

+
    
+ 
  • {{cssxref("initial","-moz-initial")}}
    • 
+

+

+
+
{{Cssxref("-moz-appearance")}}

+
+

+
    
+ 
  • button
    • 
+ 
  • button-arrow-down
    • 
+ 
  • button-arrow-next
    • 
+ 
  • button-arrow-previous
    • 
+ 
  • button-arrow-up
    • 
+ 
  • button-bevel
    • 
+ 
  • checkbox
    • 
+ 
  • checkbox-container
    • 
+ 
  • checkbox-label
    • 
+ 
  • checkmenuitem
    • 
+ 
  • dialog
    • 
+ 
  • groupbox
    • 
+ 
  • listbox
    • 
+ 
  • menuarrow
    • 
+ 
  • menucheckbox
    • 
+ 
  • menuimage
    • 
+ 
  • menuitem
    • 
+ 
  • menuitemtext
    • 
+ 
  • menulist
    • 
+ 
  • menulist-button
    • 
+ 
  • menulist-text
    • 
+ 
  • menulist-textfield
    • 
+ 
  • menupopup
    • 
+ 
  • menuradio
    • 
+ 
  • menuseparator
    • 
+ 
  • -moz-mac-unified-toolbar {{Fx_minversion_inline(3.5)}}
    • 
+ 
  • -moz-win-borderless-glass
    • 
+ 
  • -moz-win-browsertabbar-toolbox {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-win-communications-toolbox {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-win-glass
    • 
+ 
  • -moz-win-media-toolbox {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-window-button-box
    • 
+ 
  • -moz-window-button-box-maximized
    • 
+ 
  • -moz-window-button-close
    • 
+ 
  • -moz-window-button-maximize
    • 
+ 
  • -moz-window-button-minimize
    • 
+ 
  • -moz-window-button-restore
    • 
+ 
  • -moz-window-titlebar
    • 
+ 
  • -moz-window-titlebar-maximized
    • 
+ 
  • progressbar
    • 
+ 
  • progresschunk
    • 
+ 
  • radio
    • 
+ 
  • radio-container
    • 
+ 
  • radio-label
    • 
+ 
  • radiomenuitem
    • 
+ 
  • resizer
    • 
+ 
  • resizerpanel
    • 
+ 
  • scale-horizontal
    • 
+ 
  • scalethumb-horizontal
    • 
+ 
  • scalethumb-vertical
    • 
+ 
  • scale-vertical
    • 
+ 
  • scrollbarbutton-down
    • 
+ 
  • scrollbarbutton-left
    • 
+ 
  • scrollbarbutton-right
    • 
+ 
  • scrollbarbutton-up
    • 
+ 
  • scrollbar-small
    • 
+ 
  • scrollbarthumb-horizontal
    • 
+ 
  • scrollbarthumb-vertical
    • 
+ 
  • scrollbartrack-horizontal
    • 
+ 
  • scrollbartrack-vertical
    • 
+ 
  • separator
    • 
+ 
  • spinner
    • 
+ 
  • spinner-downbutton
    • 
+ 
  • spinner-textfield
    • 
+ 
  • spinner-upbutton
    • 
+ 
  • statusbar
    • 
+ 
  • statusbarpanel
    • 
+ 
  • tab
    • 
+ 
  • tabpanels
    • 
+ 
  • tab-scroll-arrow-back
    • 
+ 
  • tab-scroll-arrow-forward
    • 
+ 
  • textfield
    • 
+ 
  • textfield-multiline
    • 
+ 
  • toolbar
    • 
+ 
  • toolbarbutton-dropdown
    • 
+ 
  • toolbox
    • 
+ 
  • tooltip
    • 
+ 
  • treeheadercell
    • 
+ 
  • treeheadersortarrow
    • 
+ 
  • treeitem
    • 
+ 
  • treetwisty
    • 
+ 
  • treetwistyopen
    • 
+ 
  • treeview
    • 
+ 
  • window
    • 
+

+

+
+
{{cssxref("background-image")}}

+
+

+
    
+ 
  • Farbverläufe {{Gecko_minversion_inline("1.9.2")}}
+  
      
+   
    • {{cssxref("-moz-linear-gradient")}}
      • 
+   
    • {{cssxref("-moz-radial-gradient")}}
      • 
+  
    
+ 
    • 
+ 
  • Elemente {{gecko_minversion_inline("2.0")}}
+  
      
+   
    • {{cssxref("-moz-element")}}
      • 
+  
    
+ 
    • 
+ 
  • Teilbilder
+  
      
+   
    • {{cssxref("-moz-image-rect")}} {{gecko_minversion_inline("2.0")}}
      • 
+  
    
+ 
    • 
+

+

+
+
{{Cssxref("border-color")}}

+
+

+
    
+ 
  • -moz-use-text-color {{Deprecated_inline}} Use {{Cssxref("currentColor")}}
    • 
+

+

+
+
{{Cssxref("border-style")}} und {{Cssxref("outline-style")}}

+
+

+
    
+ 
  • -moz-bg-inset | -moz-bg-outset | -moz-bg-solid  {{obsolete_inline}} entfernt in Gecko 1.9 {{geckoRelease("1.9")}}
    • 
+

+

+
+
{{cssxref("<color>")}} Schlüsselwörter

+
+

+
    
+ 
  • -moz-activehyperlinktext
    • 
+ 
  • -moz-hyperlinktext
    • 
+ 
  • -moz-visitedhyperlinktext
    • 
+ 
  • -moz-buttondefault
    • 
+ 
  • -moz-buttonhoverface
    • 
+ 
  • -moz-buttonhovertext
    • 
+ 
  • -moz-default-background-color {{Gecko_minversion_inline("5.0")}}
    • 
+ 
  • -moz-default-color {{Gecko_minversion_inline("5.0")}}
    • 
+ 
  • -moz-cellhighlight
    • 
+ 
  • -moz-cellhighlighttext
    • 
+ 
  • -moz-field
    • 
+ 
  • -moz-fieldtext
    • 
+ 
  • -moz-dialog
    • 
+ 
  • -moz-dialogtext
    • 
+ 
  • -moz-dragtargetzone
    • 
+ 
  • -moz-mac-accentdarkestshadow
    • 
+ 
  • -moz-mac-accentdarkshadow
    • 
+ 
  • -moz-mac-accentface
    • 
+ 
  • -moz-mac-accentlightesthighlight
    • 
+ 
  • -moz-mac-accentlightshadow
    • 
+ 
  • -moz-mac-accentregularhighlight
    • 
+ 
  • -moz-mac-accentregularshadow
    • 
+ 
  • -moz-mac-chrome-active {{Gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • -moz-mac-chrome-inactive {{Gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • -moz-mac-focusring
    • 
+ 
  • -moz-mac-menuselect
    • 
+ 
  • -moz-mac-menushadow
    • 
+ 
  • -moz-mac-menutextselect
    • 
+ 
  • -moz-menuhover
    • 
+ 
  • -moz-menuhovertext
    • 
+ 
  • -moz-win-communicationstext {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-win-mediatext {{gecko_minversion_inline(1.9)}}
    • 
+ 
  • -moz-nativehyperlinktext {{Gecko_minversion_inline("1.9.1")}}
    • 
+

+

+
+
{{Cssxref("display")}}

+
+

+
    
+ 
  • -moz-box
    • 
+ 
  • -moz-inline-block {{obsolete_inline}}
    • 
+ 
  • -moz-inline-box
    • 
+ 
  • -moz-inline-grid
    • 
+ 
  • -moz-inline-stack
    • 
+ 
  • -moz-inline-table {{obsolete_inline}}
    • 
+ 
  • -moz-grid
    • 
+ 
  • -moz-grid-group
    • 
+ 
  • -moz-grid-line
    • 
+ 
  • -moz-groupbox
    • 
+ 
  • -moz-deck
    • 
+ 
  • -moz-popup
    • 
+ 
  • -moz-stack
    • 
+ 
  • -moz-marker
    • 
+

+

+
+
{{cssxref("empty-cells")}}

+
+

+
    
+ 
  • -moz-show-background (Standardwert in {{Glossary("Quirksmode")}})
    • 
+

+

+
+
{{Cssxref("font")}}

+
+

+
    
+ 
  • -moz-button
    • 
+ 
  • -moz-info
    • 
+ 
  • -moz-desktop
    • 
+ 
  • -moz-dialog (auch eine Farbe)
    • 
+ 
  • -moz-document
    • 
+ 
  • -moz-workspace
    • 
+ 
  • -moz-window
    • 
+ 
  • -moz-list
    • 
+ 
  • -moz-pull-down-menu
    • 
+ 
  • -moz-field (auch eine Farbe)
    • 
+

+

+
+
{{Cssxref("font-family")}}

+
+

+
    
+ 
  • -moz-fixed
    • 
+

+

+
+
{{Cssxref("image-rendering")}}

+
+

+
    
+ 
  • {{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}
    • 
+

+

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

+
+

+
    
+ 
  • {{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}
    • 
+

+

+
+
{{Cssxref("list-style-type")}}

+
+

+
    
+ 
  • -moz-arabic-indic
    • 
+ 
  • -moz-bengali
    • 
+ 
  • -moz-cjk-earthly-branch
    • 
+ 
  • -moz-cjk-heavenly-stem
    • 
+ 
  • -moz-devanagari
    • 
+ 
  • -moz-ethiopic-halehame
    • 
+ 
  • -moz-ethiopic-halehame-am
    • 
+ 
  • -moz-ethiopic-halehame-ti-er
    • 
+ 
  • -moz-ethiopic-halehame-ti-et
    • 
+ 
  • -moz-ethiopic-numeric
    • 
+ 
  • -moz-gujarati
    • 
+ 
  • -moz-gurmukhi
    • 
+ 
  • -moz-hangul
    • 
+ 
  • -moz-hangul-consonant
    • 
+ 
  • -moz-japanese-formal
    • 
+ 
  • -moz-japanese-informal
    • 
+ 
  • -moz-kannada
    • 
+ 
  • -moz-khmer
    • 
+ 
  • -moz-lao
    • 
+ 
  • -moz-malayalam
    • 
+ 
  • -moz-myanmar
    • 
+ 
  • -moz-oriya
    • 
+ 
  • -moz-persian
    • 
+ 
  • -moz-simp-chinese-formal
    • 
+ 
  • -moz-simp-chinese-informal
    • 
+ 
  • -moz-tamil
    • 
+ 
  • -moz-telugu
    • 
+ 
  • -moz-thai
    • 
+ 
  • -moz-trad-chinese-formal
    • 
+ 
  • -moz-trad-chinese-informal
    • 
+ 
  • -moz-urdu
    • 
+

+

+
+
{{Cssxref("overflow")}}

+
+

+
    
+ 
  • {{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}
    • 
+ 
  • {{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}
    • 
+ 
  • {{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}
    • 
+ 
  • {{Cssxref("-moz-hidden-unscrollable")}}
    • 
+

+

+
+
{{Cssxref("text-align")}}

+
+

+
    
+ 
  • -moz-center
    • 
+ 
  • -moz-left
    • 
+ 
  • -moz-right
    • 
+

+

+
+
{{Cssxref("text-decoration")}}

+
+

+
    
+ 
  • -moz-anchor-decoration
    • 
+

+

+
+
{{Cssxref("-moz-user-select")}}

+
+

+
    
+ 
  • -moz-all
    • 
+ 
  • -moz-none
    • 
+

+

+
+
{{Cssxref("width")}}, {{Cssxref("min-width")}} und {{Cssxref("max-width")}}

+
+

+
    
+ 
  • -moz-min-content {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-fit-content {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-max-content {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-available {{Fx_minversion_inline(3)}}
    • 
+

+

+
+
Pseudoelemente und Pseudoklassen

+
+

+
    
+ 
  • {{Cssxref("::-moz-anonymous-block")}} eg@:- bug 331432
    • 
+ 
  • {{Cssxref("::-moz-anonymous-positioned-block")}}
    • 
+ 
  • {{cssxref(":-moz-any")}} {{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{Cssxref(":-moz-any-link")}} (matcht :link und :visited)
    • 
+ 
  • {{Cssxref(":-moz-bound-element")}}
    • 
+ 
  • {{Cssxref(":-moz-broken")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref("::-moz-canvas")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-cell-content")}} eg@:- bug 331432
    • 
+ 
  • {{Cssxref(":-moz-drag-over")}}
    • 
+ 
  • {{Cssxref(":-moz-first-node")}}
    • 
+ 
  • {{cssxref("::-moz-focus-inner")}}
    • 
+ 
  • {{cssxref("::-moz-focus-outer")}}
    • 
+ 
  • {{cssxref(":-moz-focusring")}} {{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{cssxref(":-moz-full-screen")}} {{gecko_minversion_inline("9.0")}}
    • 
+ 
  • {{cssxref(":-moz-full-screen-ancestor")}} {{gecko_minversion_inline("10.0")}}
    • 
+ 
  • {{cssxref(":-moz-handler-blocked")}} {{gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • {{cssxref(":-moz-handler-crashed")}} {{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{cssxref(":-moz-handler-disabled")}} {{gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • {{Cssxref("::-moz-inline-table")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref(":-moz-last-node")}}
    • 
+ 
  • {{Cssxref(":-moz-list-bullet")}}
    • 
+ 
  • {{cssxref(":-moz-list-number")}}
    • 
+ 
  • {{cssxref(":-moz-loading")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-locale-dir(ltr)")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref(":-moz-locale-dir(rtl)")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref(":-moz-lwtheme")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref(":-moz-lwtheme-brighttext")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref(":-moz-lwtheme-darktext")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref(":-moz-native-anonymous")}} {{gecko_minversion_inline("36")}}
    • 
+ 
  • {{Cssxref(":-moz-only-whitespace")}}
    • 
+ 
  • {{Cssxref("::-moz-page")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-page-sequence")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-pagebreak")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-pagecontent")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref(":-moz-placeholder")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{cssxref("::-moz-placeholder")}} {{gecko_minversion_inline("19")}}
    • 
+ 
  • {{Cssxref("::-moz-progress-bar")}}
    • 
+ 
  • {{Cssxref("::-moz-range-thumb")}}
    • 
+ 
  • {{Cssxref("::-moz-range-track")}}
    • 
+ 
  • {{Cssxref(":-moz-read-only")}}
    • 
+ 
  • {{Cssxref(":-moz-read-write")}}
    • 
+ 
  • {{cssxref("::selection","::-moz-selection")}}
    • 
+ 
  • {{Cssxref("::-moz-scrolled-canvas")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-scrolled-content")}} eg@:- bug 331432
    • 
+ 
  • {{Cssxref("::-moz-scrolled-page-sequence")}} eg@:- bug 331432
    • 
+ 
  • {{cssxref(":-moz-suppressed")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{cssxref(":-moz-submit-invalid")}} {{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{Cssxref("::-moz-svg-foreign-content")}} example at resource://gre/res/svg.css , *|*::-moz-svg-foreign-content {display: block !important;position: static !important;}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(images-in-menus)")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(mac-graphite-theme)")}} {{gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(scrollbar-end-backward)")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(scrollbar-end-forward)")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(scrollbar-start-backward)")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(scrollbar-start-forward)")}} {{Fx_minversion_inline(3)}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(touch-enabled)")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(windows-default-theme)")}} {{Fx_minversion_inline(3)}}
    • 
+ 
  • {{Cssxref("::-moz-table")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-table-cell")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-table-column")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-table-column-group")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-table-outer")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-table-row")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-table-row-group")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref(":-moz-tree-checkbox")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-cell")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-cell-text")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-cell-text(hover)")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-column")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-drop-feedback")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-image")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-indentation")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-line")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-progressmeter")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-row")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-row(hover)")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-separator")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-twisty")}}
    • 
+ 
  • {{Cssxref(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{Cssxref(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{cssxref(":-moz-user-disabled")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref("::-moz-viewport")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-viewport-scroll")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{cssxref(":-moz-window-inactive")}} {{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{Cssxref("::-moz-xul-anonymous-block")}} eg@:- resource://gre/res/ua.css
    • 
+

+

+
+
At-Regeln

+
+

+
    
+ 
  • {{Cssxref("@-moz-document")}}
    • 
+

+

+
+
Media Queries

+
+

+
    
+ 
  • {{Cssxref("Media_queries", "-moz-images-in-menus", "#-moz-images-in-menus")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-mac-graphite-theme", "#-moz-mac-graphite-theme")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-maemo-classic", "#-moz-maemo-classic")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-device-pixel-ratio", "#-moz-device-pixel-ratio")}} {{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-scrollbar-end-backward", "#-moz-scrollbar-end-backward")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-scrollbar-end-forward", "#-moz-scrollbar-end-forward")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-scrollbar-start-backward", "#-moz-scrollbar-start-backward")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-scrollbar-start-forward", "#-moz-scrollbar-start-forward")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-scrollbar-thumb-proportional", "#-moz-scrollbar-thumb-proportional")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-touch-enabled", "#-moz-touch-enabled")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-windows-classic", "#-moz-windows-classic")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-windows-compositor", "#-moz-windows-compositor")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-windows-default-theme", "#-moz-windows-default-theme")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-windows-theme", "#-moz-windows-theme")}} {{gecko_minversion_inline("2.0")}}
    • 
+

+

+
+
Andere

+
+

+
    
+ 
  • {{Cssxref("-moz-alt-content")}} {{Bug("11011")}}
    • 
+

+

diff --git a/files/de/web/css/none/index.html b/files/de/web/css/none/index.html
new file mode 100644
index 0000000000..3f5680c26f
--- /dev/null
+++ b/files/de/web/css/none/index.html
@@ -0,0 +1,25 @@
+---
+title: none
+slug: Web/CSS/none
+translation_of: Web/CSS/float
+---
+

+ {{ CSSRef() }}

+
Übersicht

+
none ist ein oft gebrauchter Wert, welcher in einem Grossteil der Eigenschaften verwendet werden kann. Meistens ist er der Standartwert einer Eigenschaft. Ein vergleichbarer Wert ist {{ Cssxref("normal") }}.

+
Verwendet in

+
    
+ 
  • {{ Cssxref("background-image") }}
    • 
+ 
  • {{ Cssxref("border-style") }}
    • 
+ 
  • {{ Cssxref("clear") }}
    • 
+ 
  • {{ Cssxref("content") }}
    • 
+ 
  • {{ Cssxref("counter-increment") }}
    • 
+ 
  • {{ Cssxref("counter-reset") }}
    • 
+ 
  • {{ Cssxref("display") }}
    • 
+ 
  • {{ Cssxref("float") }}
    • 
+ 
  • {{ Cssxref("list-style-type") }}
    • 
+ 
  • {{ Cssxref("max-height") }} / {{ Cssxref("max-width") }}
    • 
+ 
  • {{ Cssxref("quotes") }}
    • 
+ 
  • {{ Cssxref("text-decoration") }}
    • 
+ 
  • {{ Cssxref("text-transform") }}
    • 
+

diff --git a/files/de/web/css/normal/index.html b/files/de/web/css/normal/index.html
new file mode 100644
index 0000000000..c70bf8921f
--- /dev/null
+++ b/files/de/web/css/normal/index.html
@@ -0,0 +1,27 @@
+---
+title: normal
+slug: Web/CSS/normal
+translation_of: Web/CSS/font-variant
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
normal ist ein oft gebrauchter Wert. Meistens ist es der Standartwert der entsprechenden Eigenschaften. It is comparable to the value {{ Cssxref("none") }}, used in a similar manner for other properties.

+
+
Verwendet in

+
+
    
+ 
  • {{ Cssxref("content") }}
    • 
+ 
  • {{ Cssxref("font-style") }}
    • 
+ 
  • {{ Cssxref("font-variant") }}
    • 
+ 
  • {{ Cssxref("font-weight") }}
    • 
+ 
  • {{ Cssxref("letter-spacing") }}
    • 
+ 
  • {{ Cssxref("line-height") }}
    • 
+ 
  • {{ Cssxref("speak") }}
    • 
+ 
  • {{ Cssxref("unicode-bidi") }}
    • 
+ 
  • {{ Cssxref("white-space") }}
    • 
+ 
  • {{ Cssxref("word-spacing") }}
    • 
+

+
+
{{ languages({ "ja": "ja/CSS/normal" }) }}

diff --git a/files/de/web/css/number/index.html b/files/de/web/css/number/index.html
new file mode 100644
index 0000000000..8da756e1ff
--- /dev/null
+++ b/files/de/web/css/number/index.html
@@ -0,0 +1,80 @@
+---
+title: 
+slug: Web/CSS/number
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/number
+---
+
{{CSSRef}}

+
+
Der <number> CSS Datentyp repräsentiert eine Zahl, entweder Ganzzahl oder Bruchzahl. Ihre Syntax erweitert die des {{cssxref("<integer>")}} Datentyps. Um einen Bruchwert darzustellen, wird der Bruchteil — ein '.' gefolgt von einer oder mehreren Ziffern — einem beliebigen {{cssxref("<integer>")}} Datentyp angehängt. Wie für {{cssxref("<integer>")}} Datentypen wird auch für <number> Werte keine Einheit angegeben, welche keine CSS Größe ist.

+
+
Interpolation

+
+
Werte des <number> CSS Datentyps können interpoliert werden, um Animationen zu ermöglichen. In diesem Fall werden sie als reale Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die der Animation zugehörigen {{cssxref("timing-function", "Timingfunktion")}} bestimmt.

+
+
Beispiele

+
+
Dies sind gültige Zahlenwerte:

+
+
12          Reiner <integer> ist ebenfalls eine <number>
+4.01        Positive <number>, die keine Ganzzahl ist
+-456.8      Negative <number>, die keine Ganzzahl ist
+0.0         Null
++0.0        Null mit führendem +
+-0.0        Null mit führendem - (obwohl seltsam, ist dies ein erlaubter Wert)
+.60         Ziffern vor dem Punkt sind optional
+10e3        Wissenschaftliche Notation ist erlaubt
+-3.4e-2     Komplexester Fall wissenschaftlicher Notation
+

+
+
Dies sind ungültige Zahlenwerte:

+
+
12.         Dem Punkt sollte eine Zahl folgen
++-12.2      Nur ein führendes +/- ist erlaubt
+12.1.1      Nur ein Punkt ist erlaubt
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Values', '#numbers', '<number>')}}{{Spec2('CSS3 Values')}}Keine wesentliche Änderung in Bezug auf CSS Level 2 (Revision 1)
{{SpecName('CSS2.1', 'syndata.html#numbers', '<number>')}}{{Spec2('CSS2.1')}}Explizit definiert
{{SpecName('CSS1', '', '<number>')}}{{Spec2('CSS1')}}Implizit definiert

+
+
Browser Kompatibilität

+
+
{{Compat("css.types.number")}}

+
+
Siehe auch

+
+
    
+ 
  • {{CSSxRef("<integer>")}}
    • 
+

diff --git a/files/de/web/css/object-fit/index.html b/files/de/web/css/object-fit/index.html
new file mode 100644
index 0000000000..7fbbc5267e
--- /dev/null
+++ b/files/de/web/css/object-fit/index.html
@@ -0,0 +1,148 @@
+---
+title: object-fit
+slug: Web/CSS/object-fit
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Image
+  - Grafik
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/object-fit
+---
+
{{ CSSRef }}

+
+
Übersicht

+
+
Die object-fit CSS Eigenschaft gibt an, wie die Inhalte eines ersetzten Elements an die Box angepasst werden, die durch dessen verwendeter Höhe und Breite erzeugt wird.

+
+
{{cssinfo}}

+
+
Syntax

+
+
{{csssyntax}}

+
+
object-fit: fill
+object-fit: contain
+object-fit: cover
+object-fit: none
+object-fit: scale-down
+

+
+
Werte

+
+

+ 
fill

+ 
Der ersetzte Inhalt wird in der Größe angepasst, sodass er die Inhaltsbox des Elements ausfüllt: die konkrete Objektgröße entspricht der verwendeten Breite und Höhe des Elements.

+ 
contain

+ 
Der ersetzte Inhalt wird in der Größe angepasst, sodass das Seitenverhältnis beibehalten wird während es an die Inhaltsbox des Elements angepasst wird: die konkrete Objektgröße wird als eine Inhaltsbeschränkung auf die verwendete Breite und Höhe des Elements bestimmt.

+ 
cover

+ 
Der ersetzte Inhalt wird in der Größe angepasst, sodass das Seitenverhältnis beibehalten wird während die gesamte Inhaltsbox des Elements ausgefüllt wird: die konkrete Objektgröße wird als eine Abdeckbeschränkung auf die verwendete Breite und Höhe des Elements bestimmt.

+ 
none

+ 
Der ersetzte Inhalt wird nicht in der Größe angepasst, um in die Inhaltsbox des Elements zu passen: die konkrete Objektgröße wird durch den Standardalgorithmus zur Größenanpassung und eine Standardobjektgröße gleich der verwendeten Breite und Höhe des ersetzten Elements bestimmt.

+ 
scale-down

+ 
Der Inhalt wird in der Größe geändert als ob none oder contain angegeben wäre, je nachdem welches in einer kleineren konkreten Objektgröße resultieren würde.

+

+
+
Beispiel

+
+
HTML Inhalt

+
+
<div>
+  <h2>object-fit: fill</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
+
+  <h2>object-fit: contain</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
+
+  <h2>object-fit: cover</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
+
+  <h2>object-fit: none</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
+
+  <h2>object-fit: scale-down</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
+</div>

+
+
CSS Inhalt

+
+
h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 450px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+

+
+
Ausgabe

+
+
{{ EmbedLiveSample('Beispiel', 500, 450) }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}}Die Schlüsselwörter from-image und flip wurden hinzugefügt.
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}Ursprüngliche Spezifikation

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.object-fit")}}

+
+
Siehe auch

+
+
    
+ 
  • Andere Bild bezogene CSS Eigenschaften: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • 
+

diff --git a/files/de/web/css/object-position/index.html b/files/de/web/css/object-position/index.html
new file mode 100644
index 0000000000..e3b2dd4f80
--- /dev/null
+++ b/files/de/web/css/object-position/index.html
@@ -0,0 +1,147 @@
+---
+title: object-position
+slug: Web/CSS/object-position
+translation_of: Web/CSS/object-position
+---
+
{{CSSRef}}

+
+
Die Eigenschaft object-position bestimmt  die Ausrichtung des Elements in seiner Box.

+
+
/* <position> Werte */
+object-position: 100px 50px;
+
+/* Globale Werte */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+

+
+
{{cssinfo}}

+
+
Syntax

+
+
Values

+
+

+ 
<position>

+ 
Is a {{ cssxref("<position>") }}, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

+

+
+
Formal syntax

+
+
{{csssyntax}}

+
+
Example

+
+
HTML content

+
+
<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+

+
+
CSS content

+
+
img {
+   width: 300px;
+   height: 250px;
+   border: 1px solid black;
+   background-color: silver;
+   margin-right: 1em;
+   object-fit: none;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 100% 10%;
+}
+

+
+
Output

+
+
{{ EmbedLiveSample('Example', '100%','300px') }}

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS4 Images')}}The from-image and flip keywords have been added.
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}Initial definition

+
+
Browser compatibility

+
+
{{ CompatibilityTable }}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support31.0{{ CompatGeckoDesktop("36") }}{{CompatNo}}11.60{{ property_prefix("-o") }}

+    19.0		10.0

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.4.4{{ CompatGeckoDesktop("36") }}{{CompatNo}}11.5{{ property_prefix("-o") }}

+    24		{{ CompatNo }}

+

+[1] WebKit Nightly fixed in bug 122811.

+
+
See also

+
+
    
+ 
  • Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • 
+

diff --git a/files/de/web/css/opacity/index.html b/files/de/web/css/opacity/index.html
new file mode 100644
index 0000000000..6781cbfee6
--- /dev/null
+++ b/files/de/web/css/opacity/index.html
@@ -0,0 +1,158 @@
+---
+title: opacity
+slug: Web/CSS/opacity
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/opacity
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die opacity CSS Eigenschaft gibt die Transparenz eines Elements an, d. h. den Grad, zu welchem der Hintergrund des Elements überlagert wird.

+
+
Der Wert wird dem gesamten Element zugewiesen einschließlich dessen Inhalten, auch wenn der Wert nicht durch Kindelemente geerbt wird. Dadurch haben ein Element und seine Kindelemente alle dieselbe Deckkraft relativ zum Hintergrund des Elements, auch wenn das Element und seine Kindelemente untereinander unterschiedliche Werte für die Deckkraft haben.

+
+
Wird für diese Eigenschaft ein Wert anders als 1 festgelegt, bewirkt dies, dass das Element in einen neuen Stapelkontext versetzt wird.

+
+
Falls ein Kindelement nicht den Wert für die Deckkraft haben soll, kann stattdessen die {{cssxref("background")}} Eigenschaft verwendet werden. Zum Beispiel:

+
+
background: rgba(0, 0, 0, 0.4);

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Komplett undurchsichtig */
+opacity: 1;
+opacity: 1.0;
+
+/* Durchscheinend */
+opacity: 0.6;
+
+/* Komplett transparent */
+opacity: 0.0;
+opacity: 0;
+
+/* Globale Werte */
+opacity: inherit;
+opacity: initial;
+opacity: unset;
+

+
+
Werte

+
+

+ 
<number>

+ 
Ist eine {{cssxref("<number>")}} im Bereich von 0.0 bis 1.0, beide einschließlich, die die Deckkraft des Alphakanals repräsentiert. Jeder Wert außerhalb des Intervalls, obwohl gültig, wird abgeschnitten auf die nächstliegende Grenze innerhalb des Bereichs.
+ 
+  
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+  
+ 
WertBedeutung
0Das Element ist vollkommen transparent (d. h. unsichtbar).
Irgendeine {{cssxref("<number>")}} genau zwischen 0 und 1Das Element ist durchsichtig (d. h. der Hintergrund scheint durch).
1Das Element ist vollkommen opak (blickdicht).

+ 

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Einfaches Beispiel

+
+
div {
+  background-color: yellow;
+}
+
+.light {
+  opacity: 0.2; /* Der Text kann kaum über dem Hintergrund gelesen werden */
+}
+
+.medium {
+  opacity: 0.5; /* Der Text ist besser über dem Hintergrund lesbar */
+}
+
+.heavy {
+  opacity: 0.9; /* Der Text ist sehr deutlich über dem Hintergrund lesbar */
+}
+

+
+
<div class="light">Dies kann kaum gesehen werden.</div>
+<div class="medium">Dies ist einfacher zu sehen.</div>
+<div class="heavy">Dies ist sehr deutlich sichtbar.</div>
+

+
+
{{EmbedLiveSample('Einfaches_Beispiel', '640', '64')}}

+
+
Andere Deckkraft mit :hover

+
+
img.opacity {
+  opacity: 1;
+  filter: alpha(opacity=100); /* IE8 and lower */
+  zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}

+
+
<img src="//developer.mozilla.org/media/img/mdn-logo.png"
+     alt="MDN logo" width="128" height="146"
+     class="opacity">
+

+
+
{{EmbedLiveSample('Andere_Deckkraft_mit_hover', '150', '175')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}{{Spec2('CSS3 Transitions')}}Definiert opacity als animierbar.
{{SpecName('CSS3 Colors', '#propdef-opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.opacity")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/order/index.html b/files/de/web/css/order/index.html
new file mode 100644
index 0000000000..7b3a099ded
--- /dev/null
+++ b/files/de/web/css/order/index.html
@@ -0,0 +1,104 @@
+---
+title: order
+slug: Web/CSS/order
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - NeedsLiveSample
+  - Referenz
+  - Web
+translation_of: Web/CSS/order
+---
+
{{ CSSRef("CSS Flexible Boxes") }}

+
+
Übersicht

+
+
Die order CSS Eigenschaft gibt die Reihenfolge an, in der Flexelemente innerhalb ihres Flexcontainers dargestellt werden. Elemente werden in aufsteigender Reihenfolge des order Werts dargestellt. Elemente mit dem gleichen order Wert werden in der Reihenfolge dargestellt, in der sie im Quelltext auftauchen.

+
+

+
Hinweis: order beeinflusst nur die visuelle Reihenfolge von Elementen und nicht deren logische oder Tab-Reihenfolge. order darf nicht bei nicht visuellen Medien wie Sprache verwendet werden.

+

+
+
{{cssinfo}}

+
+
Siehe die Verwendung von flexiblen Boxen für mehr Informationen.

+
+
{{ Note("order ist nur dazu gedacht, die visuelle Reihenfolge festzulegen, nicht die logische Reihenfolge der Elemente. Die Eigenschaft darf nicht auf nicht-visuelle Medien wie beispielsweise Sprache angewendet werden.") }}

+
+
Syntax

+
+
/* Nummerische Werte inklusive negativer Zahlen */
+order: 5;
+order: -5;
+
+/* Globale Werte */
+order: inherit;
+order: initial;
+order: unset;
+

+
+
Werte

+
+

+ 
<integer>

+ 
Repräsentiert die ordinale Position des Flexelements.

+

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Einfache HTML-Struktur:

+
+
<!DOCTYPE html>
+<header>…</header>
+<div id='main'>
+   <article>…</article>
+   <nav>…</nav>
+   <aside>…</aside>
+</div>
+<footer>…</footer>

+
+
Der folgende CSS Code erzeugt ein klassisches Layout mit zwei Seitenleisten, die einen Inhaltsbereich umschließen. Das Flexible Box Layout Modul erzeugt automatisch Blöcke gleicher vertikaler Größe und verwendet gesamten zur Verfügung stehenden horizontalen Platz.

+
+
#main { display: flex; }
+#main > article { flex:1;         order: 2; }
+#main > nav     { width: 200px;   order: 1; }
+#main > aside   { width: 200px;   order: 3; }

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Flexbox', '#order-property', 'order') }}{{ Spec2('CSS3 Flexbox') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.order")}}
+
+
[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

+
+
Firefox verändert aktuell fälschlicherweise die Tab-Reihenfolge der Elemente. Siehe {{bug("812687")}}.

+
+
[2] Im Internet Explorer 10 wird ein flexibler Container durch display:-ms-flexbox angegeben, nicht durch display:flex.

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/orphans/index.html b/files/de/web/css/orphans/index.html
new file mode 100644
index 0000000000..0e1c984025
--- /dev/null
+++ b/files/de/web/css/orphans/index.html
@@ -0,0 +1,121 @@
+---
+title: orphans
+slug: Web/CSS/orphans
+tags:
+  - CSS
+  - CSS3
+  - Layout
+  - Referenz
+  - mehrspaltige Layouts
+translation_of: Web/CSS/orphans
+---
+
{{CSSRef}}

+
+
Die CSS-Eigenschaft orphans legt die Mindestanzahl von Zeilen in einem Blockcontainer fest, die unten auf einer Seite, eines Bereichs oder einer Spalte angezeigt werden müssen.

+
+
/* <integer> values */
+orphans: 2;
+orphans: 3;
+
+/* Global values */
+orphans: inherit;
+orphans: initial;
+orphans: unset;
+

+
+

+
Hinweis: In der Typografie ist ein Schusterjunge die erste Zeile eines Absatzes, die allein am unteren Rand einer Seite angezeigt wird (der Absatz wird auf einer nachfolgenden Seite fortgesetzt).

+

+
+
Syntax

+
+
Werte

+
+

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

+ 
Die Mindestanzahl von Zeilen, die vor einem Fragmentierungsbruch am unteren Rand eines Fragments verbleiben können. Der Wert muss positiv sein.

+

+
+
Formale Definition

+
+
{{cssinfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
Festlegung einer Mindestgröße für Waisenkinder von drei Zeilen

+
+
HTML

+
+

+
<div>
+  <p>This is the first paragraph containing some text.</p>
+  <p>This is the second paragraph containing some more text than the first one. It is used to demonstrate how orphans work.</p>
+  <p>This is the third paragraph. It has a little bit more text than the first one.</p>
+</div>
+

+
+
CSS

+
+
div {
+  background-color: #8cffa0;
+  height: 150px;
+  columns: 3;
+  orphans: 3;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+

+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Setting_a_minimum_orphan_size_of_three_lines", 380, 150)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}{{Spec2('CSS3 Fragmentation')}}Erweitert orphans, die auf alle Fragmenttypen angewendet werden können, einschließlich Seiten, Regionen oder Spalten.
{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}{{Spec2('CSS2.1')}}Initiale Definition.

+
+
Browserkompatibilität

+
+

+
+
+
{{Compat("css.properties.orphans")}}

+

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/outline-color/index.html b/files/de/web/css/outline-color/index.html
new file mode 100644
index 0000000000..c802720159
--- /dev/null
+++ b/files/de/web/css/outline-color/index.html
@@ -0,0 +1,154 @@
+---
+title: outline-color
+slug: Web/CSS/outline-color
+translation_of: Web/CSS/outline-color
+---
+
{{CSSRef}}

+
+
Zusammenfassung

+
+
Die outline-color CSS-Eigenschaft bestimmt die Farbe der Outline (den Umriss) eines Elements. Eine Outline ist eine Linie, die außerhalb des Rahmens (border) um Elemente gezeigt wird, damit das Element hervorsticht.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Keyword values */
+outline-color: invert;
+outline-color: red;
+
+/* Global values */
+outline-color: inherit;
+outline-color: initial;
+outline-color: unset;
+

+
+
Werte

+
+

+ 
<color>

+ 
See {{cssxref("<color>")}} for the various color keywords and notations.

+ 
invert

+ 
To ensure the outline is visible, performs a color inversion of the background. This makes the focus border more salient, regardless of the color in the background. Note that browsers are not required to support it. If not, they just consider the statement as invalid

+

+
+
Formal syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
HTML

+
+
<p class="example">My outline is blue, da ba dee.</p>

+
+
CSS

+
+
.example {
+  /* first need to set "outline" */
+  outline: 2px solid;
+  /* make the outline blue */
+  outline-color: #0000FF;
+}

+
+
Live:

+
+
{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/outline-color') }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}{{Spec2('CSS3 Basic UI')}}No change
{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}{{Spec2('CSS3 Transitions')}}Defines outline-color as animatable.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}{{Spec2('CSS2.1')}}Initial definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}} [1]8.07.01.2 (125)
invert value{{CompatNo}}{{CompatUnknown}}{{CompatNo}} [2]8.0{{CompatNo}} [3]{{CompatNo}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

+

+
+
[1] In versions previous to Gecko 1.8: -moz-outline-color.

+
+
[2] Support had been dropped in version 3.0 (1.9).

+
+
[3] Supported in Opera 7 but support was dropped in  Opera 15 with the adoption of Chromium/Blink engine.

diff --git a/files/de/web/css/outline/index.html b/files/de/web/css/outline/index.html
new file mode 100644
index 0000000000..48b3666cce
--- /dev/null
+++ b/files/de/web/css/outline/index.html
@@ -0,0 +1,162 @@
+---
+title: outline
+slug: Web/CSS/outline
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Outline
+  - Layout
+  - Referenz
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/outline
+---
+
{{CSSRef}}

+
+
Das outline CSS Eigenschaftskürzel setzt alle outline Eigenschaften in einer einzigen Deklaration.

+
+
{{EmbedInteractiveExample("pages/css/outline.html")}}

+
+
+
+
Bestandteileigenschaften

+
+
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

+
+
+
+
Syntax

+
+
/* style */
+outline: solid;
+
+/* color | style */
+outline: #f66 dashed;
+
+/* style | width */
+outline: inset thick;
+
+/* color | style | width */
+outline: green solid 3px;
+
+/* Global values */
+outline: inherit;
+outline: initial;
+outline: unset;
+

+
+
Die outline Eigenschaft kann mit einem, zwei oder drei der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt dabei keine Rolle.

+
+

+
Hinweis: Der Umriss ist für viele Elemente unsichtbar, wenn sein Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig auf keinen Stil eingestellt ist: none. Eine bemerkenswerte Ausnahme bilden input Elemente, die von den Browsern als Standard-Stil vorgegeben werden.

+

+
+
Values

+
+

+ 
<'outline-color'>

+ 
Legt die Farbe des Umrisses fest. Standardeinstellung ist die currentcolor (aktuelle Farbe), wenn sie nicht vorhanden ist. Siehe {{cssxref("outline-color")}}.

+ 
<'outline-style'>

+ 
Legt den Stil des Umrisses fest. Standardeinstellung ist none, wenn nicht vorhanden. Siehe {{cssxref("outline-style")}}.

+ 
<'outline-width'>

+ 
Legt die Dicke der Umrisslinie fest. Standardeinstellung ist medium, wenn nicht vorhanden. Siehe {{cssxref("outline-width")}}.

+

+
+
Beschreibung

+
+
Borders und outline sind sehr ähnlich. Allerdings unterscheiden sich die Umrisse von den Grenzen in den folgenden Punkten:

+
+
    
+ 
  • Outlines nehmen nie Raum ein, da sie außerhalb des Inhalts eines Elements gezeichnet werden.
    • 
+ 
  • 
+  
    Gemäß der Spezifikation müssen Umrisse nicht rechteckig sein, obwohl sie es normalerweise sind.
    
+ 
    • 
+

+
+
Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Unterwerte auf ihren Initialwert gesetzt.

+
+
Bedenken zu Zugänglichkeit

+
+
Wenn Sie outline den Wert von 0 oder none zuweisen, wird der Standard-Fokussierungsstil des Browsers entfernt. Wenn ein Element mit ihm interagiert werden kann, muss es einen sichtbaren Fokusindikator haben. Sorgen Sie für eine offensichtliche Fokusgestaltung, wenn der Standardfokusstil entfernt wird.

+
+
+
+
Formale Definition

+
+
{{cssinfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beschreibung

+
+
Verwendung von Umrissen zum Setzen eines Fokusstils

+
+
HTML

+
+

+
<a href="#">This link has a special focus style.</a>
+

+
+
CSS

+
+
a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+

+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Using_outline_to_set_a_focus_style", "100%", 60)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}{{Spec2('CSS3 Basic UI')}}Keine Änderung.
{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}{{Spec2('CSS2.1')}}Anfangsdefinition

+
+
Browser Kompatibilität

+
+

+
+
+
{{Compat("css.properties.outline")}}

+

diff --git a/files/de/web/css/overflow-clip-box/index.html b/files/de/web/css/overflow-clip-box/index.html
new file mode 100644
index 0000000000..bc8b4bb4ff
--- /dev/null
+++ b/files/de/web/css/overflow-clip-box/index.html
@@ -0,0 +1,97 @@
+---
+title: overflow-clip-box
+slug: Web/CSS/overflow-clip-box
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - Referenz
+  - Web
+translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box
+---
+
{{CSSRef}}{{Non-standard_header}}

+
+
Übersicht

+
+
Die overflow-clip-box CSS Eigenschaft bestimmt, bezogen auf welche Box die Zuschnitt erfolgt, wenn ein Überlauf stattfindet.

+
+

+
In Gecko wird standardmäßig padding-box überall verwendet, aber <input type="text"> und ähnliche Elemente verwenden den Wert content-box. Vor Firefox 29 war das Verhalten fest kodiert; seitdem benutzt Firefox diese Eigenschaft, die auch an anderen Stellen verwendet werden kann. Beachte, dass diese Eigenschaft nur in {{Glossary("User Agent")}} Stylesheets und dem Chrome Kontext standardmäßig aktiviert ist.

+

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+overflow-clip-box: padding-box;
+overflow-clip-box: content-box;
+
+/* Globale Werte */
+overflow-clip-box: inherited;
+overflow-clip-box: initial;
+overflow-clip-box: unset;
+

+
+
Werte

+
+

+ 
padding-box

+ 
Diese Schlüsselwort gibt an, dass der Zuschnitt relativ zur Paddingbox erfolgt.

+ 
content-box

+ 
Diese Schlüsselwort gibt an, dass der Zuschnitt relativ zur Contentbox erfolgt.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
padding-box

+
+
<div class="things">
+  <input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box">
+  <div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div>
+</div>
+

+
+
.scroll {
+  overflow: auto;
+  padding: 0 30px;
+  width: 6em;
+  border: 1px solid black;
+  background: lime content-box;
+}

+
+
.padding-box {
+  overflow-clip-box: padding-box;
+}
+

+
+
function scrollSomeElements() {
+  var elms = document.querySelectorAll('.scroll');
+  for (i=0; i < elms.length; ++i) {
+    elms[i].scrollLeft=80;
+  }
+}
+var elt = document.queryElementsByTagName('body')[0];
+
+elt.addEventListener("load", scrollSomeElements, false);
+

+
+
{{EmbedLiveSample('padding-box')}}

+
+
Spezifikationen

+
+
Diese Eigenschaft wurde der W3C CSSWG vorgeschlagen; sie ist noch nicht standardisiert, aber, falls sie akzeptiert wird, sollte sie in {{SpecName("CSS3 Overflow")}} erscheinen.

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.overflow-clip-box")}}
+
+
Siehe auch

+
+
    
+ 
  • Ähnliche CSS Eigenschaften: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • 
+

diff --git a/files/de/web/css/overflow/index.html b/files/de/web/css/overflow/index.html
new file mode 100644
index 0000000000..eec5ccd2bc
--- /dev/null
+++ b/files/de/web/css/overflow/index.html
@@ -0,0 +1,130 @@
+---
+title: overflow
+slug: Web/CSS/overflow
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/overflow
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die overflow Eigenschaft legt fest, ob Inhalte aus einem Element hinausragen dürfen oder, ob Scrollbalken beim Überlauf zum Einsatz kommen.

+
+
    
+ 
  • Standardwert: visible
    • 
+ 
  • Anwendbar auf: block, inline und table-cell Elemente
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: Nein
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: wie festgelegt
    • 
+

+
+
Syntax

+
+
overflow: visible | hidden | scroll | auto | inherit
+

+
+
Werte

+
+

+ 
visible

+ 
Standardwert. Der Inhalt wird nicht abgeschnitten und kann aus dem Element hinausragen.

+ 
hidden

+ 
Der Inhalt wird abgeschnitten und es werden keine Scrollbalken angezeigt.

+ 
scroll

+ 
Es werden immer Scrollbalken angezeigt, auch wenn der Inhalt nicht überläuft.

+ 
auto

+ 
Hängt vom Browser ab. Firefox stellt Scrollbalken zur Verfügung, wenn der Inhalt überläuft.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Mozilla Erweiterungen

+
+

+ 
-moz-scrollbars-none

+ 
{{ obsolete_inline() }}  stattdessen overflow:hidden

+ 
-moz-scrollbars-horizontal

+ 
{{ Deprecated_inline() }} Verwendung von overflow-x und overflow-y wird bevorzugt.

+ 
-moz-scrollbars-vertical

+ 
{{ Deprecated_inline() }} Verwendung von overflow-x und overflow-y wird bevorzugt.

+ 
-moz-hidden-unscrollable

+ 
Deaktiviert das Scrollen für das Wurzelelement (<html>, <body>) und ist nur für interne Zwecke gedacht (z.B. Themes).

+

+
+
Beispiele

+
+
p {
+     width: 12em;
+     height: 6em;
+     border: dotted;
+     overflow: auto;   /* Scrollbalken erscheinen nur wenn nötig */
+}
+
+

+
+
overflow: hidden

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+
+
overflow: scroll

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+
+
overflow: auto

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+
+
overflow: auto

+ wenig Text

+
+
overflow: visible

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+
+
Hinweise

+
+
Bis einschließlich Gecko 1.9.2 (Firefox 3.6), war die overflow Eigenschaft fälschlicherweise auch für Tabellengruppen verfügbar (<thead> , <tbody> , <tfoot>). Dieses Verhalten wurde in späteren Versionen korrigiert.

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Overflow')}}
+    
Changed syntax to allow one or two keywords instead of only one

+   
{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Box')}}No change.
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}{{Spec2('CSS2.1')}}Initial definition.

+
+
{{cssinfo}}

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.overflow")}}

+
+
Siehe auch

+
+
    
+ 
  • Ähnliche CSS Eigenschaften: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}
+

+
+
{{ languages( { "en": "en/CSS/overflow" } ) }}

diff --git a/files/de/web/css/overscroll-behavior-y/index.html b/files/de/web/css/overscroll-behavior-y/index.html
new file mode 100644
index 0000000000..996350ccac
--- /dev/null
+++ b/files/de/web/css/overscroll-behavior-y/index.html
@@ -0,0 +1,85 @@
+---
+title: overscroll-behavior-y
+slug: Web/CSS/overscroll-behavior-y
+translation_of: Web/CSS/overscroll-behavior-y
+---
+
{{CSSRef}}

+
+
Die overscroll-behavior-y CSS Eigenschaft ändert das Browserverhalten, wenn die vertikale Grenze des Scrollbereichs erreicht wurde.

+
+

+
Eine vollständige Erklärung gibt es auch unter {{cssxref("overscroll-behavior")}} .

+

+
+
/* Keyword values */
+overscroll-behavior: auto; /* default */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Global values */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+

+
+
{{cssinfo}}

+
+
Syntax

+
+
Die overscroll-behavior-y Eigenschaft kann mit einem der untenstehenden Schlüsselworte definiert werden:

+
+
Werte

+
+

+ 
auto

+ 
Das standardmäßige Scrollüberlaufverhalten wird eingestellt.

+ 
contain

+ 
Es wird das standardmäßige Scrollüberlaufverhalten im aktuellen Element eingestellt, die Scrollverkettung, d.h. das gelichzeitige Scrollen von darunterliegenden Elementen wird verhindert.

+ 
none

+ 
Es gibt keine Scrollverkettung zu benachbarten Scrollzonen und das Standard-Scrollverhalten wird verhindert.

+

+
+
Formale  Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+} 

+
+
Eine vollständige Erklärung gibt es auch unter {{cssxref("overscroll-behavior")}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y','overscroll-behavior-y')}}{{Spec2('Overscroll Behavior')}}

+
+
Browserkompatibilität

+
+
+
+
{{Compat("css.properties.overscroll-behavior-y")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/overscroll-behavior/index.html b/files/de/web/css/overscroll-behavior/index.html
new file mode 100644
index 0000000000..f2a7e10165
--- /dev/null
+++ b/files/de/web/css/overscroll-behavior/index.html
@@ -0,0 +1,104 @@
+---
+title: overscroll-behavior
+slug: Web/CSS/overscroll-behavior
+translation_of: Web/CSS/overscroll-behavior
+---
+
{{CSSRef}}

+
+
The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for {{cssxref("overscroll-behavior-x")}} and {{cssxref("overscroll-behavior-y")}}.

+
+
/* Keyword values */
+overscroll-behavior: auto; /* default */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Two values */
+overscroll-behavior: auto contain;
+
+/* Global values */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+

+
+
By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining.

+
+
In some cases these behaviors are not desirable. you can use overscroll-behavior to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.

+
+
{{cssinfo}}

+
+
Syntax

+
+
The overscroll-behavior property is specified as one or two keywords chosen from the list of values below.

+
+
Two keywords specifies the overscroll-behavior value on the x and y axes respectively. If only one value is specified, both x and y are assumed to have the same value.

+
+
Values

+
+

+ 
auto

+ 
The default scroll overflow behavior occurs as normal.

+ 
contain

+ 
Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g. underlying elements will not scroll.

+ 
none

+ 
No scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.

+

+
+
Formal syntax

+
+
{{csssyntax}}

+
+
Examples

+
+
In our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window. 

+
+

+
+
Both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. This can be stopped using overscroll-behavior-y (overscroll-behavior would also work) on the chat window, like this:

+
+
.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+} 

+
+
We also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting overscroll-behavior: none on the {{htmlelement("body")}} element:

+
+
body {
+  margin: 0;
+  overscroll-behavior: none;
+}

+
+
Specifications

+
+
Until the CSSWG publishes their own draft, the specification can only be found in its WICG Github Repository.

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}{{Spec2('CSS Overscroll Behavior')}} 

+
+
Browser compatibility

+
+
+
+
{{Compat("css.properties.overscroll-behavior")}}

+
+
See also

+
+
diff --git a/files/de/web/css/padding-bottom/index.html b/files/de/web/css/padding-bottom/index.html
new file mode 100644
index 0000000000..dc288c4904
--- /dev/null
+++ b/files/de/web/css/padding-bottom/index.html
@@ -0,0 +1,76 @@
+---
+title: padding-bottom
+slug: Web/CSS/padding-bottom
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/padding-bottom
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die padding-bottom Eigenschaft legt den unteren Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen (auch: padding area).

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente außer table-*-group, table-row und table-column
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
Syntax

+
padding-bottom: <Längenangabe> | <Prozentzahl> | inherit

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind nicht erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte nicht sind erlaubt.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
.content { padding-bottom: 5%; }
+.sidebox { padding-bottom: 10px; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/padding-bottom", "ja": "ja/CSS/padding-bottom" } ) }}

diff --git a/files/de/web/css/padding-left/index.html b/files/de/web/css/padding-left/index.html
new file mode 100644
index 0000000000..601e6a5037
--- /dev/null
+++ b/files/de/web/css/padding-left/index.html
@@ -0,0 +1,86 @@
+---
+title: padding-left
+slug: Web/CSS/padding-left
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/padding-left
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die padding-left Eigenschaft legt den linken Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen (auch: padding area).

+
+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente außer table-*-group, table-row und table-column
    • 
+ 
  • Vererbbar: nein
    • 
+ 
  • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
+
Syntax

+
+
padding-left: <Längenangabe> | <Prozentzahl> | inherit

+
+
Werte

+
+

+ 
<Längenangabe>

+ 
Legt eine bestimmte Länge fest. Negative Werte sind nicht erlaubt.

+ 
<Prozentzahl>

+ 
Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte nicht sind erlaubt.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Beispiele

+
+
.content { padding-left: 5%; }
+.sidebox { padding-left: 10px; }
+

+
+
Browser Kompatibilität

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)

+
+
Spezifikation

+
+
+
+
Siehe auch

+
+
+
+
{{ languages( { "en": "en/CSS/padding-left", "ja": "ja/CSS/padding-left" } ) }}

diff --git a/files/de/web/css/padding-right/index.html b/files/de/web/css/padding-right/index.html
new file mode 100644
index 0000000000..a41d823d52
--- /dev/null
+++ b/files/de/web/css/padding-right/index.html
@@ -0,0 +1,76 @@
+---
+title: padding-right
+slug: Web/CSS/padding-right
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/padding-right
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die padding-right Eigenschaft legt den rechten Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen (auch: padding area).

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente außer table-*-group, table-row und table-column
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
Syntax

+
padding-right: <Längenangabe> | <Prozentzahl> | inherit

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind nicht erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte nicht sind erlaubt.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
.content { padding-right: 5%; }
+.sidebox { padding-right: 10px; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)

+
Spezifikation

+
    
+ 
  • {{ spec("http://www.w3.org/TR/CSS21/box.html#padding-properties","CSS 2.1 Box: padding", "CR") }}
    • 
+

+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/padding-right", "ja": "ja/CSS/padding-right" } ) }}

diff --git a/files/de/web/css/padding-top/index.html b/files/de/web/css/padding-top/index.html
new file mode 100644
index 0000000000..319bde784a
--- /dev/null
+++ b/files/de/web/css/padding-top/index.html
@@ -0,0 +1,76 @@
+---
+title: padding-top
+slug: Web/CSS/padding-top
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/padding-top
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die padding-top Eigenschaft legt den oberen Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen (auch: padding area).

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente außer table-*-group, table-row und table-column
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
Syntax

+
padding-top: <Längenangabe> | <Prozentzahl>  | inherit

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind nicht erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte nicht sind erlaubt.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
.content { padding-top: 5%; }
+.sidebox { padding-top: 10px; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/padding-top", "ja": "ja/CSS/padding-top" } ) }}

diff --git a/files/de/web/css/padding/index.html b/files/de/web/css/padding/index.html
new file mode 100644
index 0000000000..96406d0299
--- /dev/null
+++ b/files/de/web/css/padding/index.html
@@ -0,0 +1,125 @@
+---
+title: padding
+slug: Web/CSS/padding
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Innenabstand
+  - CSS Referenz
+  - Layout
+  - Web
+translation_of: Web/CSS/padding
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die padding Eigenschaft ist eine Kurzform für die Innenabstände aller vier Seiten eines Elementes. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen (auch: padding area).

+
+
{{cssinfo}}

+
+
Syntax

+
+
padding:   [ <Längenangabe> | <Prozentzahl> ] {1,4} | inherit

+
+
Werte

+
+
Es werden bis zu vier der folgenden Werte akzeptiert:

+
+

+ 
<Längenangabe>

+ 
Legt eine bestimmte Länge fest. Negative Werte sind nicht erlaubt.

+ 
<Prozentzahl>

+ 
Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte nicht sind erlaubt.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+ 
Ein Wert

+ 
Gilt für alle vier Seiten.

+ 
Zwei Werte

+ 
Der erste Wert bestimmt die oberen und unteren Abstände, der zweite Wert legt die Abstände rechts und links fest.

+ 
Drei Werte

+ 
Der erste Wert bestimmt den oberen Abstand, der zweite Wert legt die Abstände für rechts und links zusammen fest und der dritte Wert bestimmt den unteren Abstand.

+ 
Vier Werte

+ 
Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben, rechts, unten, links.

+

+
+
Beispiele

+
+
padding: 5%;                /* 5% Abstand auf allen Seiten */
+
+padding: 10px;              /* 10px Abstand auf allen Seiten */
+
+padding: 10px 20px;         /* oben und unten 10px */
+                            /* links und rechts 20px */
+
+padding: 10px 3% 20px;      /* oben 10px */
+                            /* links und rechts 3% */
+                            /* unten 20px */
+
+padding: 1em 3px 30px 5px;  /* oben 1em */
+                            /* rechts 3px */
+                            /* unten 30px */
+                            /* links 5px */
+

+
+
border:outset; padding:5% 1em;

+
+
Livebeispiel

+
+
HTML Inhalt

+
+
<h4>Hallo Welt!</h4>
+<h3>Der Innenabstand ist in dieser Zeile anders.</h3>

+
+
CSS Inhalt

+
+
h4 {
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3{
+  background-color: blue;
+  padding: 400px 50px 50px 400px;
+}

+
+
{{ EmbedLiveSample('Livebeispiel') }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}{{ Spec2('CSS3 Box') }}keine Änderung
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}{{ Spec2('CSS2.1') }}keine Änderung
{{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}Ursprüngliche Definition

+
+
Browserkompatiblität

+
+{{Compat("css.properties.padding")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/page-break-after/index.html b/files/de/web/css/page-break-after/index.html
new file mode 100644
index 0000000000..ef08a19da6
--- /dev/null
+++ b/files/de/web/css/page-break-after/index.html
@@ -0,0 +1,90 @@
+---
+title: page-break-after
+slug: Web/CSS/page-break-after
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/page-break-after
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die page-break-after Eigenschaft dient zur Regulierung von Seitenumbrüchen nach dem aktuellen Element.

+
    
+ 
  • Standardwert: auto
    • 
+ 
  • Anwendbar auf: Blockelemente
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: Nein
    • 
+ 
  • Medium: visuell, Seiten
    • 
+ 
  • berechneter Wert: wie festgelegt
    • 
+

+
Syntax

+
page-break-after: auto | always | avoid | left | right | inherit
+

+
Werte

+

+ 

+  auto

+ 

+  Standardwert. Automatischer Seitenumbruch.

+ 

+  always

+ 

+  Es wird immer ein Seitenumbruch nach einem Element eingefügt.

+ 

+  avoid {{ Unimplemented_inline() }}

+ 

+  Ein Seitenumbruch nach einem Element wird vermieden.

+ 

+  left {{ Unimplemented_inline() }}

+ 

+  Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten linken Seite platziert wird.

+ 

+  right {{ Unimplemented_inline() }}

+ 

+  Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten rechten Seite platziert wird.

+ 

+  inherit {{ Unimplemented_inline() }}

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
/* Überschriften auf eine neue Seite platzieren */
+h1,h2, h3 { page-break-after:always; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0) [*]
Opera7.0
Safari (WebKit)1.2 (125)

+
[*] Gecko unterstützt nur page-break-after:always. Siehe {{ bug(132035) }}

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( {"en": "en/CSS/page-break-after" } ) }}

diff --git a/files/de/web/css/page-break-before/index.html b/files/de/web/css/page-break-before/index.html
new file mode 100644
index 0000000000..7dfffaf948
--- /dev/null
+++ b/files/de/web/css/page-break-before/index.html
@@ -0,0 +1,90 @@
+---
+title: page-break-before
+slug: Web/CSS/page-break-before
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/page-break-before
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die page-break-before Eigenschaft dient zur Regulierung von Seitenumbrüchen vor dem aktuellen Element.

+
    
+ 
  • Standardwert: auto
    • 
+ 
  • Anwendbar auf: Blockelemente
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: Nein
    • 
+ 
  • Medium: visuell, Seiten
    • 
+ 
  • berechneter Wert: wie festgelegt
    • 
+

+
Syntax

+
page-break-before: auto | always | avoid | left | right | inherit
+

+
Werte

+

+ 

+  auto

+ 

+  Standardwert. Automatischer Seitenumbruch.

+ 

+  always

+ 

+  Es wird immer ein Seitenumbruch vor einem Element eingefügt.

+ 

+  avoid {{ Unimplemented_inline() }}

+ 

+  Ein Seitenumbruch vor einem Element wird vermieden.

+ 

+  left {{ Unimplemented_inline() }}

+ 

+  Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten linken Seite platziert wird.

+ 

+  right {{ Unimplemented_inline() }}

+ 

+  Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten rechten Seite platziert wird.

+ 

+  inherit {{ Unimplemented_inline() }}

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
/* Vermeide Seitenumbruch vor dem div-Element */
+div.note { page-break-before: avoid;  }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0) [*]
Opera7.0
Safari (WebKit)1.2 (125)

+
[*] Gecko unterstützt nur page-break-before:always. Siehe {{ bug(132035) }}

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( {"en": "en/CSS/page-break-before" } ) }}

diff --git a/files/de/web/css/page-break-inside/index.html b/files/de/web/css/page-break-inside/index.html
new file mode 100644
index 0000000000..6136f98b9e
--- /dev/null
+++ b/files/de/web/css/page-break-inside/index.html
@@ -0,0 +1,87 @@
+---
+title: page-break-inside
+slug: Web/CSS/page-break-inside
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/page-break-inside
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die page-break-inside Eigenschaft dient zur Regulierung von Seitenumbrüchen innerhalb des aktuellen Elements.

+
+
    
+ 
  • Standardwert: auto
    • 
+ 
  • Anwendbar auf: Blockelemente
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: Nein
    • 
+ 
  • Medium: visuell, Seiten
    • 
+ 
  • berechneter Wert: wie festgelegt
    • 
+

+
+
Syntax

+
+
page-break-inside: auto | avoid | inherit
+

+
+
Werte

+
+

+ 
auto

+ 
Standardwert. Automatischer Seitenumbruch.

+ 
avoid

+ 
Ein Seitenumbruch innerhalb eines Elements wird vermieden.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Beispiele

+
+
/* Vermeide Seitenumbruch innerhalb des Absatzes */
+p { page-break-inside: avoid;  }
+

+
+
Browser Kompatibilität

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer8.0
Firefox (Gecko)---
Opera7.0
Safari (WebKit)1.3 (312)

+
+
Spezifikation

+
+
+
+
Siehe auch

+
+
+
+
{{ languages( {"en": "en/CSS/page-break-inside" } ) }}

diff --git a/files/de/web/css/paged_media/index.html b/files/de/web/css/paged_media/index.html
new file mode 100644
index 0000000000..1a9fafe9cf
--- /dev/null
+++ b/files/de/web/css/paged_media/index.html
@@ -0,0 +1,21 @@
+---
+title: Seitennummerierte Medien
+slug: Web/CSS/Paged_Media
+tags:
+  - CSS
+  - CSS3
+  - Seitenumbrüche
+translation_of: Web/CSS/Paged_Media
+---
+
{{cssref}}

+
+
Seitennummerierte Medieneigenschaften steuern die Darstellung von Inhalten für den Druck oder andere Medien, die den Inhalt in separate Seiten aufteilen. Sie erlauben es, Seitenumbrüche zu setzen, den Druckbereich festzulegen, linke und rechte Seiten unterschiedlich zu gestalten und Umbrüche innerhalb von Elementen zu steuern. Allgemein unterstützte Eigenschaften beinhalten

+
+
    
+ 
  • {{cssxref("page-break-before")}}
    • 
+ 
  • {{cssxref("page-break-after")}}
    • 
+ 
  • {{cssxref("page-break-inside")}}
    • 
+ 
  • {{cssxref("orphans")}}
    • 
+ 
  • {{cssxref("widows")}}
    • 
+ 
  • {{cssxref("@page")}}
    • 
+

diff --git a/files/de/web/css/percentage/index.html b/files/de/web/css/percentage/index.html
new file mode 100644
index 0000000000..36cc54c434
--- /dev/null
+++ b/files/de/web/css/percentage/index.html
@@ -0,0 +1,84 @@
+---
+title: 
+slug: Web/CSS/percentage
+tags:
+  - CSS
+  - CSS Datentypen
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/percentage
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Der <percentage> CSS Datentyp repräsentiert einen Prozentwert. Viele CSS Eigenschaften akzeptieren Prozentwerte, oft um Größen bezüglich Elternobjekten zu definieren. Prozentwerte werden durch einen {{cssxref("<number>")}} Wert unmittelbar gefolgt von einem Prozentzeichen % angegeben. Wie bei allen Einheiten in CSS wird kein Leerzeichen zwischen der Zahl und dem '%' geschrieben.

+
+
Viele Längeneigenschaften verwenden Prozentwerte, wie {{ Cssxref("width") }}, {{ Cssxref("margin") }} und {{ Cssxref("padding") }}. Prozentwerte können auch in {{ Cssxref("font-size") }} vorkommen, wo die Größe des Texts direkt von der Textgröße des Elternelements abhängt.

+
+
Hinweis: Nur berechnete Werte werden vererbt. D. h. auch wenn ein Prozentwert für eine Elterneigenschaft verwendet wird, wird für die vererbte Eigenschaft ein realer Wert, wie beispielsweise eine Breite in Pixeln für einen {{cssxref("<length>")}} Wert, verwendet, nicht der Prozentwert.

+
+
Interpolation

+
+
Werte des <percentage> CSS Datentyps können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie als reale Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die Timingfunktion bestimmt, die mit der Animation verbunden ist.

+
+
Beispiele

+
+

+
<div style="background-color:#0000FF;">
+  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Breite: 50%, linker Außenabstand: 20%</div>
+  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Breite: 30%, linker Außenabstand: 60%</div>
+</div>
+

+

+
+
Ergibt:

+
+
{{ EmbedLiveSample('Beispiel_1','600','70') }}

+
+

+
<div style="font-size:18px;">
+  Text in Normalgröße (18px)
+  <span style="font-size:50%;">50%</span>
+  <span style="font-size:200%;">200%</span>
+</div>
+

+

+
+
Ergibt:

+
+
{{ EmbedLiveSample('Beispiel_2','600','50') }}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Values', '#percentages', '<percentage>') }}{{ Spec2('CSS3 Values') }}Keine signifikante Änderung zu CSS Level 2 (Revision 1)
{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }}{{ Spec2('CSS2.1') }}Keine Änderung zu CSS Level 1
{{ SpecName('CSS1', '#percentage-units', '<percentage>') }}{{ Spec2('CSS1') }} 

+
+
Browser Kompatibilität

+
+{{Compat("css.types.percentage")}}
diff --git a/files/de/web/css/pointer-events/index.html b/files/de/web/css/pointer-events/index.html
new file mode 100644
index 0000000000..29916ac619
--- /dev/null
+++ b/files/de/web/css/pointer-events/index.html
@@ -0,0 +1,184 @@
+---
+title: pointer-events
+slug: Web/CSS/pointer-events
+translation_of: Web/CSS/pointer-events
+---
+
{{CSSRef}}

+
+
Zusammenfassung

+
+
Die CSS-Eigenschaft pointer-events erlaubt es dem Autor zu steuern, unter welchen Umständen (wenn überhaupt) ein spezifisches grafisches Element target eines Mouse-Events wird. Wenn die Eigenschaft nicht gesetzt ist, werden die Eigenschaften von visiblePainted auf den SVG Inhalt angewandt.

+
+
Der Wert none ist nicht nur Indikator, dass das Element kein Ziel für Mouse-Events ist, sondern weist den Mouse-Event zusätzlich an, "durch" das Element zu gehen und stattdessen auf was auch immer auch "darunterliegend" ist, zu zielen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Keyword values */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted;
+pointer-events: visibleFill;
+pointer-events: visibleStroke;
+pointer-events: visible;
+pointer-events: painted;
+pointer-events: fill;
+pointer-events: stroke;
+pointer-events: all;
+
+/* Global values */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+

+
+
Werte

+
+

+ 
auto

+ 
Das Element verhält sich als ob die pointer-events Eigenschaft nicht spezifiziert wurde. Im SVG-Inhalt hat dieser Wert und der Wert visiblePainted den selben Effekt.

+ 
none

+ 
Das Element ist nie das Ziel von Mouse-Events;  trotzdem werden abstämmige Elemente angezielt, sofern Ihre pointer-events einen abweichenden Wert haben. In diesem Fall lösen Mouse-Events während Ihrem Weg zu/von den Nachkömmlingen während der Event-Capture/bubble-Phasen gegebenenfalls die Event-Listener des übergeordneten Elements aus.

+ 
visiblePainted

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die visibility Eigenschaft auf visible gesetzt ist, sich der Mauszeiger im Inneren (z. B. 'fill') befindet und die fill-Eigenschaft einen anderen Wert als none hat oder wenn sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befindet und die stroke-Eigenschaft einen anderen Wert als none hat.

+ 
visibleFill

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die visibility Eigenschaft auf visible gesetzt ist und sich der Mauszeiger im Inneren (z. B. 'fill') befindet. Der Wert der fill-Eigenschaft beinflusst die Event-Verarbeitung nicht.

+ 
visibleStroke

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die visibility Eigenschaft auf visible gesetzt ist und sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befindet. Der Wert der stroke-Eigenschaft beinflusst die Event-Verarbeitung nicht.

+ 
visible

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die visibility Eigenschaft auf visible gesetzt ist und sich der Mauszeiger entweder im Inneren (z. B. 'fill') oder über einem Umgrenzung (z. B. 'stroke') des Elements befindet. Die Werte der stroke- und fill-Eigenschaft beinflussen die Event-Verarbeitung nicht.

+ 
painted

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger im Inneren (z. B. 'fill') des Elements befindet, und die fill-Eigenschaft einen anderen Wert als none hat, oder sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke')  des Elements befindet, und die stroke-Eigenschaft einen anderen Wert als none hat.  Die Werte der stroke- und fill-Eigenschaft beinflussen die Event-Verarbeitung nicht.

+ 
fill

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger im Inneren (z. B. 'fill') des Elements befindet. Die Werte der stroke- und fill-Eigenschaft beinflussen die Event-Verarbeitung nicht.

+ 
stroke

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befinden. Die Werte der stroke- und fill-Eigenschaft beinflussen die Event-Verarbeitung nicht.

+ 
all

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger entweder im Inneren (z. B. 'fill') oder über einem Umgrenzung (z. B. 'stroke') des Elements befinden. Die Werte der stroke- und fill-Eigenschaft beinflussen die Event-Verarbeitung nicht.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Beispiel 1

+
+
/* Beispiel 1: Unterbinden die Reaktion von `img` auf alle Mouse-Events wie z. B. dragging, hovering, clicking */
+img {
+  pointer-events: none;
+}

+
+
Beispiel 2

+
+
Unterbinden eine Reaktion des Link-Tags mit der Eigenschaft href=http://example.com.

+
+
<ul>
+  <li><a href="https://developer.mozilla.org">MDN</a></li>
+  <li><a href="http://example.com">example.com</a></li>
+</ul>

+
+
a[href="http://example.com"] {
+  pointer-events: none;
+}

+
+
{{EmbedLiveSample('Example_2', "500", "100")}}

+
+
Anmerkungen

+
+
Es gilt zu beachten: Durch pointer-events zu verhindern, dass ein Element Ziel eines Mouse-Events wird, bedeutet nicht, dass Mouse-Event-Listeners auf diesem Element nicht ausgelößt werden oder werden können. Wenn bei einem der Kinder des Elements pointer-events explizit gesetzt wurde, um zu erlauben, dass dieses Ziel eines Mouse-Events wird, werden alle auf das Kind gerichteten Events entlang der Elternkette durch das Elternelement wandern und wohlmöglich Events des Elternelements auslösen. Natürlich wird jede Mausinteraktion auf einem Punkt des Bildschirms, welcher vom Eltern- aber nicht vom Kindelement bedeckt ist, weder vom Kind noch vom Elternelement eingefangen (sie wird durch das Elternelement hindurchgehen und auf das zielen, was immer "darunterliegend" ist).

+
+
Wir würden gerne feingranularere Kontrolle (als lediglich auto und none) über die Teile eines Elements welche Mouse-Events "einfangen" und wann, im HTML bereitstellen. Um uns bei der Entscheidung zu helfen, welche pointer-events für HTML weiter ausgebaut werden sollten, oder wenn Sie irgend welche speziellen Wünsche haben, was Ihnen diese Eigenschaft ermöglichen sollte, dann fügen Sie diese bitte dem Use cases Abschnitt dieser Wiki Seite hinzu (Machen Sie sich über die Ordentlichkeit keine Sorgen).

+
+
Diese Eigenschaft kann auch benutzt werden um bessere Bildraten beim Scrollen zu erzielen. Tatsächlich, während des Scrollens fährt die Maus über einige Elemente auf denen der hover-Effekt angewendet wird. Diese Effekte hingegen bleiben meist unbemerkt und resultieren trotzdem meist in hakeligen Scrollen.  pointer-events: none auf den body anzuwenden deaktiviert Mouse-Events inkl. hover und wirkt sich positiv auf die Flüssigkeit des Scrollens. 

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationenStatusKommentar
{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG1.1')}} 

+
+
Seine Erweiterung für HTML-Elemente, trotz Präsenz in frühen Entwürfen von CSS Basic User Interface Module Level 3, wurde auf sein level 4 erhoben.

+
+
Browser-Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
SVG support1.0{{CompatGeckoDesktop("1.8")}}11.09.0 (2.0)3.0 (522)
HTML/XML content2.0{{CompatGeckoDesktop("1.9.2")}} [1]11.015.04.0 (530)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

+

+
+
[1] Vor Firefox 41, standardmäßig deaktiviert. Seit Firefox 41, standardmäßig auf Desktop aktiviert, allerdings nur in Nightly builds.

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/position/index.html b/files/de/web/css/position/index.html
new file mode 100644
index 0000000000..7acf3f3009
--- /dev/null
+++ b/files/de/web/css/position/index.html
@@ -0,0 +1,104 @@
+---
+title: position
+slug: Web/CSS/position
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Positionierung
+  - Referenz
+translation_of: Web/CSS/position
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die position Eigenschaft legt die Positionsart eines Elements fest. Für die Positionierung selbst werden die Eigenschaften top, right, bottom oder left verwendet.

+
+
Ein positioniertes Element ist ein Element für das absolute, fixed oder relative als position definiert wurde.

+ Ein absolut positioniertes Element ist ein Element für das absolute oder fixed als position definiert wurde.

+
+
{{cssinfo}}

+
+
Syntax

+
+
{{csssyntax}}
+

+
+
Werte

+
+

+ 
static

+ 
Standardwert. Das Element ist im normalen Fluss. Die Eigenschaften top, right, bottom oder left haben keine Auswirkungen.

+ 
relative

+ 
Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, da an der ursprünglichen Position Platz gelassen wird. Bei  table-*-group, table-row, table-column, table-cell, und table-caption Elementen ist kein Effekt definiert.

+ 
absolute

+ 
Das Element wird aus dem normalen Fluss gelöst und unabhängig verschoben. Dabei können andere Elemente verdeckt werden. Diese verhalten sich so, als ob das Element nicht vorhanden wäre und lassen keinen Platz für das Element.

+ 
sticky {{Experimental_inline}}

+ 
Eine Mischung zwischen fixed und relative: Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, solange es sich innerhalb des Viewports befindet. Sobald es sich ausserhalb befindet, wird das Element aus dem normalen Fluss gelöst und bleibt so beim Scrollen an seiner fest definierten Position.

+ 
fixed

+ 
Die Verschiebung orientiert sich am Viewport. Das Element wird aus dem normalen Fluss gelöst und bleibt auch beim Scrollen an seiner fest definierten Position. Beim Drucken wird das Element auf jeder Seite an der positionierten Stelle angezeigt.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Beispiele

+
+
Das folgende Beispiel verdeutlicht den Unterschied zwischen position: absolute und position: fixed. Während das absolut positionierte Element beim Scrollen mitwandert, bleibt das mit fixed positionierte Element fest an seiner Position.

+
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Position absolute und fixed</title>
+<style type="text/css">
+p {font-size:30px; line-height:3em;}
+div.pos {width:49%; text-align:center; border:2px solid #00f;}
+div#abs {position:absolute; bottom:0; left:0;}
+div#fix {position:fixed; bottom:0; right:0;}
+</style>
+</head>
+<body>
+  <p>This<br>is<br>some<br>tall,<br>tall,
+    <br>tall,<br>tall,<br>tall<br>content.</p>
+  <div id="fix" class="pos"><p>Fixed</p></div>
+  <div id="abs" class="pos"><p>Absolute</p></div>
+</body>
+</html>
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS3 Positioning')}}{{Spec2('CSS3 Positioning')}}sticky hinzugefügt

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.position")}}

+
+
Siehe auch

+
+
+
+
{{ languages( { "en": "en/CSS/position", "fr": "fr/CSS/position", "es": "es/CSS/position" } ) }}

diff --git a/files/de/web/css/position_value/index.html b/files/de/web/css/position_value/index.html
new file mode 100644
index 0000000000..6ed01c98ab
--- /dev/null
+++ b/files/de/web/css/position_value/index.html
@@ -0,0 +1,86 @@
+---
+title: 
+slug: Web/CSS/position_value
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/position_value
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Der <position> CSS Datentyp beschreibt eine Koordinate im 2D-Raum, die dazu verwendet wird, die Position relativ zu einer Box zu setzen.

+
+
Eine bestimmte Position kann durch zwei Schlüsselwörter mit bestimmten Versätzen angegeben werden. Ein Schlüsselwort repräsentiert einen Rand der Elementbox oder die Mittellinie zwischen zwei Rändern: left, right, top, bottom oder center (was entweder die Mitte zwischen dem linken und rechten Rand repräsentiert oder die Mitte zwischen dem oberen und unteren Rand, abhängig vom Kontext).

+
+
{{experimental_inline}}Ein Versatz kann entweder ein relativer Wert sein, ausgedrückt durch einen {{cssxref("<percentage>")}} Wert, oder ein absoluter {{cssxref("<length>")}} Wert. Positive Werte werden nach rechts oder unten versetzt, je nachdem, was zutrifft. Negative Werte werden in die anderen Richtungen versetzt.

+
+
Die endgültige Position, die durch den <position> Wert beschrieben wird, muss nicht innerhalb der Elementbox liegen.

+
+
Falls ein Versatz ohne zugehöriges Schlüsselwort angegeben wurde, wird für es center angenommen.

+
+
Interpolation

+
+
Die Werte für die Abzisse und die Ordinate werden unabhängig voneinander interpoliert. Da die Geschwindigkeit für beide durch dieselbe {{cssxref("<timing-function>")}} definiert wird, folgt der Punkt einer Linie.

+
+
Werte

+
+
/* 1-Wert-Syntax */
+Schlüsselwort                  /* Der zugehörige Rand, die andere Richtung verweist auf center, die Mitte des Randes. */
+<length> oder <percentage> /* Die Position auf der x-Achse, 50% für die y-Achse. */
+
+/* 2-Werte-Syntax */
+Schlüsselwort Schlüsselwort          /* Ein Schlüsselwort für jede Richtung, die Reihenfolge ist unwichtig. */
+Schlüsselwort Wert            /* Der Wert ist der Versatz für den Rand, der durch das Schlüsselwort definiert wird. */
+

+
+
Formale Syntax

+
+
[ [ left | center | right | top | bottom | <percentage> | <length> ] |
+                  [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] |
+                  [ center | [ left | right ] [ <percentage> | <length> ]? ] &&
+                  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
+                ]
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Values', '#position', '<position>')}}{{Spec2('CSS3 Values')}}Listed die Links zu beiden Definitionen auf mit der Voraussetzung, dass diese koherent sind: falls {{SpecName('CSS3 Backgrounds')}} unterstützt wird, muss deren Definition von <position> ebenfalls verwendet werden.
{{SpecName('CSS3 Backgrounds', '#position', '<position>')}}{{Spec2('CSS3 Backgrounds')}}Definiert <position> explizit und erweitert es um die Unterstützung von Versätzen von einem beliebigen Rand.
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}{{Spec2('CSS2.1')}}Erlaubt die Kombination von einem Schlüsselwort mit einem {{cssxref("<length>")}} oder einem {{cssxref("<percentage>")}} Wert.
{{SpecName('CSS1', '#background-position', '<position>')}}{{Spec2('CSS1')}}Definiert <position> anonym als Wert von {{cssxref("background-position")}}.

+
+
Browser Kompatibilität

+
+{{Compat("css.types.position")}}
diff --git a/files/de/web/css/property_template/index.html b/files/de/web/css/property_template/index.html
new file mode 100644
index 0000000000..57b2483609
--- /dev/null
+++ b/files/de/web/css/property_template/index.html
@@ -0,0 +1,165 @@
+---
+title: Eigenschaft Vorlage
+slug: Web/CSS/Property_Template
+tags:
+  - CSS
+  - CSS Referenz
+  - MDN Meta
+translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template
+---
+
{{MDNSidebar}}
{{ CSSRef() }}

+
+
Übersicht

+
+
Eine Beschreibung der Eigenschaft, welche erklärt was diese Eigenschaft bewirkt.

+
+
(Falls vorhanden) Wichtige Informationen zu dieser Eigenschaft

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+property: value1;
+property: value2;
+
+/* <length> Werte */
+property: 12.8em;
+
+/* Globale Werte */
+property: inherit; <-- To remember those are a possible values
+property: initial;
+property: unset;
+

+
+
<Wert>: wert | wert2 | wert3 | wert2

+
+
Werte

+
+

+ 
wert1 {{ gecko_minversion_inline("9.9") }}

+ 
Erläuterung.

+ 
wert2

+ 
....

+

+
+
(Falls vorhanden) Mozilla Erweiterungen

+
+

+ 
-moz-*

+ 
Erklärung

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Beispiel 1

+
+
CSS

+
+
ElementName {
+  Eigenschaft: Wert;
+  dazu: "Beispiel";
+  Traum: 10000000mm;
+  Liebe: "Gefahr";
+}

+
+
HTML

+
+
<ElementName>foo bar</ElementName>

+
+
Ergebnis

+
+
{{EmbedLiveSample("Beispiel_1")}}

+
+
Beispiel 2 {{ gecko_minversion_inline("9.9") }}

+
+
ElementName {
+  eigenschaft: wert;
+  /* ... */
+}

+
+
Spezifikationen

+
+
Benutze ausschließlich die Standardtabelle. Füge andere Spezifikationen am Ende an. Benutze das Makro \{{SpecName()}} für den Name und \{{Spec2()}} für den Status. Auf diese Weise wird der Tabelleninhalt automatisch angepasst, sobald sich der Status einer Spezifikation ändert.

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS3 Animations", "#fake-link", "fake-value")}}{{Spec2("CSS3 Animations")}}Keine Änderung
{{SpecName("CSS2.1", "#fake-link", "fake value")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable()}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}100{{CompatUnknown}}{{CompatUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}100{{CompatUnknown}}{{CompatUnknown}}

+

+
+
Siehe auch

+
+
    
+ 
  • Links zu verwandten Eigenschaften
    • 
+

diff --git a/files/de/web/css/pseudo-classes/index.html b/files/de/web/css/pseudo-classes/index.html
new file mode 100644
index 0000000000..ecbf7e24dc
--- /dev/null
+++ b/files/de/web/css/pseudo-classes/index.html
@@ -0,0 +1,122 @@
+---
+title: Pseudo-Klassen
+slug: Web/CSS/Pseudo-classes
+translation_of: Web/CSS/Pseudo-classes
+---
+
{{CSSRef}}

+
+
Eine Pseudoklasse in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand abzufragen. So steht beispielsweise {{ Cssxref(":hover") }} für Elemente, die gerade mit dem Mauszeiger berührt werden.

+
+
Mit Pseudoklassen und Pseudoelementen lässt sich eine Seite nicht nur in Bezug auf die Struktur des Inhalts gestalten, sondern auch im Bezug auf andere Faktoren wie zum Beispiel den Browserverlauf  ({{ cssxref(":visited") }}), eingegebene Formulardaten ({{ cssxref(":checked") }}) oder die Position des Mauszeigers ({{ cssxref(":hover") }}).

+
+
Syntax

+
+
selector:pseudo-class {
+  property: value;
+}
+

+
+
Übersicht der standardisierten Pseudoklassen

+
+

+
    
+ 
  • {{ Cssxref(":active") }}
    • 
+ 
  • {{ Cssxref(":checked") }}
    • 
+ 
  • {{ Cssxref(":default") }}
    • 
+ 
  • {{ Cssxref(":dir", ":dir()")}}
    • 
+ 
  • {{ Cssxref(":disabled") }}
    • 
+ 
  • {{ Cssxref(":empty") }}
    • 
+ 
  • {{ Cssxref(":enabled") }}
    • 
+ 
  • {{ Cssxref(":first") }}
    • 
+ 
  • {{ Cssxref(":first-child") }}
    • 
+ 
  • {{ Cssxref(":first-of-type") }}
    • 
+ 
  • {{ Cssxref(":fullscreen") }}
    • 
+ 
  • {{ Cssxref(":focus") }}
    • 
+ 
  • {{ Cssxref(":hover") }}
    • 
+ 
  • {{ Cssxref(":indeterminate") }}
    • 
+ 
  • {{ Cssxref(":in-range") }}
    • 
+ 
  • {{ Cssxref(":invalid") }}
    • 
+ 
  • {{ Cssxref(":lang", ":lang()") }}
    • 
+ 
  • {{ Cssxref(":last-child") }}
    • 
+ 
  • {{ Cssxref(":last-of-type") }}
    • 
+ 
  • {{ Cssxref(":left") }}
    • 
+ 
  • {{ Cssxref(":link") }}
    • 
+ 
  • {{ Cssxref(":not", ":not()") }}
    • 
+ 
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • 
+ 
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • 
+ 
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • 
+ 
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • 
+ 
  • {{ Cssxref(":only-child") }}
    • 
+ 
  • {{ Cssxref(":only-of-type") }}
    • 
+ 
  • {{ Cssxref(":optional") }}
    • 
+ 
  • {{ Cssxref(":out-of-range") }}
    • 
+ 
  • {{ Cssxref(":read-only") }}
    • 
+ 
  • {{ Cssxref(":read-write") }}
    • 
+ 
  • {{ Cssxref(":required") }}
    • 
+ 
  • {{ Cssxref(":right") }}
    • 
+ 
  • {{ Cssxref(":root") }}
    • 
+ 
  • {{ Cssxref(":scope") }}
    • 
+ 
  • {{ Cssxref(":target") }}
    • 
+ 
  • {{ Cssxref(":valid") }}
    • 
+ 
  • {{ Cssxref(":visited") }}
    • 
+

+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{ SpecName('Fullscreen') }}{{ Spec2('Fullscreen') }}:fullscreen hinzugefügt
{{ SpecName('HTML WHATWG') }}{{ Spec2('HTML WHATWG') }}Keine Änderungen seit {{ SpecName('HTML5 W3C') }}.
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}:any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column()und :matches() hinzugefügt.

+    Keine Änderungen der bisherigen Pseudoklassen aus {{SpecName('CSS3 Selectors')}} und {{SpecName('HTML5 W3C')}}.
{{ SpecName('HTML5 W3C') }}{{ Spec2('HTML5 W3C') }}:link, :visited, :active, :enabled, :disabled, :checked und :indeterminate geändert

+    :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write und :dir() hinzugefügt
{{ SpecName('CSS3 Basic UI') }}{{ Spec2('CSS3 Basic UI') }}:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only und :read-write hinzugefügt
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}:target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty und :not() 

+    Defined the syntax of :enabled, :disabled, :checked und :indeterminate, hinzugefügt.

+    Keine Änderungen der bisherigen Pseudoklassen aus {{SpecName('CSS2.1')}}.
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}:lang(), :first-child, :hover und :focus hinzugefügt.

+    Keine Änderungen der bisherigen Pseudoklassen aus {{SpecName('CSS1')}}.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}:link, :visited und :active hinzugefügt

diff --git a/files/de/web/css/pseudo-elements/index.html b/files/de/web/css/pseudo-elements/index.html
new file mode 100644
index 0000000000..399548ad95
--- /dev/null
+++ b/files/de/web/css/pseudo-elements/index.html
@@ -0,0 +1,78 @@
+---
+title: Pseudoelemente
+slug: Web/CSS/Pseudo-elements
+translation_of: Web/CSS/Pseudo-elements
+---
+
{{ CSSRef() }}

+
+
Summary

+
+
Wie auch {{ Cssxref("pseudo-classes") }} können  Pseudoelemente einem Selektor hinzugefügt werden, aber statt einzelen Zustände ermöglichen Sie das gestalten eines einzelnen Teils von einem Element. Das Pseudoelement {{ Cssxref("::first-line") }} richtet sich bspw. nur an die erste Zeile eines Elements.

+
+
Syntax

+
+
selector::pseudo-element {
+  property: value;
+}

+
+
Pseudoelemente

+
+
    
+ 
  • {{ Cssxref("::after") }}
    • 
+ 
  • {{ Cssxref("::before") }}
    • 
+ 
  • {{ Cssxref("::first-letter") }}
    • 
+ 
  • {{ Cssxref("::first-line") }}
    • 
+ 
  • {{ Cssxref("::selection") }}
    • 
+

+
+
Hinweis

+
+
Pseudoelemente sind sowohl mit zwei Doppelpunkten (::), als auch mit nur einem (:) anzutreffen. In der CSS3 Spezifikation wurde darin der Unterschied zwischen Pseudoelement und Pseudoklasse festgelegt. Die meisten Browser unterstützten aber beide Varianten.

+
+
Hinweis: ::selection muss zwingend mit zwei Doppelpunkten (::) geschrieben werden.

+
+
Es ist immer nur ein Pseudoelement pro Selektor möglich.

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
BrowserLowest VersionSupport of
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element

+
+
 

diff --git a/files/de/web/css/quotes/index.html b/files/de/web/css/quotes/index.html
new file mode 100644
index 0000000000..884ed4cf44
--- /dev/null
+++ b/files/de/web/css/quotes/index.html
@@ -0,0 +1,86 @@
+---
+title: quotes
+slug: Web/CSS/quotes
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/quotes
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die quotes CSS Eigenschaft gibt an, wie User Agents Anführungszeichen darstellen sollen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwert */
+quotes: none;
+
+/* <string> Werte */
+quotes: "«" "»"         /* Setzt open-quote und close-quote auf französische Anführungszeichen */
+quotes: "«" "»" "‹" "›" /* Setzt zwei Ebenen von Anführungszeichen */
+
+/* Globale Werte */
+quotes: inherit;
+quotes: initial;
+quotes: unset;
+

+
+
Werte

+
+

+ 
none

+ 
Die open-quote und close-quote Werte der {{cssxref("content")}} Eigenschaft erzeugen keine Anführungszeichen.

+ 
[<string> <string>]+

+ 
Ein oder mehrere Paare von {{cssxref("<string>")}} Werten für open-quote und close-quote. Das erste Paar stellt die äußere Ebene des Zitats dar, das zweite Paar das erste Unterebene, das nächste die dritte Ebene usw.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
q { quotes: '"' '"' "'" "'" }
+q:before { content: open-quote }
+q:after  { content: close-quote }
+

+
+
Hinweise

+
+
Seit Firefox 3.5 kann der ursprüngliche Wert der quotes Eigenschaft über -moz-initial gelesen werden. Dies war in früheren Versionen von Firefox nicht möglich.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS2.1', 'generate.html#quotes', 'quotes')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.quotes")}}
+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("content")}}
    • 
+

diff --git a/files/de/web/css/ratio/index.html b/files/de/web/css/ratio/index.html
new file mode 100644
index 0000000000..e4052bb133
--- /dev/null
+++ b/files/de/web/css/ratio/index.html
@@ -0,0 +1,79 @@
+---
+title: 
+slug: Web/CSS/ratio
+tags:
+  - CSS
+  - CSS Datentypen
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/ratio
+---
+
{{CSSRef}}

+
+
Der <ratio> CSS Datentyp, der zur Beschreibung von Seitenverhältnissen in Media Queries verwendet wird, bezeichnet das Verhältnis zwischen zwei einheitenlosen Werten. Es ist ein strikt positiver {{cssxref("<integer>")}} Wert gefolgt von einem Slash ('/', Unicode U+002F SOLIDUS) und einem zweiten strikt positivem {{cssxref("<integer>")}}. Vor und nach dem Schrägstrich können Leerzeichen stehen.

+
+
Beispiele

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
 VerhältnisVerwendung
Ratio4_3.png4/3Traditionelles TV-Format im 20sten Jahrhundert.
Ratio16_9.png16/9Modernes Breitbild-TV-Format.
Ratio1_1.85.png185/100 = 91/50

+    (Nicht-Ganzzahl-Dividenden und -Divisoren sind nicht erlaubt.)		Die häufigsten Filmformate seit den 1960ern.
Ratio1_2.39.png239/100

+    (Nicht-Ganzzahl-Dividenden und -Divisoren sind nicht erlaubt.)		Das anamorphe Breitbild-Filmformat.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Media Queries', '#values', '<ratio>')}}{{Spec2('CSS3 Media Queries')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.types.ratio")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/resize/index.html b/files/de/web/css/resize/index.html
new file mode 100644
index 0000000000..82162a06bf
--- /dev/null
+++ b/files/de/web/css/resize/index.html
@@ -0,0 +1,196 @@
+---
+title: resize
+slug: Web/CSS/resize
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/resize
+---
+
{{CSSRef}}

+
+

+
+

+
Die CSS Eigenschaft resize CSS legt fest, ob ein Element größenveränderbar ist, und wenn ja, in welche Richtungen.

+
+
{{EmbedInteractiveExample("pages/css/resize.html")}}

+
+
+
+
resize gilt nicht für die folgenden Elemente:

+
+
    
+ 
  • Inline Elemente
    • 
+ 
  • Blockelemente, für die die Eigenschaft {{cssxref("overflow")}} auf visible gesetzt ist
    • 
+

+

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* Globale Werte */
+resize: inherit;
+resize: initial;
+resize: unset;
+

+
+
Die Eigenschaft resize wird als ein einzelner Schlüsselwortwert aus der folgenden Liste angegeben.

+
+
Werte

+
+

+ 
none

+ 
Das Element bietet keine vom Benutzer steuerbare Möglichkeit zur Größenänderung des Elements.

+ 
both

+ 
Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, sowohl die horizontale als auch die vertikale Größe des Elements zu ändern.

+ 
horizontal

+ 
Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale Größe des Elements zu ändern.

+ 
vertical

+ 
Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, die vertikale Größe des Elements zu ändern.

+ 
block {{experimental_inline}}

+ 
Abhängig von den Werten für {{cssxref("writing-mode")}} und {{cssxref("direction")}}, zeigt das Element eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale oder vertikale Größe des Elements in Blockrichtung zu ändern.

+ 
inline {{experimental_inline}}

+ 
Abhängig von den Werten für {{cssxref("writing-mode")}} und {{cssxref("direction")}}, zeigt das Element eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale oder vertikale Größe des Elements in Inlinerichtung zu ändern.

+

+
+
Hinweis: resize wird nicht auf Blöcke angewendet, für die die {{cssxref("overflow")}} Eigenschaft auf visible gesetzt ist.

+
+
Formale Definition

+
+
{{cssinfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Deaktivierung der Größenänderungsmöglichkeit von textareas

+
+
In vielen Browsern sind {{HTMLElement("textarea")}} Elemente standardmäßig in der Größe veränderbar. Sie können dieses Verhalten mit der resize Eigenschaft überschreiben.

+
+
HTML

+
+
<textarea>Type some text here.</textarea>

+
+
CSS

+
+
textarea {
+  resize: none; /* Disables resizability */
+}  

+
+

+
+
+
+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}

+
+
Verwendung von resize bei beliebigen Elementen

+
+
Sie können die Eigenschaft resize verwenden, um die Größe eines beliebigen Elements zu ändern. Im folgenden Beispiel enthält ein größenveränderbares {{HTMLElement("div")}} einen größenveränderbaren Absatz ({{HTMLElement("p")}} Element).

+
+
HTML

+
+
<div class="resizable">
+  <p class="resizable">
+    This paragraph is resizable in all directions, because
+    the CSS `resize` property is set to `both` on this element.
+  </p>
+</div>

+
+
CSS

+
+
.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}  

+
+
+

+
<div class="resizable">
+  <p class="resizable">
+    This paragraph is resizable in all directions, because
+    the CSS `resize` property is set to `both` on this element.
+  </p>
+</div>

+
+
.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}  

+
+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Logical Properties', '#resize', 'resize')}}{{Spec2('CSS Logical Properties')}}Fügt die Werte block und inline hinzu.
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.resize")}}

+
+
Siehe auch

+
+
    
+ 
  • {{HTMLElement("textarea")}}
    • 
+

diff --git a/files/de/web/css/resolution/index.html b/files/de/web/css/resolution/index.html
new file mode 100644
index 0000000000..d1f3c3512e
--- /dev/null
+++ b/files/de/web/css/resolution/index.html
@@ -0,0 +1,145 @@
+---
+title: 
+slug: Web/CSS/resolution
+translation_of: Web/CSS/resolution
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Der <resolution> CSS Datentyp, der in Media Queries verwendet wird, kennzeichnet die Pixeldichte eines Ausgabemediums, seine Auflösung. Er ist eine {{cssxref("<number>")}}, der direkt eine Auflösungseinheit (dpi, dpcm, ...) folgt. Wie bei allen CSS Einheiten gibt es kein Leerzeichen zwischen der Einheit und der Zahl.

+
+
Auf Bildschirmen ist die Länge relativ zu CSS Zoll, Zentimetern oder Pixeln, nicht zu physikalischen Werten.

+
+
Auch wenn alle Einheiten die gleiche Auflösung für den Wert 0 darstellen, darf die Einheit in diesem Fall nicht weggelassen werden, da sie keine {{cssxref("<length>")}} ist: 0 ist ungültig und repräsentiert weder 0dpi, 0dpcm, noch 0dppx.

+
+
Einheiten

+
+

+ 
dpi

+ 
Diese Einheit repräsentiert die Anzahl an Punkten pro Zoll. Ein Bildschirm hat typischerweise 72 oder 96dpi; ein gedrucktes Dokument erreicht normalerweise weit höhrere dpi Zahlen. Da 1 Zoll 2.54cm entspricht, 1dpi ≈ 0.39dpcm.

+ 
dpcm

+ 
Diese Einheit repräsentiert die Anzahl an Punkten pro Zentimeter. Da 1 Zoll 2.54cm entspricht, 1dpcm ≈ 2.54dpi.

+ 
dppx

+ 
Diese Einheit repräsentiert die Anzahl an Punkten pro px Einheit. Wegen dem festen 1:96 Verhältnis von CSS in zu CSS px, ist 1dppx äquivalent zu 96dpi, dies enspricht der Standardauflösung von Bildern, die in CSS dargestellt werden, wie in {{cssxref("image-resolution")}} definiert.

+

+
+
Beispiele

+
+
Hier sind einige korrekte Verwendungen von <resolution> Werten:

+
+
96dpi                                              Korrekte Verwendung: ein {{cssxref("<number>")}} Wert (hier ein {{cssxref("<integer>")}}) gefolgt von einer Einheit.
+@media print and (min-resolution: 300dpi) { ... }  Korrekte Verwendung im Kontext einer Media Query.
+

+
+
Hier sind einige inkorrekte Verwendungen:

+
+
72 dpi                                             Falsch: Keine Leerzeichen erlaubt zwischen {{cssxref("<number>")}} und der Einheit.
+ten dpi                                            Falsch: Nur Ziffern dürfen verwendet werden.
+0                                                  Falsch: Die Einheit kann nur für 0 Werte weggelassen werden, die einen {{cssxref("<length>")}} Wert darstellen.
+

+
+
Spezifization

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}Faktorisierung des Typs in einer allgemeineren Spezifikation. Keine Änderung.
{{SpecName('CSS3 Images', '#resolution-units', '<resolution>')}}{{Spec2('CSS3 Images')}}dppx Einheit hinzugefügt
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung293.5 (1.9.1) [**]99.5{{CompatNo}} [*]
dppx29{{CompatGeckoDesktop("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}} [*]yes?yes{{CompatNo}} [*]
dppx{{CompatUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}

+

+
+
[*] Die Webkit Engine unterstützt die CSS Auflösungsabfrage, wie sie in der Spezifikation definiert wird, nicht. Die Benutzung der nicht standardisierten device-pixel-ratio Abfrage wird für Safari Browser benötigt, siehe Bug 16832.

+
+
[**] Vor Firefox 8 (Gecko 8.0) hat die Eigenschaft fälschlicherweise nur CSS {{cssxref("<integer>")}} Größenangaben erlaubt, gefolgt von der Einheit. Ab dieser Version werden alle gültigen CSS Größenangaben unterstützt ({{cssxref("<number>")}} direkt gefolgt von der Einheit).

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/right/index.html b/files/de/web/css/right/index.html
new file mode 100644
index 0000000000..0eee367917
--- /dev/null
+++ b/files/de/web/css/right/index.html
@@ -0,0 +1,97 @@
+---
+title: right
+slug: Web/CSS/Right
+tags:
+  - CSS
+  - CSS Positionierung
+  - Layout
+  - NeedsLiveSample
+  - Referenz
+  - Web
+translation_of: Web/CSS/right
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die right CSS Eigenschaft gibt einen Teil der Position eines positionierten Elements an.

+
+
Bei absolut positionierten Elementen ({{Cssxref("position")}}: absolute oder position: fixed) gibt sie den Abstand zwischen der rechten, äußeren Kante des Elements und der rechten Kante des umschließenden Blocks an.

+
+
Bei relativ positionierten Elementen (position: relative) wird das Element aus seiner normalen Position im Elementfluss verschoben. Dabei gilt: Wenn die {{Cssxref("left")}} Eigenschaft definiert wurde, überschreibt diese den Wert der {{Cssxref("right")}} Eigenschaft. Wenn left den Wert auto besitzt, ist der berechnete Wert für right gleich dem Wert von left mit umgedrehtem Vorzeichen.

+ Wenn beide Eigenschaften einen anderen Wert als auto besitzen, wird right ignoriert und auf auto gesetzt.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Werte

+
+

+ 
<Länge>

+ 
Eine Längenangabe, die positive und negative Werte sowie Null erlaubt.

+ 
<Prozentzahl>

+ 
Eine prozentuale Angabe, die sich auf den umschließenden Block bezieht. Die Prozentangabe kann nur berücksichtigt werden, wenn die Breite des umschließenden Blocks festgelegt wurde, andernfalls wird die definierte Prozentzahl wie auto behandelt.

+ 
auto

+ 
Standardwert. Die horizontale Position des Elementes wird nicht weiter beeinflusst, es sei denn durch left, margin, padding oder durch die Breite.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Formelle Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
#left {
+  width: 100px;
+  height: 100px;
+  background-color: #FFC7E4;
+  position: relative;
+  top: 20px;
+  left: 20px;
+}
+
+#right {
+  width: 100px;
+  height: 100px;
+  background-color: #FFD7C2;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+}

+
+
<div id="left">links</div>
+<div id="right">rechts</div>
+

+
+
{{ EmbedLiveSample('Beispiele', 500, 220) }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}{{Spec2('CSS3 Transitions')}}Definiert right als animierbar.
{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.right")}}
diff --git a/files/de/web/css/row-gap/index.html b/files/de/web/css/row-gap/index.html
new file mode 100644
index 0000000000..c6754e69ad
--- /dev/null
+++ b/files/de/web/css/row-gap/index.html
@@ -0,0 +1,163 @@
+---
+title: row-gap (grid-row-gap)
+slug: Web/CSS/row-gap
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Grid
+  - CSS-Eigenschaften
+  - Referenz
+  - row-gab
+translation_of: Web/CSS/row-gap
+---
+
{{CSSRef}}

+
+
Die CSS-Eigenschaft row-gap legt die Größe der Zwischenräume ({{glossary("gutters","gutter")}}) zwischen den Grid-Reihen eines Elements fest.

+
+
{{EmbedInteractiveExample("pages/css/row-gap.html")}}

+
+
+
+

+
CSS Grid Layout definierte zunächst die Eigenschaft {{CSSxRef('grid-row-gap')}}}. Diese vorangestellte Eigenschaft wird durch row-gap ersetzt. Um jedoch Browser zu unterstützen, die grid-row-gap und nicht row-gap für grid implementiert haben, müssen Sie die Eigenschaft mit Präfix verwenden, wie im obigen interaktiven Beispiel.

+

+
+
Syntax

+
+
/* <length> Längen-Werte */
+row-gap: 20px;
+row-gap: 1em;
+row-gap: 3vmin;
+row-gap: 0.5cm;
+
+/* <percentage> Prozent-Werte*/
+row-gap: 10%;
+
+/* Globale Werte */
+row-gap: inherit;
+row-gap: initial;
+row-gap: unset;
+

+
+
Values

+
+

+ 
<length-percentage>

+ 
Ist die Breite des Abstands (gutter) zwischen den Reihen. {{CSSxRef("<percentage>")}} Werte sind relativ zur Dimension des Elements.

+

+
+
Formal syntax

+
+
{{CSSSyntax}}

+
+
Examples

+
+
Flex layout

+
+
{{SeeCompatTable}}

+
+
HTML

+
+
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+

+
+
CSS

+
+
#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  row-gap: 20px;
+}
+
+#flexbox > div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+}
+

+
+
Result

+
+
{{EmbedLiveSample('Flex_layout', "auto", "120px")}}

+
+
Grid layout

+
+
HTML

+
+
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>

+
+
CSS

+
+
#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(3, 1fr);
+  row-gap: 20px;
+}
+
+#grid > div {
+  border: 1px solid green;
+  background-color: lime;
+}
+

+
+
+
+
Result

+
+
{{EmbedLiveSample('Grid_layout', 'auto', 120)}}

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusBemerkung
{{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}}{{Spec2("CSS3 Box Alignment")}}Erstdefinition

+
+
{{CSSInfo}}

+
+
Browser-Kompatibilität

+
+
+
+
Support in Flex layout

+
+
{{Compat("css.properties.row-gap.flex_context")}}

+
+
Support in Grid layout

+
+
{{Compat("css.properties.row-gap.grid_context")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/ruby-align/index.html b/files/de/web/css/ruby-align/index.html
new file mode 100644
index 0000000000..f38d8257bb
--- /dev/null
+++ b/files/de/web/css/ruby-align/index.html
@@ -0,0 +1,153 @@
+---
+title: ruby-align
+slug: Web/CSS/ruby-align
+tags:
+  - CSS
+  - CSS Referenz
+  - CSS Ruby
+  - Eigenschaft
+  - Referenz
+translation_of: Web/CSS/ruby-align
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
Übersicht

+
+
Die ruby-align CSS Eigenschaft definiert die Verteilung der verschiedenen {{Glossary("Ruby")}}elemente über die Basis.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+ruby-align: start;
+ruby-align: center;
+ruby-align: space-between;
+ruby-align: space-around;
+
+/* Globale Werte */
+ruby-align: inherit;
+ruby-align: initial;
+ruby-align: unset;
+

+
+
Werte

+
+

+ 
start

+ 
Ist ein Schlüsselwort, dass angibt, dass die Anmerkung am dem Start des Basistexts ausgerichtet wird.

+ 
center

+ 
Ist ein Schlüsselwort, dass angibt, dass die Anmerkung mittig am Basistext ausgerichtet wird.

+ 
space-between

+ 
Ist ein Schlüsselwort, das angibt, dass der zusätzliche Abstand zwischen die Elemente der Anmerkung verteilt wird.

+ 
space-around

+ 
Ist ein Schlüsselwort, das angibt, dass der zusätzliche Abstand zwischen und um die Elemente der Anmerkung verteilt wird.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Dieses HTML wird mit jedem Wert von ruby-align unterschiedlich dargestellt:

+
+
<ruby>
+  <rb>Dies ist ein langer Text als Beispiel</rb>
+  <rp>（</rp><rt>kurzes Ruby</rt><rp>）</rp>
+</ruby>
+

+
+
Ruby am Start des Basistexts ausgerichtet

+
+
+
+
ruby {
+    ruby-align:start;
+}

+
+
Dies ergibt folgende Ausgabe:

+
+
{{EmbedLiveSample("Ruby_am_Start_des_Basistexts_ausgerichtet", 240, 40)}}

+
+
Ruby mittig am Basistext ausgerichtet

+
+
+
+
ruby {
+    ruby-align:center;
+}

+
+
Dies ergibt folgende Ausgabe:

+
+
{{EmbedLiveSample("Ruby_mittig_am_Basistext_ausgerichtet", 240, 40)}}

+
+
Zusätzlicher Abstand verteilt zwischen Rubyelementen

+
+
+
+
ruby {
+    ruby-align:space-between;
+}

+
+
Dies ergibt folgende Ausgabe:

+
+
{{EmbedLiveSample("Zusätzlicher_Abstand_verteilt_zwischen_Rubyelementen", 240, 40)}}

+
+
Zusätzlicher Abstand verteilt zwischen und um Rubyelemente

+
+
+
+
ruby {
+    ruby-align:space-around;
+}

+
+
Dies ergibt folgende Ausgabe:

+
+
{{EmbedLiveSample("Zusätzlicher_Abstand_verteilt_zwischen_und_um_Rubyelemente", 240, 40)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}}{{Spec2('CSS3 Ruby')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.ruby-align")}}
+
+
Siehe auch

+
+
    
+ 
  • HTML Ruby Elemente: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} und {{HTMLElement("rtc")}}.
    • 
+ 
  • CSS Ruby Eigenschaften: {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.
    • 
+

diff --git a/files/de/web/css/scroll-behavior/index.html b/files/de/web/css/scroll-behavior/index.html
new file mode 100644
index 0000000000..9505393d2a
--- /dev/null
+++ b/files/de/web/css/scroll-behavior/index.html
@@ -0,0 +1,143 @@
+---
+title: scroll-behavior
+slug: Web/CSS/scroll-behavior
+translation_of: Web/CSS/scroll-behavior
+---
+
{{ CSSRef }}

+Die scroll-behavior CSS-Eigenschaft spezifiziert das Scroll-Verhalten einer Scroll-Box, wenn ein Scroll-Event durch eine Navigation oder durch CSSOM APIs ausgelöst wird.

+
+
{{cssinfo}}

+
+

+
+

+

+
{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}

+
+
+

+

+
+
Beachte, dass andere Scroll-Verhalten, wie etwa solche durch den Nutzer ausgelöste, nicht durch diese Eigenschaft beeinflusst werden. Wenn diese Eigenschaft für das Wurzel-Element spezifiziert wird, beeinflusst es stattdessen den Viewport. Wird diese Eigenschaft für das body-Element spezifiziert, wird es nicht an den Viewport weitergegeben.

+
+

+
+
User Agents dürfen diese Eigenschaft ignorieren.

+
+

+

+
Syntax

+

+
+
/* Keyword values */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* Global values */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+

+
+
Sämltiche anderen Arten des Scrollens, beispielsweise durch den User, sind von dieser Eigenschaft nicht betroffen.

+ Wenn diese Eigenschaft auf ein Root-Element angewendet, betrifft sie stattdessen den gesamten Viewport.

+ Wird die Eigenschaft dem body zugeordnet, wrikt sie sich hingegen nicht auf den Viewport aus.

+ 

+ Ein User Agent kann diese Eigenschaft auch ignorieren.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Die Eigenschaft scroll-behavior kann dabei folgende Werte annehmen:

+
+
Werte

+
+

+ 
auto

+ 
Die scrolling Box scrollt sofort.

+ 
smooth

+ 
Die scrolling Box scrollt mit einem flüssigen/smoothen Verhalten.

+ Der User Agent definiert dabei sowohl die Geschwindigkeit als auch die dafür benötigte Dauer. Der User Agent sollte dabei nach Möglichkeit den Platform-Konventionen folgen.

+

+
+
Formelle Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
HTML

+
+
<nav>
+  <a href="#page-1">1</a>
+  <a href="#page-2">2</a>
+  <a href="#page-3">3</a>
+</nav>
+<scroll-container>
+  <scroll-page id="page-1">1</scroll-page>
+  <scroll-page id="page-2">2</scroll-page>
+  <scroll-page id="page-3">3</scroll-page>
+</scroll-container>

+
+
CSS

+
+
a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+

+
+
Ergebnis

+
+
{{ EmbedLiveSample("Example", "100%", 250) }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}{{Spec2('CSSOM View')}}Initial specification

+
+
Browser compatibility

+
+
+
+
{{Compat("css.properties.scroll-behavior")}}

diff --git a/files/de/web/css/shape/index.html b/files/de/web/css/shape/index.html
new file mode 100644
index 0000000000..b186d495aa
--- /dev/null
+++ b/files/de/web/css/shape/index.html
@@ -0,0 +1,93 @@
+---
+title: 
+slug: Web/CSS/shape
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Reference
+  - Référence(2)
+  - Web
+translation_of: Web/CSS/shape
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Der <shape> CSS Datentyp beschreibt die genaue Form eines Bereichs. Dieser Bereich wird benutzt, um zu definieren, auf welchen Teil eines Elements Eigenschaften wie {{ Cssxref("clip") }} angewendet werden.

+
+
In der aktuellen Spezifikation kann ein <shape>, obwohl er entworfen wurde, um beliebige Formen zu beschreiben, ausschließlich einen rechteckigen Bereich repräsentieren, der durch die Funktion rect() definiert wird.

+
+
Die rect() Funktion

+
+
Die rect() Funktion erstellt einen Bereich in Form eines Rechtecks.

+
+
Syntax

+
+
rect(top, right, bottom, left)
+

+
+
Werte

+
+
rect.png

+
+

+ 
top

+ 
Ist eine {{cssxref("<length>")}}, die den Versatz der Oberkante des Rechtecks relativ zur Oberkante der Element Box beschreibt.

+

+
+

+ 
right

+ 
Ist eine {{cssxref("<length>")}}, die den Versatz der rechten Kante des Rechtecks relativ zur linken Kante der Element Box beschreibt.

+

+
+

+ 
bottom

+ 
Ist eine {{cssxref("<length>")}}, die den Versatz der Unterkante des Rechtecks relativ zur Oberkante der Element Box beschreibt.

+

+
+

+ 
left

+ 
Ist eine {{cssxref("<length>")}}, die den Versatz der linken Kante des Rechtecks relativ zur linken Kante der Element Box beschreibt.

+

+
+
Interpolation

+
+
Werte des <shape> Datentyps, welche Rechtecke darstellen, können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie über ihre top, right, bottom und left Komponenten interpoliert, wovon jede als reale Fließkommazahl behandelt wird. Die Geschwindigkeit der Interpolation wird bestimmt durch die Timing Funktion associated with the animation.

+
+
Beispiel

+
+
 img.clip04 {
+   clip: rect(10px, 20px, 20px, 10px);
+ }
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS2.1', 'visufx.html#value-def-shape', '<shape>') }}{{ Spec2('CSS2.1') }}Definiert durch die {{ cssxref("clip") }} Eigenschaft

+
+
Browser Kompatibilität

+
+{{Compat("css.types.shape")}}
+
+
Siehe auch

+
+
    
+ 
  • Verwandte CSS Eigenschaften: {{ Cssxref("clip") }}
    • 
+ 
  • Die -moz-image-rect() Funktion mit ähnlichen Koordinaten wie rect().
    • 
+

diff --git "a/files/de/web/css/spezifit\303\244t/index.html" "b/files/de/web/css/spezifit\303\244t/index.html"
new file mode 100644
index 0000000000..e8a0e22302
--- /dev/null
+++ "b/files/de/web/css/spezifit\303\244t/index.html"
@@ -0,0 +1,197 @@
+---
+title: Spezifität
+slug: Web/CSS/Spezifität
+tags:
+  - Beispiel
+  - CSS
+  - Guide
+  - Web
+translation_of: Web/CSS/Specificity
+---
+
{{cssref}}

+
+
Das Konzept

+
+
Spezifität ist das Mittel, mit dem ein Browser bestimmt, welche Eigenschaftswerte die relevantesten für ein Element sind und zugewiesen werden. Spezifität basiert ausschließlich auf den Matchingregeln, welche durch die verschiedenen Selektoren gebildet werden.

+
+
Berechnung

+
+
Die Spezifität wird durch die Verkettung der Anzahl jedes Selektortyps berechnet. Sie entspricht keiner Gewichtung, die dem passenden Ausdruck zugewiesen wird.

+
+
Im Falle einer Spezifitätsgleichheit wird die letzte im CSS gefundene Deklaration auf das Element angewandt.

+
+
{{ Note("Die Nähe von Elementen in einem Dokumentenbaum zueinander hat keine Auswirkung auf die Spezifität.") }}

+
+
Reihenfolge der Spezifität

+
+
Die folgende Selektorenliste ist nach aufsteigender Spezifität sortiert:

+
+
    
+ 
  • Universelle Selektoren
    • 
+ 
  • Typselektoren
    • 
+ 
  • Klassenselektoren
    • 
+ 
  • Attributselektoren
    • 
+ 
  • Pseudoklassen
    • 
+ 
  • ID-Selektoren
    • 
+ 
  • Inlinestile
    • 
+

+
+
Die !important Ausnahme

+
+
Wenn eine !important Regel auf eine Stildeklaration angewendet wird, überschreibt diese Deklaration alle anderen Deklarationen des CSS, unabhängig davon, wo sie in der Deklarationsliste steht. Jedoch hat !important nichts mit Spezifität zu tun. Es wird davon abgeraten, !important zu verwenden, da es das Debuggen erschwert, weil die normale Kaskadierung der Stylesheets dadurch unterbrochen wird.

+
+
Einige allgemeine Regeln:

+
+
    
+ 
  • Niemals !important in CSS verwenden, das auf der gesamten Seite Verwendung findet.
    • 
+ 
  • !important nur in Seiten spezifischem CSS verwenden, das seitenweites oder fremdes CSS (wie beispielsweise von ExtJS oder YUI) überschreibt.
    • 
+ 
  • Niemals !important verwenden, wenn ein Plugin/Mashup geschrieben wird.
    • 
+ 
  • Immer nach einem Weg suchen, Spezifität zu verwenden, bevor !important in Erwägung gezogen wird.
    • 
+

+
+
Anstatt !important zu verwenden kann folgendes getan werden:

+
+
    
+ 
  1. Besseren Gebrauch der CSS Kaskadierungseigenschaften machen.
    2. 
+ 
  2. 
+  
    Spezifischere Regeln verwenden. Eines oder mehrere Elemente vor dem Element anzugeben, das selektiert werden soll, ist spezifischer und erhält eine höhere Priorität:
    
+
+  
    <div id="test">
+  <span>Text</span>
+</div>
    
+
+  
    div#test span { color: green; }
+span { color: red; }
+div span { color: blue; }
    
+ 
    3. 
+

+
+
Unabhängig von der Reihenfolge, in der der Text steht, wird der Text grün dargestellt, da die Regel spezifischer ist. (Des weiteren überschreibt die Regel für blau die Regel für rot unabhängig von deren Reihenfolge.)

+
+
!Important sollte in folgenden Fällen verwendet werden:

+
+
A) Erstes Szenario

+
+
    
+ 
  1. Eine globale CSS Datei wird verwendet, die die visuellen Aspekte der Seite global setzt.
    2. 
+ 
  2. Es werden Inline Styles in Elementen verwendet, wovon grundsätzlich abgeraten wird.
    3. 
+

+
+
In diesem Fall sollten bestimmte Stile in der globalen CSS Datei als !important deklariert werden, was Inline Styles überschreibt.

+
+
B) Weiteres Szenario

+
+
#someElement p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}

+
+
Ohne !important hat die erste Regel eine höhere Spezifität und hat damit Vorrang vor der zweiten Regel. Somit werden alle awesome Absätze blau dargestellt.

+
+
Wie !important überschrieben werden kann

+
+
Eine Eigenschaft, die mit !important gekennzeichnet ist, kann durch eine weitere !important Eigenschaft überschrieben werden. Hierbei muss jedoch die zweite Eigenschaft entweder eine höhere Spezifität besitzen (indem im Selektor ein zusätzlicher Tag, eine ID oder Klasse angegeben wird) oder eine CSS Regel mit dem gleichen Selektor muss weiter unten als die existierende platziert werden.

+
+
Einige Beispiele mit höherer Spezifität:

+
+
table td    {height: 50px !important;}
+.myTable td {height: 50px !important;}
+#myTable td {height: 50px !important;}

+
+
Beispiel für gleichen Selektor nach dem existierenden:

+
+
td {height: 50px !important;}

+
+
Die :not Ausnahme

+
+
Die Negations-Pseudoklasse :not wird nicht als Pseudoklasse in der Spezifitätsberechnung berücksichtigt. Jedoch werden Selektoren innerhalb der Negations-Pseudoklasse als normale Selektoren behandelt.

+
+

+
Beispiel CSS:

+
+
div.outer p {
+  color:orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+

+
+
Angewendet auf folgendes HTML:

+
+
<div class="outer">
+  <p>Dies ist im äußeren div.</p>
+  <div class="inner">
+    <p>Dieser Text ist innerhalb des inneren divs.</p>
+  </div>
+</div>
+

+

+
+
Ergibt:

+
+
{{ EmbedLiveSample('Beispiel_not','600','100') }}

+
+
Formbasierte Spezifität

+
+
Spezifität basiert auf der Form eines Selektors. Im folgenden Fall zählt der Selektor als ein Attribut im Algorithmus zur Bestimmung der Spezifität, obwohl er eine ID selektiert.

+
+
CSS:

+
+

+
* #foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+

+
+
Angewendet auf folgendes HTML:

+
+
<p id="foo">I am a sample text.</p>
+

+

+
+
Ergibt:

+
+
{{ EmbedLiveSample('Beispiel_formbasierte_Spezifitaet','600','100') }}

+
+
Da das gleiche Element selektiert wird, der ID-Selektor jedoch eine höhere Spezifität aufweist.

+
+
Nichtbeachtung der Position innerhalb des Baumes

+
+

+
CSS:

+
+
body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+

+
+
Angewendet auf folgendes HTML:

+
+
<html>
+  <body>
+    <h1>Here is a title!</h1>
+  </body>
+</html>
+

+

+
+
Ergibt:

+
+
{{ EmbedLiveSample('Beispiel_Nichtbeachtung_Baumposition','600','100') }}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/string/index.html b/files/de/web/css/string/index.html
new file mode 100644
index 0000000000..9918c42d77
--- /dev/null
+++ b/files/de/web/css/string/index.html
@@ -0,0 +1,70 @@
+---
+title: 
+slug: Web/CSS/string
+tags:
+  - CSS
+  - CSS Datentypen
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/string
+---
+
{{CSSRef}}

+
+
Der <string> CSS Datentyp repräsentiert eine Zeichenfolge. Er setzt sich aus Unicode Zeichen umschlossen von doppelten (") oder einfachen (') Anführungszeichen zusammen. Ein in doppelte Anführungszeichen eingeschlossener String darf keine doppelten Anführungszeichen enthalten, außer sie sind durch einen Backslash (\) escapt. Das gleiche Prinzip gilt für in einfache Anführungszeichen eingeschlossene Strings. Sie dürfen keine einfachen Anführungszeichen enthalten, außer sie sind durch einen Backslash (\) escapt. Das Backslash Zeichen muss escapt sein, um Teil des Strings zu sein.

+
+
Zeilenumbrüche werden nicht akzeptiert, sofern sie nicht durch ein Zeilenvorschubzeichen wie \A oder \00000a escapt sind. Jedoch können Strings sich über mehrere Zeilen erstrecken. In diesem Fall muss das Zeilenumbruchszeichen durch einen Backslash (\) als letztes Zeichen der Zeile escapt werden.

+
+
Zeichen können durch ihren Unicode Codepunkt in Hexadezimalschreibweise beschrieben werden, wenn sie durch einen Backslash (\) escapt werden. \27 stellt dabei das einfache Anführungszeichen (') dar.

+
+
Beispiele

+
+
/* Einfaches Escapen von Anführungszeichen */
+"String mit doppelten Anführungszeichen"
+"String mit \" escapten doppelten Anführungszeichen"
+'String mit einfachen Anführungszeichen'
+"String mit \' escapten einfachen Anführungszeichen"
+
+/* Zeilenumbruch in einem String */
+"String mit \AZeilenumbruch"
+
+/* String, der sich über zwei Zeilen erstreckt (diese zwei Strings sind exakt gleich) */
+"Ein äußerst langer \
+String"
+"Ein äußerst langer String"
+

+
+
Hinweis: Strings in doppelten Anführungszeichen können auch mit Hilfe von \22 escapt werden und Strings mit einfachen Anführungszeichen mit Hilfe von \27.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Values', '#strings', '<string>')}}{{Spec2('CSS3 Values')}}Keine signifikante Änderung in Bezug auf CSS Level 2 (Revision 1)
{{SpecName('CSS2.1', 'syndata.html#strings', '<string>')}}{{Spec2('CSS2.1')}}Explizit definiert; erlaubt 6-stellige escapte Unicodezeichen
{{SpecName('CSS1', '', '<string>')}}{{Spec2('CSS1')}}Implizit definiert; erlaubt 4-stellige escapte Unicodezeichen

+
+
Browser Kompatibilität

+
+{{Compat("css.types.string")}}
diff --git a/files/de/web/css/tab-size/index.html b/files/de/web/css/tab-size/index.html
new file mode 100644
index 0000000000..b324828746
--- /dev/null
+++ b/files/de/web/css/tab-size/index.html
@@ -0,0 +1,94 @@
+---
+title: tab-size
+slug: Web/CSS/tab-size
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Experimentell
+  - Referenz
+translation_of: Web/CSS/tab-size
+---
+
{{ CSSRef() }}

+
+
{{ SeeCompatTable() }}

+
+
Übersicht

+
+
Die tab-size CSS Eigenschaft wird verwendet, um die Breite eines Tabulatorzeichens (U+0009) anzupassen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* <integer> Werte */
+tab-size: 4;
+tab-size: 0;
+
+/* <length> Werte */
+tab-size: 10px;
+tab-size: 2em;
+
+/* Globale Werte */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+

+
+
Werte

+
+

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

+ 
Die Anzahl der Leerzeichen in einem Tabulator. Darf nicht negativ sein.

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

+ 
Die Breite eines Tabulators. Darf nicht negativ sein.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
pre {
+  tab-size: 4; /* Setzt die Tabgröße auf 4 Leerzeichen */
+}
+

+
+
pre {
+  tab-size: 0; /* Entfernt die Einrückung */
+}
+

+
+
pre {
+  tab-size: 99; /* Verwende keine Tabs! */
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Text', '#tab-size', 'tab-size')}}{{Spec2('CSS3 Text')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.tab-size")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/table-layout/index.html b/files/de/web/css/table-layout/index.html
new file mode 100644
index 0000000000..1a7136e994
--- /dev/null
+++ b/files/de/web/css/table-layout/index.html
@@ -0,0 +1,117 @@
+---
+title: table-layout
+slug: Web/CSS/table-layout
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Tabelle
+  - Referenz
+  - 'recipe:css-property'
+translation_of: Web/CSS/table-layout
+---
+
{{CSSRef}}

+
+
Die CSS Eigenschaft table-layout legt den Algorithmus fest, der für das Layout von {{htmlelement("table")}} Zellen, Zeilen und Spalten verwendet wird.

+
+
{{EmbedInteractiveExample("pages/css/table-layout.html")}}

+
+
+
+
Syntax

+
+
/* Keyword values */
+table-layout: auto;
+table-layout: fixed;
+
+/* Global values */
+table-layout: inherit;
+table-layout: initial;
+table-layout: unset;
+

+
+
Werte

+
+

+ 
{{Cssxref("auto")}}

+ 
Standardwert. Die meisten Browser haben einen automatischen Tabellenlayout-Algorithmus. Die Breiten der Tabelle und ihrer Zellen werden an den Inhalt angepasst.

+ 
fixed

+ 
Die Tabellen- und Spaltenbreiten werden durch die Breiten der Tabellen- und Spaltenelemente oder durch die Breite der ersten Zellenzeile festgelegt. Zellen in nachfolgenden Zeilen haben keinen Einfluss auf die Spaltenbreiten.

+ 
Bei der "festen" oder "fixierten" fixed Layoutmethode kann die gesamte Tabelle gerendert werden, sobald die erste Tabellenzeile heruntergeladen und analysiert wurde. Dies kann die Renderingzeit bei der "automatischen" auto Layoutmethode beschleunigen, aber der Inhalt nachfolgender Zellen passt möglicherweise nicht in die bereitgestellten Spaltenbreiten. Zellen verwenden die Eigenschaft {{Cssxref("overflow")}}, um zu bestimmen, ob überlaufende Inhalte abgeschnitten werden sollen. Dies erfolgt aber nur, wenn die Breite der Tabelle bekannt ist; andernfalls werden die Zellen nicht überlaufen.

+

+
+
Formale Definition

+
+
{{CSSInfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Tabellen fester Breite mit Text-Überlauf

+
+
In diesem Beispiel wird ein festes fixed Tabellenlayout in Kombination mit der Eigenschaft {{cssxref("width")}} verwendet, um die Breite der Tabelle einzuschränken. Die Eigenschaft {{cssxref("text-overflow")}} wird verwendet, um eine Ellipse auf Wörter anzuwenden, die zu lang sind, um in die Tabelle zu passen.

+ Wenn das Tabellenlayout automatisch auto wäre, würde die Tabelle trotz der angegebenen Breite wachsen, um ihren Inhalt aufzunehmen.

+
+
HTML

+
+

+
<table>
+  <tr><td>Ed</td><td>Wood</td></tr>
+  <tr><td>Albert</td><td>Schweitzer</td></tr>
+  <tr><td>Jane</td><td>Fonda</td></tr>
+  <tr><td>William</td><td>Shakespeare</td></tr>
+</table>

+
+
CSS

+
+
table {
+  table-layout: fixed;
+  width: 120px;
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid blue;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

+
+

+
+
Ergebnis

+
+
{{EmbedLiveSample('Fixed-width_tables_with_text-overflow')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS2.1', 'tables.html#width-layout', 'table-layout')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition.

+
+
Browser Kompatibilität

+
+
+
+
{{Compat("css.properties.table-layout")}}

+
+
Siehe auch

+
+
diff --git "a/files/de/web/css/tats\303\244chlicher_wert/index.html" "b/files/de/web/css/tats\303\244chlicher_wert/index.html"
new file mode 100644
index 0000000000..5e77670cac
--- /dev/null
+++ "b/files/de/web/css/tats\303\244chlicher_wert/index.html"
@@ -0,0 +1,36 @@
+---
+title: tatsächlicher Wert
+slug: Web/CSS/tatsächlicher_Wert
+translation_of: Web/CSS/actual_value
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Der tatsächliche Wert einer CSS Eigenschaft ist der verwendete Wert nachdem alle Annäherungen angewendet wurden. Zum Beispiel kann ein User Agent nur in der Lage sein, Ränder mit einem ganzzahligen Pixelwert darzustellen und daher gezwungen sein, die berechnete Breite des Randes anzunähern.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/text-align-last/index.html b/files/de/web/css/text-align-last/index.html
new file mode 100644
index 0000000000..41b0607160
--- /dev/null
+++ b/files/de/web/css/text-align-last/index.html
@@ -0,0 +1,106 @@
+---
+title: text-align-last
+slug: Web/CSS/text-align-last
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - Experimentell
+  - Referenz
+translation_of: Web/CSS/text-align-last
+---
+
{{CSSRef}}

+
+
Die CSS Eigenschaft text-align-last  beschreibt, wie die letzte Zeile eines Blocks, oder die letzte Zeile unmittelbar vor einem erzwungenem Umbruch, ausgerichtet ist

+
+
{{EmbedInteractiveExample("pages/css/text-align-last.html")}}

+
+
+
+
Syntax

+
+
/* Keyword values */
+text-align-last: auto;
+text-align-last: start;
+text-align-last: end;
+text-align-last: left;
+text-align-last: right;
+text-align-last: center;
+text-align-last: justify;
+
+/* Global values */
+text-align-last: inherit;
+text-align-last: initial;
+text-align-last: unset;
+

+
+
Values

+
+

+ 
auto

+ 
Die Ausrichtung der Zeile ist gleich dem Wert von {{cssxref("text-align")}}, außer wenn {{cssxref("text-align")}} den Wert justify hat; in diesem Fall entspricht der Wert von text-align-last der Einstellung start.

+ 
start

+ 
Das Gleiche wie left, wenn die Leserichtung links-nach-rechts ist, und right, wenn die Leserichtung rechts-nach-links ist.

+ 
end

+ 
Das Gleiche wie right, wenn die Leserichtung links-nach-rechts ist, und left, wenn die Leserichtung rechts-nach-links ist.

+ 
left

+ 
Die Inhalte werden an der linken Kante des inline-Elements ausgerichtet.

+ 
right

+ 
Die Inhalte werden an der rechten Kante des inline-Elements ausgerichtet.

+ 
center

+ 
Die Inhalte werden innerhalb des inline-Elements zentriert.

+ 
justify

+ 
Der Text wird im Blocksatz angezeigt, d.h. der Text schließt sowohl links als auch rechts mit der Kante des inline-Elements ab.

+

+
+
Formal syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
+
+
p {
+  font-size: 1.4em;
+  text-align: justify;
+  text-align-last: center;
+}

+
+
{{EmbedLiveSample('Example','560')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS3 Text', '#text-align-last-property', 'text-align-last')}}{{Spec2('CSS3 Text')}}Initial definition

+
+
{{cssinfo}}

+
+
Browserkompatibilität

+
+
+
+
{{Compat("css.properties.text-align-last")}}

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("text-align")}}
    • 
+

diff --git a/files/de/web/css/text-align/index.html b/files/de/web/css/text-align/index.html
new file mode 100644
index 0000000000..5af079ca81
--- /dev/null
+++ b/files/de/web/css/text-align/index.html
@@ -0,0 +1,238 @@
+---
+title: text-align
+slug: Web/CSS/text-align
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - Referenz
+translation_of: Web/CSS/text-align
+---
+
{{CSSRef}}

+
+

+
Die CSS Eigenschaft text-align egt die horizontale Ausrichtung eines Blockelements oder eines Tabellenzellenrahmens fest. Dies bedeutet, dass sie wie {{cssxref("vertical-align")}} funktioniert, jedoch in horizontaler Richtung.

+
+
{{EmbedInteractiveExample("pages/css/text-align.html")}}

+
+
+

+
+
Syntax

+
+
/* Keyword values */
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+text-align: start;
+text-align: end;
+text-align: match-parent;
+
+/* Character-based alignment in a table column */
+text-align: ".";
+text-align: "." center;
+
+/* Block alignment values (Non-standard syntax) */
+text-align: -moz-center;
+text-align: -webkit-center;
+
+/* Global values */
+text-align: inherit;
+text-align: initial;
+text-align: unset;

+
+
Die Eigenschaft text-align wird auf eine der folgenden Arten angegeben:

+
+
+
+
Werte

+
+

+ 
start {{experimental_inline}}

+ 
Dasselbe wie left, falls {{cssxref("direction")}} ltr ist und right, falls direction rtl ist.

+ 
end {{experimental_inline}}

+ 
Dasselbe wie right, falls {{cssxref("direction")}} ltr ist und left, falls direction rtl ist.

+ 
left

+ 
Die Inlineinhalte werden am linken Rand (linksbündig) der Zeilenbox ausgerichtet.

+ 
right

+ 
Die Inlineinhalte werden am rechten Rand (rechtsbündig) der Zeilenbox ausgerichtet.

+ 
center

+ 
Die Inlineinhalte werden innerhalb der Zeilenbox zentriert.

+ 
justify

+ 
Der Text wird im Blocksatz angeordnet. Text sollte seinen linken und rechten Rand bündig am linken und rechten Rand des Absatzinhalts ausrichten.

+ 
justify-all {{experimental_inline}}

+ 
Dasselbe wie justify, erzwingt jedoch, dass die letzte Zeile ebenfalls im Blocksatz angeordnet wird.

+ 
match-parent {{experimental_inline}}

+ 
Ähnlich zu inherit mit dem Unterschied, dass die Werte start und end in Bezug auf die {{cssxref("direction")}} des Elternelements berechnet werden und durch den passenden left oder right Wert ersetzt werden.

+ 
{{cssxref("<string>")}} {{experimental_inline}}

+ 
Gibt bei Anwendung auf eine Tabellenzelle das Zeichen an, um das der Inhalt der Zelle ausgerichtet wird.

+

+
+
Bedenken zur Zugänglichkeit

+
+
Der inkonsistente Abstand zwischen den Wörtern, der durch einen gerechtfertigten Text entsteht, kann für Menschen mit kognitiven Problemen wie Legasthenie problematisch sein.

+
+
+
+
Formale Definition

+
+
{{CSSInfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Linksbündig

+
+
HTML

+
+

+
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>

+
+
CSS

+
+
.example {
+  text-align: left;
+  border: solid;
+}

+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Left_alignment","100%","100%")}}

+
+
Zentriert

+
+
HTML

+
+

+
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>

+
+
CSS

+
+
.example {
+  text-align: center;
+  border: solid;
+}

+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Centered_text","100%","100%")}}

+
+
Blocksatz

+
+
HTML

+
+

+
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>

+
+
CSS

+
+
.example {
+  text-align: justify;
+  border: solid;
+}

+
+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Justify","100%","100%")}}

+
+
Hinweis

+
+
Der Standard-kompatible Weg, einen Block selbst zu zentrieren, ohne seinen Inline-Inhalt zu zentrieren, ist z.B. das Setzen der linken und rechten {{cssxref("margin")}} auf auto, z.B..:

+
+
.something {
+  margin: auto;
+}
+

+
+
.something {
+  margin: 0 auto;
+}
+

+
+
.something {
+  margin-left: auto;
+  margin-right: auto;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}{{Spec2('CSS Logical Properties')}}Keine Änderungen
{{SpecName('CSS4 Text', '#alignment', 'text-align')}}{{Spec2('CSS4 Text')}}Fügt den Wert <string> hinzu.
{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}{{Spec2('CSS3 Text')}}Fügt die start, end und match-parent Werte hinzu. Ändert den unbenannten Initialwert zu start (der er war).
{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}{{Spec2('CSS2.1')}}Keine Änderungen
{{SpecName('CSS1', '#text-align', 'text-align')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
+
+
{{Compat("css.properties.text-align")}}

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("margin", "margin:auto")}}, {{cssxref("margin-left", "margin-left:auto")}}, {{cssxref("vertical-align")}}
    • 
+

diff --git a/files/de/web/css/text-decoration-color/index.html b/files/de/web/css/text-decoration-color/index.html
new file mode 100644
index 0000000000..32f9355d51
--- /dev/null
+++ b/files/de/web/css/text-decoration-color/index.html
@@ -0,0 +1,135 @@
+---
+title: text-decoration-color
+slug: Web/CSS/text-decoration-color
+translation_of: Web/CSS/text-decoration-color
+---
+
{{ CSSRef }}

+
+
Zusammenfassung

+
+
Mit der CSS-Eigenschaft text-decoration-color kann die Farbe für Unterstreichungen, Überstreichungen oder Durchstreichungen gesetzt werden, spezifiziert durch {{cssxref("text-decoration-line")}}. Das ist die bevorzugte Art und Weise, Textdekorationen eine Farbe zuzuweisen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("text-decoration-color")}}
+

+
+
text-decoration-color: currentColor
+text-decoration-color: red
+text-decoration-color: #00ff00
+text-decoration-color: rgba(255, 128, 128, 0.5)
+text-decoration-color: transparent
+
+text-decoration-color: inherit
+

+
+
Werte

+
+

+ 
<color>

+ 
Die Eigenschaft color akzeptiert verschiedene Schlüsselwörter und numerische Daten. Siehe {{cssxref("<color>")}}-Werte für genauere Details.

+

+
+
Beispiel

+
+
.beispiel {
+    text-decoration: underline;
+    text-decoration-color: red;
+}
+

+
+
Das obige Beispiel hat denselben Effekt wie der folgende Code, der auch noch einen Hover-Style hinzufügt.

+
+
<!DOCTYPE html>
+<html>
+<head>
+<style>
+.beispiel {
+  font-size: 24px;
+  text-decoration: underline;
+  color: red;
+}
+.beispiel:hover {
+  color: blue;
+  text-decoration: line-through;
+}
+</style>
+</head>
+<body>
+<span class="beispiel">
+  <span style="color:black">schwarzer Text mit roter Linie und blauem Hovereffekt</span>
+</span>
+</body>
+</html>
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Text-decoration', '#text-decoration-color', 'text-decoration-color') }}{{ Spec2('CSS3 Text-decoration') }} 

+
+
Browserkompabilität

+
+
{{ CompatibilityTable }}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FunktionChromeFirefox (Gecko)Internet ExplorerOperaSafari
Elementare Unterstützung{{ CompatUnknown }}{{ CompatGeckoDesktop("6.0") }}{{ property_prefix("-moz") }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FunktionAndroidFirefox mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Elementare Unterstützung{{ CompatUnknown }}{{ CompatGeckoMobile("6.0") }}{{ property_prefix("-moz") }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}

+

diff --git a/files/de/web/css/text-decoration-line/index.html b/files/de/web/css/text-decoration-line/index.html
new file mode 100644
index 0000000000..ac3ab5bfb1
--- /dev/null
+++ b/files/de/web/css/text-decoration-line/index.html
@@ -0,0 +1,94 @@
+---
+title: text-decoration-line
+slug: Web/CSS/text-decoration-line
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/text-decoration-line
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die text-decoration-line CSS Eigenschaft repräsentiert die Art der Liniendekoration eines Elements.

+
+
Unter- und Überstreichungsdekorationen werden hinter dem Text dargestellt, während Durchstreichungen über dem Text dargestellt werden.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("text-decoration-line")}}
+

+
+
text-decoration-line: none /* This is the only keyword that cannot be mixed with other */
+
+text-decoration-line: underline
+text-decoration-line: overline
+text-decoration-line: line-through
+text-decoration-line: underline overline
+text-decoration-line: overline underline line-through
+
+text-decoration-line: inherit
+

+
+
Werte

+
+
Akzeptiert entweder none als Wert oder einen oder mehrere durch Leerzeichen getrennte Werte:

+
+

+ 
none

+ 
Erzeugt keine Textdekoration.

+ 
underline

+ 
Jede Zeile des Texts wird unterstrichen.

+ 
overline

+ 
Über jeder Zeile des Texts wird eine Linie dargestellt.

+ 
line-through

+ 
Jede Zeile des Texts wird durchgestrichen.

+ 
blink {{deprecated_inline}}

+ 
Der Text blinkt (wechselt zwischen sichtbar und unsichtbar). Dem Standard folgende User Agents können das Blinken ignorieren. Dieser Wert ist  missbilligt und es sollten stattdessen Animationen verwendet werden.

+ 
-moz-anchor-decoration

+ 
Mozilla CSS Erweiterung, nicht geeignet für Webinhalte.

+

+
+
Beispiel

+
+
HTML

+
+
<p>Hier steht Text mit einer roten Unterkringelung!</p>

+
+
CSS

+
+
p {
+  -moz-text-decoration-line: underline;
+  -moz-text-decoration-style: wavy;
+  -moz-text-decoration-color: red;
+}

+
+
{{ EmbedLiveSample('Beispiel') }}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusComment
{{ SpecName('CSS3 Text-decoration', '#text-decoration-line', 'text-decoration-line') }}{{ Spec2('CSS3 Text-decoration') }} 

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.text-decoration-line")}}
diff --git a/files/de/web/css/text-decoration/index.html b/files/de/web/css/text-decoration/index.html
new file mode 100644
index 0000000000..af1de281c1
--- /dev/null
+++ b/files/de/web/css/text-decoration/index.html
@@ -0,0 +1,116 @@
+---
+title: text-decoration
+slug: Web/CSS/text-decoration
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/text-decoration
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die text-decoration CSS Eigenschaft wird dazu verwendet, die Textformatierung auf underline, overline, line-through oder blink zu setzen. Unter- und Überstrichdekorationen werden unterhalb des Texts positioniert, Durchstreichungen über dem Text.

+
+
Textdekorationen werden auf Unterelemente gezeichnet. Das bedeutet, dass es nicht möglich ist, die Textdekoration, die für ein übergeordnetes Element angegeben wurde, für ein Unterelement zu deaktivieren. Zum Beispiel würde in folgendem Markup <p>Dieser Text hat <em>ein paar hervorgehobene Wörter</em>.</p> die Stilregel p { text-decoration: underline; } den gesamten Absatz unterstreichen. Die Stilregel em { text-decoration: none; } würde nichts ändern; der gesamte Absatz wäre immer noch unterstrichen. Jedoch würde die Regel em { text-decoration: overline; } eine zweite Dekoration für "ein paar hervorgehobene Wörter" erscheinen lassen.

+
+

+
Hinweis: CSS Text Decoration Level 3 hat diese Eigenschaft zu einer Kurzschreibweise für die drei neuen CSS Eigenschaften {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} und {{cssxref("text-decoration-style")}} gemacht. Wie für andere Kurzschreibweiseeigenschaften bedeutet dies, dass sie deren Werte auf deren Standardwerte zurücksetzt, falls diese nicht explizit in der Kurzschreibweiseeigenschaft angegeben sind.

+

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+text-decoration: none;                 /* Keine Textdekoration */
+text-decoration: underline red;        /* Rote Unterstreichung */
+text-decoration: underline wavy red;   /* Rote gewellte Unterstreichung */
+
+/* Globale Werte */
+text-decoration: inherit;
+text-decoration: initial;
+text-decoration: unset;
+

+
+
Werte

+
+
Die text-decoration Eigenschaft ist eine Kurzschreibweise und kann die Werte jeder der drei Langschreibweiseeigenschaften annehmen: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} und {{cssxref("text-decoration-style")}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
h1.under {
+    text-decoration: underline;
+}
+h1.over {
+    text-decoration: overline;
+}
+p.line {
+    text-decoration: line-through;
+}
+p.blink {
+    text-decoration: blink;
+}
+a.none {
+    text-decoration: none;
+}
+p.underover {
+    text-decoration: underline overline;
+}
+

+
+
+
+
{{EmbedLiveSample('Beispiele','100%','310')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}{{Spec2('CSS3 Text Decoration')}}Hat die Eigenschaft in eine Kurzschreibweiseeigenschaft ungewandelt. Unterstützung für den Wert von {{cssxref('text-decoration-style')}} wurde hinzugefügt.
{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}{{Spec2('CSS2.1')}}Keine wesentlichen Änderungen
{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.text-decoration")}}

+
+
Siehe auch

+
+
    
+ 
  • Das {{cssxref("list-style")}} Attribut steuert die Darstellung von Einträgen in HTML {{HTMLElement("ol")}} und {{HTMLElement("ul")}} Listen.
    • 
+

diff --git a/files/de/web/css/text-indent/index.html b/files/de/web/css/text-indent/index.html
new file mode 100644
index 0000000000..7c5c74219c
--- /dev/null
+++ b/files/de/web/css/text-indent/index.html
@@ -0,0 +1,119 @@
+---
+title: text-indent
+slug: Web/CSS/text-indent
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - Layout
+  - Referenz
+translation_of: Web/CSS/text-indent
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS Eigenschaft text-indent legt den Einzug vor der ersten Zeile eines Textes fest. Dabei wird der Abstand zur linken Seite des enthaltenden Elements angegeben.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formal syntax: {{csssyntax("text-indent")}}

+
+
text-indent: 3mm       /* Beispielwerte */
+text-indent: 40px
+text-indent: 15%       /* Prozentuale Angaben sind relativ zur Breite des Blockelements */
+text-indent: each-line /* Festgelegte Werte */
+text-indent: hanging
+
+text-indent: inherit
+

+
+
Werte

+
+

+ 
<length>

+ 
Der Einzug wird absolut angegeben. Negative Angaben sind erlaubt. Für mögliche Einheiten, siehe {{cssxref("<length>")}} .

+ 
<percentage>

+ 
Abstand wird prozentual {{cssxref("<percentage>")}} zur Breite des enthaltenden Blockelements angegeben.

+ 
each-line {{experimental_inline}}

+ 
Der Einzug beeinflusst die erste Zeile des Blockelements sowie jede Zeile nach einem erzwungenem Zeilenumbruch (forced line break ), lässt Zeilen nach einem soft wrap break allerdings unberührt.

+ 
hanging {{experimental_inline}}

+ 
Kehrt den Texteinzug um. Jede Zeile, außer der ersten, wird eingerückt.

+

+
+
Beispiel mit absoluter Angabe

+
+
HTML

+
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+

+
+
CSS

+
+
p {
+  text-indent: 5em;
+  background: powderblue;
+}

+
+
{{ EmbedLiveSample('Simple_indent','100%','100%') }}

+
+
Beispiel mit prozentualer Angabe

+
+
HTML Content

+
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 

+
+
CSS Content

+
+
p {
+  text-indent: 30%;
+  background: plum;
+}

+
+
{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}

+
+
Details

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusKommentar
{{SpecName('CSS3 Text', '#text-indent', 'text-indent')}}{{Spec2('CSS3 Text')}}Schlüsselwerte hanging und each-line hinzugefügt
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}{{Spec2('CSS3 Transitions')}}text-indent als Eigenschaft, die animiert werden kann
{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}{{Spec2('CSS2.1')}}Verhalten von display: inline-block und anderen block Containern explizit definiert
{{SpecName('CSS1', '#text-indent', 'text-indent')}}{{Spec2('CSS1')}} 

+
+
Browserkompatibilität

+
+
{{Compat("css.properties.text-indent")}}

diff --git a/files/de/web/css/text-justify/index.html b/files/de/web/css/text-justify/index.html
new file mode 100644
index 0000000000..441321a862
--- /dev/null
+++ b/files/de/web/css/text-justify/index.html
@@ -0,0 +1,117 @@
+---
+title: text-justify
+slug: Web/CSS/text-justify
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - Referenz
+translation_of: Web/CSS/text-justify
+---
+
{{CSSRef}}

+
+
Die CSS Eigenschaft text-justify legt fest, wie der Blocksatz ausgeführt werden soll, wenn ein Element auf {{cssxref("text-align")}}: justify; gesetzt ist.

+
+
text-justify: none;
+text-justify: auto;
+text-justify: inter-word;
+text-justify: inter-character;
+text-justify: distribute; /* Deprecated value */
+

+
+
{{cssinfo}}

+
+
Syntax

+
+
Die Eigenschaft text-justify  wird mit einem der Schlüsselwörter aus der folgenden Liste definiert.

+
+
Values

+
+

+ 
none

+ 
Der Blocksatz ist abgeschaltet. Dies hat den gleichen Effekt wie wenn {{cssxref("text-align")}} überhaupt nicht definiert ist. Diese Einstellung is nützlich, wenn man den Blocksatz dynamisch ein- und ausschalten möchte.

+ 
auto

+ 
Der Browser entscheidet, wie der Blocksatz ausgeführt wird, abhängig von Performance und Qualität, aber auch, was angemessen ist für die Sprache des Textes (z.B. Deutsch, asiatische Sprachen). Dies ist die Standardeinstellung, wenn  text-justify nicht definiert ist.

+ 
inter-word

+ 
Um den Blocksatz zu erreichen, wird Weißraum zwischen den Wörtern eingefügt (also eine Variante zu {{cssxref("word-spacing")}}). Diese Form ist gebräuchlich für Sprachen, die Wörter mit Leerzeichen trennen, wie Deutsch oder Koreanisch.

+ 
inter-character

+ 
Um den Blocksatz zu erreichen, wird Weißraum zwischen den Zeichen eingefügt (also eine Variante zu {{cssxref("letter-spacing")}}). Diese Form ist gebräuchlich für Sprachen wie Japanisch.

+ 
distribute {{deprecated_inline}}

+ 
Zeigt das gleiche Verhalten wie inter-character; dieser Wert wird beibehalten, um Abwärtskompatibilität zu gewährleisten.

+

+
+
Formal syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
+
+
p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  width: 95%;
+  margin: 10px auto;
+  text-align: justify;
+}
+
+.none {
+  text-justify: none;
+}
+
+.auto {
+  text-justify: auto;
+}
+
+.dist {
+  text-justify: distribute;
+}
+
+.word {
+  text-justify: inter-word;
+}
+
+.char {
+  text-justify: inter-character;
+}

+
+
{{EmbedLiveSample("Examples","100%",400)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}{{Spec2('CSS3 Text')}}

+
+
Browserkompatibilität

+
+
+
+
{{Compat("css.properties.text-justify")}}

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("text-align")}}
    • 
+

diff --git a/files/de/web/css/text-overflow/index.html b/files/de/web/css/text-overflow/index.html
new file mode 100644
index 0000000000..c513eca823
--- /dev/null
+++ b/files/de/web/css/text-overflow/index.html
@@ -0,0 +1,274 @@
+---
+title: text-overflow
+slug: Web/CSS/text-overflow
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/text-overflow
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die text-overflow CSS Eigenschaft bestimmt, wie überlaufende Inhalte die nicht angezeigt werden (Siehe {{cssxref("overflow")}}) dem Nutzer signalisiert werden. Sie können abgeschnitten (clipped) oder durch ein Auslassungszeichen ('…', U+2026 Horizontal Ellipsis) beziehungsweise eine vom Webautor definierte Zeichenfolge markiert sein.

+
+
text-overflow.png

+
+
Das Abschneiden des überlaufenden Textes findet exakt am Rand des Inhaltselements statt. Um erst nach einem vollen Zeichen abzuschneiden, kann eine leere benutzerdefinierte Zeichenfolge angegeben werden (' ').

+
+
Diese Eigenschaft beeinflusst nur Inhalte, welche aus einem Blockelement in dessen inline-Richtung überlaufen (beispielsweise wird Text der am unteren Ende eines Kastens überläuft nicht beeinflusst). Ein Textüberlauf kann auftreten, wenn ein Text-wrapping verhindert wird (z.B., durch ‘white-space:nowrap’) oder wenn ein einzelnes Wort zu lang ist.

+
+
Diese CSS Eigenschaft erzwingt keinen Textüberlauf; um dies zu erreichen und somit die text-overflow-Eigenschaft anzuwenden, muss der Autor dem Element weitere Eigenschaften zuweisen, u. a. den {{cssxref("overflow")}} auf hidden setzen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Überlaufverhalten am Zeilenende
+   Rechtes Ende, falls links nach rechts, linkes Ende, falls rechts nach links */
+text-overflow: clip;
+text-overflow: ellipsis;
+text-overflow: "…";
+
+/* Überlaufverhalten am linken/rechten Ende
+   Richtung hat keinen Einfluss */
+text-overflow: clip ellipsis;
+text-overflow: "…" "…";
+
+/* Globale Werte */
+text-overflow: inherit;
+text-overflow: initial;
+text-overflow: unset;
+

+
+
Werte

+
+

+ 
clip

+ 
Dieses Schlüsselwort führt dazu, dass Text genau am Ende des Inhaltsbereichs abgeschnitten wird. Daher kann der Schnitt auch innerhalb eines Zeichens geschehen. Um am Übergang zwischen zwei Zeichen abzuschneiden, muss eine leere Zeichenfolge ('') verwendet werden. Der Wert clip ist der Standardwert für diese Eigenschaft.

+ 
ellipsis

+ 
Dieses Schlüsselwort führt dazu, dass ein Auslassungszeichen ('…', U+2026 Horizontal Ellipsis) an der Schnittstelle angezeigt wird, um abgeschnittenen Text zu repräsentieren. Das Auslassungszeichen wird innerhalb des Inhaltsbereichs angezeigt, wodurch die Menge des angezeigten Texts verringert wird. Wenn nicht genug Platz für das Auslassungszeichen selbst zur Verfügung steht, wird es abgeschnitten.

+ 
<string> {{experimental_inline}}

+ 
Der {{cssxref("<string>")}}, welcher zur Anzeige des abgeschnittenen Texts genutzt werden soll. Diese Zeichenfolge wird innerhalb des Inhaltsbereichs angezeigt und führt dazu, dass die Menge des angezeigten Texts verringert wird. Wenn nicht genug Platz für die Zeichenfolge selbst zur Verfügung steht, wird sie abgeschnitten.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
p {
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;              /* "overflow"-Wert darf nicht "visible" sein */
+
+  text-overflow: ellipsis;
+}
+

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+ 
+
CSS Wertdirection: ltrdirection: rtl
Erwartetes ErgebnisLive-ErgebnisErwartetes ErgebnisLive-Ergebnis
visible overflow1234567890
+    
1234567890

+   		0987654321
+    
1234567890

+   
text-overflow: clipt-o_clip.png
+    
123456

+   		t-o_clip_rtl.png
+    
1234567890

+   
text-overflow: ''12345
+    
123456

+   		54321
+    
1234567890

+   
text-overflow: ellipsis1234…
+    
1234567890

+   		…4321
+    
1234567890

+   
text-overflow: '.'1234.
+    
1234567890

+   		.4321
+    
1234567890

+   
text-overflow: clip clip123456
+    
1234567890

+   		654321
+    
1234567890

+   
text-overflow: clip ellipsis1234…
+    
1234567890

+   		6543…
+    
1234567890

+   
text-overflow: clip '.'1234.
+    
1234567890

+   		6543.
+    
1234567890

+   
text-overflow: ellipsis clip…3456
+    
1234567890

+   		…4321
+    
1234567890

+   
text-overflow: ellipsis ellipsis…34…
+    
1234567890

+   		…43…
+    
1234567890

+   
text-overflow: ellipsis '.'…34.
+    
1234567890

+   		…43.
+    
1234567890

+   
text-overflow: ',' clip,3456
+    
1234567890

+   		,4321
+    
1234567890

+   
text-overflow: ',' ellipsis,34…
+    
1234567890

+   		,43…
+    
1234567890

+   
text-overflow: ',' '.',34.
+    
1234567890

+   		,53.
+    
1234567890

+   

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 UI', '#text-overflow', 'text-overflow')}}{{Spec2('CSS3 UI')}}Ursprüngliche Definition

+
+
Eine vorherige Version dieser Schnittstelle erreichte den Candidate Recommendation-Status (CR). Da einige der nicht aufgeführten gefährdeten Eigenschaften entfernt werden mussten, wurde die Spezifikation auf Working Draft-Niveau herabgesetzt. Das erklärt, weshalb Browser diese Eigenschaft ohne Präfix, jedoch nicht im CR-Zustand, umgesetzt haben. Momentan hat die Spezifikation das Editor's Draft-Niveau erreicht.

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.text-overflow")}}
+
+
Siehe auch

+
+
    
+ 
  • Verwandte CSS Eigenschaften: {{cssxref("overflow")}}, {{cssxref("white-space")}}
    • 
+

diff --git a/files/de/web/css/text-rendering/index.html b/files/de/web/css/text-rendering/index.html
new file mode 100644
index 0000000000..57d8ffb78d
--- /dev/null
+++ b/files/de/web/css/text-rendering/index.html
@@ -0,0 +1,133 @@
+---
+title: text-rendering
+slug: Web/CSS/text-rendering
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - SVG
+translation_of: Web/CSS/text-rendering
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die text-rendering CSS Eigenschaft liefert der Renderingengine Informationen darüber, wie die Darstellung von Text optimiert werden soll.

+
+
Der Browser macht Abstriche bezüglich Geschwindigkeit, Lesbarkeit und geometrischer Präzision. Die text-rendering Eigenschaft ist eine SVG Eigenschaft, die in keinem CSS Standard definiert ist. Jedoch erlauben Gecko und WebKit Browser es unter Windows, Mac OS X und Linux, diese Eigenschaft auf HTML und XML Inhalte anzuwenden.

+
+
Ein offensichtlicher Effekt ist optimizeLegibility, welches Ligaturen (ff, fi, fl etc.) in Text kleiner als 20px für einige Schriftarten aktiviert (zum Beispiel Microsofts Calibri, Candara, Constantia und Corbel oder die DejaVu Schriftfamilie).

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+text-rendering: auto;
+text-rendering: optimizeSpeed;
+text-rendering: optimizeLegibility;
+text-rendering: geometricPrecision;
+
+/* Globale Werte */
+text-rendering: inherit;
+text-rendering: initial;
+text-rendering: unset;
+

+
+
Werte

+
+

+ 
auto

+ 
Der Browser bestimmt, wann auf Geschwindigkeit, Lesbarkeit oder geometrische Präzision optimiert werden soll, wenn Text gezeichnet wird. Für Unterschiede, wie dieser Wert von den Browser interpretiert wird, siehe die Kompatibilitätstabelle.

+ 
optimizeSpeed

+ 
Der Browser betont Geschwindigkeit gegenüber Lesbarkeit und geometrischer Präzision, wenn Text gezeichnet wird. Dies deaktiviert Unterschneidung und Ligaturen.

+ 
optimizeLegibility

+ 
Der Browser betont Lesbarkeit gegenüber Geschwindigkeit und geometrischer Präzision, wenn Text gezeichnet wird. Dies aktiviert Unterschneidung und optionale Ligaturen.

+ 
geometricPrecision

+ 

+ 
Der Browser betont geometrischer Präzision gegenüber Geschwindigkeit und Lesbarkeit. Bestimmte Aspekte von Schriften — wie Unterschneidung — skalieren nicht linear. Daher erlaubt es dieser Wert, Text in diesen Schriften gut aussehen zu lassen.

+
+ 
Wenn Text in SVG hoch- oder runterskaliert wird, berechnen Browser die finale Größe des Texts (welche durch die angegebene Schriftgröße und die Skalierung bestimmt wird) und fordern eine Schriftart dieser berechneten Größe vom Schriftsystem der Plattform an. Aber falls eine Schriftgröße von beispielsweise 9 mit einer Skalierung von 140% angefordert wird, existiert die sich ergebende Schriftgröße von 12.6 nicht explizit im Schriftsystem, sodass der Browser stattdessen die Schriftgröße auf 12 abrundet. Dies resultiert in einer schrittweisen Skalierung von Text.

+
+ 
Der geometricPrecision Wert — falls von der Renderingengine vollständig unterstützt — erlaubt es, Text übergangslos zu skalieren. Große Skalierungsfaktoren können eine weniger schöne Textdarstellung zur Folge haben, aber die Größe ist, was erwartet wird — weder auf- noch abgerundet auf die nächstmögliche Schriftgröße, die von Windows oder Linux unterstützt wird.

+
+ 
Hinweis: WebKit wendet exakt den angegebenen Wert an, aber Gecko behandelt den Wert genauso wie optimizeLegibility.

+ 

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
/* stellt sicher, dass alle Schriften innerhalb des HTML Dokuments in all ihrer Pracht dargestellt werden,
+   aber verhindert unangemessene Ligaturen in Elementen mit der Klasse 'foo' */
+
+body {
+  text-rendering: optimizeLegibility;
+}
+
+.foo {
+  text-rendering: optimizeSpeed;
+}

+
+
Livebeispiele

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
CSS CodeUnterschneidungLigaturen
font: 19.9px 'DejaVu Serif', Constantia;LYoWATff fi fl ffl
font: 20px 'DejaVu Serif', Constantia;LYoWATff fi fl ffl
font: 3em 'DejaVu Serif', Constantia;

+    text-rendering: optimizeSpeed;		LYoWATff fi fl ffl
font: 3em 'Dejavu Serif', Constantia;

+    text-rendering: optimizeLegibility;		LYoWATff fi fl ffl

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering')}}{{Spec2('SVG1.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.text-rendering")}}
diff --git a/files/de/web/css/text-shadow/index.html b/files/de/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..89b3f6907e
--- /dev/null
+++ b/files/de/web/css/text-shadow/index.html
@@ -0,0 +1,145 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+tags:
+  - CSS
+  - CSS Text
+  - Eigenschaft
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/text-shadow
+---
+
{{Cssref}}

+
+
Übersicht

+
+
Die text-shadow CSS Eigenschaft fügt Text Schatten hinzu. Sie akzeptiert eine kommaseparierte Liste von Schatten, die auf den Text und {{cssxref("text-decoration","Textdekorationen")}} des Elements angewendet werden sollen.

+
+
Jeder Schatten wird mit einem Versatz vom Text angegeben, zusammen mit optionalen Farb- und Unschärferadiuswerten.

+
+
Mehrere Schatten werden von vorne nach hinten angewendet, wobei der zuerst angewendete Schatten oben ist.

+
+
Diese Eigenschaft gilt sowohl für {{cssxref("::first-line")}} als auch {{cssxref("::first-letter")}} Pseudoelemente.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #CCC 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558ABB;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y */
+/* Für color und blur-radius werden Standardwerte verwendet */
+text-shadow: 5px 10px;
+
+/* Globale Werte */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+

+
+
Werte

+
+

+ 
<color>

+ 
Optional. Kann entweder vor oder nach dem Versatzwert angegeben werden. Falls die Farbe nicht angegeben wurde, wird eine vom User Agent bestimmte Farbe verwendet. {{note("Falls Konsistenz zwischen den Browsern gewünscht ist, sollte eine Farbe explizit gewählt werden.")}}

+ 
<offset-x> <offset-y>

+ 
Benötigt. Diese <length> Werte bestimmen den Versatz des Schattens vom Text. <offset-x> bestimmt die horizontale Distanz; ein negativer Wert platziert den Schatten links vom Text. <offset-y> bestimmt die vertikale Distanz; ein negativer Wert platziert den Schatten oberhalb des Texts. Falls beide Werte 0 sind, wird der Schatten hinter dem Text platziert (und kann einen Unschärfeeffekt erzeugen, falls <blur-radius> gesetzt ist).

+ Siehe {{cssxref("<length>")}} für mögliche Einheiten.

+ 
<blur-radius>

+ 
Optional. Dies ist ein {{cssxref("<length>")}} Wert. Falls nicht angegeben, ist der Standardwert 0. Je größer dieser Wert ist, desto größer ist die Unschärfe; der Schatten wird ausgedehnter und geringer.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+

+
.red-text-shadow {
+   text-shadow: red 0 -2px;
+}

+
+
<p class="red-text-shadow">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
+   inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>

+

+
+
{{EmbedLiveSample('Beispiel1', '689px', '90px')}}

+
+

+
.white-with-blue-shadow {
+   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+   color: white;
+   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
+}

+
+
<p class="white-with-blue-shadow">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>

+

+
+
{{EmbedLiveSample('Beispiel2', '689px', '180px')}}

+
+

+
.gold-on-gold {
+   text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
+   rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
+   rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px;
+   color: gold;
+   background: gold;
+}

+
+
<p class="gold-on-gold">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>

+

+
+
{{EmbedLiveSample('Beispiel3', '689px', '90px')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}{{Spec2('CSS3 Transitions')}}Definiert text-shadow als animierbar.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}Die CSS Eigenschaft text-shadow wurde in CSS2 inkorrekt definiert und in CSS2 (Level 1) verworfen. Die CSS Text Module Level 3 Spezifikation hat die Syntax verbessert und präzisiert. Später wurde sie in den neuen Arbeitsentwurf CSS Text Decoration Module Level 3 verschoben.

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.text-shadow")}}

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("box-shadow")}}
    • 
+

diff --git a/files/de/web/css/text-transform/index.html b/files/de/web/css/text-transform/index.html
new file mode 100644
index 0000000000..5461a868a2
--- /dev/null
+++ b/files/de/web/css/text-transform/index.html
@@ -0,0 +1,504 @@
+---
+title: text-transform
+slug: Web/CSS/text-transform
+translation_of: Web/CSS/text-transform
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Das text-transform CSS Attribut legt die Groß- und Kleinschreibung eines Elementes fest. Es kann verwendet werden, um den Text eines Elementes komplett klein oder klein zu schreiben oder den ersten Buchstaben jedes Wortes groß zu schreiben.

+
+

+
Das text-transform Attribut berücksichtigt sprachspezifische Regeln:

+
+
    
+ 
  • in Turksprachen, wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), und Baschkirisch (ba), gibt es zwei Arten von i, mit und ohne Punkt, und jeweils die Groß- bzw. Kleinschreibung: i/İ and ı/I.
    • 
+ 
  • auf Deutsch (de) wird das ß in der Großschreibung zu SS.
    • 
+ 
  • auf Niederländisch (nl) wird der Digraph ij auch bei text-transform: capitalize zu IJ.
    • 
+ 
  • auf Griechisch (el) verlieren Vokale ihren Akzent wenn wenn ganze Worte is in Großschreibung geschrieben werden (ά/Α), außer beim Eta (ή/Ή). Doppelvokale mit einem Akzent auf dem ersten Vokal verlieren den Akzent und bekommen einen Trema auf dem zweiten Vokal (άι/ΑΪ).
    • 
+ 
  • auf Griechisch (el) hat das kleine Sigma zwei Formen: σ and ς. ς wird nur dann genutzt, wenn Sigma ein Wort beendet. Wird text-transform: lowercase auf ein großes Sigma (Σ) angewandt, so muss der Browser aus dem Kontext heraus entscheiden, welches verwendet wird.
    • 
+

+
+
Die Sprache wird durch das lang HTML Attribut oder das xml:lang XML Attribut festgelegt..

+
+
Die Unterstützung dieser spezifischen Fälle unterscheidet sich von Browser zu Browser, also prüfen Sie dies anhand der Kompatibilitätstabelle.

+

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formal syntax: {{csssyntax("text-transform")}}
+

+
+
text-transform: capitalize
+text-transform: uppercase
+text-transform: lowercase
+text-transform: none
+text-transform: full-width
+
+text-transform: inherit
+

+
+
Werte

+
+

+ 
capitalize

+ 
Ein Schlüsselwort, dass die Großschreibung des Anfachsbuchstaben jedes Wortes erzwingt. Geändert werden alle Unicode-basierten Zeichen außer Symbole. Dabei bleiben alle anderen Zeichen unverändert.

+ 

+ 
Bei der automatischen Großschreibung sollte je nach Sprache die Kompatibilität beachtet und überprüft werden. 

+ 

+ 
uppercase

+ 
Wendet die Großschreibung auf alle Zeichen an.

+ 
lowercase

+ 
Erzwingt die Kleinschreibung aller Zeichen.

+ 
none

+ 
Verhindert Änderungen; alle Buchstaben bleiben unverändert.

+ 
full-width {{experimental_inline}}

+ 
Erzwingt das Rendern der Buchstaben als rechteckige Form, was z.B. die Interaktion mit ostasiatischen Sprachen (z.B. Chinesisch oder Japanisch) erlaubt.

+

+
+
Beispiele

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
p { text-transform: none; }
ZeichenketteLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
EchtzeitbeispielLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
ReferenzwertLorem ipsum dolor sit amet, consectetur adipisicing elit, ...

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
p { text-transform: capitalize; }
ZeichenketteLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
EchtzeitbeispielLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
ReferenzwertLorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, ...

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+

+    
p { text-transform: capitalize; }

+
+    
Die Großschreibung beginnt bei Zeichen, die nach Unicode der Buchstabenkategorie angehören.

+   
Zeichenkette(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!
Echtzeitbeispiel(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!
Referenzwert(This) “Is” [A] –Short– -Test- «For» *The* _Css_ ¿Capitalize? ?¡Transform!

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+

+    
p { text-transform: capitalize; }

+
+    
Symbole werden ignoriert. Auch hier wird erst der erste gefundene Buchstabe in einer Zeichenkette großgeschrieben.

+   
Zeichenketteⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl
Echtzeitbeispielⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl
Referenzwertⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙKl

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
p { text-transform: capitalize; }

+    Das dänische Digraph ij muss wie ein einzelnes Zeichen behandelt werden.
ZeichenketteThe Dutch word: "ijsland" starts with a digraph.
EchtzeitbeispielThe Dutch word: "ijsland" starts with a digraph.
ReferenzwertThe Dutch Word: "IJsland" Starts With A Digraph.

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
p { text-transform: uppercase; }
ZeichenketteLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
EchtzeitbeispielLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
ReferenzwertLOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT, ...

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+

+    
p { text-transform: uppercase; }

+
+    
Bei Griechischen Vokalen sollte, außer bei einem trennenden eta, auf Akzente verzichtet werden. Bei der Großschreibung eines ersten Vokals mit Akzent kommt es bei zwei direkt aufeinander folgenden Vokalen zu einer Diaräse.

+   
ZeichenketteΘα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα";
EchtzeitbeispielΘα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα";
ReferenzwertΘΑ ΠΑΜΕ ΣΤΟ "ΘΕΪΚΟ ΦΑΪ" Ή ΣΤΗ "ΝΕΡΑΪΔΑ";

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
p { text-transform: lowercase; }
ZeichenketteLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
EchtzeitbeispielLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
Referenzwertlorem ipsum dolor sit amet, consectetur adipisicing elit, ...

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+

+    
p { text-transform: lowercase; }

+
+    
Der griechische Buchstabe Sigma (Σ) wird je nach Kontext in ein kleingeschriebenes Sigma (σ) oder die entsprechene Wortvariante (ς) umgewandelt.

+   
ZeichenketteΣ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.
EchtzeitbeispielΣ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.
Referenzwertσ is a greek letter that appears several times in ΟΔΥΣΣΕΥς.

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
p { text-transform: full-width; }

+    Some characters exists in two formats, normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.
Zeichenkette0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~
Echtzeitbeispiel0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~
Referenzwert０１２３４５６７８９ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ！＂＃＄％＆（）＊＋，－．／：；＜＝＞？＠｛｜｝～

+
+
Details

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentrar
{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS4 Text')}}Aus{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}} :Fügt das Schlüsselwort full-size-kana hinzu und erlaubt die Kombination von Schlüsselwörtern mit full-width
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS3 Text')}}
+    
Aus {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} : Mehr Zahlen und Buchstaben können verwendet werden. Das Schlüsselwort capitalize aktiviert die Großschreibung nur beim ersten unterstützten Zeichen eines Wortes; andere Zeichen werden ignoriert. Erhöhung der Kompatibilität des Schlüsselwortes full-width.

+   
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}{{Spec2('CSS2.1')}}Aus {{SpecName('CSS1', '#text-transform', 'text-transform')}} : Ergänzung des Umfangs an unterstützten Zeichen um einige nicht-lateinische Buchstaben
{{SpecName('CSS1', '#text-transform', 'text-transform')}}{{Spec2('CSS1')}}

+
+
Browserkompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundfunktionalität1.0{{CompatGeckoDesktop("1")}}4.07.01.0
capitalize (CSS3 version)siehe Bemerkung{{CompatGeckoDesktop("14")}} (siehe Bemerkung)siehe Bemerkung{{CompatUnknown}}siehe Bemerkung
full-size-kana{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
full-width{{CompatNo}}{{CompatGeckoDesktop("19")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ß → SS{{CompatUnknown}}{{CompatGeckoDesktop("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
i → İ and ı → I{{CompatNo}}{{CompatGeckoDesktop("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
Dänisches IJ Digraph{{CompatNo}}{{CompatGeckoDesktop("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Griech. Zeichen mit Akzent{{CompatNo}}{{CompatGeckoDesktop("15")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Σ → σ bzw. ς30{{CompatGeckoDesktop("14")}}{{CompatNo}}{{CompatNo}}6.0

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundfunktionalität1.0{{CompatGeckoMobile("1")}}6.06.01.0
capitalize (CSS3 version)siehe Bemerkung{{CompatGeckoMobile("14")}} siehe Bemerkungsiehe Bemerkung{{CompatUnknown}}siehe Bemerkung
full-size-kana{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
full-width{{CompatNo}}{{CompatGeckoMobile("19")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ß → SS{{CompatUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
i → İ and ı → I{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
Dänisches IJ Digraph{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Griech. Zeichen mit Akzent{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Σ → σ bzw. ς{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

+
+
Browserinformationen

+
+
Das capitalize Schlüsselwort wurde in CSS1 bzw. CSS 2.1 nicht eindeutig spezifiziert. Dadurch wurde der erste großzuschreibende Buchstabe unterschiedlich ermittelt. Sowohl Webkit-basierte Browser als auch die Gecko Engine identifizierte Symbole fälschlicherwiese als Buchstaben. Beispielsweise galten bei Firefox - respektive _ als Buchstaben. Internet Explorer 9 hielt sich den Spezifikationen insgesamt am nächsten. Mit CSS3 wurde das Verhalten vereinheitlicht. Der Kompatibilitätstabelle können die Browserversionen entnommen werden, mit denen der Standard erstmals exakt umgesetzt wurde.

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("font-variant")}}
    • 
+

diff --git a/files/de/web/css/text-underline-position/index.html b/files/de/web/css/text-underline-position/index.html
new file mode 100644
index 0000000000..90fd9ddafd
--- /dev/null
+++ b/files/de/web/css/text-underline-position/index.html
@@ -0,0 +1,92 @@
+---
+title: text-underline-position
+slug: Web/CSS/text-underline-position
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/text-underline-position
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die text-underline-position CSS Eigenschaft legt die Position der Linie einer Unterstreichung, die über die {{cssxref("text-decoration")}}-Eigenschaft mit dem Wert underline gesetzt wurde, fest.

+
+
Diese Eigenschaft wird vererbt und nicht von {{cssxref("text-decoration")}} zurückgesetzt, wodurch sie auch für das gesamte Dokument festgelegt werden kann:

+
+
:root { /* nützlich für Dokumente mit vielen chemischen Formeln */
+  text-underline-position: under;
+}

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+text-underline-position: auto;
+text-underline-position: under;
+text-underline-position: left;
+text-underline-position: right;
+text-underline-position: under left;
+text-underline-position: right under;
+
+/* Globale Werte */
+text-underline-position: inherit;
+text-underline-position: initial;
+text-underline-position: unset;
+

+
+
Werte

+
+

+ 
auto

+ 
Der Browser verwendet einen Algorithmus, um zwischen under und der Grundlinie zu unterscheiden.

+ 
under

+ 
Die Linie wird unterhalb der Grundlinie, wo keine Unterlängen berührt werden, gesetzt. Dies ist nützlich, um zu verhindern, dass chemische oder mathematische Formeln, die oft Tiefstellungen enthalten, schwer lesbar werden.

+ 
left

+ 
In vertikalen Schreibrichtungen wird die Linie auf der linken Seite der Zeichen platziert. In horizontalen Schreibrichtungen ist dies ein Synonym für under.

+ 
right

+ 
In vertikalen Schreibrichtungen wird die Linie auf der rechten Seite der Zeichen platziert. In horizontalen Schreibrichtungen ist dies ein Synonym für under.

+ 
auto-pos{{non-standard_inline}}

+ 
Dies ist ein Synonym für auto und sollte nicht verwendet werden.

+ 
above{{non-standard_inline}}

+ 
Die Linie wird über dem Text gesetzt. In ostasiatischem Text führt der Wert auto zum gleichen Ergebnis.

+ 
below{{non-standard_inline}}

+ 
Die Linie wird unter dem Text gesetzt. In aus Buchstaben bestehendem Text führt der Wert auto zum gleichen Ergebnis.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Text-decoration', '#text-underline-position', 'text-underline-position')}}{{Spec2('CSS3 Text-decoration')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.text-underline-position")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/time/index.html b/files/de/web/css/time/index.html
new file mode 100644
index 0000000000..e8e0f07a88
--- /dev/null
+++ b/files/de/web/css/time/index.html
@@ -0,0 +1,75 @@
+---
+title: